@syncfusion/ej2-maps 25.2.4 → 25.2.5

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

@@ -31,7 +31,7 @@ var Size = /** @__PURE__ @class */ (function () {
     return Size;
 }());
 /**
- * To find number from string
+ * To find number from string.
  *
  * @param {string} value Specifies the value
  * @param {number} containerSize Specifies the container size
@@ -45,7 +45,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}
@@ -90,7 +90,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.
@@ -109,7 +109,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
@@ -119,7 +119,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
@@ -129,7 +129,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.
@@ -238,7 +238,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
@@ -261,7 +261,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.
@@ -275,7 +275,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.
@@ -287,7 +287,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.
@@ -300,7 +300,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
@@ -330,7 +330,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
@@ -348,7 +348,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
@@ -435,7 +435,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) {
     var canvas = document.createElement('canvas');
     // eslint-disable-next-line @typescript-eslint/tslint/config
@@ -447,7 +448,7 @@ function measureTextElement(text, font) {
     return new Size(width, height);
 }
 /**
- * Internal use of text options
+ * Internal use of text options.
  *
  * @private
  */
@@ -467,7 +468,7 @@ var TextOption = /** @__PURE__ @class */ (function () {
     return TextOption;
 }());
 /**
- * Internal use of path options
+ * Internal use of path options.
  *
  * @private
  */
@@ -494,7 +495,7 @@ var ColorValue = /** @__PURE__ @class */ (function () {
     return ColorValue;
 }());
 /**
- * Internal use of rectangle options
+ * Internal use of rectangle options.
  *
  * @private
  */
@@ -517,7 +518,7 @@ var RectOption = /** @__PURE__ @class */ (function (_super) {
     return RectOption;
 }(PathOption));
 /**
- * Internal use of circle options
+ * Internal use of circle options.
  *
  * @private
  */
@@ -536,7 +537,7 @@ var CircleOption = /** @__PURE__ @class */ (function (_super) {
     return CircleOption;
 }(PathOption));
 /**
- * Internal use of polygon options
+ * Internal use of polygon options.
  *
  * @private
  */
@@ -553,7 +554,7 @@ var PolygonOption = /** @__PURE__ @class */ (function (_super) {
     return PolygonOption;
 }(PathOption));
 /**
- * Internal use of polyline options
+ * Internal use of polyline options.
  *
  * @private
  */
@@ -568,7 +569,7 @@ var PolylineOption = /** @__PURE__ @class */ (function (_super) {
     return PolylineOption;
 }(PolygonOption));
 /**
- * Internal use of line options
+ * Internal use of line options.
  *
  * @private
  */
@@ -588,7 +589,7 @@ var LineOption = /** @__PURE__ @class */ (function (_super) {
     return LineOption;
 }(PathOption));
 /**
- * Internal use of line
+ * Internal use of line.
  *
  * @property {number} Line - Specifies the line class
  * @private
@@ -603,7 +604,7 @@ var Line = /** @__PURE__ @class */ (function () {
     return Line;
 }());
 /**
- * Internal use of map location type
+ * Internal use of map location type.
  *
  * @private
  */
@@ -615,7 +616,7 @@ var MapLocation = /** @__PURE__ @class */ (function () {
     return MapLocation;
 }());
 /**
- * Internal use of type rect
+ * Internal use of type rect.
  *
  * @private
  */
@@ -653,7 +654,7 @@ var PatternOptions = /** @__PURE__ @class */ (function () {
     return PatternOptions;
 }());
 /**
- * Internal rendering of text
+ * Internal rendering of text.
  *
  * @param {TextOption} option Specifies the text option
  * @param {FontModel} style Specifies the style
@@ -833,7 +834,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) {
     var markerEle;
     var x;
@@ -1191,7 +1192,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) {
         var initialMarkerClusterList = isNullOrUndefined(maps.markerModule.initialMarkerCluster[layerIndex][index]) ? [] : indexCollection.length > 1 ? indexCollection : [];
@@ -1210,7 +1212,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
     var currentMarkerBound = tempElement.getBoundingClientRect();
@@ -1370,6 +1373,11 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
     var 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') {
+        var 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);
     var element = (markerData.length - 1) === dataIndex ? 'marker' : null;
     var markerPoint = new Point(x, y);
@@ -1394,7 +1402,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)) {
@@ -1419,7 +1427,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
@@ -1446,7 +1454,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 (var 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
@@ -1472,7 +1503,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
@@ -1486,7 +1517,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
@@ -1498,7 +1529,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
@@ -1510,7 +1541,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
@@ -1522,7 +1553,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
@@ -1534,7 +1565,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
@@ -1546,7 +1577,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
@@ -1558,7 +1589,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
@@ -1625,7 +1656,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
@@ -1641,7 +1672,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
@@ -1657,7 +1688,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
@@ -1673,7 +1704,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
@@ -1688,7 +1719,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
@@ -1703,7 +1734,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
@@ -1721,7 +1752,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
@@ -1755,7 +1786,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
@@ -1802,7 +1833,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
@@ -1812,7 +1843,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) {
@@ -1895,7 +1926,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
@@ -1991,7 +2022,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
@@ -2010,7 +2041,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
@@ -2058,7 +2089,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
@@ -2086,7 +2117,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}
@@ -2097,7 +2128,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
@@ -2432,7 +2463,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}
@@ -2449,7 +2480,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
@@ -2475,7 +2506,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
@@ -2527,7 +2558,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
@@ -2550,7 +2581,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
@@ -2594,7 +2625,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
@@ -2610,7 +2641,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
@@ -2625,7 +2656,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
@@ -2648,7 +2679,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
@@ -2669,7 +2700,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
@@ -2689,7 +2720,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
@@ -2730,7 +2761,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}
@@ -2762,7 +2793,7 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius) {
         duration: (duration === 0 && animationMode === 'Enable') ? 1000 : duration,
         delay: delay,
         progress: function (args) {
-            if (args.timeStamp > args.delay) {
+            if ((args.timeStamp > args.delay) && !maps.zoomModule.isPanningInProgress) {
                 if (maps.isTileMap && height === 0) {
                     var layerGroupElement = document.querySelector('.GroupElement');
                     if (!isNullOrUndefined(layerGroupElement)) {
@@ -2776,7 +2807,10 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius) {
         },
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         end: function (model) {
-            element.setAttribute('transform', transform);
+            if (!maps.zoomModule.isPanningInProgress) {
+                element.setAttribute('transform', transform);
+            }
+            maps.zoomModule.isPanningInProgress = false;
             if (!ele) {
                 return;
             }
@@ -3208,7 +3242,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) {
     var targetTouches = [];
     var touches = event.touches;
@@ -3232,7 +3267,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) {
     var x = a.pageX - b.pageX;
     var y = a.pageY - b.pageY;
@@ -3280,7 +3316,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.
@@ -3346,7 +3382,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
@@ -3398,7 +3434,7 @@ var MapAjax = /** @__PURE__ @class */ (function () {
     return MapAjax;
 }());
 /**
- * Animation Translate
+ * Animation Translate.
  *
  * @param {Element} element - Specifies the element
  * @param {number} delay - Specifies the delay
@@ -3430,7 +3466,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
@@ -3456,7 +3492,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
@@ -3501,13 +3537,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
     var dataValue;
@@ -3835,7 +3871,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.
@@ -4482,6 +4518,9 @@ var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Property(null)
     ], TooltipSettings.prototype, "valuePath", void 0);
+    __decorate$1([
+        Property(2000)
+    ], TooltipSettings.prototype, "duration", void 0);
     return TooltipSettings;
 }(ChildProperty));
 /**
@@ -4504,6 +4543,9 @@ var PolygonTooltipSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
     ], PolygonTooltipSettings.prototype, "textStyle", void 0);
+    __decorate$1([
+        Property(2000)
+    ], PolygonTooltipSettings.prototype, "duration", void 0);
     return PolygonTooltipSettings;
 }(ChildProperty));
 /**
@@ -5313,7 +5355,7 @@ var MarkerBase = /** @__PURE__ @class */ (function (_super) {
  */
 var MarkerSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(MarkerSettings, _super);
-    // 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 MarkerSettings(parent, propName, defaultValue, isArray) {
         return _super.call(this, parent, propName, defaultValue, isArray) || this;
     }
@@ -5654,22 +5696,18 @@ var zoomComplete = 'zoomComplete';
 var itemHighlight = 'itemHighlight';
 /**
  * Specifies the maps before print event name.
- *
  */
 var beforePrint = 'beforePrint';
 /**
  * Specifies the maps zoom in event name.
- *
  */
 var zoomIn = 'zoomIn';
 /**
  * Specifies the maps zoom out event name.
- *
  */
 var zoomOut = 'zoomOut';
 /**
  * Specifies the maps pan event name.
- *
  */
 var pan = 'pan';
 
@@ -5730,7 +5768,7 @@ var ColorMapping = /** @__PURE__ @class */ (function () {
      * @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
@@ -5744,7 +5782,7 @@ var ColorMapping = /** @__PURE__ @class */ (function () {
         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
@@ -6578,18 +6616,9 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             pathEle.style.cssText = 'outline:none';
         }
         maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
-        if (this.mapObject.toggledShapeElementId) {
-            for (var j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
-                var 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);
     };
@@ -6664,7 +6693,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         this.layerGroup.appendChild(this.layerObject);
     };
     /**
-     * render datalabel
+     * render datalabel.
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {number} layerIndex - Specifies the layer index
@@ -6681,7 +6710,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         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
@@ -6703,7 +6732,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         return path;
     };
     /**
-     * To render bubble
+     * To render bubble.
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {object} bubbleData - Specifies the bubble data
@@ -6730,7 +6759,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         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
@@ -7298,7 +7327,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * 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
@@ -7327,7 +7356,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * Static map rendering
+     * Static map rendering.
      *
      * @param {string} apikey - Specifies the api key
      * @param {number} zoom - Specifies the zoom value
@@ -7384,7 +7413,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 + 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
@@ -7489,13 +7518,12 @@ var Annotations = /** @__PURE__ @class */ (function () {
         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
      */
     Annotations.prototype.createAnnotationTemplate = function (parentElement, annotation, annotationIndex) {
@@ -7625,7 +7653,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 var Maps = /** @__PURE__ @class */ (function (_super) {
     __extends(Maps, _super);
     /**
-     * Constructor for creating the widget
+     * Constructor for creating the widget.
      *
      * @param {MapsModel} options Specifies the options
      * @param {string | HTMLElement} element Specifies the element
@@ -7633,7 +7661,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     function Maps(options, element) {
         var _this = _super.call(this, options, element) || this;
         /**
-         * Check layer whether is geometry or tile
+         * Check layer whether is geometry or tile.
          *
          * @private
          */
@@ -7705,7 +7733,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         /** @private */
         _this.toggledLegendId = [];
         /** @private */
-        _this.toggledShapeElementId = [];
+        _this.toggledElementId = [];
         /** @private */
         _this.checkInitialRender = true;
         /** @private */
@@ -7747,7 +7775,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         configurable: true
     });
     /**
-     * To manage persist maps data
+     * To manage persist maps data.
      *
      * @returns {void}
      */
@@ -8106,7 +8134,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         //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
@@ -8148,7 +8176,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * initial selection of marker
+     * initial selection of marker.
      *
      * @param {number} layerIndex - Specifies the layer index
      * @param {number} markerIndex - Specifies the marker index
@@ -8173,7 +8201,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * Render the map area border
+     * Render the map area border.
      *
      * @returns {void}
      */
@@ -8190,7 +8218,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * To add tab index for map element
+     * To add tab index for map element.
      *
      * @returns {void}
      */
@@ -8413,7 +8441,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         });
     };
     /**
-     * Render the map border
+     * Render the map border.
      *
      * @private
      * @returns {void}
@@ -8434,7 +8462,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * Render the title and subtitle
+     * Render the title and subtitle.
      *
      * @param {TitleSettingsModel} title - Specifies the title
      * @param {string} type - Specifies the type
@@ -8487,7 +8515,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * To create svg element for maps
+     * To create svg element for maps.
      *
      * @returns {void}
      */
@@ -8496,7 +8524,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         createSvg(this);
     };
     /**
-     * To Remove the SVG
+     * To Remove the SVG.
      *
      * @returns {void}
      */
@@ -8787,7 +8815,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         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.
@@ -8796,10 +8824,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @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
-     *
      */
     Maps.prototype.getClickLocation = function (targetId, pageX, pageY, targetElement, x, y, type) {
         var layerIndex = 0;
@@ -8871,7 +8897,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             else {
-                latLongValue = this.getGeoLocation(layerIndex, x, y);
+                latLongValue = this.getGeoLocation(layerIndex, pageX, pageY);
             }
         }
         else if (this.isTileMap && (!isNullOrUndefined(type) ||
@@ -9308,7 +9334,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     /**
      * 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}
      */
     Maps.prototype.addLayer = function (layer) {
@@ -9591,7 +9617,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         _super.prototype.destroy.call(this);
         this.shapeSelectionItem = [];
-        this.toggledShapeElementId = [];
+        this.toggledElementId = [];
         this.toggledLegendId = [];
         this.legendSelectionCollection = [];
         this.selectedLegendElementId = [];
@@ -9652,7 +9678,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.markerDragArgument = null;
     };
     /**
-     * Gets component name
+     * Gets component name.
      *
      * @returns {string} - Returns the string value
      * @private
@@ -9772,7 +9798,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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
@@ -9885,7 +9911,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         return modules;
     };
     /**
-     * To find marker visibility
+     * To find marker visibility.
      *
      * @returns {boolean} - Returns whether the markers are visible or not.
      */
@@ -9902,7 +9928,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         return isVisible;
     };
     /**
-     * To find DataLabel visibility
+     * To find DataLabel visibility.
      *
      * @returns {boolean} - Returns whether the data labels are visible or not.
      */
@@ -9917,7 +9943,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         return isVisible;
     };
     /**
-     * To find navigation line visibility
+     * To find navigation line visibility.
      *
      * @returns {boolean} - Returns whether the navigation lines are visible or not.
      */
@@ -9934,7 +9960,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         return isVisible;
     };
     /**
-     * To find navigation line visibility
+     * To find navigation line visibility.
      *
      * @returns {boolean} - Returns whether the navigation lines are visible or not.
      */
@@ -9951,7 +9977,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         return isVisible;
     };
     /**
-     * To find marker visibility
+     * To find marker visibility.
      *
      * @returns {boolean} - Returns whether the bubble is visible or not.
      */
@@ -9967,7 +9993,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         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
@@ -10142,8 +10168,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         var longitude = 0;
         if (!this.isDestroyed) {
             var container = document.getElementById(this.element.id);
-            var pageX = x - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft : 0);
-            var pageY = y - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop : 0);
+            var elementClientRect = this.element.getBoundingClientRect();
+            var bodyClientRect = document.body.getBoundingClientRect();
+            var pageX = x - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft ||
+                (elementClientRect.left - bodyClientRect.left) : 0);
+            var pageY = y - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop ||
+                (elementClientRect.top - bodyClientRect.top) : 0);
             var currentLayer = this.layersCollection[layerIndex];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var translate = getTranslate(this, currentLayer, false);
@@ -10187,7 +10217,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      *
      * @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.
      */
     Maps.prototype.pointToLatLong = function (pageX, pageY) {
         var latitude = 0;
@@ -10413,7 +10443,6 @@ var Bubble = /** @__PURE__ @class */ (function () {
      * @param {Element} group - Specifies the element group
      * @param {string} bubbleID - Specifies the ID of the bubble
      * @returns {void}
-     *
      * @private
      */
     Bubble.prototype.renderBubble = function (bubbleSettings, shapeData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, bubbleID) {
@@ -10587,7 +10616,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
         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}
@@ -10610,7 +10639,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
         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
@@ -10634,7 +10663,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
     };
     // 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}
@@ -10833,7 +10862,7 @@ var Marker = /** @__PURE__ @class */ (function () {
         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}
@@ -10962,7 +10991,7 @@ var Marker = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * To check and trigger marker click event
+     * To check and trigger marker click event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -11024,7 +11053,7 @@ var Marker = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * To check and trigger Cluster click event
+     * To check and trigger Cluster click event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -11063,7 +11092,7 @@ var Marker = /** @__PURE__ @class */ (function () {
         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
@@ -11119,7 +11148,7 @@ var Marker = /** @__PURE__ @class */ (function () {
         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}
@@ -11145,7 +11174,7 @@ var Marker = /** @__PURE__ @class */ (function () {
         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}
@@ -11169,8 +11198,8 @@ var Marker = /** @__PURE__ @class */ (function () {
         };
         this.maps.trigger(markerClusterMouseMove, eventArgs);
     };
-    /** @private
-     *
+    /**
+     * @private
      * @returns {void}
      */
     Marker.prototype.initializeMarkerClusterList = function () {
@@ -11215,7 +11244,7 @@ var Polygon = /** @__PURE__ @class */ (function () {
     /* 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.
@@ -11292,7 +11321,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         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.
@@ -11715,7 +11744,7 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
         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.
@@ -12307,10 +12336,14 @@ var Legend = /** @__PURE__ @class */ (function () {
                 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;
-                var element = renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
-                element.setAttribute('aria-label', item['text']);
-                element.setAttribute('role', 'region');
-                this.legendGroup.appendChild(render.drawRectangle(rectOptions));
+                var textElement = renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
+                textElement.setAttribute('aria-label', item['text']);
+                textElement.setAttribute('role', 'region');
+                var 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();
             }
         }
@@ -12384,10 +12417,14 @@ var Legend = /** @__PURE__ @class */ (function () {
                     legendText = trimmedText;
                 }
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
-                var element = renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
-                element.setAttribute('aria-label', legendText);
-                element.setAttribute('role', 'region');
+                var 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')) {
+                    var 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)) {
                     var pagingGroup = void 0;
@@ -12472,6 +12509,34 @@ var Legend = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * @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
+     */
+    Legend.prototype.maintainLegendToggle = function (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
+            var 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 {
+                var 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;
+        }
+    };
     Legend.prototype.legendHighLightAndSelection = function (targetElement, value) {
         var shapeIndex;
         var layerIndex;
@@ -13305,7 +13370,7 @@ var Legend = /** @__PURE__ @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, function (data, dataIndex) {
                 var 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 });
                 }
@@ -13566,11 +13631,22 @@ var Legend = /** @__PURE__ @class */ (function () {
                     if (!isNullOrUndefined(currentData['data'])) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var data = currentData['data'];
-                        for (var j = 0; j < data.length; j++) {
+                        var _loop_3 = function (j) {
                             if (dataIndex === data[j]['dataIndex'] && layerIndex === data[j]['layerIndex']) {
-                                this.renderInteractivePointer(legend, fill, stroke, id, strokeWidth, rect);
-                                break;
+                                this_3.renderInteractivePointer(legend, fill, stroke, id, strokeWidth, rect);
+                                var arrowElement_1 = querySelector(id, this_3.maps.element.id);
+                                if (this_3.maps.isDevice && !(isNullOrUndefined(arrowElement_1))) {
+                                    clearTimeout(this_3.arrowTimer);
+                                    this_3.arrowTimer = setTimeout(function () { remove(arrowElement_1); }, 2000);
+                                }
+                                return "break";
                             }
+                        };
+                        var this_3 = this;
+                        for (var j = 0; j < data.length; j++) {
+                            var state_1 = _loop_3(j);
+                            if (state_1 === "break")
+                                break;
                         }
                     }
                 }
@@ -13646,6 +13722,10 @@ var Legend = /** @__PURE__ @class */ (function () {
         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());
+        var indexToRemoveSelectedElement = this.maps.toggledElementId.indexOf(mapElement.id);
+        if (indexToRemoveSelectedElement !== -1) {
+            this.maps.toggledElementId.splice(indexToRemoveSelectedElement, 1);
+        }
     };
     Legend.prototype.bubbleToggleSelection = function (mapElement, layerIndex, bubbleIndex, legendIndex) {
         mapElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
@@ -13687,6 +13767,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id);
                                 mapElement = mapElement.children[0];
                             }
+                            var 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);
@@ -13704,6 +13785,15 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     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);
+                                    }
+                                    var 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);
@@ -13722,6 +13812,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                             }
                             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 {
@@ -13730,7 +13823,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 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']);
                                     }
@@ -13754,13 +13847,13 @@ var Legend = /** @__PURE__ @class */ (function () {
                         layerElement = querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                             '_shapeIndex_' + shape['shapeIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                         if (layerElement !== null) {
-                            var toggledShapeIdIndex = this.maps.toggledShapeElementId.indexOf(layerElement.id);
+                            var 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);
@@ -13799,7 +13892,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     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) ?
@@ -13831,6 +13924,7 @@ var Legend = /** @__PURE__ @class */ (function () {
             var selectedItem = this.legendCollection[legendIndex]['data'];
             var isVisible = selectedItem['_isVisible'];
             if ((this.maps.legendSettings.type === 'Bubbles' || this.maps.legendSettings.type === 'Markers') && this.maps.legendSettings.toggleLegendSettings.enable) {
+                var toggledLegendIdIndex = this.maps.toggledLegendId.indexOf(legendIndex);
                 for (var k = 0; k < this.maps.layers.length; k++) {
                     for (var j = 0; j < (this.maps.legendSettings.type === 'Bubbles' ? this.maps.layers[k].bubbleSettings.length : this.maps.layers[k].markerSettings.length); j++) {
                         for (var i = 0; i < selectedItem.length; i++) {
@@ -13845,6 +13939,15 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 LegendInteractive = LegendInteractive.children[0];
                             }
                             if (isVisible && LegendInteractive !== null) {
+                                if (this.maps.legendSettings.type === 'Markers') {
+                                    if (toggledLegendIdIndex === -1) {
+                                        this.maps.toggledLegendId.push(legendIndex);
+                                    }
+                                    var 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);
@@ -13882,6 +13985,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                             }
                             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 {
@@ -13895,7 +14001,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     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);
                                 }
                             }
                         }
@@ -13916,13 +14022,13 @@ var Legend = /** @__PURE__ @class */ (function () {
                         mapLegendElement = querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
                             '_shapeIndex_' + mapdata['shapeIndex'] + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id);
                         if (mapLegendElement !== null) {
-                            var toggledShapeIdIndex = this.maps.toggledShapeElementId.indexOf(mapLegendElement.id);
+                            var 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);
@@ -13962,7 +14068,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     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 :
@@ -14139,7 +14245,7 @@ var Highlight = /** @__PURE__ @class */ (function () {
         this.addEventListener();
     }
     /**
-     * To bind events for highlight module
+     * To bind events for highlight module.
      *
      * @returns {void}
      */
@@ -14151,7 +14257,7 @@ var Highlight = /** @__PURE__ @class */ (function () {
         this.maps.on(Browser.touchStartEvent, this.mouseMove, this);
     };
     /**
-     * To unbind events for highlight module
+     * To unbind events for highlight module.
      *
      * @returns {void}
      */
@@ -14163,7 +14269,7 @@ var Highlight = /** @__PURE__ @class */ (function () {
         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.
@@ -14275,7 +14381,7 @@ var Highlight = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * 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.
@@ -14407,7 +14513,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.addEventListener();
     }
     /**
-     * For binding events to selection module
+     * For binding events to selection module.
      *
      * @returns {void}
      */
@@ -14417,7 +14523,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * For removing events from selection modue
+     * For removing events from selection module.
      *
      * @returns {void}
      */
@@ -14496,7 +14602,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * 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.
@@ -14517,7 +14623,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * Public method for selection
+     * Public method for selection.
      *
      * @param {number} layerIndex - Specifies the index of the layer.
      * @param {string} name - Specifies the name.
@@ -14535,7 +14641,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * Method for selection
+     * Method for selection.
      *
      * @param {Element} targetElement - Specifies the target element
      * @param {any} shapeData - Specifies the shape data
@@ -14761,10 +14867,6 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
             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) {
             var ancestor = target.closest('.' + this.maps.element.id + '_marker_template_element');
             if (!isNullOrUndefined(ancestor) && ancestor.id.indexOf('_MarkerIndex_') > -1) {
@@ -14931,9 +15033,11 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 // 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]];
                     }
                 }
@@ -15018,6 +15122,15 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             _this.svgTooltip.appendTo(tooltipEle);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             _this.maps.renderReactTemplates();
+                            if (_this.maps.isDevice) {
+                                var 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);
@@ -15054,7 +15167,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * 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
@@ -15088,7 +15201,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         return format;
     };
     /**
-     * Handles the mouse up
+     * Handles the mouse up.
      *
      * @param {PointerEvent} e - Specifies the event
      * @returns {void}
@@ -15098,13 +15211,13 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         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
@@ -15129,7 +15242,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * To bind events for tooltip module
+     * To bind events for tooltip module.
      *
      * @returns {void}
      * @private
@@ -15151,7 +15264,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         this.maps.element.addEventListener('contextmenu', this.removeTooltip);
     };
     /**
-     * Removes the event listeners
+     * Removes the event listeners.
      *
      * @returns {void}
      * @private
@@ -15216,6 +15329,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
         /** @private */
         this.isPointer = Browser.isPointer;
         this.handled = false;
+        /** @private */
+        this.isPanningInProgress = false;
         this.isPan = false;
         this.isZoomFinal = false;
         this.isZoomSelection = false;
@@ -15238,7 +15353,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         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.
@@ -15666,7 +15781,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * To animate the zooming process
+     * To animate the zooming process.
      *
      * @param {Element} element - Specifies the element
      * @param {boolean} animate - Specifies the boolean value
@@ -15704,6 +15819,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var y = maps.translatePoint.y;
         var currentLabelIndex = 0;
         maps.zoomShapeCollection = [];
+        this.isPanningInProgress = isPanning || false;
         if (document.getElementById(maps.element.id + '_mapsTooltip')) {
             removeElement(maps.element.id + '_mapsTooltip');
         }
@@ -15747,7 +15863,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if ((!this_1.isPanModeEnabled) && !isNullOrUndefined(currentEle.childNodes[0])) {
+                            if ((!this_1.isPanModeEnabled || !isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
                                 this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -16014,7 +16130,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         });
     };
     /**
-     * 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
@@ -16733,10 +16849,15 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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)) {
@@ -17096,9 +17217,14 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     -(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);
                     }
                 }
@@ -17381,7 +17507,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * 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
@@ -17476,7 +17602,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
  */
 var Print = /** @__PURE__ @class */ (function () {
     /**
-     * Constructor for Maps
+     * Constructor for Maps.
      *
      * @param {Maps} control - Specifies the instance of the Maps
      */
@@ -17484,7 +17610,7 @@ var Print = /** @__PURE__ @class */ (function () {
     function Print(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
@@ -17506,7 +17632,7 @@ var Print = /** @__PURE__ @class */ (function () {
         });
     };
     /**
-     * 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
@@ -17951,5 +18077,5 @@ var PdfExport = /** @__PURE__ @class */ (function () {
  * 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.es5.js.map