@syncfusion/ej2-maps 25.2.4 → 25.2.5

package/dist/es6/ej2-maps.es2015.js

@@ -17,7 +17,7 @@ class Size {
     }
 }
 /**
- * To find number from string
+ * To find number from string.
  *
  * @param {string} value Specifies the value
  * @param {number} containerSize Specifies the container size
@@ -31,7 +31,7 @@ function stringToNumber(value, containerSize) {
     return null;
 }
 /**
- * Method to calculate the width and height of the maps
+ * Method to calculate the width and height of the maps.
  *
  * @param {Maps} maps Specifies the maps instance
  * @returns {void}
@@ -76,7 +76,7 @@ function createSvg(maps) {
     }
 }
 /**
- * Method to get the mouse position
+ * Method to get the mouse position.
  *
  * @param {number} pageX - Specifies the pageX.
  * @param {number} pageY - Specifies the pageY.
@@ -95,7 +95,7 @@ function getMousePosition(pageX, pageY, element) {
     return new MapLocation((pageX - positionX), (pageY - positionY));
 }
 /**
- * Method to convert degrees to radians
+ * Method to convert degrees to radians.
  *
  * @param {number} deg Specifies the degree value
  * @returns {number} Returns the number
@@ -105,7 +105,7 @@ function degreesToRadians(deg) {
     return deg * (Math.PI / 180);
 }
 /**
- * Convert radians to degrees method
+ * Convert radians to degrees method.
  *
  * @param {number} radian Specifies the radian value
  * @returns {number} Returns the number
@@ -115,7 +115,7 @@ function radiansToDegrees(radian) {
     return radian * (180 / Math.PI);
 }
 /**
- * Method for converting from latitude and longitude values to points
+ * Method for converting from latitude and longitude values to points.
  *
  * @param {number} latitude - Specifies the latitude.
  * @param {number} longitude - Specifies the longitude.
@@ -224,7 +224,7 @@ function calculatePolygonPath(maps, factor, currentLayer, markerData) {
     return path;
 }
 /**
- * Converting tile latitude and longitude to point
+ * Converting tile latitude and longitude to point.
  *
  * @param {MapLocation} center Specifies the map center location
  * @param {number} zoomLevel Specifies the zoom level
@@ -247,7 +247,7 @@ function convertTileLatLongToPoint(center, zoomLevel, tileTranslatePoint, isMapC
     return { x: pixelX, y: pixelY };
 }
 /**
- * Method for calculate x point
+ * Method for calculate x point.
  *
  * @param {Maps} mapObject - Specifies the maps.
  * @param {number} val - Specifies the value.
@@ -261,7 +261,7 @@ function xToCoordinate(mapObject, val) {
     return Math.round(totalSize * (val - longitudeMinMax.min) / (longitudeMinMax.max - longitudeMinMax.min) * 100) / 100;
 }
 /**
- * Method for calculate y point
+ * Method for calculate y point.
  *
  * @param {Maps} mapObject - Specifies the maps.
  * @param {number} val - Specifies the value.
@@ -273,7 +273,7 @@ function yToCoordinate(mapObject, val) {
     return Math.round(mapObject.mapAreaRect.height * (val - latitudeMinMax.min) / (latitudeMinMax.max - latitudeMinMax.min) * 100) / 100;
 }
 /**
- * Method for calculate aitoff projection
+ * Method for calculate aitoff projection.
  *
  * @param {number} x - Specifies the x value.
  * @param {number} y - Specifies the y value.
@@ -286,7 +286,7 @@ function aitoff(x, y) {
     return new Point(2 * cosy * Math.sin(x) * sincia, Math.sin(y) * sincia);
 }
 /**
- * Method to round the number
+ * Method to round the number.
  *
  * @param {number} a - Specifies the a value
  * @param {number} b - Specifies the b value
@@ -316,7 +316,7 @@ function acos(a) {
     return Math.acos(a);
 }
 /**
- * Method to calculate bound
+ * Method to calculate bound.
  *
  * @param {number} value Specifies the value
  * @param {number} min Specifies the minimum value
@@ -334,7 +334,7 @@ function calculateBound(value, min, max) {
     return value;
 }
 /**
- * To trigger the download element
+ * To trigger the download element.
  *
  * @param {string} fileName Specifies the file name
  * @param {ExportType} type Specifies the type
@@ -417,7 +417,8 @@ function measureText(text, font) {
  * @param {string} text - Specifies the text.
  * @param {FontModel} font - Specifies the font.
  * @returns {Size} - Returns the size of text.
- * @private */
+ * @private
+ */
 function measureTextElement(text, font) {
     const canvas = document.createElement('canvas');
     // eslint-disable-next-line @typescript-eslint/tslint/config
@@ -429,7 +430,7 @@ function measureTextElement(text, font) {
     return new Size(width, height);
 }
 /**
- * Internal use of text options
+ * Internal use of text options.
  *
  * @private
  */
@@ -447,7 +448,7 @@ class TextOption {
     }
 }
 /**
- * Internal use of path options
+ * Internal use of path options.
  *
  * @private
  */
@@ -472,7 +473,7 @@ class ColorValue {
     }
 }
 /**
- * Internal use of rectangle options
+ * Internal use of rectangle options.
  *
  * @private
  */
@@ -492,7 +493,7 @@ class RectOption extends PathOption {
     }
 }
 /**
- * Internal use of circle options
+ * Internal use of circle options.
  *
  * @private
  */
@@ -508,7 +509,7 @@ class CircleOption extends PathOption {
     }
 }
 /**
- * Internal use of polygon options
+ * Internal use of polygon options.
  *
  * @private
  */
@@ -519,7 +520,7 @@ class PolygonOption extends PathOption {
     }
 }
 /**
- * Internal use of polyline options
+ * Internal use of polyline options.
  *
  * @private
  */
@@ -529,7 +530,7 @@ class PolylineOption extends PolygonOption {
     }
 }
 /**
- * Internal use of line options
+ * Internal use of line options.
  *
  * @private
  */
@@ -543,7 +544,7 @@ class LineOption extends PathOption {
     }
 }
 /**
- * Internal use of line
+ * Internal use of line.
  *
  * @property {number} Line - Specifies the line class
  * @private
@@ -557,7 +558,7 @@ class Line {
     }
 }
 /**
- * Internal use of map location type
+ * Internal use of map location type.
  *
  * @private
  */
@@ -568,7 +569,7 @@ class MapLocation {
     }
 }
 /**
- * Internal use of type rect
+ * Internal use of type rect.
  *
  * @private
  */
@@ -600,7 +601,7 @@ class PatternOptions {
     }
 }
 /**
- * Internal rendering of text
+ * Internal rendering of text.
  *
  * @param {TextOption} option Specifies the text option
  * @param {FontModel} style Specifies the style
@@ -779,7 +780,7 @@ function convertElementFromLabel(element, labelId, data) {
  * @returns {Element} - Returns the element
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCollection, maps) {
     let markerEle;
     let x;
@@ -1137,7 +1138,8 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
  * @param {number} index - Specifies the index.
  * @param {number} indexCollection - Specifies the index Collection.
  * @returns {void}
- * @private */
+ * @private
+ */
 function markerClusterListHandler(maps, currentZoomFactor, layerIndex, index, indexCollection) {
     if (currentZoomFactor === 1) {
         const initialMarkerClusterList = isNullOrUndefined(maps.markerModule.initialMarkerCluster[layerIndex][index]) ? [] : indexCollection.length > 1 ? indexCollection : [];
@@ -1156,7 +1158,8 @@ function markerClusterListHandler(maps, currentZoomFactor, layerIndex, index, in
  * @param {number[]} indexCollection - Specifies the index collection.
  * @param {number} p - Specifies the p.
  * @returns {void}
- * @private */
+ * @private
+ */
 function markerBoundsComparer(tempElement, markerBounds, colloideBounds, indexCollection, p) {
     // eslint-disable-next-line @typescript-eslint/tslint/config
     const currentMarkerBound = tempElement.getBoundingClientRect();
@@ -1316,6 +1319,11 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
     const y = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y;
     ele.setAttribute('transform', 'translate( ' + x + ' ' + y + ' )');
     maintainSelection(maps.selectedMarkerElementId, maps.markerSelectionClass, ele, 'MarkerselectionMapStyle');
+    if (maps.legendSettings.toggleLegendSettings.enable && maps.legendSettings.type === 'Markers') {
+        const layerIndex = parseInt(ele.id.split('_LayerIndex_')[1], 10);
+        maintainToggleSelection(maps.toggledElementId, ele.tagName === 'g' ? ele.children[0] : ele, maps.legendSettings.toggleLegendSettings.applyShapeSettings ?
+            maps.layers[layerIndex].shapeSettings : maps.legendSettings.toggleLegendSettings);
+    }
     markerCollection.appendChild(ele);
     const element = (markerData.length - 1) === dataIndex ? 'marker' : null;
     const markerPoint = new Point(x, y);
@@ -1340,7 +1348,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
  * @returns {HTMLElement} - Returns the html element
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplate, location, transPoint, scale, offset, maps) {
     templateFn = getTemplateFunction(eventArgs.template, maps);
     if (templateFn && (templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false).length)) {
@@ -1365,7 +1373,7 @@ function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, mark
     return markerTemplate;
 }
 /**
- * To maintain selection during page resize
+ * To maintain selection during page resize.
  *
  * @param {string[]} elementId - Specifies the element id
  * @param {Element} elementClass - Specifies the element class
@@ -1392,7 +1400,30 @@ function maintainSelection(elementId, elementClass, element, className) {
     }
 }
 /**
- * To maintain selection style class
+ * To maintain toggle state during page resize.
+ *
+ * @param {string[]} toggledElements - Specifies the list of toggled elements
+ * @param {Element} element - Specifies the element id
+ * @param {any} styleProperty - Specifies the style properties
+ * @returns {void}
+ * @private
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function maintainToggleSelection(toggledElements, element, styleProperty) {
+    if (!isNullOrUndefined(toggledElements) && toggledElements.length > 0) {
+        for (let j = 0; j < toggledElements.length; j++) {
+            if (toggledElements[j] === element.id) {
+                element.setAttribute('fill', styleProperty.fill);
+                element.setAttribute('stroke', styleProperty.border.color);
+                element.setAttribute('fill-opacity', (styleProperty.opacity).toString());
+                element.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
+                element.setAttribute('stroke-width', (isNullOrUndefined(styleProperty.border.width) ? 0 : styleProperty.border.width).toString());
+            }
+        }
+    }
+}
+/**
+ * To maintain selection style class.
  *
  * @param {string} id - Specifies the id
  * @param {string} idClass - Specifies the class id
@@ -1418,7 +1449,7 @@ function maintainStyleClass(id, idClass, fill, opacity, borderColor, borderWidth
     }
 }
 /**
- * Internal use of append shape element
+ * Internal use of append shape element.
  *
  * @param {Element} shape - Specifies the shape
  * @param {Element} element - Specifies the element
@@ -1432,7 +1463,7 @@ function appendShape(shape, element) {
     return shape;
 }
 /**
- * Internal rendering of Circle
+ * Internal rendering of Circle.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {CircleOption} options - Specifies the circle options
@@ -1444,7 +1475,7 @@ function drawCircle(maps, options, element) {
     return appendShape(maps.renderer.drawCircle(options), element);
 }
 /**
- * Internal rendering of Rectangle
+ * Internal rendering of Rectangle.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {RectOption} options - Specifies the rect options
@@ -1456,7 +1487,7 @@ function drawRectangle(maps, options, element) {
     return appendShape(maps.renderer.drawRectangle(options), element);
 }
 /**
- * Internal rendering of Path
+ * Internal rendering of Path.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PathOption} options - Specifies the polygon options
@@ -1468,7 +1499,7 @@ function drawPath(maps, options, element) {
     return appendShape(maps.renderer.drawPath(options), element);
 }
 /**
- * Internal rendering of Polygon
+ * Internal rendering of Polygon.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PolygonOption} options - Specifies the polygon options
@@ -1480,7 +1511,7 @@ function drawPolygon(maps, options, element) {
     return appendShape(maps.renderer.drawPolygon(options), element);
 }
 /**
- * Internal rendering of Polyline
+ * Internal rendering of Polyline.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PolylineOption} options - Specifies the poly line options
@@ -1492,7 +1523,7 @@ function drawPolyline(maps, options, element) {
     return appendShape(maps.renderer.drawPolyline(options), element);
 }
 /**
- * Internal rendering of Line
+ * Internal rendering of Line.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {LineOption} options - Specifies the line options
@@ -1504,7 +1535,7 @@ function drawLine(maps, options, element) {
     return appendShape(maps.renderer.drawLine(options), element);
 }
 /**
- * Calculate marker shapes
+ * Calculate marker shapes.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {MarkerType} shape - Specifies the marker type
@@ -1571,7 +1602,7 @@ function calculateShapes(maps, shape, options, size, location, markerEle) {
     return shape === 'Balloon' ? tempGroup : maps.renderer.drawPath(options);
 }
 /**
- * Internal rendering of Diamond
+ * Internal rendering of Diamond.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PathOption} options - Specifies the path options
@@ -1587,7 +1618,7 @@ function drawDiamond(maps, options, size, location, element) {
     return appendShape(maps.renderer.drawPath(options), element);
 }
 /**
- * Internal rendering of Triangle
+ * Internal rendering of Triangle.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PathOption} options - Specifies the path options
@@ -1603,7 +1634,7 @@ function drawTriangle(maps, options, size, location, element) {
     return appendShape(maps.renderer.drawPath(options), element);
 }
 /**
- * Internal rendering of Cross
+ * Internal rendering of Cross.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PathOption} options - Specifies the path options
@@ -1619,7 +1650,7 @@ function drawCross(maps, options, size, location, element) {
     return appendShape(maps.renderer.drawPath(options), element);
 }
 /**
- * Internal rendering of HorizontalLine
+ * Internal rendering of HorizontalLine.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PathOption} options - Specifies the path options
@@ -1634,7 +1665,7 @@ function drawHorizontalLine(maps, options, size, location, element) {
     return appendShape(maps.renderer.drawPath(options), element);
 }
 /**
- * Internal rendering of VerticalLine
+ * Internal rendering of VerticalLine.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PathOption} options - Specifies the path options
@@ -1649,7 +1680,7 @@ function drawVerticalLine(maps, options, size, location, element) {
     return appendShape(maps.renderer.drawPath(options), element);
 }
 /**
- * Internal rendering of Star
+ * Internal rendering of Star.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PathOption} options - Specifies the path options
@@ -1667,7 +1698,7 @@ function drawStar(maps, options, size, location, element) {
     return appendShape(maps.renderer.drawPath(options), element);
 }
 /**
- * Internal rendering of Balloon
+ * Internal rendering of Balloon.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PathOption} options - Specifies the path options
@@ -1701,7 +1732,7 @@ function drawBalloon(maps, options, size, location, type, element) {
     return pathElement;
 }
 /**
- * Internal rendering of Pattern
+ * Internal rendering of Pattern.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {PatternOptions} options - Specifies the pattern options
@@ -1745,7 +1776,7 @@ function getFieldData(dataSource, fields) {
     return newData;
 }
 /**
- * To find the index of dataSource from shape properties
+ * To find the index of dataSource from shape properties.
  *
  * @param {any[]} dataSource - Specifies the data source
  * @param {any} properties - Specifies the properties
@@ -1755,7 +1786,7 @@ function getFieldData(dataSource, fields) {
  * @returns {number} - Returns the number
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function checkShapeDataFields(dataSource, properties, dataPath, propertyPath, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 layer) {
@@ -1838,7 +1869,7 @@ function getRatioOfBubble(min, max, value, minValue, maxValue) {
     return bubbleRadius;
 }
 /**
- * To find the midpoint of the polygon from points
+ * To find the midpoint of the polygon from points.
  *
  * @param {MapLocation[]} points - Specifies the points
  * @param {string} type - Specifies the type
@@ -1934,7 +1965,7 @@ function findMidPointOfPolygon(points, type, geometryType) {
     };
 }
 /**
- * Check custom path
+ * Check custom path.
  *
  * @param {any[]} layerData - Specifies the layer data
  * @returns {boolean} - Returns the boolean vlue
@@ -1953,7 +1984,7 @@ function isCustomPath(layerData) {
     return customPath;
 }
 /**
- * Trim the title text
+ * Trim the title text.
  *
  * @param {number} maxWidth - Specifies the maximum width
  * @param {string} text - Specifies the text
@@ -2001,7 +2032,7 @@ function textTrim(maxWidth, text, font, width, isCanvasMeasure, widthList) {
     return label;
 }
 /**
- * Method to calculate x position of title
+ * Method to calculate x position of title.
  *
  * @param {Rect} location - Specifies the location
  * @param {Alignment} alignment - Specifies the alignment
@@ -2029,7 +2060,7 @@ function findPosition(location, alignment, textSize, type) {
     return new Point(x, y);
 }
 /**
- * To remove element by id
+ * To remove element by id.
  *
  * @param {string} id - Specifies the id
  * @returns {void}
@@ -2040,7 +2071,7 @@ function removeElement(id) {
     return element ? remove(element) : null;
 }
 /**
- * To calculate map center position from pixel values
+ * To calculate map center position from pixel values.
  *
  * @param {Maps} mapObject - Specifies the map object
  * @param {LayerSettings} layer - Specifies the layer settings
@@ -2375,7 +2406,7 @@ function getZoomTranslate(mapObject, layer, animate) {
     return { scale: animate ? 1 : scaleFactor, location: new Point(x, y) };
 }
 /**
- * To get the html element by specified id
+ * To get the html element by specified id.
  *
  * @param {Maps} map - Specifies the instance of the maps
  * @returns {void}
@@ -2392,7 +2423,7 @@ function fixInitialScaleForTile(map) {
     map.previousTileHeight = map.availableSize.height;
 }
 /**
- * To get the html element by specified id
+ * To get the html element by specified id.
  *
  * @param {string} id - Specifies the id
  * @returns {Element} - Returns the element
@@ -2418,7 +2449,7 @@ function getClientElement(id) {
     }
 }
 /**
- * To apply internalization
+ * To apply internalization.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {number} value - Specifies the value
@@ -2470,7 +2501,7 @@ function getElement(id) {
     return document.getElementById(id);
 }
 /**
- * Function to get shape data using target id
+ * Function to get shape data using target id.
  *
  * @param {string} targetId - Specifies the target id
  * @param {Maps} map - Specifies the instance of the maps
@@ -2493,7 +2524,7 @@ function getShapeData(targetId, map) {
     return { shapeData: shapeData, data: data };
 }
 /**
- * Function to trigger shapeSelected event
+ * Function to trigger shapeSelected event.
  *
  * @param {string} targetId - Specifies the target id
  * @param {SelectionSettingsModel} selection - Specifies the selection
@@ -2537,7 +2568,7 @@ function triggerShapeEvent(targetId, selection, maps, eventName) {
     return eventArgs;
 }
 /**
- * Function to get elements using class name
+ * Function to get elements using class name.
  *
  * @param {string} className - Specifies the class name
  * @returns {HTMLCollectionOf<Element>} - Returns the collection
@@ -2553,7 +2584,7 @@ function getElementsByClassName(className) {
 //     return element.querySelectorAll('.' + args);
 // }
 /**
- * Function to get elements using querySelector
+ * Function to get elements using querySelector.
  *
  * @param {string} args - Specifies the args
  * @param {string} elementSelector - Specifies the element selector
@@ -2568,7 +2599,7 @@ function querySelector(args, elementSelector) {
     return targetEle;
 }
 /**
- * Function to get the element for selection and highlight using public method
+ * Function to get the element for selection and highlight using public method.
  *
  * @param {number} layerIndex - Specifies the layer index
  * @param {string} name - Specifies the layer name
@@ -2591,7 +2622,7 @@ function getTargetElement(layerIndex, name, enable, map) {
     return targetEle;
 }
 /**
- * Function to create style element for highlight and selection
+ * Function to create style element for highlight and selection.
  *
  * @param {string} id - Specifies the id
  * @param {string} className - Specifies the class name
@@ -2612,7 +2643,7 @@ function createStyle(id, className, eventArgs) {
     return styleEle;
 }
 /**
- * Function to customize the style for highlight and selection
+ * Function to customize the style for highlight and selection.
  *
  * @param {string} id - Specifies the id
  * @param {string} className - Specifies the class name
@@ -2632,7 +2663,7 @@ function customizeStyle(id, className, eventArgs) {
     }
 }
 /**
- * Function to trigger itemSelection event for legend selection and public method
+ * Function to trigger itemSelection event for legend selection and public method.
  *
  * @param {SelectionSettingsModel} selectionSettings - Specifies the selection settings
  * @param {Maps} map - Specifies the instance of the maps
@@ -2673,7 +2704,7 @@ function triggerItemSelectionEvent(selectionSettings, map, targetElement, shapeD
     });
 }
 /**
- * Function to remove class from element
+ * Function to remove class from element.
  *
  * @param {Element} element - Specifies the element
  * @returns {void}
@@ -2704,7 +2735,7 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius = 0)
         duration: (duration === 0 && animationMode === 'Enable') ? 1000 : duration,
         delay: delay,
         progress: (args) => {
-            if (args.timeStamp > args.delay) {
+            if ((args.timeStamp > args.delay) && !maps.zoomModule.isPanningInProgress) {
                 if (maps.isTileMap && height === 0) {
                     const layerGroupElement = document.querySelector('.GroupElement');
                     if (!isNullOrUndefined(layerGroupElement)) {
@@ -2718,7 +2749,10 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius = 0)
         },
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         end: (model) => {
-            element.setAttribute('transform', transform);
+            if (!maps.zoomModule.isPanningInProgress) {
+                element.setAttribute('transform', transform);
+            }
+            maps.zoomModule.isPanningInProgress = false;
             if (!ele) {
                 return;
             }
@@ -3150,7 +3184,8 @@ function changeNavaigationLineWidth(element, index, scale, maps) {
 /**
  * @param {PointerEvent | TouchEvent} event - Specifies the pointer or touch event
  * @returns {ITouches[]} - Returns the target
- * @private */
+ * @private
+ */
 function targetTouches(event) {
     const targetTouches = [];
     const touches = event.touches;
@@ -3174,7 +3209,8 @@ function calculateScale(startTouches, endTouches) {
  * @param {ITouches} a - Specifies the a value
  * @param {ITouches} b - Specifies the b value
  * @returns {number} - Returns the number
- * @private */
+ * @private
+ */
 function getDistance(a, b) {
     const x = a.pageX - b.pageX;
     const y = a.pageY - b.pageY;
@@ -3222,7 +3258,7 @@ function sum(a, b) {
     return a + b;
 }
 /**
- * Animation Effect Calculation End
+ * Animation Effect Calculation End.
  *
  * @param {Element} element - Specifies the element.
  * @param {number} delay - Specifies the delay.
@@ -3288,7 +3324,7 @@ function zoomAnimate(element, delay, duration, point, scale, size, maps) {
     });
 }
 /**
- * To process custom animation
+ * To process custom animation.
  *
  * @param {Element} element - Specifies the element
  * @param {number} delay - Specifies the delay
@@ -3338,7 +3374,7 @@ class MapAjax {
     }
 }
 /**
- * Animation Translate
+ * Animation Translate.
  *
  * @param {Element} element - Specifies the element
  * @param {number} delay - Specifies the delay
@@ -3370,7 +3406,7 @@ function smoothTranslate(element, delay, duration, point) {
     });
 }
 /**
- * To find compare should zoom factor with previous factor and current factor
+ * To find compare should zoom factor with previous factor and current factor.
  *
  * @param {number} scaleFactor - Specifies the scale factor
  * @param {Maps} maps - Specifies the instance of the maps
@@ -3396,7 +3432,7 @@ function compareZoomFactor(scaleFactor, maps) {
     }
 }
 /**
- * To find zoom level for the min and max latitude values
+ * To find zoom level for the min and max latitude values.
  *
  * @param {number} minLat - Specifies the minimum latitude
  * @param {number} maxLat - Specifies the maximum latitude
@@ -3441,13 +3477,13 @@ function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeigh
     return scaleFactor;
 }
 /**
- * Method to get the result
+ * Method to get the result.
  *
  * @param {any} e - Specifies the any type value
  * @returns {any} - Returns the data value
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function processResult(e) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let dataValue;
@@ -3775,7 +3811,7 @@ var DarkTheme;
     };
 })(DarkTheme || (DarkTheme = {}));
 /**
- * Method to get the theme style
+ * Method to get the theme style.
  *
  * @param {MapsTheme} theme - Specifies the theme.
  * @returns {IThemeStyle} - Returns the theme style.
@@ -4366,6 +4402,9 @@ __decorate$1([
 __decorate$1([
     Property(null)
 ], TooltipSettings.prototype, "valuePath", void 0);
+__decorate$1([
+    Property(2000)
+], TooltipSettings.prototype, "duration", void 0);
 /**
  * Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
  */
@@ -4383,6 +4422,9 @@ __decorate$1([
 __decorate$1([
     Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
 ], PolygonTooltipSettings.prototype, "textStyle", void 0);
+__decorate$1([
+    Property(2000)
+], PolygonTooltipSettings.prototype, "duration", void 0);
 /**
  * Gets or sets the options to customize the margin of the maps.
  */
@@ -5079,7 +5121,7 @@ __decorate$1([
  * Gets or sets the options to customize the markers in the maps.
  */
 class MarkerSettings extends MarkerBase {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(parent, propName, defaultValue, isArray) {
         super(parent, propName, defaultValue, isArray);
     }
@@ -5405,22 +5447,18 @@ const zoomComplete = 'zoomComplete';
 const itemHighlight = 'itemHighlight';
 /**
  * Specifies the maps before print event name.
- *
  */
 const beforePrint = 'beforePrint';
 /**
  * Specifies the maps zoom in event name.
- *
  */
 const zoomIn = 'zoomIn';
 /**
  * Specifies the maps zoom out event name.
- *
  */
 const zoomOut = 'zoomOut';
 /**
  * Specifies the maps pan event name.
- *
  */
 const pan = 'pan';
 
@@ -5480,7 +5518,7 @@ class ColorMapping {
      * @param { ShapeSettingsModel } shapeSettings - Specifies the shape settings.
      * @param { object } layerData - Specifies the layer data.
      * @param { string } color - Specifies the color.
-     * @returns {Object} - Returns the object.
+     * @returns {object} - Returns the object.
      * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5494,7 +5532,7 @@ class ColorMapping {
         return !isNullOrUndefined(shapeColor) ? shapeColor : color;
     }
     /**
-     * To color by value and color mapping
+     * To color by value and color mapping.
      *
      * @param {ColorMappingSettingsModel[]} colorMapping - Specifies the color mapping instance.
      * @param {number} colorValue - Specifies the color value
@@ -6319,18 +6357,9 @@ class LayerPanel {
             pathEle.style.cssText = 'outline:none';
         }
         maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
-        if (this.mapObject.toggledShapeElementId) {
-            for (let j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
-                const styleProperty = this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ?
-                    this.currentLayer.shapeSettings : this.mapObject.legendSettings.toggleLegendSettings;
-                if (this.mapObject.toggledShapeElementId[j] === pathEle.id) {
-                    pathEle.setAttribute('fill', styleProperty.fill);
-                    pathEle.setAttribute('stroke', styleProperty.border.color);
-                    pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
-                    pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
-                    pathEle.setAttribute('stroke-width', (isNullOrUndefined(styleProperty.border.width) ? 0 : styleProperty.border.width).toString());
-                }
-            }
+        if (this.mapObject.legendSettings.toggleLegendSettings.enable && this.mapObject.legendSettings.type === 'Layers') {
+            maintainToggleSelection(this.mapObject.toggledElementId, pathEle, this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ? this.currentLayer.shapeSettings
+                : this.mapObject.legendSettings.toggleLegendSettings);
         }
         groupElement.appendChild(pathEle);
     }
@@ -6400,7 +6429,7 @@ class LayerPanel {
         this.layerGroup.appendChild(this.layerObject);
     }
     /**
-     * render datalabel
+     * render datalabel.
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {number} layerIndex - Specifies the layer index
@@ -6417,7 +6446,7 @@ class LayerPanel {
         this.mapObject.dataLabelModule.renderLabel(layer, layerIndex, shape, layer.layerData, group, labelTemplateEle, shapeIndex, intersect);
     }
     /**
-     * To render path for multipolygon
+     * To render path for multipolygon.
      *
      * @param {any[]} currentShapeData Specifies the current shape data
      * @returns {string} Returns the path
@@ -6439,7 +6468,7 @@ class LayerPanel {
         return path;
     }
     /**
-     * To render bubble
+     * To render bubble.
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {object} bubbleData - Specifies the bubble data
@@ -6466,7 +6495,7 @@ class LayerPanel {
         this.mapObject.bubbleModule.renderBubble(bubbleSettings, bubbleData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, this.mapObject.bubbleModule.id);
     }
     /**
-     * To get the shape color from color mapping module
+     * To get the shape color from color mapping module.
      *
      * @param {LayerSettingsModel} layer - Specifies the layer
      * @param {any} shape - Specifies the shape
@@ -7027,7 +7056,7 @@ class LayerPanel {
         }
     }
     /**
-     * Animation for tile layers and hide the group element until the tile layer rendering
+     * Animation for tile layers and hide the group element until the tile layer rendering.
      *
      * @param {string} zoomType - Specifies the zoom type
      * @param {number} translateX - Specifies the x translate point
@@ -7056,7 +7085,7 @@ class LayerPanel {
         }
     }
     /**
-     * Static map rendering
+     * Static map rendering.
      *
      * @param {string} apikey - Specifies the api key
      * @param {number} zoom - Specifies the zoom value
@@ -7113,7 +7142,7 @@ class LayerPanel {
                 + eleHeight + 'px"><img src="' + staticMapString + '"' + 'alt="' + this.mapObject.getLocalizedLabel('ImageNotFound') + '"></div>';
     }
     /**
-     * To find the tile translate point
+     * To find the tile translate point.
      *
      * @param {number} factorX - Specifies the x factor
      * @param {number} factorY - Specifies the x factor
@@ -7216,13 +7245,12 @@ class Annotations {
         this.map.renderReactTemplates();
     }
     /**
-     * To create annotation elements
+     * To create annotation elements.
      *
      * @param {HTMLElement} parentElement - Specifies the parent element in the map.
      * @param {Annotation} annotation -  Specifies the options for customizing the annotation element in maps.
      * @param {number} annotationIndex - Specifies the index of the annotation.
      * @returns {void}
-     *
      * @private
      */
     createAnnotationTemplate(parentElement, annotation, annotationIndex) {
@@ -7336,7 +7364,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
  */
 let Maps = class Maps extends Component {
     /**
-     * Constructor for creating the widget
+     * Constructor for creating the widget.
      *
      * @param {MapsModel} options Specifies the options
      * @param {string | HTMLElement} element Specifies the element
@@ -7344,7 +7372,7 @@ let Maps = class Maps extends Component {
     constructor(options, element) {
         super(options, element);
         /**
-         * Check layer whether is geometry or tile
+         * Check layer whether is geometry or tile.
          *
          * @private
          */
@@ -7416,7 +7444,7 @@ let Maps = class Maps extends Component {
         /** @private */
         this.toggledLegendId = [];
         /** @private */
-        this.toggledShapeElementId = [];
+        this.toggledElementId = [];
         /** @private */
         this.checkInitialRender = true;
         /** @private */
@@ -7453,7 +7481,7 @@ let Maps = class Maps extends Component {
         return this.mapSelect;
     }
     /**
-     * To manage persist maps data
+     * To manage persist maps data.
      *
      * @returns {void}
      */
@@ -7803,7 +7831,7 @@ let Maps = class Maps extends Component {
         //eslint-enable @typescript-eslint/prefer-const
     }
     /**
-     * To apply color to the initial selected marker
+     * To apply color to the initial selected marker.
      *
      * @param {SelectionSettingsModel} selectionSettings - Specifies the selection settings
      * @param {Maps} map - Specifies the instance of the maps
@@ -7845,7 +7873,7 @@ let Maps = class Maps extends Component {
         }
     }
     /**
-     * initial selection of marker
+     * initial selection of marker.
      *
      * @param {number} layerIndex - Specifies the layer index
      * @param {number} markerIndex - Specifies the marker index
@@ -7870,7 +7898,7 @@ let Maps = class Maps extends Component {
         }
     }
     /**
-     * Render the map area border
+     * Render the map area border.
      *
      * @returns {void}
      */
@@ -7887,7 +7915,7 @@ let Maps = class Maps extends Component {
         }
     }
     /**
-     * To add tab index for map element
+     * To add tab index for map element.
      *
      * @returns {void}
      */
@@ -8108,7 +8136,7 @@ let Maps = class Maps extends Component {
         });
     }
     /**
-     * Render the map border
+     * Render the map border.
      *
      * @private
      * @returns {void}
@@ -8129,7 +8157,7 @@ let Maps = class Maps extends Component {
         }
     }
     /**
-     * Render the title and subtitle
+     * Render the title and subtitle.
      *
      * @param {TitleSettingsModel} title - Specifies the title
      * @param {string} type - Specifies the type
@@ -8182,7 +8210,7 @@ let Maps = class Maps extends Component {
         }
     }
     /**
-     * To create svg element for maps
+     * To create svg element for maps.
      *
      * @returns {void}
      */
@@ -8191,7 +8219,7 @@ let Maps = class Maps extends Component {
         createSvg(this);
     }
     /**
-     * To Remove the SVG
+     * To Remove the SVG.
      *
      * @returns {void}
      */
@@ -8481,7 +8509,7 @@ let Maps = class Maps extends Component {
         return latLongValue;
     }
     /**
-     * Gets the location of the mouse click
+     * Gets the location of the mouse click.
      *
      * @param {string} targetId - Specifies the ID for the target.
      * @param {number} pageX - Defines the page X position.
@@ -8490,10 +8518,8 @@ let Maps = class Maps extends Component {
      * @param  {number} x - Defines the x position in pixel.
      * @param {number} y - Defines the y position in pixel.
      * @param {string} type -  Specifies the type.
-     * @returns {GeoPosition} -  Returns the position of the event
-     *
+     * @returns {GeoPosition} -  Returns the position of the event.
      * @private
-     *
      */
     getClickLocation(targetId, pageX, pageY, targetElement, x, y, type) {
         let layerIndex = 0;
@@ -8565,7 +8591,7 @@ let Maps = class Maps extends Component {
                 }
             }
             else {
-                latLongValue = this.getGeoLocation(layerIndex, x, y);
+                latLongValue = this.getGeoLocation(layerIndex, pageX, pageY);
             }
         }
         else if (this.isTileMap && (!isNullOrUndefined(type) ||
@@ -9001,7 +9027,7 @@ let Maps = class Maps extends Component {
     /**
      * This method is used to add the layers dynamically to the maps.
      *
-     * @param {Object} layer - Specifies the layer to be added in the maps.
+     * @param {object} layer - Specifies the layer to be added in the maps.
      * @returns {void}
      */
     addLayer(layer) {
@@ -9282,7 +9308,7 @@ let Maps = class Maps extends Component {
         }
         super.destroy();
         this.shapeSelectionItem = [];
-        this.toggledShapeElementId = [];
+        this.toggledElementId = [];
         this.toggledLegendId = [];
         this.legendSelectionCollection = [];
         this.selectedLegendElementId = [];
@@ -9343,7 +9369,7 @@ let Maps = class Maps extends Component {
         this.markerDragArgument = null;
     }
     /**
-     * Gets component name
+     * Gets component name.
      *
      * @returns {string} - Returns the string value
      * @private
@@ -9461,7 +9487,7 @@ let Maps = class Maps extends Component {
         }
     }
     /**
-     * To provide the array of modules needed for maps rendering
+     * To provide the array of modules needed for maps rendering.
      *
      * @returns {ModuleDeclaration[]} - Returns the modules
      * @private
@@ -9574,7 +9600,7 @@ let Maps = class Maps extends Component {
         return modules;
     }
     /**
-     * To find marker visibility
+     * To find marker visibility.
      *
      * @returns {boolean} - Returns whether the markers are visible or not.
      */
@@ -9591,7 +9617,7 @@ let Maps = class Maps extends Component {
         return isVisible;
     }
     /**
-     * To find DataLabel visibility
+     * To find DataLabel visibility.
      *
      * @returns {boolean} - Returns whether the data labels are visible or not.
      */
@@ -9606,7 +9632,7 @@ let Maps = class Maps extends Component {
         return isVisible;
     }
     /**
-     * To find navigation line visibility
+     * To find navigation line visibility.
      *
      * @returns {boolean} - Returns whether the navigation lines are visible or not.
      */
@@ -9623,7 +9649,7 @@ let Maps = class Maps extends Component {
         return isVisible;
     }
     /**
-     * To find navigation line visibility
+     * To find navigation line visibility.
      *
      * @returns {boolean} - Returns whether the navigation lines are visible or not.
      */
@@ -9640,7 +9666,7 @@ let Maps = class Maps extends Component {
         return isVisible;
     }
     /**
-     * To find marker visibility
+     * To find marker visibility.
      *
      * @returns {boolean} - Returns whether the bubble is visible or not.
      */
@@ -9655,7 +9681,7 @@ let Maps = class Maps extends Component {
         return isVisible;
     }
     /**
-     * To find the bubble visibility from layer
+     * To find the bubble visibility from layer.
      *
      * @param {LayerSettingsModel} layer - Spcifies the layer settings model
      * @returns {boolean} - Returns the boolean value
@@ -9818,8 +9844,12 @@ let Maps = class Maps extends Component {
         let longitude = 0;
         if (!this.isDestroyed) {
             const container = document.getElementById(this.element.id);
-            const pageX = x - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft : 0);
-            const pageY = y - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop : 0);
+            const elementClientRect = this.element.getBoundingClientRect();
+            const bodyClientRect = document.body.getBoundingClientRect();
+            const pageX = x - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft ||
+                (elementClientRect.left - bodyClientRect.left) : 0);
+            const pageY = y - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop ||
+                (elementClientRect.top - bodyClientRect.top) : 0);
             const currentLayer = this.layersCollection[layerIndex];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const translate = getTranslate(this, currentLayer, false);
@@ -9863,7 +9893,7 @@ let Maps = class Maps extends Component {
      *
      * @param {number} pageX - Specifies the x position value in pixels.
      * @param {number} pageY - Specifies the y position value in pixels.
-     * @returns {Object} - Returns the latitude and longitude values.
+     * @returns {object} - Returns the latitude and longitude values.
      */
     pointToLatLong(pageX, pageY) {
         let latitude = 0;
@@ -10088,7 +10118,6 @@ class Bubble {
      * @param {Element} group - Specifies the element group
      * @param {string} bubbleID - Specifies the ID of the bubble
      * @returns {void}
-     *
      * @private
      */
     renderBubble(bubbleSettings, shapeData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, bubbleID) {
@@ -10261,7 +10290,7 @@ class Bubble {
         return points;
     }
     /**
-     * To check and trigger bubble click event
+     * To check and trigger bubble click event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -10284,7 +10313,7 @@ class Bubble {
         this.maps.trigger(bubbleClick, eventArgs);
     }
     /**
-     * To get bubble from target id
+     * To get bubble from target id.
      *
      * @param {string} target - Specifies the target
      * @returns {object} - Returns the object
@@ -10308,7 +10337,7 @@ class Bubble {
     }
     // eslint-disable-next-line valid-jsdoc
     /**
-     * To check and trigger bubble move event
+     * To check and trigger bubble move event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @retruns {void}
@@ -10505,7 +10534,7 @@ class Marker {
         return scaleFactor;
     }
     /**
-     * To calculate center position and factor value dynamically
+     * To calculate center position and factor value dynamically.
      *
      * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
      * @returns {void}
@@ -10634,7 +10663,7 @@ class Marker {
         }
     }
     /**
-     * To check and trigger marker click event
+     * To check and trigger marker click event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -10696,7 +10725,7 @@ class Marker {
         }
     }
     /**
-     * To check and trigger Cluster click event
+     * To check and trigger Cluster click event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -10735,7 +10764,7 @@ class Marker {
         this.maps.trigger(markerClusterClick, eventArgs);
     }
     /**
-     * To get marker from target id
+     * To get marker from target id.
      *
      * @param {string} target - Specifies the target
      * @returns {object} - Returns the marker, data, clusterCollection, markCollection
@@ -10790,7 +10819,7 @@ class Marker {
         return null;
     }
     /**
-     * To check and trigger marker move event
+     * To check and trigger marker move event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -10816,7 +10845,7 @@ class Marker {
         this.maps.trigger(markerMouseMove, eventArgs);
     }
     /**
-     * To check and trigger cluster move event
+     * To check and trigger cluster move event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -10840,8 +10869,8 @@ class Marker {
         };
         this.maps.trigger(markerClusterMouseMove, eventArgs);
     }
-    /** @private
-     *
+    /**
+     * @private
      * @returns {void}
      */
     initializeMarkerClusterList() {
@@ -10885,7 +10914,7 @@ class Polygon {
     /* eslint-enable @typescript-eslint/no-unused-vars */
     /* eslint-enable @typescript-eslint/no-empty-function */
     /**
-     * To render polygon for maps
+     * To render polygon for maps.
      *
      * @param {Maps} maps - Specifies the layer instance to which the polygon is to be rendered.
      * @param {number} layerIndex -Specifies the index of current layer.
@@ -10961,7 +10990,7 @@ class DataLabel {
         return text;
     }
     /**
-     * To render label for maps
+     * To render label for maps.
      *
      * @param {LayerSettings} layer - Specifies the layer settings
      * @param {number} layerIndex - Specifies the layer index.
@@ -11382,7 +11411,7 @@ class NavigationLine {
         this.maps = maps;
     }
     /**
-     * To render navigation line for maps
+     * To render navigation line for maps.
      *
      * @param {LayerSettings} layer - Specifies the layer instance to which the navigation line is to be rendered.
      * @param {number} factor - Specifies the current zoom factor of the Maps.
@@ -11971,10 +12000,14 @@ class Legend {
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
                 textFont.fontFamily = !isNullOrUndefined(textFont.fontFamily) ? textFont.fontFamily : this.maps.themeStyle.fontFamily;
                 textFont.size = map.themeStyle.legendFontSize || textFont.size;
-                const element = renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
-                element.setAttribute('aria-label', item['text']);
-                element.setAttribute('role', 'region');
-                this.legendGroup.appendChild(render.drawRectangle(rectOptions));
+                const textElement = renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
+                textElement.setAttribute('aria-label', item['text']);
+                textElement.setAttribute('role', 'region');
+                const rectElement = render.drawRectangle(rectOptions);
+                this.legendGroup.appendChild(rectElement);
+                if (map.legendSettings.toggleLegendSettings.enable && (legend.type === 'Layers' || legend.type === 'Markers')) {
+                    this.maintainLegendToggle(i, rectElement, textElement);
+                }
                 this.legendToggle();
             }
         }
@@ -12048,10 +12081,14 @@ class Legend {
                     legendText = trimmedText;
                 }
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
-                const element = renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
-                element.setAttribute('aria-label', legendText);
-                element.setAttribute('role', 'region');
+                const textElement = renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
+                textElement.setAttribute('aria-label', legendText);
+                textElement.setAttribute('role', 'region');
                 this.legendGroup.appendChild(legendElement);
+                if (map.legendSettings.toggleLegendSettings.enable && (legend.type === 'Layers' || legend.type === 'Markers')) {
+                    const legendShapeElement = legendElement.childNodes[0];
+                    this.maintainLegendToggle(collection['idIndex'], legendShapeElement, textElement);
+                }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (i === (this.totalPages[page]['Collection'].length - 1)) {
                     let pagingGroup;
@@ -12136,6 +12173,34 @@ class Legend {
             }
         }
     }
+    /**
+     * @param {number} legendIndex - Specifies the legend index.
+     * @param {Element} legendShapeElement - Specifies the legend shape element.
+     * @param {Element} legendTextElement - Specifies the legend text element.
+     * @returns {void}
+     * @private
+     */
+    maintainLegendToggle(legendIndex, legendShapeElement, legendTextElement) {
+        if (this.maps.legendSettings.toggleLegendSettings.enable &&
+            !isNullOrUndefined(this.maps.toggledLegendId) && this.maps.toggledLegendId.indexOf(legendIndex) > -1 &&
+            !isNullOrUndefined(this.maps.toggledElementId) && this.maps.toggledElementId.length > 0) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const currentItem = this.legendCollection[legendIndex]['data'];
+            if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.legendSettings.toggleLegendSettings.fill, this.maps.legendSettings.toggleLegendSettings.opacity, this.maps.legendSettings.toggleLegendSettings.border.color, this.maps.legendSettings.toggleLegendSettings.border.width, isNullOrUndefined(this.maps.legendSettings.toggleLegendSettings.border.opacity) ?
+                    this.maps.legendSettings.toggleLegendSettings.opacity :
+                    this.maps.legendSettings.toggleLegendSettings.border.opacity, this.maps.legendSettings.toggleLegendSettings.fill);
+            }
+            else {
+                const layerIndex = currentItem[currentItem.length - 1].layerIndex;
+                this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.layers[layerIndex].shapeSettings.fill, this.maps.layers[layerIndex].shapeSettings.opacity, this.maps.layers[layerIndex].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.width)
+                    ? 0 : this.maps.layers[layerIndex].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.opacity)
+                    ? this.maps.layers[layerIndex].shapeSettings.opacity
+                    : this.maps.layers[layerIndex].shapeSettings.border.opacity, this.maps.layers[layerIndex].shapeSettings.fill);
+            }
+            currentItem['_isVisible'] = false;
+        }
+    }
     legendHighLightAndSelection(targetElement, value) {
         let shapeIndex;
         let layerIndex;
@@ -12967,7 +13032,7 @@ class Legend {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, (data, dataIndex) => {
                 const marker$$1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
-                if ((text === data[marker$$1.legendText] || text === '') && legendFill === data[marker$$1.colorValuePath]) {
+                if ((text === data[marker$$1.legendText] || text === '') && legendFill === (data[marker$$1.colorValuePath] || marker$$1.fill)) {
                     legendData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
                         shape: !isNullOrUndefined(marker$$1.shapeValuePath) ? data[marker$$1.shapeValuePath] : marker$$1.shape });
                 }
@@ -13218,6 +13283,11 @@ class Legend {
                         for (let j = 0; j < data.length; j++) {
                             if (dataIndex === data[j]['dataIndex'] && layerIndex === data[j]['layerIndex']) {
                                 this.renderInteractivePointer(legend, fill, stroke, id, strokeWidth, rect);
+                                const arrowElement = querySelector(id, this.maps.element.id);
+                                if (this.maps.isDevice && !(isNullOrUndefined(arrowElement))) {
+                                    clearTimeout(this.arrowTimer);
+                                    this.arrowTimer = setTimeout(() => { remove(arrowElement); }, 2000);
+                                }
                                 break;
                             }
                         }
@@ -13295,6 +13365,10 @@ class Legend {
         mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[layerIndex].markerSettings[markerIndex].border.opacity) ?
             this.maps.layers[layerIndex].markerSettings[markerIndex].opacity :
             this.maps.layers[layerIndex].markerSettings[markerIndex].border.opacity).toString());
+        const indexToRemoveSelectedElement = this.maps.toggledElementId.indexOf(mapElement.id);
+        if (indexToRemoveSelectedElement !== -1) {
+            this.maps.toggledElementId.splice(indexToRemoveSelectedElement, 1);
+        }
     }
     bubbleToggleSelection(mapElement, layerIndex, bubbleIndex, legendIndex) {
         mapElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
@@ -13336,6 +13410,7 @@ class Legend {
                                     '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id);
                                 mapElement = mapElement.children[0];
                             }
+                            const toggledLegendIdIndex = this.maps.toggledLegendId.indexOf(legendIndex);
                             if (isVisible && mapElement !== null) {
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     mapElement.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
@@ -13353,6 +13428,15 @@ class Legend {
                                     mapElement.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
                                     mapElement.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
                                 }
+                                if (this.maps.legendSettings.type === 'Markers') {
+                                    if (toggledLegendIdIndex === -1) {
+                                        this.maps.toggledLegendId.push(legendIndex);
+                                    }
+                                    const index = this.maps.toggledElementId.indexOf(mapElement.id);
+                                    if (index === -1) {
+                                        this.maps.toggledElementId.push(mapElement.id);
+                                    }
+                                }
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
@@ -13371,6 +13455,9 @@ class Legend {
                             }
                             else {
                                 if (this.maps.legendSettings.type === 'Markers') {
+                                    if (toggledLegendIdIndex !== -1 && i === 0) {
+                                        this.maps.toggledLegendId.splice(toggledLegendIdIndex, 1);
+                                    }
                                     this.markerToggleSelection(mapElement, k, j, legendIndex);
                                 }
                                 else {
@@ -13379,7 +13466,7 @@ class Legend {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
-                                    this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], '#757575');
+                                    this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], this.maps.legendSettings.textStyle.color);
                                     if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
                                         legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
                                     }
@@ -13403,13 +13490,13 @@ class Legend {
                         layerElement = querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                             '_shapeIndex_' + shape['shapeIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                         if (layerElement !== null) {
-                            const toggledShapeIdIndex = this.maps.toggledShapeElementId.indexOf(layerElement.id);
+                            const toggledShapeIdIndex = this.maps.toggledElementId.indexOf(layerElement.id);
                             if (isVisible) {
                                 if (i === 0) {
                                     this.maps.toggledLegendId.push(legendIndex);
                                 }
                                 if (toggledShapeIdIndex === -1) {
-                                    this.maps.toggledShapeElementId.push(layerElement.id);
+                                    this.maps.toggledElementId.push(layerElement.id);
                                 }
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     layerElement.setAttribute('fill', this.maps.layers[j].shapeSettings.fill);
@@ -13448,7 +13535,7 @@ class Legend {
                                     this.maps.toggledLegendId.splice(toggledLegendIdIndex, 1);
                                 }
                                 if (toggledShapeIdIndex !== -1) {
-                                    this.maps.toggledShapeElementId.splice(toggledShapeIdIndex, 1);
+                                    this.maps.toggledElementId.splice(toggledShapeIdIndex, 1);
                                 }
                                 layerElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
                                 layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
@@ -13480,6 +13567,7 @@ class Legend {
             const selectedItem = this.legendCollection[legendIndex]['data'];
             let isVisible = selectedItem['_isVisible'];
             if ((this.maps.legendSettings.type === 'Bubbles' || this.maps.legendSettings.type === 'Markers') && this.maps.legendSettings.toggleLegendSettings.enable) {
+                const toggledLegendIdIndex = this.maps.toggledLegendId.indexOf(legendIndex);
                 for (let k = 0; k < this.maps.layers.length; k++) {
                     for (let j = 0; j < (this.maps.legendSettings.type === 'Bubbles' ? this.maps.layers[k].bubbleSettings.length : this.maps.layers[k].markerSettings.length); j++) {
                         for (let i = 0; i < selectedItem.length; i++) {
@@ -13494,6 +13582,15 @@ class Legend {
                                 LegendInteractive = LegendInteractive.children[0];
                             }
                             if (isVisible && LegendInteractive !== null) {
+                                if (this.maps.legendSettings.type === 'Markers') {
+                                    if (toggledLegendIdIndex === -1) {
+                                        this.maps.toggledLegendId.push(legendIndex);
+                                    }
+                                    const index = this.maps.toggledElementId.indexOf(LegendInteractive.id);
+                                    if (index === -1) {
+                                        this.maps.toggledElementId.push(LegendInteractive.id);
+                                    }
+                                }
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     LegendInteractive.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
                                     LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
@@ -13531,6 +13628,9 @@ class Legend {
                             }
                             else {
                                 if (this.maps.legendSettings.type === 'Markers') {
+                                    if (toggledLegendIdIndex !== -1 && i === 0) {
+                                        this.maps.toggledLegendId.splice(toggledLegendIdIndex, 1);
+                                    }
                                     this.markerToggleSelection(LegendInteractive, k, j, legendIndex);
                                 }
                                 else {
@@ -13544,7 +13644,7 @@ class Legend {
                                     legendShapeId.setAttribute('stroke-width', this.legendCollection[legendIndex]['shapeBorder']['width']);
                                     legendShapeId.setAttribute('stroke-opacity', this.legendCollection[legendIndex]['shapeBorder']['opacity']);
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#757575');
+                                    legendTextId.setAttribute('fill', this.maps.legendSettings.textStyle.color);
                                 }
                             }
                         }
@@ -13565,13 +13665,13 @@ class Legend {
                         mapLegendElement = querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
                             '_shapeIndex_' + mapdata['shapeIndex'] + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id);
                         if (mapLegendElement !== null) {
-                            const toggledShapeIdIndex = this.maps.toggledShapeElementId.indexOf(mapLegendElement.id);
+                            const toggledShapeIdIndex = this.maps.toggledElementId.indexOf(mapLegendElement.id);
                             if (isVisible) {
                                 if (i === 0) {
                                     this.maps.toggledLegendId.push(legendIndex);
                                 }
                                 if (toggledShapeIdIndex === -1) {
-                                    this.maps.toggledShapeElementId.push(mapLegendElement.id);
+                                    this.maps.toggledElementId.push(mapLegendElement.id);
                                 }
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     mapLegendElement.setAttribute('fill', this.maps.layers[0].shapeSettings.fill);
@@ -13611,7 +13711,7 @@ class Legend {
                                     this.maps.toggledLegendId.splice(toggleLegendIdIndex, 1);
                                 }
                                 if (toggledShapeIdIndex !== -1) {
-                                    this.maps.toggledShapeElementId.splice(toggledShapeIdIndex, 1);
+                                    this.maps.toggledElementId.splice(toggledShapeIdIndex, 1);
                                 }
                                 mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                 mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 :
@@ -13787,7 +13887,7 @@ class Highlight {
         this.addEventListener();
     }
     /**
-     * To bind events for highlight module
+     * To bind events for highlight module.
      *
      * @returns {void}
      */
@@ -13799,7 +13899,7 @@ class Highlight {
         this.maps.on(Browser.touchStartEvent, this.mouseMove, this);
     }
     /**
-     * To unbind events for highlight module
+     * To unbind events for highlight module.
      *
      * @returns {void}
      */
@@ -13811,7 +13911,7 @@ class Highlight {
         this.maps.off(Browser.touchStartEvent, this.mouseMove);
     }
     /**
-     * Public method for highlight module
+     * Public method for highlight module.
      *
      * @param {number} layerIndex - Specifies the index of the layer.
      * @param {string} name - Specifies the name.
@@ -13923,7 +14023,7 @@ class Highlight {
         }
     }
     /**
-     * Handles the highlighting events in map
+     * Handles the highlighting events in map.
      *
      * @param {Element} targetElement - Specifies the target element.
      * @param {number} layerIndex - Specifies the index of the layer.
@@ -14053,7 +14153,7 @@ class Selection {
         this.addEventListener();
     }
     /**
-     * For binding events to selection module
+     * For binding events to selection module.
      *
      * @returns {void}
      */
@@ -14063,7 +14163,7 @@ class Selection {
         }
     }
     /**
-     * For removing events from selection modue
+     * For removing events from selection module.
      *
      * @returns {void}
      */
@@ -14142,7 +14242,7 @@ class Selection {
         }
     }
     /**
-     * Selects the element in the map
+     * Selects the element in the map.
      *
      * @param {Element} targetElement - Specifies the target element.
      * @param {number} layerIndex - Specifies the index of the layer.
@@ -14163,7 +14263,7 @@ class Selection {
         }
     }
     /**
-     * Public method for selection
+     * Public method for selection.
      *
      * @param {number} layerIndex - Specifies the index of the layer.
      * @param {string} name - Specifies the name.
@@ -14181,7 +14281,7 @@ class Selection {
         }
     }
     /**
-     * Method for selection
+     * Method for selection.
      *
      * @param {Element} targetElement - Specifies the target element
      * @param {any} shapeData - Specifies the shape data
@@ -14404,10 +14504,6 @@ class MapsTooltip {
             pageY = e.pageY;
             target = e.target;
         }
-        if (this.maps.isDevice) {
-            clearTimeout(this.clearTimeout);
-            this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
-        }
         if (target.id.indexOf(this.maps.element.id) === -1) {
             const ancestor = target.closest('.' + this.maps.element.id + '_marker_template_element');
             if (!isNullOrUndefined(ancestor) && ancestor.id.indexOf('_MarkerIndex_') > -1) {
@@ -14574,9 +14670,11 @@ class MapsTooltip {
                 // eslint-disable-next-line no-constant-condition
                 if (typeof (isPolygon ? polygon.tooltipTemplate !== 'function' : option.template !== 'function') && (isPolygon ? polygon.tooltipTemplate !== null : option.template !== null) && Object.keys(typeof (isPolygon ? polygon.tooltipTemplate === 'object' : option.template === 'object') ? (isPolygon ? polygon.tooltipTemplate : option.template) : {}).length === 1) {
                     if (isPolygon) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         polygon.tooltipTemplate = polygon.tooltipTemplate[Object.keys(polygon.tooltipTemplate)[0]];
                     }
                     else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         option.template = option.template[Object.keys(option.template)[0]];
                     }
                 }
@@ -14661,6 +14759,15 @@ class MapsTooltip {
                             this.svgTooltip.appendTo(tooltipEle);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             this.maps.renderReactTemplates();
+                            if (this.maps.isDevice) {
+                                let timer = targetId.indexOf('_MarkerIndex_') > -1 || targetId.indexOf('_BubbleIndex_') > -1
+                                    || targetId.indexOf('_shapeIndex_') > -1 ? option.duration : polygonTooltipOption.duration;
+                                timer = (!isNullOrUndefined(timer) && timer > 0) ? timer : (timer < 0) ? 2000 : null;
+                                if (timer !== null) {
+                                    clearTimeout(this.tooltipTimer);
+                                    this.tooltipTimer = setTimeout(this.removeTooltip.bind(this), timer);
+                                }
+                            }
                         }
                         else {
                             this.clearTooltip(e.target);
@@ -14697,7 +14804,7 @@ class MapsTooltip {
         }
     }
     /**
-     * To get content for the current toolitp
+     * To get content for the current toolitp.
      *
      * @param {TooltipSettingsModel} options - Specifies the options for rendering tooltip
      * @param {any} templateData - Specifies the template data
@@ -14729,7 +14836,7 @@ class MapsTooltip {
         return format;
     }
     /**
-     * Handles the mouse up
+     * Handles the mouse up.
      *
      * @param {PointerEvent} e - Specifies the event
      * @returns {void}
@@ -14739,13 +14846,13 @@ class MapsTooltip {
         if (!isNullOrUndefined(this.maps)) {
             this.renderTooltip(e);
             if (this.maps.tooltipDisplayMode === 'MouseMove') {
-                clearTimeout(this.clearTimeout);
-                this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
+                clearTimeout(this.tooltipTimer);
+                this.tooltipTimer = setTimeout(this.removeTooltip.bind(this), 2000);
             }
         }
     }
     /**
-     * Removes the tooltip
+     * Removes the tooltip.
      *
      * @returns {boolean} - Returns the boolean whether tooltip is removed or not.
      * @private
@@ -14770,7 +14877,7 @@ class MapsTooltip {
         }
     }
     /**
-     * To bind events for tooltip module
+     * To bind events for tooltip module.
      *
      * @returns {void}
      * @private
@@ -14792,7 +14899,7 @@ class MapsTooltip {
         this.maps.element.addEventListener('contextmenu', this.removeTooltip);
     }
     /**
-     * Removes the event listeners
+     * Removes the event listeners.
      *
      * @returns {void}
      * @private
@@ -14856,6 +14963,8 @@ class Zoom {
         /** @private */
         this.isPointer = Browser.isPointer;
         this.handled = false;
+        /** @private */
+        this.isPanningInProgress = false;
         this.isPan = false;
         this.isZoomFinal = false;
         this.isZoomSelection = false;
@@ -14878,7 +14987,7 @@ class Zoom {
         this.addEventListener();
     }
     /**
-     * To perform zooming for maps
+     * To perform zooming for maps.
      *
      * @param {Point} position - Specifies the position.
      * @param {number} newZoomFactor - Specifies the zoom factor.
@@ -15305,7 +15414,7 @@ class Zoom {
         }
     }
     /**
-     * To animate the zooming process
+     * To animate the zooming process.
      *
      * @param {Element} element - Specifies the element
      * @param {boolean} animate - Specifies the boolean value
@@ -15342,6 +15451,7 @@ class Zoom {
         const y = maps.translatePoint.y;
         let currentLabelIndex = 0;
         maps.zoomShapeCollection = [];
+        this.isPanningInProgress = isPanning || false;
         if (document.getElementById(maps.element.id + '_mapsTooltip')) {
             removeElement(maps.element.id + '_mapsTooltip');
         }
@@ -15385,7 +15495,7 @@ class Zoom {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if ((!this.isPanModeEnabled) && !isNullOrUndefined(currentEle.childNodes[0])) {
+                            if ((!this.isPanModeEnabled || !isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -15644,7 +15754,7 @@ class Zoom {
         });
     }
     /**
-     * To translate the layer template elements
+     * To translate the layer template elements.
      *
      * @param {number} x - Specifies the x value
      * @param {number} y - Specifies the y value
@@ -16360,10 +16470,15 @@ class Zoom {
                 break;
             case 'zoomin':
                 map.staticMapZoom = map.tileZoomLevel;
-                if (map.staticMapZoom > 0 && map.staticMapZoom < 22) {
+                if (map.staticMapZoom > 0 && map.staticMapZoom < map.zoomSettings.maxZoom) {
                     map.staticMapZoom += 1;
                 }
-                this.toolBarZooming((map.isTileMap ? map.tileZoomLevel : map.scale) + 1, 'ZoomIn');
+                if (map.isTileMap && map.tileZoomLevel >= map.zoomSettings.minZoom && map.tileZoomLevel < map.zoomSettings.maxZoom) {
+                    this.toolBarZooming(map.tileZoomLevel + 1, 'ZoomIn');
+                }
+                else if (!map.isTileMap) {
+                    this.toolBarZooming(map.scale + 1, 'ZoomIn');
+                }
                 scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
                 if (!this.isZoomSelection) {
                     if (scale === map.zoomSettings.maxZoom || scale > 1 || (scale === 1 && this.maps.isTileMap)) {
@@ -16723,9 +16838,14 @@ class Zoom {
                     -(e.detail) / 3 > 0 ? 'ZoomIn' : 'ZoomOut' : (e.wheelDelta / 120) > 0 ? 'ZoomIn' : 'ZoomOut';
                 if (direction === 'ZoomIn') {
                     map.mapScaleValue = value + delta;
-                    map.staticMapZoom = map.tileZoomLevel;
-                    if (map.staticMapZoom > 0 && map.staticMapZoom < staticMaxZoomLevel) {
-                        map.staticMapZoom += 1;
+                    if (map.isTileMap) {
+                        map.staticMapZoom = map.tileZoomLevel;
+                        if (map.staticMapZoom > 0 && map.staticMapZoom < staticMaxZoomLevel) {
+                            map.staticMapZoom += 1;
+                            this.performZooming(position, (value + delta), direction);
+                        }
+                    }
+                    else {
                         this.performZooming(position, (value + delta), direction);
                     }
                 }
@@ -17008,7 +17128,7 @@ class Zoom {
         }
     }
     /**
-     * Gets the Mouse Position
+     * Gets the Mouse Position.
      *
      * @param {number} pageX - Specifies the Page x in map
      * @param {number} pageY - Specifies the Page y in map
@@ -17102,14 +17222,14 @@ class Zoom {
  */
 class Print {
     /**
-     * Constructor for Maps
+     * Constructor for Maps.
      *
      * @param {Maps} control - Specifies the instance of the Maps
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     constructor(control) { }
     /**
-     * To print the Maps
+     * To print the Maps.
      *
      * @param {Maps} maps -Specifies the Maps instance.
      * @param {string[] | string | Element} elements - Specifies the element of the Maps
@@ -17131,7 +17251,7 @@ class Print {
         });
     }
     /**
-     * To get the html string of the Maps
+     * To get the html string of the Maps.
      *
      * @param {Maps} maps -Specifies the Maps instance.
      * @param {string[] | string | Element} elements - Specifies the html element
@@ -17566,5 +17686,5 @@ class PdfExport {
  * exporting all modules from maps index
  */
 
-export { Maps, load, loaded, click, onclick, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerDragStart, markerDragEnd, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, panComplete, zoomComplete, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, ZoomToolbarButtonSettings, ZoomToolbarTooltipSettings, ZoomToolbarSettings, Border, CenterPosition, TooltipSettings, PolygonTooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, PolygonSetting, PolygonSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, calculatePolygonPath, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, Coordinate, MinMax, GeoLocation, measureText, measureTextElement, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, markerClusterListHandler, markerBoundsComparer, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, getHexColor, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, Polygon, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
+export { Maps, load, loaded, click, onclick, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerDragStart, markerDragEnd, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, panComplete, zoomComplete, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, ZoomToolbarButtonSettings, ZoomToolbarTooltipSettings, ZoomToolbarSettings, Border, CenterPosition, TooltipSettings, PolygonTooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, PolygonSetting, PolygonSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, calculatePolygonPath, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, Coordinate, MinMax, GeoLocation, measureText, measureTextElement, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, markerClusterListHandler, markerBoundsComparer, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainToggleSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, getHexColor, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, Polygon, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
 //# sourceMappingURL=ej2-maps.es2015.js.map