@syncfusion/ej2-maps 25.2.4 → 26.1.35

package/src/maps/utils/helper.js

@@ -33,7 +33,7 @@ var Size = /** @class */ (function () {
 }());
 export { Size };
 /**
- * To find number from string
+ * To find number from string.
  *
  * @param {string} value Specifies the value
  * @param {number} containerSize Specifies the container size
@@ -47,7 +47,7 @@ export 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}
@@ -92,7 +92,7 @@ export 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.
@@ -111,7 +111,7 @@ export 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
@@ -121,7 +121,7 @@ export 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
@@ -131,7 +131,7 @@ export 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.
@@ -225,22 +225,24 @@ export function convertGeoToPoint(latitude, longitude, factor, layer, mapModel)
  */
 export function calculatePolygonPath(maps, factor, currentLayer, markerData) {
     var path = '';
-    Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-        var lat = data.latitude;
-        var lng = data.longitude;
-        var location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
-        if (dataIndex === 0) {
-            path += 'M ' + location.x + ' ' + location.y;
-        }
-        else {
-            path += ' L ' + location.x + ' ' + location.y;
-        }
-    });
-    path += ' z ';
+    if (!isNullOrUndefined(markerData) && markerData.length > 1) {
+        Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+            var lat = data.latitude;
+            var lng = data.longitude;
+            var location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+            if (dataIndex === 0) {
+                path += 'M ' + location.x + ' ' + location.y;
+            }
+            else {
+                path += ' L ' + location.x + ' ' + location.y;
+            }
+        });
+        path += ' z ';
+    }
     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
@@ -263,7 +265,7 @@ export function convertTileLatLongToPoint(center, zoomLevel, tileTranslatePoint,
     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.
@@ -277,7 +279,7 @@ export 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.
@@ -289,7 +291,7 @@ export 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.
@@ -302,7 +304,7 @@ export 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
@@ -332,7 +334,7 @@ export 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
@@ -350,7 +352,7 @@ export 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
@@ -441,7 +443,8 @@ export 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
+ */
 export function measureTextElement(text, font) {
     var canvas = document.createElement('canvas');
     // eslint-disable-next-line @typescript-eslint/tslint/config
@@ -453,7 +456,7 @@ export function measureTextElement(text, font) {
     return new Size(width, height);
 }
 /**
- * Internal use of text options
+ * Internal use of text options.
  *
  * @private
  */
@@ -474,7 +477,7 @@ var TextOption = /** @class */ (function () {
 }());
 export { TextOption };
 /**
- * Internal use of path options
+ * Internal use of path options.
  *
  * @private
  */
@@ -503,7 +506,7 @@ var ColorValue = /** @class */ (function () {
 }());
 export { ColorValue };
 /**
- * Internal use of rectangle options
+ * Internal use of rectangle options.
  *
  * @private
  */
@@ -527,7 +530,7 @@ var RectOption = /** @class */ (function (_super) {
 }(PathOption));
 export { RectOption };
 /**
- * Internal use of circle options
+ * Internal use of circle options.
  *
  * @private
  */
@@ -547,7 +550,7 @@ var CircleOption = /** @class */ (function (_super) {
 }(PathOption));
 export { CircleOption };
 /**
- * Internal use of polygon options
+ * Internal use of polygon options.
  *
  * @private
  */
@@ -565,7 +568,7 @@ var PolygonOption = /** @class */ (function (_super) {
 }(PathOption));
 export { PolygonOption };
 /**
- * Internal use of polyline options
+ * Internal use of polyline options.
  *
  * @private
  */
@@ -581,7 +584,7 @@ var PolylineOption = /** @class */ (function (_super) {
 }(PolygonOption));
 export { PolylineOption };
 /**
- * Internal use of line options
+ * Internal use of line options.
  *
  * @private
  */
@@ -602,7 +605,7 @@ var LineOption = /** @class */ (function (_super) {
 }(PathOption));
 export { LineOption };
 /**
- * Internal use of line
+ * Internal use of line.
  *
  * @property {number} Line - Specifies the line class
  * @private
@@ -618,7 +621,7 @@ var Line = /** @class */ (function () {
 }());
 export { Line };
 /**
- * Internal use of map location type
+ * Internal use of map location type.
  *
  * @private
  */
@@ -631,7 +634,7 @@ var MapLocation = /** @class */ (function () {
 }());
 export { MapLocation };
 /**
- * Internal use of type rect
+ * Internal use of type rect.
  *
  * @private
  */
@@ -671,7 +674,7 @@ var PatternOptions = /** @class */ (function () {
 }());
 export { PatternOptions };
 /**
- * Internal rendering of text
+ * Internal rendering of text.
  *
  * @param {TextOption} option Specifies the text option
  * @param {FontModel} style Specifies the style
@@ -851,7 +854,7 @@ export 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
 export function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCollection, maps) {
     var markerEle;
     var x;
@@ -1209,7 +1212,8 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
  * @param {number} index - Specifies the index.
  * @param {number} indexCollection - Specifies the index Collection.
  * @returns {void}
- * @private */
+ * @private
+ */
 export function markerClusterListHandler(maps, currentZoomFactor, layerIndex, index, indexCollection) {
     if (currentZoomFactor === 1) {
         var initialMarkerClusterList = isNullOrUndefined(maps.markerModule.initialMarkerCluster[layerIndex][index]) ? [] : indexCollection.length > 1 ? indexCollection : [];
@@ -1228,7 +1232,8 @@ export function markerClusterListHandler(maps, currentZoomFactor, layerIndex, in
  * @param {number[]} indexCollection - Specifies the index collection.
  * @param {number} p - Specifies the p.
  * @returns {void}
- * @private */
+ * @private
+ */
 export function markerBoundsComparer(tempElement, markerBounds, colloideBounds, indexCollection, p) {
     // eslint-disable-next-line @typescript-eslint/tslint/config
     var currentMarkerBound = tempElement.getBoundingClientRect();
@@ -1388,6 +1393,11 @@ export function marker(eventArgs, markerSettings, markerData, dataIndex, locatio
     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);
@@ -1412,7 +1422,7 @@ export function marker(eventArgs, markerSettings, markerData, dataIndex, locatio
  * @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
 export 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)) {
@@ -1424,20 +1434,11 @@ export function markerTemplate(eventArgs, templateFn, markerID, data, markerInde
         markerElement.style.left = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x - maps.mapAreaRect.x + 'px';
         markerElement.style.top = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y - maps.mapAreaRect.y + 'px';
         markerTemplate.appendChild(markerElement);
-        if (maps.layers[maps.baseLayerIndex].layerType === 'GoogleStaticMap') {
-            var staticMapOffset = getElementByID(maps.element.id + '_StaticGoogleMap').getBoundingClientRect();
-            var markerElementOffset = markerElement.getBoundingClientRect();
-            var staticMapOffsetWidth = 640;
-            if ((staticMapOffset['x'] > markerElementOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < markerElementOffset['x'] + markerElementOffset['width'])
-                && (staticMapOffset['y'] > markerElementOffset['y'] || staticMapOffset['y'] + staticMapOffset['height'] < markerElementOffset['y'] + markerElementOffset['height'])) {
-                markerElement.style.display = 'none';
-            }
-        }
     }
     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
@@ -1464,7 +1465,30 @@ export 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
+export 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
@@ -1490,7 +1514,7 @@ export function maintainStyleClass(id, idClass, fill, opacity, borderColor, bord
     }
 }
 /**
- * Internal use of append shape element
+ * Internal use of append shape element.
  *
  * @param {Element} shape - Specifies the shape
  * @param {Element} element - Specifies the element
@@ -1504,7 +1528,7 @@ export 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
@@ -1516,7 +1540,7 @@ export 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
@@ -1528,7 +1552,7 @@ export 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
@@ -1540,7 +1564,7 @@ export 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
@@ -1552,7 +1576,7 @@ export 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
@@ -1564,7 +1588,7 @@ export 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
@@ -1576,7 +1600,7 @@ export 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
@@ -1643,7 +1667,7 @@ export 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
@@ -1659,7 +1683,7 @@ export 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
@@ -1675,7 +1699,7 @@ export 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
@@ -1691,7 +1715,7 @@ export 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
@@ -1706,7 +1730,7 @@ export 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
@@ -1721,7 +1745,7 @@ export 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
@@ -1739,7 +1763,7 @@ export 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
@@ -1773,7 +1797,7 @@ export 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
@@ -1820,7 +1844,7 @@ export 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
@@ -1830,11 +1854,11 @@ export 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
 export function checkShapeDataFields(dataSource, properties, dataPath, propertyPath, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 layer) {
-    if (!(isNullOrUndefined(properties))) {
+    if (!(isNullOrUndefined(properties)) && !isNullOrUndefined(dataSource)) {
         for (var i = 0; i < dataSource.length; i++) {
             var shapeDataPath = ((dataPath.indexOf('.') > -1) ? getValueFromObject(dataSource[i], dataPath) :
                 dataSource[i][dataPath]);
@@ -1913,7 +1937,7 @@ export 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
@@ -2009,7 +2033,7 @@ export function findMidPointOfPolygon(points, type, geometryType) {
     };
 }
 /**
- * Check custom path
+ * Check custom path.
  *
  * @param {any[]} layerData - Specifies the layer data
  * @returns {boolean} - Returns the boolean vlue
@@ -2028,7 +2052,7 @@ export 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
@@ -2076,7 +2100,7 @@ export 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
@@ -2104,7 +2128,7 @@ export 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}
@@ -2115,7 +2139,7 @@ export 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
@@ -2450,7 +2474,7 @@ export 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}
@@ -2458,8 +2482,7 @@ export function getZoomTranslate(mapObject, layer, animate) {
  */
 export function fixInitialScaleForTile(map) {
     map.tileZoomScale = map.tileZoomLevel = Math.floor(map.availableSize.height / 512) + 1;
-    var padding = map.layers[map.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
-        20 : 0;
+    var padding = 20;
     var totalSize = Math.pow(2, map.tileZoomLevel) * 256;
     map.tileTranslatePoint.x = (map.availableSize.width / 2) - (totalSize / 2);
     map.tileTranslatePoint.y = (map.availableSize.height / 2) - (totalSize / 2) + padding;
@@ -2467,7 +2490,7 @@ export 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
@@ -2493,7 +2516,7 @@ export function getClientElement(id) {
     }
 }
 /**
- * To apply internalization
+ * To apply internalization.
  *
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {number} value - Specifies the value
@@ -2545,7 +2568,7 @@ export 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
@@ -2568,7 +2591,7 @@ export 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
@@ -2612,7 +2635,7 @@ export 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
@@ -2628,7 +2651,7 @@ export 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
@@ -2643,7 +2666,7 @@ export 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
@@ -2666,7 +2689,7 @@ export 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
@@ -2687,7 +2710,7 @@ export 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
@@ -2707,7 +2730,7 @@ export 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
@@ -2748,7 +2771,7 @@ export function triggerItemSelectionEvent(selectionSettings, map, targetElement,
     });
 }
 /**
- * Function to remove class from element
+ * Function to remove class from element.
  *
  * @param {Element} element - Specifies the element
  * @returns {void}
@@ -2780,7 +2803,7 @@ export function elementAnimate(element, delay, duration, point, maps, ele, radiu
         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)) {
@@ -2794,7 +2817,10 @@ export function elementAnimate(element, delay, duration, point, maps, ele, radiu
         },
         // 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;
             }
@@ -3226,7 +3252,8 @@ export function changeNavaigationLineWidth(element, index, scale, maps) {
 /**
  * @param {PointerEvent | TouchEvent} event - Specifies the pointer or touch event
  * @returns {ITouches[]} - Returns the target
- * @private */
+ * @private
+ */
 export function targetTouches(event) {
     var targetTouches = [];
     var touches = event.touches;
@@ -3250,7 +3277,8 @@ export 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
+ */
 export function getDistance(a, b) {
     var x = a.pageX - b.pageX;
     var y = a.pageY - b.pageY;
@@ -3298,7 +3326,7 @@ export 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.
@@ -3364,7 +3392,7 @@ export 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
@@ -3417,7 +3445,7 @@ var MapAjax = /** @class */ (function () {
 }());
 export { MapAjax };
 /**
- * Animation Translate
+ * Animation Translate.
  *
  * @param {Element} element - Specifies the element
  * @param {number} delay - Specifies the delay
@@ -3449,7 +3477,7 @@ export 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
@@ -3475,7 +3503,7 @@ export 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
@@ -3520,13 +3548,13 @@ export function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, m
     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
 export function processResult(e) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var dataValue;