@syncfusion/ej2-maps 25.1.37 → 25.1.40

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

@@ -40,7 +40,7 @@ function stringToNumber(value, containerSize) {
 function calculateSize(maps) {
     maps.element.style.height = !isNullOrUndefined(maps.height) ? maps.height : 'auto';
     maps.element.style.width = !isNullOrUndefined(maps.width) ? maps.width : 'auto';
-    maps.element.style.setProperty("display", "block");
+    maps.element.style.setProperty('display', 'block');
     const containerWidth = maps.element.clientWidth;
     const containerHeight = maps.element.clientHeight;
     const containerElementWidth = stringToNumber(maps.element.style.width, containerWidth);
@@ -200,14 +200,19 @@ function convertGeoToPoint(latitude, longitude, factor, layer, mapModel) {
     return new Point(x, y);
 }
 /**
+ * @param {Maps} maps - Specifies the map control.
+ * @param {number} factor - Specifies the factor.
+ * @param {LayerSettings} currentLayer - Specifies the current layer.
+ * @param {Coordinate} markerData - Specifies the marker data.
+ * @returns {string} - Returns the path.
  * @private
  */
 function calculatePolygonPath(maps, factor, currentLayer, markerData) {
     let path = '';
     Array.prototype.forEach.call(markerData, (data, dataIndex) => {
-        let lat = data.latitude;
-        let lng = data.longitude;
-        let location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+        const lat = data.latitude;
+        const lng = data.longitude;
+        const 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;
         }
@@ -408,9 +413,14 @@ function measureText(text, font) {
         '; visibility: hidden; top: -100; left: 0; whiteSpace: nowrap; lineHeight: normal';
     return new Size(measureObject.clientWidth, measureObject.clientHeight);
 }
-/** @private */
+/**
+ * @param {string} text - Specifies the text.
+ * @param {FontModel} font - Specifies the font.
+ * @returns {Size} - Returns the size of text.
+ * @private */
 function measureTextElement(text, font) {
     const canvas = document.createElement('canvas');
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     const context = canvas.getContext('2d');
     context.font = `${font.fontStyle} ${font.fontWeight} ${typeof font.size === 'number' ? font.size + 'px' : font.size} ${font.fontFamily}`;
     const metrics = context.measureText(text);
@@ -646,15 +656,15 @@ function renderTextElement(option, style, color, parent, isMinus = false) {
     return htmlObject;
 }
 /**
- * @param {HTMLCollection} element Specifies the html collection
- * @param {string} markerId Specifies the marker id
- * @param {any} data Specifies the data
- * @param {number} index Specifies the index
- * @param {Maps} mapObj Specifies the map object
- * @returns {HTMLCollection} Returns the html collection
+ * @param {HTMLCollection} element - Specifies the html collection
+ * @param {string} markerId - Specifies the marker id
+ * @param {object} data - Specifies the data
+ * @param {number} index - Specifies the index
+ * @param {Maps} mapObj - Specifies the map object
+ * @param {string} templateType - Specifies the template type
+ * @returns {HTMLElement} - Returns the html element
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function convertElement(element, markerId, data, index, mapObj, templateType) {
     const childElement = createElement('div', {
         id: markerId, className: mapObj.element.id + '_marker_template_element'
@@ -665,6 +675,7 @@ function convertElement(element, markerId, data, index, mapObj, templateType) {
         childElement.appendChild(element[0]);
         elementLength--;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     if (!mapObj.isReact || templateType !== 'function') {
         let templateHtml = childElement.innerHTML;
         const properties = Object.keys(data);
@@ -706,12 +717,11 @@ function formatValue(value, maps) {
  *
  * @param {string} stringTemplate - Specifies the template
  * @param {string} format - Specifies the format
- * @param {any} data - Specifies the data
+ * @param {object} data - Specifies the data
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {string} - Returns the string value
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function convertStringToValue(stringTemplate, format, data, maps) {
     let templateHtml = (stringTemplate === '') ? format : stringTemplate;
     const templateValue = (stringTemplate === '') ? templateHtml.split('${') : templateHtml.split('{{:');
@@ -736,14 +746,11 @@ function convertStringToValue(stringTemplate, format, data, maps) {
  *
  * @param {Element} element - Specifies the element
  * @param {string} labelId - Specifies the label id
- * @param {any} data - Specifies the data
- * @param {number} index - Specifies the index
- * @param {Maps} mapObj - Specifies the map object
+ * @param {object} data - Specifies the data
  * @returns {HTMLElement} - Returns the html element
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function convertElementFromLabel(element, labelId, data, index, mapObj) {
+function convertElementFromLabel(element, labelId, data) {
     const labelEle = isNullOrUndefined(element.childElementCount) ? element[0] : element;
     let templateHtml = labelEle.outerHTML;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -772,7 +779,7 @@ function convertElementFromLabel(element, labelId, data, index, mapObj) {
  * @returns {Element} - Returns the element
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
 function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCollection, maps) {
     let markerEle;
     let x;
@@ -814,7 +821,7 @@ function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCol
 }
 /**
  *
- * @param {any} data - Specifies the data
+ * @param {object} data - Specifies the data
  * @param {string} value - Specifies the value
  * @returns {any} - Returns the data
  * @private
@@ -837,11 +844,10 @@ function getValueFromObject(data, value) {
 /**
  *
  * @param {IMarkerRenderingEventArgs} eventArgs - Specifies the event arguments
- * @param {any} data - Specifies the data
+ * @param {object} data - Specifies the data
  * @returns {IMarkerRenderingEventArgs} - Returns the arguments
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function markerColorChoose(eventArgs, data) {
     const color = (!isNullOrUndefined(eventArgs.colorValuePath)) ? ((eventArgs.colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, eventArgs.colorValuePath)).toString() :
         data[eventArgs.colorValuePath]) : data[eventArgs.colorValuePath];
@@ -854,11 +860,10 @@ function markerColorChoose(eventArgs, data) {
 /**
  *
  * @param {IMarkerRenderingEventArgs} eventArgs - Specifies the event arguments
- * @param {any} data - Specifies the data
+ * @param {object} data - Specifies the data
  * @returns {IMarkerRenderingEventArgs} - Returns the arguments
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function markerShapeChoose(eventArgs, data) {
     if (!isNullOrUndefined(eventArgs.shapeValuePath) && !isNullOrUndefined(data[eventArgs.shapeValuePath])) {
         const shape = ((eventArgs.shapeValuePath.indexOf('.') > -1) ?
@@ -891,7 +896,7 @@ function markerShapeChoose(eventArgs, data) {
  * @param {Element} layerElement - Specifies the layer element
  * @param {boolean} check - Specifies the boolean value
  * @param {boolean} zoomCheck - Specifies the boolean value
- * @returns {void}
+ * @returns {boolean} -Returns boolean for cluster completion
  * @private
  */
 function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerCollection, layerElement, check, zoomCheck) {
@@ -921,14 +926,15 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
         data: data, maps: maps, cluster: clusters, border: clusters.border
     };
     const containerRect = maps.element.getBoundingClientRect();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const translatePoint = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
     let factor;
     if (!maps.isTileMap) {
         factor = maps.mapLayerPanel.calculateFactor(currentLayer);
     }
     let isClusteringCompleted = false;
     const currentZoomFactor = !maps.isTileMap ? maps.mapScaleValue : maps.tileZoomLevel;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     maps.trigger('markerClusterRendering', eventArg, (clusterargs) => {
         Array.prototype.forEach.call(markerTemplate.childNodes, (markerElement, o) => {
             indexCollection = [];
@@ -941,9 +947,9 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                         || (maps.markerModule.initialMarkerCluster.length > 0 && maps.markerModule.initialMarkerCluster[layerIndex] && maps.markerModule.initialMarkerCluster[layerIndex][o] && maps.markerModule.initialMarkerCluster[layerIndex][o].length > 0) ?
                         (maps.previousScale < currentZoomFactor ? maps.markerModule.zoomedMarkerCluster[layerIndex][o] : maps.markerModule.initialMarkerCluster[layerIndex][o]) : null;
                     if (!isNullOrUndefined(list) && list.length !== 0) {
-                        Array.prototype.forEach.call(list, (currentIndex, p) => {
+                        Array.prototype.forEach.call(list, (currentIndex) => {
                             if (o !== currentIndex) {
-                                let otherMarkerElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                                const otherMarkerElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                                     + 0 + '_dataIndex_' + currentIndex);
                                 if (otherMarkerElement['style']['visibility'] !== 'hidden') {
                                     markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, currentIndex);
@@ -1124,9 +1130,16 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
     });
     return isClusteringCompleted;
 }
-/** @private */
+/**
+ * @param {Maps} maps - Specifies the map control.
+ * @param {number} currentZoomFactor - Specifies the current zoom factor.
+ * @param {number} layerIndex - Specifies the layer index.
+ * @param {number} index - Specifies the index.
+ * @param {number} indexCollection - Specifies the index Collection.
+ * @returns {void}
+ * @private */
 function markerClusterListHandler(maps, currentZoomFactor, layerIndex, index, indexCollection) {
-    if (currentZoomFactor == 1) {
+    if (currentZoomFactor === 1) {
         const initialMarkerClusterList = isNullOrUndefined(maps.markerModule.initialMarkerCluster[layerIndex][index]) ? [] : indexCollection.length > 1 ? indexCollection : [];
         maps.markerModule.initialMarkerCluster[layerIndex][index] = initialMarkerClusterList;
         const zoomedMarkerClusterList = isNullOrUndefined(maps.markerModule.zoomedMarkerCluster[layerIndex][index]) ? [] : indexCollection.length > 1 ? indexCollection : [];
@@ -1136,9 +1149,17 @@ function markerClusterListHandler(maps, currentZoomFactor, layerIndex, index, in
         maps.markerModule.zoomedMarkerCluster[layerIndex][index] = indexCollection.length > 1 ? indexCollection : [];
     }
 }
-/** @private */
+/**
+ * @param {Element} tempElement - Specifies the temp element.
+ * @param {ClientRect} markerBounds - Specifies the marker bounds.
+ * @param {ClientRect} colloideBounds - Specifies the colloide Bounds.
+ * @param {number[]} indexCollection - Specifies the index collection.
+ * @param {number} p - Specifies the p.
+ * @returns {void}
+ * @private */
 function markerBoundsComparer(tempElement, markerBounds, colloideBounds, indexCollection, p) {
-    let currentMarkerBound = tempElement.getBoundingClientRect();
+    // eslint-disable-next-line @typescript-eslint/tslint/config
+    const currentMarkerBound = tempElement.getBoundingClientRect();
     if (!isNullOrUndefined(currentMarkerBound)) {
         if (!(markerBounds.left > currentMarkerBound.right || markerBounds.right < currentMarkerBound.left
             || markerBounds.top > currentMarkerBound.bottom || markerBounds.bottom < currentMarkerBound.top)) {
@@ -1152,11 +1173,10 @@ function markerBoundsComparer(tempElement, markerBounds, colloideBounds, indexCo
  *
  * @param {MarkerClusterData[]} sameMarkerData - Specifies the marker data
  * @param {Maps} maps - Specifies the instance of the maps
- * @param {Element | HTMLElement} markerElement - Specifies the marker element
  * @returns {void}
  * @private
  */
-function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
+function mergeSeparateCluster(sameMarkerData, maps) {
     const layerIndex = sameMarkerData[0].layerIndex;
     const clusterIndex = sameMarkerData[0].targetClusterIndex;
     const markerIndex = sameMarkerData[0].markerIndex;
@@ -1320,7 +1340,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
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
 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)) {
@@ -1735,8 +1755,10 @@ function getFieldData(dataSource, fields) {
  * @returns {number} - Returns the number
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function checkShapeDataFields(dataSource, properties, dataPath, propertyPath, layer) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+function checkShapeDataFields(dataSource, properties, dataPath, propertyPath, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+layer) {
     if (!(isNullOrUndefined(properties))) {
         for (let i = 0; i < dataSource.length; i++) {
             const shapeDataPath = ((dataPath.indexOf('.') > -1) ? getValueFromObject(dataSource[i], dataPath) :
@@ -1757,10 +1779,9 @@ function checkShapeDataFields(dataSource, properties, dataPath, propertyPath, la
  *
  * @param {string} shapeData - Specifies the shape data
  * @param {string | string[]} shapePropertyPath -  Specifies the shape property path
- * @param {any} shape -  Specifies the shape
+ * @param {object} shape -  Specifies the shape
  * @returns {string} - Returns the string value
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function checkPropertyPath(shapeData, shapePropertyPath, shape) {
     if (!isNullOrUndefined(shapeData) && !isNullOrUndefined(shape)) {
         if (!isNullOrUndefined(shapePropertyPath)) {
@@ -1855,6 +1876,7 @@ function findMidPointOfPolygon(points, type, geometryType) {
         ySum = ySum + Math.abs(((startY + startY1) * (((startX * startY1) - (startX1 * startY)))));
     }
     sum = 0.5 * sum;
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     const pointValue = points.some(point => point.x < 5 && point.y < 5) && geometryType === 'Normal' ? 6 : 4;
     xSum = (1 / (pointValue * sum)) * xSum;
     ySum = (1 / (pointValue * sum)) * ySum;
@@ -1922,7 +1944,7 @@ function findMidPointOfPolygon(points, type, geometryType) {
 function isCustomPath(layerData) {
     let customPath = false;
     if (Object.prototype.toString.call(layerData) === '[object Array]') {
-        Array.prototype.forEach.call(layerData, (layer, index) => {
+        Array.prototype.forEach.call(layerData, (layer) => {
             if (!isNullOrUndefined(layer['geometry']) && layer['geometry']['type'] === 'Path') {
                 customPath = true;
             }
@@ -1936,6 +1958,9 @@ function isCustomPath(layerData) {
  * @param {number} maxWidth - Specifies the maximum width
  * @param {string} text - Specifies the text
  * @param {FontModel} font - Specifies the font
+ * @param {number} width - Specifies the width of text
+ * @param {boolean} isCanvasMeasure - checks the canvas measure
+ * @param {number[]} widthList - Specifies the width list
  * @returns {string} - Returns the string
  * @private
  */
@@ -2050,6 +2075,7 @@ function getTranslate(mapObject, layer, animate) {
     }
     if (mapObject.zoomSettings.shouldZoomInitially && mapObject.zoomSettings.enable) {
         mapObject.mapScaleValue = scaleFactor = zoomFactorValue = ((mapObject.zoomSettings.shouldZoomInitially || mapObject.enablePersistence) && mapObject.scale === 1)
+            // eslint-disable-next-line radix
             ? mapObject.scale : (isNullOrUndefined(mapObject.markerZoomFactor)) ? 1 : (mapObject.markerZoomedState ? mapObject.markerZoomFactor : parseInt(mapObject.scale.toString()));
         if (mapObject.markerZoomedState && mapObject.mapScaleValue !== mapObject.markerZoomFactor && !mapObject.enablePersistence) {
             mapObject.mapScaleValue = zoomFactorValue = mapObject.markerZoomFactor;
@@ -2407,9 +2433,9 @@ function Internalize(maps, value) {
 /**
  * Function to compile the template function for maps.
  *
- * @param {string} template - Specifies the template
+ * @param {string | Function} template - Specifies the template
  * @param {Maps} maps - Specifies the Maps instance.
- * @returns {Function} - Returns the function
+ * @returns {any} - Returns the template function
  * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2448,7 +2474,7 @@ function getElement(id) {
  *
  * @param {string} targetId - Specifies the target id
  * @param {Maps} map - Specifies the instance of the maps
- * @returns {any} - Returns the object
+ * @returns {object} - Returns the object
  * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2575,7 +2601,7 @@ function getTargetElement(layerIndex, name, enable, map) {
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createStyle(id, className, eventArgs) {
-    let styleEle = createElement('style', {
+    const styleEle = createElement('style', {
         id: id
     });
     styleEle.innerText = '.' + className + '{fill:'
@@ -2611,14 +2637,12 @@ function customizeStyle(id, className, eventArgs) {
  * @param {SelectionSettingsModel} selectionSettings - Specifies the selection settings
  * @param {Maps} map - Specifies the instance of the maps
  * @param {Element} targetElement - Specifies the target element
- * @param {any} shapeData - Specifies the shape data
- * @param {any} data - Specifies the data
+ * @param {object} shapeData - Specifies the shape data
+ * @param {object} data - Specifies the data
  * @returns {void}
  * @private
  */
-function triggerItemSelectionEvent(selectionSettings, map, targetElement, 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-shapeData, data) {
+function triggerItemSelectionEvent(selectionSettings, map, targetElement, shapeData, data) {
     const border = {
         color: selectionSettings.border.color,
         width: selectionSettings.border.width / map.scale,
@@ -2635,6 +2659,7 @@ shapeData, data) {
         data: data,
         maps: map
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     map.trigger('itemSelection', eventArgs, (observedArgs) => {
         eventArgs.border.opacity = isNullOrUndefined(selectionSettings.border.opacity) ? selectionSettings.opacity :
             selectionSettings.border.opacity;
@@ -2691,6 +2716,7 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius = 0)
                     ' ) scale(' + height + ')');
             }
         },
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         end: (model) => {
             element.setAttribute('transform', transform);
             if (!ele) {
@@ -2831,15 +2857,17 @@ function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element) {
 /**
  * @param {string} id - Specifies the id
  * @param {string} text - Specifies the text
- * @param {string} top - Specifies the top
- * @param {string} left - Specifies the left
+ * @param {number} top - Specifies the top
+ * @param {number} left - Specifies the left
  * @param {ZoomToolbarTooltipSettingsModel} settings - Specifies the tooltip settings.
  * @returns {void}
  * @private
  */
 function createTooltip(id, text, top, left, settings) {
     let tooltip = getElement(id);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const borderColor = getHexColor(settings.borderColor);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const fontColor = getHexColor(settings.fontColor);
     const style = 'top:' + top.toString() + 'px;' +
         'left:' + left.toString() + 'px;' +
@@ -2866,11 +2894,15 @@ function createTooltip(id, text, top, left, settings) {
     }
 }
 /**
+ * @param {string} color - Specifies the color
+ * @returns {any} - Returns the color in rgb
  * @private
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getHexColor(color) {
     if (color.indexOf('#') !== -1 && color.toLowerCase().indexOf('rgb') === -1) {
-        let colorArray = (/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i).exec(color);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const colorArray = (/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i).exec(color);
         return colorArray ? { r: parseInt(colorArray[1], 16), g: parseInt(colorArray[2], 16), b: parseInt(colorArray[3], 16) } : null;
     }
     else if (color.toLowerCase().indexOf('rgb') !== -1) {
@@ -3057,7 +3089,7 @@ function changeBorderWidth(element, index, scale, maps) {
             changeNavaigationLineWidth(childNode, index, scale, maps);
         }
         else if (childNode.id.indexOf('_Polygons_Group') > -1) {
-            for (var i = 0; i < childNode.childElementCount; i++) {
+            for (let i = 0; i < childNode.childElementCount; i++) {
                 // eslint-disable-next-line
                 const width = maps.layersCollection[index].polygonSettings.polygons[parseInt(childNode.children[i].id.split('_PolygonIndex_')[1])].borderWidth;
                 childNode.children[i].setAttribute('stroke-width', (width / scale).toString());
@@ -3066,7 +3098,6 @@ function changeBorderWidth(element, index, scale, maps) {
         else {
             let currentStroke;
             let value = 0;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
             const borderWidth = maps.layersCollection[index].shapeSettings.border.width;
             const circleRadius = maps.layersCollection[index].shapeSettings.circleRadius;
@@ -3267,13 +3298,12 @@ function zoomAnimate(element, delay, duration, point, scale, size, maps) {
  * @returns {void}
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function animate(element, delay, duration, process, end) {
     let start = null;
     // eslint-disable-next-line prefer-const
     let clearAnimation;
     const markerStyle = 'visibility:visible';
-    duration = animationMode === "Disable" ? 0 : duration;
+    duration = animationMode === 'Disable' ? 0 : duration;
     const startAnimation = (timestamp) => {
         if (!start) {
             start = timestamp;
@@ -3375,6 +3405,7 @@ function compareZoomFactor(scaleFactor, maps) {
  * @param {number} mapWidth - Specifies the width of the maps
  * @param {number} mapHeight - Specifies the height of the maps
  * @param {Maps} maps - Specifies the instance of the maps
+ * @param {boolean} isZoomToCoordinates - Checks for the zoom to coordinates
  * @returns {number} - Returns the scale factor
  * @private
  */
@@ -3416,7 +3447,7 @@ function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeigh
  * @returns {any} - Returns the data value
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
 function processResult(e) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let dataValue;
@@ -3789,7 +3820,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#A6A6A6',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: "#009900"
+                rectangleZoomBorderColor: '#009900'
             };
             break;
         case 'highcontrast':
@@ -3814,7 +3845,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#A6A6A6',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: "#009900"
+                rectangleZoomBorderColor: '#009900'
             };
             break;
         case 'bootstrap4':
@@ -3842,7 +3873,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#A6A6A6',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: "#009900"
+                rectangleZoomBorderColor: '#009900'
             };
             break;
         case 'tailwind':
@@ -3870,7 +3901,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#E5E7EB',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: "#009900"
+                rectangleZoomBorderColor: '#009900'
             };
             break;
         case 'tailwinddark':
@@ -3898,7 +3929,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#374151',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: "#009900"
+                rectangleZoomBorderColor: '#009900'
             };
             break;
         case 'bootstrap5':
@@ -3926,7 +3957,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#E9ECEF',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: "#009900"
+                rectangleZoomBorderColor: '#009900'
             };
             break;
         case 'bootstrap5dark':
@@ -3954,7 +3985,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#495057',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: "#009900"
+                rectangleZoomBorderColor: '#009900'
             };
             break;
         case 'fluent':
@@ -3982,7 +4013,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#F3F2F1',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: "#009900"
+                rectangleZoomBorderColor: '#009900'
             };
             break;
         case 'fluentdark':
@@ -4010,7 +4041,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#252423',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: "#009900"
+                rectangleZoomBorderColor: '#009900'
             };
             break;
         case 'material3':
@@ -4039,7 +4070,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#E7E0EC',
                 rectangleZoomFillColor: '#6750A4',
                 rectangleZoomFillOpacity: 0.24,
-                rectangleZoomBorderColor: "#6750A4"
+                rectangleZoomBorderColor: '#6750A4'
             };
             break;
         case 'material3dark':
@@ -4068,7 +4099,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#49454F',
                 rectangleZoomFillColor: '#D0BCFF',
                 rectangleZoomFillOpacity: 0.24,
-                rectangleZoomBorderColor: "#D0BCFF"
+                rectangleZoomBorderColor: '#D0BCFF'
             };
             break;
         default:
@@ -4093,7 +4124,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#A6A6A6',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: "#009900"
+                rectangleZoomBorderColor: '#009900'
             };
             break;
     }
@@ -5048,7 +5079,7 @@ __decorate$1([
  * Gets or sets the options to customize the markers in the maps.
  */
 class MarkerSettings extends MarkerBase {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
     constructor(parent, propName, defaultValue, isArray) {
         super(parent, propName, defaultValue, isArray);
     }
@@ -5437,8 +5468,12 @@ class BingMap {
  * ColorMapping class
  */
 class ColorMapping {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    /* eslint-disable @typescript-eslint/no-empty-function */
     constructor(maps) {
     }
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    /* eslint-enable @typescript-eslint/no-empty-function */
     /**
      * To get color based on shape settings.
      *
@@ -5864,7 +5899,7 @@ class LayerPanel {
         if (panel.mapObject.markerModule) {
             panel.mapObject.markerModule.markerRender(this.mapObject, panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
         }
-        panel.translateLayerElements(panel.layerObject, layerIndex);
+        panel.translateLayerElements(panel.layerObject);
         panel.layerGroup.appendChild(panel.layerObject);
     }
     processLayers(layer, layerIndex) {
@@ -5891,6 +5926,7 @@ class LayerPanel {
             cancel: false, name: layerRendering, index: layerIndex,
             layer: layer, maps: this.mapObject, visible: layer.visible
         };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         this.mapObject.trigger('layerRendering', eventArgs, (observedArgs) => {
             if (!eventArgs.cancel && eventArgs.visible) {
                 if (layer.layerType === 'OSM') {
@@ -6016,9 +6052,8 @@ class LayerPanel {
         }
         this.rectBounds = null;
         const shapeSettings = this.currentLayer.shapeSettings;
-        const bubbleSettings = this.currentLayer.bubbleSettings;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Array.prototype.forEach.call(renderData, (geometryData, index) => {
+        Array.prototype.forEach.call(renderData, (geometryData) => {
             if (!isNullOrUndefined(geometryData['geometry']) || !isNullOrUndefined(geometryData['coordinates'])) {
                 const type = !isNullOrUndefined(geometryData['geometry']) ? geometryData['geometry']['type'] : geometryData['type'];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6225,7 +6260,7 @@ class LayerPanel {
                                 const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (this.mapObject.isTileMap ? this.mapObject.scale : this.currentFactor);
                                 circleOptions = new CircleOption((shapeID + '_multiLine_' + index), eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                                 pathEle = this.mapObject.renderer.drawCircle(circleOptions);
-                                this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
+                                this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData);
                             });
                             break;
                         case 'Path':
@@ -6235,7 +6270,7 @@ class LayerPanel {
                             break;
                     }
                     if (!isNullOrUndefined(pathEle) && drawingType !== 'MultiPoint') {
-                        this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
+                        this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData);
                     }
                     if (i === this.currentLayer.layerData.length - 1) {
                         this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
@@ -6256,12 +6291,11 @@ class LayerPanel {
      * @param {Element} pathEle - Specifies the svg element.
      * @param {string} drawingType - Specifies the data type.
      * @param {any} currentShapeData - Specifies the layer of shapedata.
-     * @param {number} index - Specifies the tab index.
      * @returns {void}
      */
     pathAttributeCalculate(groupElement, pathEle, drawingType, 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    currentShapeData, index) {
+    currentShapeData) {
         const property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
             this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
         let properties;
@@ -6305,7 +6339,7 @@ class LayerPanel {
      *
      * @param {number} layerIndex - Specifies the layer index
      * @param {string[]} colors - Specifies the colors
-     * @param {Object[]} renderData - Specifies the render data
+     * @param {any[]} renderData - Specifies the render data
      * @param {HTMLElement} labelTemplateEle - Specifies the label template element
      * @returns {void}
      */
@@ -6314,7 +6348,8 @@ class LayerPanel {
     layerIndex, colors, renderData, labelTemplateEle) {
         let bubbleG;
         if (this.mapObject.polygonModule) {
-            this.groupElements.push(this.mapObject.polygonModule.polygonRender(this.mapObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor) : this.currentFactor)));
+            this.groupElements.push(this.mapObject.polygonModule.polygonRender(this.mapObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
+                : this.currentFactor)));
         }
         if (this.currentLayer.bubbleSettings.length && this.mapObject.bubbleModule) {
             const length = this.currentLayer.bubbleSettings.length;
@@ -6328,7 +6363,6 @@ class LayerPanel {
                 this.bubbleCalculation(bubble, range);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const bubbleDataSource = bubble.dataSource;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 this.mapObject.bubbleModule.bubbleCollection = [];
                 bubbleDataSource.map((bubbleData, i) => {
                     this.renderBubble(this.currentLayer, bubbleData, colors[i % colors.length], range, j, i, bubbleG, layerIndex, bubble);
@@ -6362,7 +6396,7 @@ class LayerPanel {
             this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor) :
                 this.currentFactor), null);
         }
-        this.translateLayerElements(this.layerObject, layerIndex);
+        this.translateLayerElements(this.layerObject);
         this.layerGroup.appendChild(this.layerObject);
     }
     /**
@@ -6411,6 +6445,8 @@ class LayerPanel {
      * @param {object} bubbleData - Specifies the bubble data
      * @param {string} color - Specifies the color
      * @param {number} range - Specifies the range
+     * @param {number} range.min - Specifies the minimum range
+     * @param {number} range.max - Specifies the maximum range
      * @param {number} bubbleIndex - Specifies the bubble index
      * @param {number} dataIndex - Specifies the data index
      * @param {number} group - Specifies the group
@@ -6433,9 +6469,9 @@ class LayerPanel {
      * To get the shape color from color mapping module
      *
      * @param {LayerSettingsModel} layer - Specifies the layer
-     * @param {object} shape - Specifies the shape
+     * @param {any} shape - Specifies the shape
      * @param {string} color - Specifies the color
-     * @returns {Object} - Returns the object
+     * @returns {any} - Returns the object
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getShapeColorMapping(layer, shape, color) {
@@ -6460,7 +6496,7 @@ class LayerPanel {
         switch (type.toLowerCase()) {
             case 'polygon':
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                newData = this.calculatePolygonBox(coordinates[0], data, properties);
+                newData = this.calculatePolygonBox(coordinates[0]);
                 if (newData.length > 0) {
                     newData['property'] = properties;
                     newData['type'] = type;
@@ -6474,7 +6510,7 @@ class LayerPanel {
                 for (let i = 0; i < coordinates.length; i++) {
                     for (let j = 0; j < coordinates[i].length; j++) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        newData = this.calculatePolygonBox(coordinates[i][j], data, properties);
+                        newData = this.calculatePolygonBox(coordinates[i][j]);
                         if (newData.length > 0) {
                             multiPolygonDatas.push(newData);
                         }
@@ -6618,7 +6654,7 @@ class LayerPanel {
         }
         return (Math.min(verFactor, horFactor));
     }
-    translateLayerElements(layerElement, index) {
+    translateLayerElements(layerElement) {
         let childNode;
         this.mapObject.translateType = 'layer';
         if (!isNullOrUndefined(this.mapObject.baseMapRectBounds)) {
@@ -6678,7 +6714,7 @@ class LayerPanel {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     calculateRectBounds(layerData) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Array.prototype.forEach.call(layerData, (obj, index) => {
+        Array.prototype.forEach.call(layerData, (obj) => {
             if (!isNullOrUndefined(obj['geometry']) || !isNullOrUndefined(obj['coordinates'])) {
                 const type = !isNullOrUndefined(obj['geometry']) ? obj['geometry']['type'] : obj['type'];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6690,13 +6726,13 @@ class LayerPanel {
                         break;
                     case 'multipolygon':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        coordinates.map((point, index) => {
+                        coordinates.map((point) => {
                             this.calculateRectBox(point[0]);
                         });
                         break;
                     case 'multilinestring':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        coordinates.map((multiPoint, index) => {
+                        coordinates.map((multiPoint) => {
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             multiPoint.map((point, index) => {
                                 this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
@@ -6723,7 +6759,7 @@ class LayerPanel {
         });
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    calculatePolygonBox(coordinates, data, properties) {
+    calculatePolygonBox(coordinates) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const newData = [];
         const bounds = this.mapObject.baseMapBounds;
@@ -6873,121 +6909,126 @@ class LayerPanel {
         }
     }
     arrangeTiles(type, x, y) {
-        const element = document.getElementById(this.mapObject.element.id + '_tile_parent');
-        const element1 = document.getElementById(this.mapObject.element.id + '_tiles');
         let timeOut;
         if (!isNullOrUndefined(type) && type !== 'Pan') {
             this.tileAnimation(type, x, y);
             timeOut = animationMode === 'Disable' ? 0 : (this.mapObject.layersCollection[0].animationDuration === 0 &&
                 animationMode === 'Enable') ? 1000 : this.mapObject.layersCollection[0].animationDuration;
         }
-        else {
-            timeOut = 0;
-        }
         if (this.mapObject.layers[this.mapObject.baseLayerIndex].layerType === 'GoogleStaticMap') {
             this.renderGoogleMap(this.mapObject.layers[0].key, this.mapObject.staticMapZoom);
         }
         else {
-            setTimeout(() => {
-                if (element) {
-                    element.style.zIndex = '1';
-                }
-                if (element1) {
-                    element1.style.zIndex = '0';
+            if (type === 'Pan') {
+                this.arrangeTilesLayer(type);
+            }
+            else {
+                setTimeout(() => {
+                    this.arrangeTilesLayer(type);
+                }, timeOut);
+            }
+        }
+    }
+    arrangeTilesLayer(type) {
+        const element = document.getElementById(this.mapObject.element.id + '_tile_parent');
+        const element1 = document.getElementById(this.mapObject.element.id + '_tiles');
+        if (element) {
+            element.style.zIndex = '1';
+        }
+        if (element1) {
+            element1.style.zIndex = '0';
+        }
+        let animateElement;
+        if (!document.getElementById(this.mapObject.element.id + '_animated_tiles') && element) {
+            animateElement = createElement('div', { id: this.mapObject.element.id + '_animated_tiles' });
+            element.appendChild(animateElement);
+        }
+        else {
+            if (type !== 'Pan' && element1 && element) {
+                element1.appendChild(element.children[0]);
+                if (!this.mapObject.isAddLayer && !isNullOrUndefined(document.getElementById(this.mapObject.element.id + '_animated_tiles'))) {
+                    document.getElementById(this.mapObject.element.id + '_animated_tiles').id =
+                        this.mapObject.element.id + '_animated_tiles_old';
                 }
-                let animateElement;
-                if (!document.getElementById(this.mapObject.element.id + '_animated_tiles') && element) {
-                    animateElement = createElement('div', { id: this.mapObject.element.id + '_animated_tiles' });
-                    element.appendChild(animateElement);
+                animateElement = createElement('div', { id: this.mapObject.element.id + '_animated_tiles' });
+                element.appendChild(animateElement);
+            }
+            else {
+                animateElement = element ? element.children[0] : null;
+            }
+        }
+        for (let id = 0; id < this.tiles.length; id++) {
+            const tile = this.tiles[id];
+            let imgElement = null;
+            const mapId = this.mapObject.element.id;
+            if (type === 'Pan') {
+                let child = document.getElementById(mapId + '_tile_' + id);
+                let isNewTile = false;
+                if (isNullOrUndefined(child)) {
+                    isNewTile = true;
+                    child = createElement('div', { id: mapId + '_tile_' + id });
+                    imgElement = createElement('img');
                 }
                 else {
-                    if (type !== 'Pan' && element1 && element) {
-                        element1.appendChild(element.children[0]);
-                        if (!this.mapObject.isAddLayer && !isNullOrUndefined(document.getElementById(this.mapObject.element.id + '_animated_tiles'))) {
-                            document.getElementById(this.mapObject.element.id + '_animated_tiles').id =
-                                this.mapObject.element.id + '_animated_tiles_old';
-                        }
-                        animateElement = createElement('div', { id: this.mapObject.element.id + '_animated_tiles' });
-                        element.appendChild(animateElement);
-                    }
-                    else {
-                        animateElement = element ? element.children[0] : null;
-                    }
+                    child.style.removeProperty('display');
+                    imgElement = child.children[0];
+                }
+                if (!isNewTile && imgElement && imgElement.src !== tile.src) {
+                    imgElement.src = tile.src;
+                }
+                child.style.position = 'absolute';
+                child.style.left = tile.left + 'px';
+                child.style.top = tile.top + 'px';
+                child.style.height = tile.height + 'px';
+                child.style.width = tile.width + 'px';
+                if (isNewTile) {
+                    imgElement.setAttribute('height', '256px');
+                    imgElement.setAttribute('width', '256px');
+                    imgElement.setAttribute('src', tile.src);
+                    imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
+                    imgElement.style.setProperty('user-select', 'none');
+                    child.appendChild(imgElement);
+                    animateElement.appendChild(child);
                 }
-                for (let id = 0; id < this.tiles.length; id++) {
-                    const tile = this.tiles[id];
-                    let imgElement = null;
-                    const mapId = this.mapObject.element.id;
-                    if (type === 'Pan') {
-                        let child = document.getElementById(mapId + '_tile_' + id);
-                        let isNewTile = false;
-                        if (isNullOrUndefined(child)) {
-                            isNewTile = true;
-                            child = createElement('div', { id: mapId + '_tile_' + id });
-                            imgElement = createElement('img');
-                        }
-                        else {
-                            child.style.removeProperty('display');
-                            imgElement = child.children[0];
-                        }
-                        if (!isNewTile && imgElement && imgElement.src !== tile.src) {
-                            imgElement.src = tile.src;
-                        }
-                        child.style.position = 'absolute';
-                        child.style.left = tile.left + 'px';
-                        child.style.top = tile.top + 'px';
-                        child.style.height = tile.height + 'px';
-                        child.style.width = tile.width + 'px';
-                        if (isNewTile) {
-                            imgElement.setAttribute('height', '256px');
-                            imgElement.setAttribute('width', '256px');
-                            imgElement.setAttribute('src', tile.src);
-                            imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
-                            imgElement.style.setProperty('user-select', 'none');
-                            child.appendChild(imgElement);
-                            animateElement.appendChild(child);
-                        }
-                    }
-                    else {
-                        imgElement = createElement('img');
-                        imgElement.setAttribute('height', '256px');
-                        imgElement.setAttribute('width', '256px');
-                        imgElement.setAttribute('src', tile.src);
-                        imgElement.style.setProperty('user-select', 'none');
-                        imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
-                        const child = createElement('div', { id: mapId + '_tile_' + id });
-                        child.style.position = 'absolute';
-                        child.style.left = tile.left + 'px';
-                        child.style.top = tile.top + 'px';
-                        child.style.height = tile.height + 'px';
-                        child.style.width = tile.width + 'px';
-                        child.appendChild(imgElement);
-                        if (animateElement) {
-                            animateElement.appendChild(child);
-                        }
-                    }
-                    if (id === (this.tiles.length - 1) && document.getElementById(this.mapObject.element.id + '_animated_tiles_old')) {
-                        removeElement(this.mapObject.element.id + '_animated_tiles_old');
+            }
+            else {
+                imgElement = createElement('img');
+                imgElement.setAttribute('height', '256px');
+                imgElement.setAttribute('width', '256px');
+                imgElement.setAttribute('src', tile.src);
+                imgElement.style.setProperty('user-select', 'none');
+                imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
+                const child = createElement('div', { id: mapId + '_tile_' + id });
+                child.style.position = 'absolute';
+                child.style.left = tile.left + 'px';
+                child.style.top = tile.top + 'px';
+                child.style.height = tile.height + 'px';
+                child.style.width = tile.width + 'px';
+                child.appendChild(imgElement);
+                if (animateElement) {
+                    animateElement.appendChild(child);
+                }
+            }
+            if (id === (this.tiles.length - 1) && document.getElementById(this.mapObject.element.id + '_animated_tiles_old')) {
+                removeElement(this.mapObject.element.id + '_animated_tiles_old');
+            }
+        }
+        if (!isNullOrUndefined(this.mapObject.currentTiles)) {
+            for (let l = this.tiles.length; l < animateElement.childElementCount; l++) {
+                let isExistingElement = false;
+                for (let a = 0; a < this.mapObject.currentTiles.childElementCount; a++) {
+                    if (!isExistingElement &&
+                        this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
+                        isExistingElement = true;
                     }
                 }
-                if (!isNullOrUndefined(this.mapObject.currentTiles)) {
-                    for (let l = this.tiles.length; l < animateElement.childElementCount; l++) {
-                        let isExistingElement = false;
-                        for (let a = 0; a < this.mapObject.currentTiles.childElementCount; a++) {
-                            if (!isExistingElement &&
-                                this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
-                                isExistingElement = true;
-                            }
-                        }
-                        if (isExistingElement) {
-                            animateElement.children[l].style.display = 'none';
-                        }
-                        else {
-                            animateElement.removeChild(animateElement.children[l]);
-                        }
-                    }
+                if (isExistingElement) {
+                    animateElement.children[l].style.display = 'none';
+                }
+                else {
+                    animateElement.removeChild(animateElement.children[l]);
                 }
-            }, timeOut);
+            }
         }
     }
     /**
@@ -7179,10 +7220,14 @@ class Annotations {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.map.renderReactTemplates();
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To create annotation elements
      *
+     * @param {HTMLElement} parentElement - Specifies the parent element in the map.
+     * @param {Annotation} annotation -  Specifies the options for customizing the annotation element in maps.
+     * @param {number} annotationIndex - Specifies the index of the annotation.
+     * @returns {void}
+     *
      * @private
      */
     createAnnotationTemplate(parentElement, annotation, annotationIndex) {
@@ -7193,7 +7238,6 @@ class Annotations {
         const map = this.map;
         let templateElement;
         const availSize = map.availableSize;
-        const id = map.element.id + '_Annotation_' + annotationIndex;
         const childElement = createElement('div', {
             id: map.element.id + '_Annotation_' + annotationIndex
         });
@@ -7202,6 +7246,7 @@ class Annotations {
             cancel: false, name: annotationRendering, content: annotation.content,
             annotation: annotation
         };
+        //eslint-disable-next-line @typescript-eslint/no-unused-vars
         this.map.trigger(annotationRendering, argsData, (annotationArgs) => {
             if (argsData.cancel) {
                 return;
@@ -7571,15 +7616,18 @@ let Maps = class Maps extends Component {
             }
         });
     }
-    /* eslint-disable @typescript-eslint/no-explicit-any */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     processAjaxRequest(layer, localAjax, type) {
         this.serverProcess['request']++;
         const fetchApiModule = new Fetch(localAjax.dataOptions, localAjax.type, localAjax.contentType);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         fetchApiModule.onSuccess = (args) => {
             if (!isNullOrUndefined(args.type) && args.type === 'application/octet-stream') {
                 const reader = new FileReader();
+                //eslint-disable-next-line @typescript-eslint/no-this-alias
                 const map = this;
-                reader.onload = function (data) {
+                // eslint-disable-next-line @typescript-eslint/tslint/config
+                reader.onload = function () {
                     args = JSON.parse(reader.result.toString());
                     map.processResponseJsonData('Fetch', args, layer, type);
                 };
@@ -7601,13 +7649,17 @@ let Maps = class Maps extends Component {
      * @returns {void}
      * @private
      */
-    processResponseJsonData(processType, data, layer, dataType) {
+    processResponseJsonData(processType, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data, layer, dataType) {
         this.serverProcess['response']++;
         if (processType) {
             if (dataType === 'ShapeData') {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 layer.shapeData = (processType === 'DataManager') ? processResult(data) : data;
             }
             else {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 layer.dataSource = (processType === 'DataManager') ? processResult(data) : data;
             }
         }
@@ -7746,12 +7798,14 @@ let Maps = class Maps extends Component {
     triggerZoomEvent() {
         let loadedArgs;
         const minMaxLatitudeLongitude = this.getMinMaxLatitudeLongitude();
+        // eslint-disable-next-line prefer-const
         loadedArgs = {
             maps: this, isResized: this.isResize, minLatitude: minMaxLatitudeLongitude.minLatitude,
             maxLatitude: minMaxLatitudeLongitude.maxLatitude, minLongitude: minMaxLatitudeLongitude.minLongitude,
             maxLongitude: minMaxLatitudeLongitude.maxLongitude, cancel: false, name: 'Loaded'
         };
         this.trigger('loaded', loadedArgs);
+        //eslint-enable @typescript-eslint/prefer-const
     }
     /**
      * To apply color to the initial selected marker
@@ -7759,7 +7813,7 @@ let Maps = class Maps extends Component {
      * @param {SelectionSettingsModel} selectionSettings - Specifies the selection settings
      * @param {Maps} map - Specifies the instance of the maps
      * @param {Element} targetElement - Specifies the target element
-     * @param {any} data - Specifies the data
+     * @param {object} data - Specifies the data
      * @returns {void}
      * @private
      */
@@ -7810,6 +7864,7 @@ let Maps = class Maps extends Component {
         const selectionSettings = markerSettings.selectionSettings;
         if (selectionSettings.enable) {
             for (let i = 0; i < markerSettings.dataSource['length']; i++) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const data = markerSettings.dataSource[i];
                 if (data['latitude'] === latitude && data['longitude'] === longitude) {
                     const targetId = this.element.id + '_' + 'LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex +
@@ -7847,11 +7902,11 @@ let Maps = class Maps extends Component {
         this.element.tabIndex = this.tabIndex;
     }
     setSecondaryElementPosition() {
-        let element = getElementByID(this.element.id + '_Secondary_Element');
-        let rect = this.element.getBoundingClientRect();
-        let svgElement = getElementByID(this.element.id + '_svg');
+        const element = getElementByID(this.element.id + '_Secondary_Element');
+        const rect = this.element.getBoundingClientRect();
+        const svgElement = getElementByID(this.element.id + '_svg');
         if (!isNullOrUndefined(svgElement)) {
-            let svgRect = svgElement.getBoundingClientRect();
+            const svgRect = svgElement.getBoundingClientRect();
             element.style.left = Math.max(svgRect.left - rect.left, 0) + 'px';
             element.style.top = Math.max(svgRect.top - rect.top, 0) + 'px';
         }
@@ -7931,8 +7986,10 @@ let Maps = class Maps extends Component {
         const mapsElement = document.getElementById(this.element.id);
         if (!isNullOrUndefined(mapsElement)) {
             const element = mapsElement.getBoundingClientRect();
-            let minPosition = this.isTileMap ? this.pointToLatLong((this.mapAreaRect.x - this.margin.left), -this.mapAreaRect.y) : this.getGeoLocation(0, (this.mapAreaRect.x + element.left), this.mapAreaRect.y);
-            let maxPosition = this.isTileMap ? this.pointToLatLong(this.mapAreaRect.width, (this.mapAreaRect.height - this.mapAreaRect.y)) :
+            const minPosition = this.isTileMap ?
+                this.pointToLatLong((this.mapAreaRect.x - this.margin.left), -this.mapAreaRect.y) :
+                this.getGeoLocation(0, (this.mapAreaRect.x + element.left), this.mapAreaRect.y);
+            const maxPosition = this.isTileMap ? this.pointToLatLong(this.mapAreaRect.width, (this.mapAreaRect.height - this.mapAreaRect.y)) :
                 this.getGeoLocation(0, (this.mapAreaRect.x + element.left + this.mapAreaRect.width), (this.mapAreaRect.y + this.mapAreaRect.height));
             const MinMaxLatitudeLongitude = {
                 minLatitude: minPosition.latitude, maxLatitude: maxPosition.latitude, minLongitude: minPosition.longitude,
@@ -7956,7 +8013,7 @@ let Maps = class Maps extends Component {
         const templateElements = document.getElementsByClassName(this.element.id + '_template');
         if (!isNullOrUndefined(templateElements) && templateElements.length > 0 &&
             getElementByID(this.element.id + '_Layer_Collections') && !this.isTileMap) {
-            Array.prototype.forEach.call(templateElements, (templateGroupEle, i) => {
+            Array.prototype.forEach.call(templateElements, (templateGroupEle) => {
                 let offSetLetValue = 0;
                 let offSetTopValue = 0;
                 if (!isNullOrUndefined(templateGroupEle) && templateGroupEle.childElementCount > 0) {
@@ -7968,9 +8025,9 @@ let Maps = class Maps extends Component {
                         offSetTopValue = this.isTileMap ? 0 : (layerOffset.top < elementOffset.top) ?
                             -(Math.abs(elementOffset.top - layerOffset.top)) : Math.abs(elementOffset.top - layerOffset.top);
                     }
-                    Array.prototype.forEach.call(templateGroupEle.childNodes, (currentTemplate, j) => {
+                    Array.prototype.forEach.call(templateGroupEle.childNodes, (currentTemplate) => {
                         if (currentTemplate.id.indexOf('Marker') !== -1) {
-                            if (currentTemplate.style.visibility != "hidden") {
+                            if (currentTemplate.style.visibility !== 'hidden') {
                                 const elementOffset = getElementByID(currentTemplate.id).getBoundingClientRect();
                                 currentTemplate.style.left = parseFloat(currentTemplate.style.left) - (this.isTileMap ? 0 : elementOffset.width / 2) + 'px';
                                 currentTemplate.style.top = parseFloat(currentTemplate.style.top) - (this.isTileMap ? 0 : elementOffset.height / 2) + 'px';
@@ -8028,6 +8085,7 @@ let Maps = class Maps extends Component {
     }
     findBaseAndSubLayers() {
         const baseIndex = this.baseLayerIndex;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const mainLayers = [];
         const subLayers = [];
         this.layersCollection = [];
@@ -8202,6 +8260,7 @@ let Maps = class Maps extends Component {
      * @returns {void}
      * @private
      */
+    //eslint-disable-next-line @typescript-eslint/no-unused-vars
     mouseLeaveOnMap(e) {
         if (document.getElementsByClassName('highlightMapStyle').length > 0 && this.legendModule) {
             this.legendModule.removeShapeHighlightCollection();
@@ -8227,7 +8286,7 @@ let Maps = class Maps extends Component {
     keyboardHighlightSelection(id, key) {
         const layerIndex = parseInt(id.split('_LayerIndex_')[1].split('_')[0], 10);
         const shapeIndex = parseInt(id.split('_shapeIndex_')[1].split('_')[0], 10);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        //eslint-disable-next-line @typescript-eslint/no-explicit-any
         const shapeData = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
             this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
         const dataIndex = parseInt(id.split('_dataIndex_')[1].split('_')[0], 10);
@@ -8356,11 +8415,13 @@ let Maps = class Maps extends Component {
             };
             if (this.onclick) {
                 eventArgs.name = onclick;
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 this.trigger('onclick', eventArgs, (mouseArgs) => {
                     this.clickHandler(e, eventArgs, targetEle);
                 });
             }
             else {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 this.trigger('click', eventArgs, (mouseArgs) => {
                     this.clickHandler(e, eventArgs, targetEle);
                 });
@@ -8405,7 +8466,7 @@ let Maps = class Maps extends Component {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getMarkerClickLocation(pageX, pageY, x, y, marker$$1, isDragEnd) {
-        document.getElementById(this.element.id + "_svg").style.cursor = 'grabbing';
+        document.getElementById(this.element.id + '_svg').style.cursor = 'grabbing';
         const targetElement = getElement(marker$$1.targetId);
         let latLongValue = this.getClickLocation(marker$$1.targetId, pageX, pageY, targetElement, x, y);
         const location = (this.isTileMap) ? convertTileLatLongToPoint(new MapLocation(latLongValue.longitude, latLongValue.latitude), this.tileZoomLevel, this.tileTranslatePoint, true) : convertGeoToPoint(latLongValue.latitude, latLongValue.longitude, this.mapLayerPanel.currentFactor, this.layersCollection[marker$$1.layerIndex], this);
@@ -8424,9 +8485,24 @@ let Maps = class Maps extends Component {
         }
         return latLongValue;
     }
-    /** @private */
+    /**
+     * Gets the location of the mouse click
+     *
+     * @param {string} targetId - Specifies the ID for the target.
+     * @param {number} pageX - Defines the page X position.
+     * @param {number} pageY - Defines the page Y position.
+     * @param {HTMLElement} targetElement - Specifies the target element on the event.
+     * @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
+     *
+     * @private
+     *
+     */
     getClickLocation(targetId, pageX, pageY, targetElement, x, y, type) {
         let layerIndex = 0;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let latLongValue;
         if (targetId.indexOf('_LayerIndex_') !== -1 && !this.isTileMap && (!isNullOrUndefined(type) ||
             ((parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
@@ -8434,6 +8510,7 @@ let Maps = class Maps extends Component {
             layerIndex = parseFloat(targetId.split('_LayerIndex_')[1].split('_')[0]);
             if (this.layers[layerIndex].geometryType === 'Normal') {
                 if (targetId.indexOf('_shapeIndex_') > -1) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const immediateParent = targetElement.parentElement;
                     const parentElement = immediateParent.id.indexOf('_Point_Group') > -1 || immediateParent.id.indexOf('_LineString_Group') > -1
                         || immediateParent.id.indexOf('_MultiLineString_Group') > -1 || immediateParent.id.indexOf('_Polygon_Group') > -1 ?
@@ -8447,9 +8524,11 @@ let Maps = class Maps extends Component {
                         longitude: Math.abs((location.x / zoomScaleValue) + this.baseMapBounds.longitude.min)
                     };
                     if (this.baseMapBounds.longitude.min < 0 && minLongitude > location.x) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         latLongValue.longitude = -latLongValue.longitude;
                     }
                     if (this.baseMapBounds.latitude.min < 0 && minLatitude > location.y) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         latLongValue.latitude = -latLongValue.latitude;
                     }
                 }
@@ -8457,6 +8536,7 @@ let Maps = class Maps extends Component {
                     const markerIndex = parseInt(targetId.split('_MarkerIndex_')[1].split('_')[0], 10);
                     const dataIndex = parseInt(targetId.split('_dataIndex_')[1].split('_')[0], 10);
                     if (!isNaN(markerIndex) && !isNaN(dataIndex)) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const dataObject = this.layers[layerIndex].markerSettings[markerIndex].dataSource[dataIndex];
                         latLongValue = { latitude: dataObject['latitude'], longitude: dataObject.longitude };
                     }
@@ -8471,13 +8551,17 @@ let Maps = class Maps extends Component {
                     const minLongitude = Math.abs((-this.baseMapBounds.longitude.min) * this.mapLayerPanel.currentFactor);
                     const minLatitude = Math.abs(this.baseMapBounds.latitude.max * this.mapLayerPanel.currentFactor);
                     latLongValue = {
-                        latitude: Math.abs(this.baseMapBounds.latitude.max - (location.y / (this.mapLayerPanel.currentFactor * this.scale))),
-                        longitude: Math.abs((location.x / (this.mapLayerPanel.currentFactor * this.scale)) + this.baseMapBounds.longitude.min)
+                        latitude: Math.abs(this.baseMapBounds.latitude.max
+                            - (location.y / (this.mapLayerPanel.currentFactor * this.scale))),
+                        longitude: Math.abs((location.x / (this.mapLayerPanel.currentFactor * this.scale))
+                            + this.baseMapBounds.longitude.min)
                     };
                     if (this.baseMapBounds.longitude.min < 0 && minLongitude > location.x) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         latLongValue.longitude = -latLongValue.longitude;
                     }
                     if (this.baseMapBounds.latitude.min < 0 && minLatitude > location.y) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         latLongValue.latitude = -latLongValue.latitude;
                     }
                 }
@@ -8513,25 +8597,17 @@ let Maps = class Maps extends Component {
      * @private
      */
     mouseEndOnMap(e) {
-        const targetEle = e.target;
-        const targetId = targetEle.id;
         let pageX;
-        let latitude = null;
-        let longitude = null;
         let pageY;
-        let target;
         let touchArg;
         let layerX = 0;
         let layerY = 0;
-        const rect = this.element.getBoundingClientRect();
-        const element = e.target;
         if (e.type.indexOf('touch') !== -1) {
             this.isTouch = true;
             touchArg = e;
             layerX = pageX = touchArg.changedTouches[0].pageX;
             pageY = touchArg.changedTouches[0].pageY;
             layerY = pageY - (this.isTileMap ? 10 : 0);
-            target = touchArg.target;
             this.mouseClickEvent = { x: pageX, y: pageY };
         }
         else {
@@ -8540,19 +8616,11 @@ let Maps = class Maps extends Component {
             pageY = e.pageY;
             layerX = e['layerX'];
             layerY = e['layerY'] - (this.isTileMap ? 10 : 0);
-            target = e.target;
         }
         if (this.isTileMap) {
             this.removeTileMap();
         }
         if (this.isTouch) {
-            if (targetEle.id.indexOf('_ToolBar') === -1) {
-                const latLongValue = this.getClickLocation(targetId, pageX, pageY, targetEle, pageX, pageY);
-                if (!isNullOrUndefined(latLongValue)) {
-                    latitude = latLongValue.latitude;
-                    longitude = latLongValue.longitude;
-                }
-            }
             this.titleTooltip(e, pageX, pageY, true);
             if (!isNullOrUndefined(this.legendModule)) {
                 this.legendTooltip(e, e.pageX, e.pageY, true);
@@ -8563,12 +8631,13 @@ let Maps = class Maps extends Component {
             e.preventDefault();
         }
         if (!isNullOrUndefined(this.markerDragArgument)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const marker$$1 = this.markerDragArgument;
             this.mouseClickEvent['x'] = this.mouseDownEvent['x'];
             this.mouseClickEvent['y'] = this.mouseDownEvent['y'];
             const latLongValue = this.getMarkerClickLocation(pageX, pageY, layerX, layerY, this.markerDragArgument, true);
             const markerObject = this.layers[marker$$1.layerIndex].markerSettings[marker$$1.markerIndex];
-            document.getElementById(this.element.id + "_svg").style.cursor = markerObject.enableDrag ? 'pointer' : 'grabbing';
+            document.getElementById(this.element.id + '_svg').style.cursor = markerObject.enableDrag ? 'pointer' : 'grabbing';
             const dragEventArgs = {
                 name: 'markerDragEnd', x: pageX, y: pageY,
                 latitude: latLongValue.latitude, longitude: latLongValue.longitude,
@@ -8595,7 +8664,7 @@ let Maps = class Maps extends Component {
             this.trigger('markerDragEnd', dragEventArgs);
         }
         else {
-            document.getElementById(this.element.id + "_svg").style.cursor = 'auto';
+            document.getElementById(this.element.id + '_svg').style.cursor = 'auto';
         }
         if (this.zoomModule && this.isDevice) {
             this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.scale, this.element.id + '_Zooming_');
@@ -8612,13 +8681,14 @@ let Maps = class Maps extends Component {
      */
     mouseDownOnMap(e) {
         this.mouseDownEvent = { x: e.x, y: e.y };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (e.type.indexOf('touch') !== -1 && e.changedTouches) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.mouseDownEvent = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY };
         }
         if (this.isDevice && !isNullOrUndefined(this.mapsTooltipModule)) {
             this.mapsTooltipModule.renderTooltip(e);
         }
-        const rect = this.element.getBoundingClientRect();
         const element = e.target;
         this.markerDragId = element.id;
         const animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
@@ -8649,7 +8719,7 @@ let Maps = class Maps extends Component {
     mergeCluster() {
         if (this.markerModule && (this.markerModule.sameMarkerData.length > 0) &&
             (this.zoomModule ? this.zoomModule.isSingleClick : true)) {
-            mergeSeparateCluster(this.markerModule.sameMarkerData, this, getElement(this.element.id + '_Markers_Group'));
+            mergeSeparateCluster(this.markerModule.sameMarkerData, this);
             this.markerModule.sameMarkerData = [];
         }
     }
@@ -8690,6 +8760,7 @@ let Maps = class Maps extends Component {
         const targetElement = e.target;
         const targetId = targetElement.id;
         let layerIndex = 0;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let latLongValue;
         let latitude = null;
         let longitude = null;
@@ -8735,8 +8806,8 @@ let Maps = class Maps extends Component {
         if (this.bubbleModule) {
             this.bubbleModule.bubbleMove(e);
         }
-        if (target.id.indexOf('MarkerIndex') == -1) {
-            document.getElementById(this.element.id + "_svg").style.cursor = 'auto';
+        if (target.id.indexOf('MarkerIndex') === -1) {
+            document.getElementById(this.element.id + '_svg').style.cursor = 'auto';
         }
         this.onMouseMove(e);
         this.notify(Browser.touchMoveEvent, e);
@@ -8756,7 +8827,7 @@ let Maps = class Maps extends Component {
         let touches = null;
         let layerX = 0;
         let layerY = 0;
-        if (e.type.indexOf('touch') == -1) {
+        if (e.type.indexOf('touch') === -1) {
             pageX = e.pageX;
             pageY = e.pageY;
             layerX = e['layerX'];
@@ -8772,6 +8843,7 @@ let Maps = class Maps extends Component {
             layerY = pageY = touches[0].clientY - (this.isTileMap ? 10 : 0);
         }
         if (!isNullOrUndefined(this.markerDragArgument)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const marker$$1 = this.markerDragArgument;
             this.mouseClickEvent['x'] = this.mouseDownEvent['x'];
             this.mouseClickEvent['y'] = this.mouseDownEvent['y'];
@@ -8787,6 +8859,7 @@ let Maps = class Maps extends Component {
         let legendText;
         let page = this.legendModule.currentPage;
         let legendIndex = event.target.id.split('_Index_')[1];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let collection;
         page = this.legendModule.totalPages.length <= this.legendModule.currentPage
             ? this.legendModule.totalPages.length - 1 : this.legendModule.currentPage < 0 ?
@@ -8829,6 +8902,7 @@ let Maps = class Maps extends Component {
      *
      * @param e - Specifies the arguments of window resize event.
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     mapsOnResize(e) {
         if (!this.isDestroyed && !this.isExportInitialTileMap) {
             this.isResize = this.isReset = true;
@@ -8862,6 +8936,8 @@ let Maps = class Maps extends Component {
      * This method is used to zoom the map by specifying the center position.
      *
      * @param {number} centerPosition - Specifies the location of the maps to be zoomed as geographical coordinates.
+     * @param {number} centerPosition.longitude - Specifies the longitude of the location to be zoomed.
+     * @param {number} centerPosition.latitude - Specifies the latitude of the location to be zoomed.
      * @param {number} zoomFactor - Specifies the zoom factor for the maps.
      * @returns {void}
      */
@@ -9009,9 +9085,11 @@ let Maps = class Maps extends Component {
                 let dataIndex;
                 let shapeIndex;
                 let indexValue;
+                /* eslint-disable @typescript-eslint/no-explicit-any */
                 let shapeDataValue;
                 let data;
                 const shapeData = this.layers[layerIndex].shapeData['features'];
+                /* eslint-enable @typescript-eslint/no-explicit-any */
                 for (let i = 0; i < shapeData.length; i++) {
                     for (let j = 0; j < popertyNameArray.length; j++) {
                         const propertyName = !isNullOrUndefined(shapeData[i]['properties'][popertyNameArray[j]])
@@ -9021,7 +9099,9 @@ let Maps = class Maps extends Component {
                         let k;
                         if (propertyName === shapeName) {
                             if (!isNullOrUndefined(this.layers[layerIndex].shapeSettings.colorValuePath)) {
-                                k = checkShapeDataFields(this.layers[layerIndex].dataSource, shapeData[i]['properties'], this.layers[layerIndex].shapeDataPath, this.layers[layerIndex].shapePropertyPath, this.layers[layerIndex]);
+                                k = checkShapeDataFields(
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                this.layers[layerIndex].dataSource, shapeData[i]['properties'], this.layers[layerIndex].shapeDataPath, this.layers[layerIndex].shapePropertyPath, this.layers[layerIndex]);
                             }
                             const baseLayer = this.layers[layerIndex];
                             if (this.baseLayerIndex >= 0 && baseLayer.isBaseLayer) {
@@ -9302,11 +9382,6 @@ let Maps = class Maps extends Component {
             let isMarker = false;
             let isLayer = false;
             let isStaticMapType = false;
-            let layerEle;
-            if (newProp['layers']) {
-                const newLayerLength = Object.keys(newProp['layers']).length;
-                layerEle = document.getElementById(this.element.id + '_LayerIndex_' + (newLayerLength - 1));
-            }
             for (const prop of Object.keys(newProp)) {
                 switch (prop) {
                     case 'background':
@@ -9571,6 +9646,8 @@ let Maps = class Maps extends Component {
     }
     /**
      * To find marker visibility
+     *
+     * @returns {boolean} - Returns whether the bubble is visible or not.
      */
     isBubbleVisible() {
         let isVisible = false;
@@ -9625,12 +9702,14 @@ let Maps = class Maps extends Component {
                 allowDownload = true;
             }
             if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
-                return new Promise((resolve, reject) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                return new Promise((resolve) => {
                     resolve(this.imageExportModule.export(this, type, fileName, allowDownload));
                 });
             }
             else if ((this.allowPdfExport) && (this.pdfExportModule)) {
-                return new Promise((resolve, reject) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                return new Promise((resolve) => {
                     resolve(this.pdfExportModule.export(this, type, fileName, allowDownload, orientation));
                 });
             }
@@ -9646,10 +9725,11 @@ let Maps = class Maps extends Component {
     getBingUrlTemplate(url) {
         let promise;
         if (!this.isDestroyed) {
-            promise = new Promise((resolve, reject) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            promise = new Promise((resolve) => {
                 const fetchApi = new Fetch({
                     url: url
-                });
+                }); // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 fetchApi.onSuccess = (json) => {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const resource = json['resourceSets'][0]['resources'][0];
@@ -9669,7 +9749,7 @@ let Maps = class Maps extends Component {
      * @param {boolean} istooltipVisible - Specifies whether the tooltip is visible or not.
      * @param {boolean} isSelection - Specifies whether the shape is selectd or not.
      * @param {boolean} isHighlight - Specfies whether the shape is highlighted or not.
-     * @returns {boolean} - Returns the boolean value
+     * @returns {object} - Returns the boolean values in object.
      */
     findVisibleLayers(layers, isLayerVisible = false, isBubblevisible = false, istooltipVisible = false, isSelection = false, isHighlight = false) {
         let bubbles;
@@ -9681,11 +9761,13 @@ let Maps = class Maps extends Component {
                 bubbles = layer.bubbleSettings;
                 markers = layer.markerSettings;
                 polygonSetting = layer.polygonSettings;
-                let navigationLine = layer.navigationLineSettings;
+                const navigationLine = layer.navigationLineSettings;
                 for (const navigation of navigationLine) {
                     if (navigation.visible) {
-                        isSelection = (!isNullOrUndefined(navigation.highlightSettings) && navigation.highlightSettings.enable) || isSelection;
-                        isHighlight = (!isNullOrUndefined(navigation.selectionSettings) && navigation.selectionSettings.enable) || isHighlight;
+                        isSelection = (!isNullOrUndefined(navigation.highlightSettings) &&
+                            navigation.highlightSettings.enable) || isSelection;
+                        isHighlight = (!isNullOrUndefined(navigation.selectionSettings) &&
+                            navigation.selectionSettings.enable) || isHighlight;
                     }
                 }
                 for (const polygon of polygonSetting.polygons) {
@@ -9744,6 +9826,7 @@ let Maps = class Maps extends Component {
             const pageX = x - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft : 0);
             const pageY = y - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop : 0);
             const currentLayer = this.layersCollection[layerIndex];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const translate = getTranslate(this, currentLayer, false);
             const translatePoint = translate['location'];
             const translatePointX = translatePoint.x * this.scale;
@@ -9773,6 +9856,7 @@ let Maps = class Maps extends Component {
         if (!this.isDestroyed) {
             const container = document.getElementById(this.element.id);
             const ele = document.getElementById(this.element.id + '_tile_parent');
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - (isNullOrUndefined(this.markerDragArgument) ? container.offsetLeft : 0)), y + this.mapAreaRect.y - (ele.offsetTop - (isNullOrUndefined(this.markerDragArgument) ? container.offsetTop : 0)));
             latitude = latLong['latitude'];
             longitude = latLong['longitude'];
@@ -9986,21 +10070,33 @@ class Bubble {
     constructor(maps) {
         /**
          * Bubble Id for current layer
+         *
          * @private
          */
         this.id = '';
         this.maps = maps;
         this.bubbleCollection = [];
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To render bubble
      *
+     * @param {BubbleSettingsModel} bubbleSettings - Specifies the bubble data to be rendered
+     * @param {object} shapeData - Specifies the data about the shape
+     * @param {string} color - Specifies the color of the bubble
+     * @param {number} range - Specifies the range of the bubble
+     * @param {number} range.min - Specifies the minimum range of the bubble
+     * @param {number} range.max - Specifies the maximum range of the bubble
+     * @param {number} bubbleIndex - Specifies the index of the bubble
+     * @param {number} dataIndex - Specifies the index of the data
+     * @param {number} layerIndex - Specifies the index of the layer
+     * @param {LayerSettings} layer - Specifies the layer data
+     * @param {Element} group - Specifies the element group
+     * @param {string} bubbleID - Specifies the ID of the bubble
+     * @returns {void}
+     *
      * @private
      */
-    renderBubble(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    bubbleSettings, shapeData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, bubbleID) {
+    renderBubble(bubbleSettings, shapeData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, bubbleID) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const layerData = layer.layerData;
         const colorValuePath = bubbleSettings.colorValuePath;
@@ -10099,6 +10195,7 @@ class Bubble {
                     return;
                 }
             }
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             this.maps.trigger('bubbleRendering', eventArgs, (bubbleArgs) => {
                 if (eventArgs.cancel) {
                     return;
@@ -10137,7 +10234,9 @@ class Bubble {
                 const bubbleDataSource = bubbleSettings.dataSource;
                 const scale = translate['scale'];
                 const transPoint = translate['location'];
-                const position = new MapLocation((this.maps.isTileMap ? ((eventArgs.cx + this.maps.translatePoint.x) * this.maps.tileZoomLevel) : ((eventArgs.cx + transPoint.x) * scale)), (this.maps.isTileMap ? ((eventArgs.cy + this.maps.translatePoint.y) * this.maps.tileZoomLevel) : ((eventArgs.cy + transPoint.y) * scale)));
+                const position = new MapLocation((this.maps.isTileMap ? ((eventArgs.cx + this.maps.translatePoint.x) * this.maps.tileZoomLevel)
+                    : ((eventArgs.cx + transPoint.x) * scale)), (this.maps.isTileMap ? ((eventArgs.cy + this.maps.translatePoint.y) * this.maps.tileZoomLevel)
+                    : ((eventArgs.cy + transPoint.y) * scale)));
                 bubbleElement.setAttribute('transform', 'translate( ' + (position.x) + ' ' + (position.y) + ' )');
                 const bubble = (bubbleDataSource.length - 1) === dataIndex ? 'bubble' : null;
                 if (bubbleSettings.bubbleType === 'Square') {
@@ -10310,6 +10409,7 @@ class Marker {
                     border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
                     shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
                 };
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 maps.trigger('markerRendering', eventArgs, (MarkerArgs) => {
                     eventArgs = markerColorChoose(eventArgs, data);
                     eventArgs = markerShapeChoose(eventArgs, data);
@@ -10533,6 +10633,7 @@ class Marker {
     }
     /**
      * To check and trigger marker click event
+     *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
      * @private
@@ -10553,7 +10654,7 @@ class Marker {
             return;
         }
         if (options.marker.enableDrag) {
-            document.getElementById(this.maps.element.id + "_svg").style.cursor = 'grabbing';
+            document.getElementById(this.maps.element.id + '_svg').style.cursor = 'grabbing';
         }
         const eventArgs = {
             cancel: false, name: markerClick, data: options.data, maps: this.maps,
@@ -10570,7 +10671,7 @@ class Marker {
             const dataIndex = parseInt(target.split('_dataIndex_')[1].split('_')[0], 10);
             const marker$$1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
             if (this.sameMarkerData.length > 0) {
-                isCluster = (this.sameMarkerData[0].data.filter((el) => { return (el['index'] == dataIndex); })).length > 0 &&
+                isCluster = (this.sameMarkerData[0].data.filter((el) => { return (el['index'] === dataIndex); })).length > 0 &&
                     this.sameMarkerData[0].layerIndex === layerIndex && this.sameMarkerData[0].markerIndex === markerIndex;
             }
             if (!isCluster) {
@@ -10585,7 +10686,8 @@ class Marker {
                     targetId: target, x: e.clientX, y: e.clientY,
                     latitude: options.data['latitude'] || options.data['Latitude'],
                     longitude: options.data['longitude'] || options.data['Longitude'],
-                    shape: isNullOrUndefined(marker$$1.shapeValuePath) ? marker$$1.shape : marker$$1.dataSource[dataIndex][marker$$1.shapeValuePath],
+                    shape: isNullOrUndefined(marker$$1.shapeValuePath) ? marker$$1.shape
+                        : marker$$1.dataSource[dataIndex][marker$$1.shapeValuePath],
                     layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex
                 };
             }
@@ -10593,6 +10695,7 @@ class Marker {
     }
     /**
      * To check and trigger Cluster click event
+     *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
      * @private
@@ -10613,7 +10716,7 @@ class Marker {
             }
             if (this.sameMarkerData.length > 0 && !this.maps.markerClusterExpandCheck) {
                 this.maps.markerClusterExpandCheck = true;
-                mergeSeparateCluster(this.sameMarkerData, this.maps, this.markerSVGObject);
+                mergeSeparateCluster(this.sameMarkerData, this.maps);
             }
             else {
                 this.sameMarkerData = options.clusterCollection;
@@ -10633,7 +10736,7 @@ class Marker {
      * To get marker from target id
      *
      * @param {string} target - Specifies the target
-     * @returns {string} - Returns the string
+     * @returns {object} - Returns the marker, data, clusterCollection, markCollection
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getMarker(target) {
@@ -10701,7 +10804,7 @@ class Marker {
             return;
         }
         if (options.marker.enableDrag) {
-            document.getElementById(this.maps.element.id + "_svg").style.cursor = isNullOrUndefined(this.maps.markerDragArgument) ?
+            document.getElementById(this.maps.element.id + '_svg').style.cursor = isNullOrUndefined(this.maps.markerDragArgument) ?
                 'pointer' : 'grabbing';
         }
         const eventArgs = {
@@ -10735,7 +10838,10 @@ class Marker {
         };
         this.maps.trigger(markerClusterMouseMove, eventArgs);
     }
-    /** @private */
+    /** @private
+     *
+     * @returns {void}
+     */
     initializeMarkerClusterList() {
         for (let i = 0; i < this.maps.layers.length; i++) {
             this.initialMarkerCluster[i] = [];
@@ -10770,8 +10876,12 @@ class Marker {
  * When injected, this module will be used to render polygon shapes over the Maps.
  */
 class Polygon {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    /* eslint-disable @typescript-eslint/no-empty-function */
     constructor(maps) {
     }
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    /* eslint-enable @typescript-eslint/no-empty-function */
     /**
      * To render polygon for maps
      *
@@ -10790,7 +10900,6 @@ class Polygon {
             const polygonSVGObject = maps.renderer.createGroup({
                 id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group_' + polygonIndex
             });
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const polygonData = polygonSetting.points;
             const path = calculatePolygonPath(maps, factor, currentLayer, polygonData);
             const pathOptions = new PathOption(maps.element.id + '_LayerIndex_' + layerIndex + '_PolygonIndex_' + polygonIndex, polygonSetting.fill, (polygonSetting.borderWidth / factor), polygonSetting.borderColor, polygonSetting.opacity, polygonSetting.borderOpacity, '', path);
@@ -10815,6 +10924,7 @@ class Polygon {
      * @returns {void}
      * @private
      */
+    //eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() {
     }
 }
@@ -10853,7 +10963,7 @@ class DataLabel {
      *
      * @param {LayerSettings} layer - Specifies the layer settings
      * @param {number} layerIndex - Specifies the layer index.
-     * @param {any} shape - Specifies the shape.
+     * @param {object} shape - Specifies the shape.
      * @param {any[]} layerData - Specifies the layer data.
      * @param {Element} group Specifies the element.
      * @param {HTMLElement} labelTemplateElement - Specifies the template element.
@@ -10862,9 +10972,7 @@ class DataLabel {
      * @returns {void}
      * @private
      */
-    renderLabel(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    layer, layerIndex, shape, 
+    renderLabel(layer, layerIndex, shape, 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     layerData, group, labelTemplateElement, index, intersect) {
         const dataLabel = layer.dataLabelSettings;
@@ -11066,7 +11174,7 @@ class DataLabel {
                     const templateElement = templateFn ? templateFn(!isNullOrUndefined(datasrcObj) ?
                         datasrcObj : shapeData['properties'], this.maps, eventargs.template, this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                     templateElement.innerHTML = !templateFn ? eventargs.template : '';
-                    labelElement = convertElementFromLabel(templateElement, labelId, !isNullOrUndefined(datasrcObj) ? datasrcObj : shapeData['properties'], index, this.maps);
+                    labelElement = convertElementFromLabel(templateElement, labelId, !isNullOrUndefined(datasrcObj) ? datasrcObj : shapeData['properties']);
                     if (this.maps.isTileMap) {
                         labelElement.style.left = (((location['x'] + transPoint['x']) * scale) - (textSize['width'] / 2)) + 'px';
                         labelElement.style.top = (((location['y'] + transPoint['y']) * scale) - textSize['height']) + 'px';
@@ -11220,7 +11328,7 @@ class DataLabel {
                     element.setAttribute(isRect ? 'fill-opacity' : 'opacity', (opacity * height).toString());
                 }
             },
-            end: (model) => {
+            end: () => {
                 element.style.visibility = 'visible';
                 element.setAttribute(isRect ? 'fill-opacity' : 'opacity', opacity.toString());
             }
@@ -11387,6 +11495,7 @@ class NavigationLine {
                     pathOption = new PathOption(arcId, 'none', width, color, 1, 1, dashArray, d);
                     navigationEle = this.maps.renderer.drawPath(pathOption);
                     if (!isNullOrUndefined(arrowPosition)) {
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         const position = (arrowPosition === 'Start') ? navigationEle.setAttribute('marker-start', startArrow)
                             : navigationEle.setAttribute('marker-end', endArrow);
                     }
@@ -11783,9 +11892,9 @@ class Legend {
      * Get the legend collections
      *
      * @param {number} layerIndex - Specifies the layer index
-     * @param {object[]} layerData - Specifies the layer data
+     * @param {any[]} layerData - Specifies the layer data
      * @param {ColorMappingSettings[]} colorMapping - Specifies the color mapping
-     * @param {object[]} dataSource - Specifies the data source
+     * @param {any[]} dataSource - Specifies the data source
      * @param {string} dataPath - Specifies the data path
      * @param {string} colorValuePath - Specifies the color value path
      * @param {string | string[]} propertyPath - Specifies the property path
@@ -11827,6 +11936,7 @@ class Legend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To draw the legend shape and text.
+     *
      * @private
      */
     drawLegend() {
@@ -11871,7 +11981,7 @@ class Legend {
         }
     }
     /**
-     * @param {string} page - Specifies the legend page.
+     * @param {number} page - Specifies the legend page.
      * @returns {void}
      * @private
      */
@@ -11895,8 +12005,6 @@ class Legend {
                 const legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
                 let legendText = collection['DisplayText'];
                 const pagingArrowPadding = 4;
-                const shape = ((legend.type === 'Markers') ? ((isNullOrUndefined(collection['ImageSrc'])) ?
-                    legend.shape : 'Image') : collection['legendShape']);
                 const strokeColor = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
                     || legend.shape === 'Cross') ? isNullOrUndefined(legend.fill) ? '#000000' : legend.fill : shapeBorder.color;
                 const strokeWidth = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
@@ -12281,9 +12389,7 @@ class Legend {
             }
         }
     }
-    shapeHighLightAndSelection(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    targetElement, data, module, getValue, layerIndex) {
+    shapeHighLightAndSelection(targetElement, data, module, getValue, layerIndex) {
         if (data !== undefined) {
             this.updateLegendElement();
             this.shapeToggled = true;
@@ -12709,9 +12815,12 @@ class Legend {
         }
         if (legendTitle) {
             textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
-            textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily : this.maps.themeStyle.fontFamily;
-            textStyle.size = !isNullOrUndefined(textStyle.size) ? textStyle.size : this.maps.themeStyle.subTitleFontSize || Theme.legendTitleFont.size;
-            textStyle.fontWeight = !isNullOrUndefined(textStyle.fontWeight) ? textStyle.fontWeight : this.maps.themeStyle.titleFontWeight || Theme.legendTitleFont.fontWeight;
+            textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily
+                : this.maps.themeStyle.fontFamily;
+            textStyle.size = !isNullOrUndefined(textStyle.size) ? textStyle.size
+                : this.maps.themeStyle.subTitleFontSize || Theme.legendTitleFont.size;
+            textStyle.fontWeight = !isNullOrUndefined(textStyle.fontWeight) ? textStyle.fontWeight
+                : this.maps.themeStyle.titleFontWeight || Theme.legendTitleFont.fontWeight;
             textOptions = new TextOption(map.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - spacing / 2, 'middle', trimTitle, '');
             const element = renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
             element.setAttribute('aria-label', legendTitle);
@@ -12814,6 +12923,7 @@ class Legend {
             const field = marker$$1.legendText;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let templateFn;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(dataSource, (data, dataIndex) => {
                 let imageSrc = null;
                 const showLegend = isNullOrUndefined(data[this.maps.legendSettings.showLegendPath]) ? true :
@@ -12824,6 +12934,7 @@ class Legend {
                         const templateElement = templateFn(this.maps);
                         const markerEle = isNullOrUndefined(templateElement.childElementCount) ? templateElement[0] :
                             templateElement;
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         imageSrc = markerEle.querySelector('img').src;
                     }
                     const text = isNullOrUndefined(data[field]) ? '' : data[field];
@@ -13013,7 +13124,6 @@ class Legend {
                     }
                 });
                 if (outOfRangeValues.length === 0) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     let range = false;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     Array.prototype.forEach.call(dataSource, (data, dataIndex) => {
@@ -13248,7 +13358,12 @@ class Legend {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ? this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity, this.maps.layers[k].shapeSettings.fill);
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
+                                            ? 0 : this.maps.layers[k].shapeSettings.border.width, 
+                                        /* eslint-disable-next-line max-len */
+                                        isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity)
+                                            ? this.maps.layers[k].shapeSettings.opacity
+                                            : this.maps.layers[k].shapeSettings.border.opacity, this.maps.layers[k].shapeSettings.fill);
                                     }
                                 }
                             }
@@ -13317,7 +13432,12 @@ class Legend {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, this.maps.layers[j].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ? this.maps.layers[j].shapeSettings.opacity : this.maps.layers[j].shapeSettings.border.opacity, this.maps.layers[j].shapeSettings.fill);
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, this.maps.layers[j].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width)
+                                            ? 0 : this.maps.layers[j].shapeSettings.border.width, 
+                                        /* eslint-disable-next-line max-len */
+                                        isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity)
+                                            ? this.maps.layers[j].shapeSettings.opacity
+                                            : this.maps.layers[j].shapeSettings.border.opacity, this.maps.layers[j].shapeSettings.fill);
                                     }
                                 }
                             }
@@ -13395,7 +13515,15 @@ class Legend {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width), (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ? this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity), this.maps.layers[k].shapeSettings.fill);
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, 
+                                        /* eslint-disable-next-line max-len */
+                                        (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
+                                            ? 0
+                                            : this.maps.layers[k].shapeSettings.border.width), 
+                                        /* eslint-disable-next-line max-len */
+                                        (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity)
+                                            ? this.maps.layers[k].shapeSettings.opacity
+                                            : this.maps.layers[k].shapeSettings.border.opacity), this.maps.layers[k].shapeSettings.fill);
                                     }
                                 }
                             }
@@ -13466,7 +13594,13 @@ class Legend {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[0].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ? this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity, this.maps.layers[0].shapeSettings.fill);
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[0].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
+                                            ? 0
+                                            : this.maps.layers[k].shapeSettings.border.width, 
+                                        /* eslint-disable-next-line max-len */
+                                        isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity)
+                                            ? this.maps.layers[k].shapeSettings.opacity
+                                            : this.maps.layers[k].shapeSettings.border.opacity, this.maps.layers[0].shapeSettings.fill);
                                     }
                                 }
                             }
@@ -13674,9 +13808,13 @@ class Highlight {
         this.maps.off(Browser.touchMoveEvent, this.mouseMove);
         this.maps.off(Browser.touchStartEvent, this.mouseMove);
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * Public method for highlight module
+     *
+     * @param {number} layerIndex - Specifies the index of the layer.
+     * @param {string} name - Specifies the name.
+     * @param {boolean} enable - Specifies the enabling of highlight in map.
+     * @returns {void}
      * @private
      */
     addHighlight(layerIndex, name, enable) {
@@ -13783,9 +13921,15 @@ class Highlight {
         }
     }
     /**
+     * Handles the highlighting events in map
+     *
+     * @param {Element} targetElement - Specifies the target element.
+     * @param {number} layerIndex - Specifies the index of the layer.
+     * @param {object} data - Specifies the data for the map.
+     * @param {object} shapeData - Specifies the data for the map to render.
+     * @returns {void}
      * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     handleHighlight(targetElement, layerIndex, data, shapeData) {
         if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule
             && this.maps.legendSettings.type === 'Layers') {
@@ -13996,9 +14140,15 @@ class Selection {
         }
     }
     /**
+     * Selects the element in the map
+     *
+     * @param {Element} targetElement - Specifies the target element.
+     * @param {number} layerIndex - Specifies the index of the layer.
+     * @param {object} data - Specifies the data for the map.
+     * @param {object} shapeData - Specifies the data for the map to render.
+     * @returns {void}
      * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     selectElement(targetElement, layerIndex, data, shapeData) {
         this.maps.mapSelect = targetElement ? true : false;
         if (this.maps.legendModule && this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1) {
@@ -14010,9 +14160,13 @@ class Selection {
             this.selectMap(targetElement, shapeData, data);
         }
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * Public method for selection
+     *
+     * @param {number} layerIndex - Specifies the index of the layer.
+     * @param {string} name - Specifies the name.
+     * @param {boolean} enable - Specifies the enabling of selection in map.
+     * @returns {void}
      * @private
      */
     addSelection(layerIndex, name, enable) {
@@ -14034,9 +14188,7 @@ class Selection {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     selectMap(targetElement, shapeData, data) {
-        const layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
         const isLineStringShape = targetElement.parentElement.id.indexOf('LineString') > -1;
-        const selectionsettings = this.selectionsettings;
         const border = {
             color: isLineStringShape ? (this.selectionsettings.fill || this.selectionsettings.border.color) :
                 this.selectionsettings.border.color,
@@ -14055,6 +14207,7 @@ class Selection {
             data: data,
             maps: this.maps
         };
+        //eslint-disable-next-line @typescript-eslint/no-unused-vars
         this.maps.trigger('itemSelection', eventArgs, (observedArgs) => {
             eventArgs.border.opacity = isNullOrUndefined(this.selectionsettings.border.opacity) ?
                 this.selectionsettings.opacity : this.selectionsettings.border.opacity;
@@ -14226,6 +14379,8 @@ class MapsTooltip {
         this.addEventListener();
     }
     /**
+     * @param {PointerEvent} e - Specifies the event.
+     * @returns {void}
      * @private
      */
     renderTooltip(e) {
@@ -14414,6 +14569,7 @@ class MapsTooltip {
                     }
                     document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
                 }
+                // 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) {
                         polygon.tooltipTemplate = polygon.tooltipTemplate[Object.keys(polygon.tooltipTemplate)[0]];
@@ -14532,7 +14688,7 @@ class MapsTooltip {
             }
         }
         else {
-            let tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
+            const tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
             if (isNullOrUndefined(tooltipElement)) {
                 this.clearTooltip(e.target);
             }
@@ -14571,6 +14727,10 @@ class MapsTooltip {
         return format;
     }
     /**
+     * Handles the mouse up
+     *
+     * @param {PointerEvent} e - Specifies the event
+     * @returns {void}
      * @private
      */
     mouseUpHandler(e) {
@@ -14583,6 +14743,9 @@ class MapsTooltip {
         }
     }
     /**
+     * Removes the tooltip
+     *
+     * @returns {boolean} - Returns the boolean whether tooltip is removed or not.
      * @private
      */
     removeTooltip() {
@@ -14594,7 +14757,8 @@ class MapsTooltip {
         return isTooltipRemoved;
     }
     clearTooltip(element) {
-        let tooltipElement = element.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
+        // eslint-disable-next-line @typescript-eslint/tslint/config
+        const tooltipElement = element.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
         if (isNullOrUndefined(tooltipElement)) {
             const isTooltipRemoved = this.removeTooltip();
             if (isTooltipRemoved) {
@@ -14603,9 +14767,10 @@ class MapsTooltip {
             }
         }
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To bind events for tooltip module
+     *
+     * @returns {void}
      * @private
      */
     addEventListener() {
@@ -14625,6 +14790,9 @@ class MapsTooltip {
         this.maps.element.addEventListener('contextmenu', this.removeTooltip);
     }
     /**
+     * Removes the event listeners
+     *
+     * @returns {void}
      * @private
      */
     removeEventListener() {
@@ -14683,7 +14851,6 @@ class Zoom {
         this.rectZoomingStart = false;
         /** @private */
         this.browserName = Browser.info.name;
-        // eslint-disable-next-line @typescript-eslint/ban-types
         /** @private */
         this.isPointer = Browser.isPointer;
         this.handled = false;
@@ -14693,10 +14860,8 @@ class Zoom {
         this.pinchFactor = 1;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.startTouches = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         /** @private */
         this.mouseDownLatLong = { x: 0, y: 0 };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         /** @private */
         this.mouseMoveLatLong = { x: 0, y: 0 };
         /** @private */
@@ -14812,7 +14977,6 @@ class Zoom {
                     }
                     this.markerLineAnimation(map);
                     map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
-                    const element1 = document.getElementById(this.maps.element.id + '_tiles');
                     const animationDuration = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                     setTimeout(() => {
                         // if (type === 'ZoomOut') {
@@ -14891,6 +15055,7 @@ class Zoom {
             position.y - ((y * totalSize) / 100);
     }
     /**
+     * @returns {void}
      * @private
      */
     performRectZooming() {
@@ -14970,26 +15135,29 @@ class Zoom {
         }
     }
     /**
+     * @param {PointerEvent} e - Specifies the vent in the map
+     * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     performPinchZooming(e) {
         const map = this.maps;
         const prevLevel = map.tileZoomLevel;
-        const availSize = map.mapAreaRect;
-        map.isMarkerZoomCompleted = false;
-        map.previousScale = map.scale;
-        map.previousPoint = map.translatePoint;
-        map.previousProjection = map.projectionType;
-        const prevTilePoint = map.tileTranslatePoint;
-        const scale = calculateScale(this.touchStartList, this.touchMoveList);
-        const touchCenter = getTouchCenter(getTouches(this.touchMoveList, this.maps));
-        const newScale = scale / this.lastScale;
-        this.lastScale = scale;
-        this.pinchFactor *= newScale;
-        this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
         let zoomCalculationFactor = this.pinchFactor;
         let isZoomCancelled;
+        const prevTilePoint = map.tileTranslatePoint;
         if (!map.isTileMap) {
+            const availSize = map.mapAreaRect;
+            map.isMarkerZoomCompleted = false;
+            map.previousScale = map.scale;
+            map.previousPoint = map.translatePoint;
+            map.previousProjection = map.projectionType;
+            const scale = calculateScale(this.touchStartList, this.touchMoveList);
+            const touchCenter = getTouchCenter(getTouches(this.touchMoveList, this.maps));
+            const newScale = scale / this.lastScale;
+            this.lastScale = scale;
+            this.pinchFactor *= newScale;
+            this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const minBounds = map.baseMapRectBounds['min'];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15024,24 +15192,38 @@ class Zoom {
             }
         }
         else {
-            const newTileFactor = zoomCalculationFactor;
-            this.getTileTranslatePosition(prevLevel, newTileFactor, { x: touchCenter.x, y: touchCenter.y });
-            map.tileZoomLevel = newTileFactor;
-            map.translatePoint.x = (map.tileTranslatePoint.x - (0.5 * Math.pow(2, newTileFactor))) /
-                (Math.pow(2, newTileFactor));
-            map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, newTileFactor))) /
-                (Math.pow(2, newTileFactor));
-            map.scale = (Math.pow(2, newTileFactor));
-            isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
-            if (isZoomCancelled) {
-                map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
-                map.scale = map.previousScale;
-                map.tileZoomLevel = prevLevel;
-                map.zoomSettings.zoomFactor = map.previousScale;
-            }
-            else {
-                map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
+            const touchCenter = this.getTouchCenterPoint();
+            const distance = Math.sqrt(Math.pow((this.touchMoveList[0].pageX - this.touchMoveList[1].pageX), 2) + Math.pow((this.touchMoveList[0].pageY - this.touchMoveList[1].pageY), 2));
+            let factor = map.tileZoomLevel;
+            if (!isNullOrUndefined(this.pinchDistance)) {
+                if (this.pinchDistance > distance) {
+                    factor = factor - 1;
+                }
+                else if (this.pinchDistance < distance) {
+                    factor = factor + 1;
+                }
+                factor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.maps.zoomSettings.minZoom, factor));
+                if (factor !== map.tileZoomLevel) {
+                    this.pinchFactor = factor;
+                    map.previousScale = map.scale;
+                    map.tileZoomLevel = this.pinchFactor;
+                    map.scale = Math.pow(2, map.tileZoomLevel - 1);
+                    this.getTileTranslatePosition(prevLevel, this.pinchFactor, { x: touchCenter.x, y: touchCenter.y }, null);
+                    map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.scale)) / map.scale;
+                    map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.scale)) / map.scale;
+                    isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+                    if (isZoomCancelled) {
+                        map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                        map.scale = map.previousScale;
+                        map.tileZoomLevel = prevLevel;
+                        map.zoomSettings.zoomFactor = map.previousScale;
+                    }
+                    else {
+                        map.mapLayerPanel.generateTiles(factor, map.tileTranslatePoint);
+                    }
+                }
             }
+            this.pinchDistance = distance;
         }
         map.mapScaleValue = zoomCalculationFactor;
         if (!isZoomCancelled) {
@@ -15052,6 +15234,16 @@ class Zoom {
             this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
         }
     }
+    getTouchCenterPoint() {
+        const touchList = [];
+        for (let i = 0; i < this.touchMoveList.length; i++) {
+            touchList.push(this.getMousePosition(this.touchMoveList[i].pageX, this.touchMoveList[i].pageY));
+        }
+        return {
+            x: (touchList[0].x + touchList[1].x) / 2,
+            y: (touchList[0].y + touchList[1].y) / 2
+        };
+    }
     triggerZoomComplete(map, prevLevel, type) {
         if (map.zoomSettings.enable) {
             let zoomArgs;
@@ -15083,6 +15275,7 @@ class Zoom {
         }
     }
     /**
+     * @returns {void}
      * @private
      */
     drawZoomRectangle() {
@@ -15095,7 +15288,6 @@ class Zoom {
         const height = Math.abs(move.y - down.y);
         const x = ((move.x > down.x) ? down.x : down.x - width);
         const y = ((move.y > down.y) ? down.y : down.y - height);
-        const elementRect = getElementByID(map.element.id).getBoundingClientRect();
         if ((x > map.mapAreaRect.x && x < (map.mapAreaRect.x + map.mapAreaRect.width)) &&
             (y > map.mapAreaRect.y) && (y < map.mapAreaRect.y + map.mapAreaRect.height)) {
             this.zoomingRect = new Rect(x, y, width, height);
@@ -15133,6 +15325,10 @@ class Zoom {
         }
     }
     /**
+     * @param {Maps} maps - Specifies the Map control
+     * @param {boolean} animate - Specifies the animation is available or not
+     * @param {boolean} isPanning - Specifies that it is panning or not
+     * @returns {void}
      * @private
      */
     applyTransform(maps, animate$$1, isPanning) {
@@ -15143,7 +15339,6 @@ class Zoom {
         const x = maps.translatePoint.x;
         const y = maps.translatePoint.y;
         let currentLabelIndex = 0;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         maps.zoomShapeCollection = [];
         if (document.getElementById(maps.element.id + '_mapsTooltip')) {
             removeElement(maps.element.id + '_mapsTooltip');
@@ -15175,7 +15370,7 @@ class Zoom {
                                     this.currentLayer.polygonSettings.polygons.map((polygonSettings, polygonIndex) => {
                                         const markerData = polygonSettings.points;
                                         const path = calculatePolygonPath(maps, maps.tileZoomLevel, this.currentLayer, markerData);
-                                        let element = document.getElementById(maps.element.id + '_LayerIndex_' + this.index + '_PolygonIndex_' + polygonIndex);
+                                        const element = document.getElementById(maps.element.id + '_LayerIndex_' + this.index + '_PolygonIndex_' + polygonIndex);
                                         element.setAttribute('d', path);
                                     });
                                     document.getElementById(maps.element.id + '_LayerIndex_' + this.index + '_Polygons_Group').style.visibility = '';
@@ -15189,14 +15384,13 @@ class Zoom {
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
                             if ((!this.isPanModeEnabled) && !isNullOrUndefined(currentEle.childNodes[0])) {
-                                this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate$$1);
+                                this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement);
                             }
                             currentEle = layerElement.childNodes[j];
                             let markerAnimation;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 Array.prototype.forEach.call(currentEle.childNodes, (childNode, k) => {
                                     this.markerTranslate(childNode, factor, x, y, scale, 'Marker', animate$$1);
-                                    const layerIndex = parseInt(childNode['id'].split('_LayerIndex_')[1].split('_')[0], 10);
                                     const dataIndex = parseInt(childNode['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     const markerIndex = parseInt(childNode['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
                                     markerAnimation = this.currentLayer.markerSettings[markerIndex].animationDuration > 0 || animationMode === 'Enable';
@@ -15289,11 +15483,13 @@ class Zoom {
                             maps.zoomLabelPositions = [];
                             maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
                             const labelAnimate = !maps.isTileMap && animate$$1;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             const intersect = [];
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             Array.prototype.forEach.call(currentEle.childNodes, (childNode, k) => {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     const labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
-                                    var zoomShapeWidth = currentEle.childNodes[k].id;
+                                    const zoomShapeWidth = currentEle.childNodes[k].id;
                                     maps.zoomShapeCollection.push(zoomShapeWidth);
                                     this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate, currentLabelIndex, isPanning, intersect);
                                     currentLabelIndex++;
@@ -15328,7 +15524,7 @@ class Zoom {
             }
         }
     }
-    markerTranslates(element, factor, x, y, scale, type, layerElement, animate$$1 = false) {
+    markerTranslates(element, factor, x, y, scale, type, layerElement) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let templateFn;
         let nullCount = 0;
@@ -15372,6 +15568,7 @@ class Zoom {
                 };
                 eventArgs = markerShapeChoose(eventArgs, data);
                 eventArgs = markerColorChoose(eventArgs, data);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 this.maps.trigger('markerRendering', eventArgs, (MarkerArgs) => {
                     if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
                         eventArgs = markerShapeChoose(eventArgs, data);
@@ -15478,12 +15675,13 @@ class Zoom {
             }
             if (!isNullOrUndefined(polygonElement)) {
                 for (let k = 0; k < polygonElement.childElementCount; k++) {
-                    let width = maps.layersCollection[i].polygonSettings.polygons[k].borderWidth;
+                    const width = maps.layersCollection[i].polygonSettings.polygons[k].borderWidth;
                     polygonElement.childNodes[k].childNodes[0].setAttribute('stroke-width', (width / scale).toString());
                 }
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     dataLabelTranslate(element, factor, x, y, scale, type, animate$$1 = false, currentLabelIndex, isPanning, intersect) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const labelCollection = this.maps.dataLabelModule.dataLabelCollections;
@@ -15501,8 +15699,8 @@ class Zoom {
         }
         const duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let label = labelCollection[currentLabelIndex];
-        let index = currentLabelIndex;
+        const label = labelCollection[currentLabelIndex];
+        const index = currentLabelIndex;
         if (label['layerIndex'] === layerIndex && label['shapeIndex'] === shapeIndex
             && label['labelIndex'] === labelIndex) {
             let labelX = label['location']['x'];
@@ -15554,7 +15752,7 @@ class Zoom {
                             element.textContent = text;
                         }
                     }
-                    let widthList = [];
+                    const widthList = [];
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
                         if (scale > 1) {
                             zoomtrimLabel = textTrim((this.maps.dataLabelShape[index] * scale), zoomtext, style, zoomtextSize.width, true, widthList);
@@ -15595,7 +15793,7 @@ class Zoom {
                                     || textLocations['heightTop'] > intersect[j]['heightBottom']) {
                                     trimmedLable = !isNullOrUndefined(text) ? text : zoomtext;
                                     if (scale > 1) {
-                                        let trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        const trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
                                         trimmedLable = textTrim((this.maps.dataLabelShape[index] * scale), trimmedLable, style, trimmedWidth, true);
                                     }
                                     element.textContent = trimmedLable;
@@ -15605,7 +15803,7 @@ class Zoom {
                                         const width = intersect[j]['rightWidth'] - textLocations['leftWidth'];
                                         const difference = width - (textLocations['rightWidth'] - textLocations['leftWidth']);
                                         text = !isNullOrUndefined(text) ? text : zoomtext;
-                                        let trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        const trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
                                         trimmedLable = textTrim(difference, text, style, trimmedWidth, true);
                                         element.textContent = trimmedLable;
                                         break;
@@ -15614,7 +15812,7 @@ class Zoom {
                                         const width = textLocations['rightWidth'] - intersect[j]['leftWidth'];
                                         const difference = Math.abs(width - (textLocations['rightWidth'] - textLocations['leftWidth']));
                                         text = !isNullOrUndefined(text) ? text : zoomtext;
-                                        let trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        const trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
                                         trimmedLable = textTrim(difference, text, style, trimmedWidth, true);
                                         element.textContent = trimmedLable;
                                         break;
@@ -15729,11 +15927,11 @@ class Zoom {
      * @param {PanDirection} direction - Specifies the direction of the panning.
      * @param {number} xDifference - Specifies the distance moved in the horizontal direction.
      * @param {number} yDifference - Specifies the distance moved in the vertical direction.
-     * @param {PointerEvent | TouchEvent | KeyboardEvent} mouseLocation - Specifies the pointer event argument.
+     * @param {PointerEvent | TouchEvent | KeyboardEvent} event - Specifies the pointer event argument.
      * @returns {void}
      * @private
      */
-    panning(direction, xDifference, yDifference, mouseLocation) {
+    panning(direction, xDifference, yDifference, event) {
         const map = this.maps;
         let panArgs;
         const down = this.mouseDownPoints;
@@ -15749,6 +15947,8 @@ class Zoom {
         let y;
         xDifference = !isNullOrUndefined(xDifference) ? xDifference : (down.x - move.x);
         yDifference = !isNullOrUndefined(yDifference) ? yDifference : (down.y - move.y);
+        const layerX = event.type.indexOf('mouse') > -1 || event.type.indexOf('key') > -1 ? event['layerX'] : event.touches[0].pageX;
+        const layerY = event.type.indexOf('mouse') > -1 || event.type.indexOf('key') > -1 ? event['layerY'] : event.touches[0].pageY;
         this.maps.mergeCluster();
         if (!map.isTileMap) {
             const legendElement = document.getElementById(map.element.id + '_Legend_Group');
@@ -15762,7 +15962,7 @@ class Zoom {
             const panningYDirection = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
                 ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const location = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, mouseLocation['layerX'], mouseLocation['layerY']);
+            const location = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, layerX, layerY);
             const minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
             panArgs = {
                 cancel: false, name: pan, maps: map,
@@ -15791,8 +15991,6 @@ class Zoom {
         else if (this.maps.tileZoomLevel > 1) {
             x = map.tileTranslatePoint.x - xDifference;
             y = map.tileTranslatePoint.y - yDifference;
-            this.distanceX = x - map.tileTranslatePoint.x;
-            this.distanceY = y - map.tileTranslatePoint.y;
             map.tileTranslatePoint.x = x;
             map.tileTranslatePoint.y = y;
             if ((map.tileTranslatePoint.y > -10 && yDifference < 0) || ((map.tileTranslatePoint.y < -((Math.pow(2, this.maps.tileZoomLevel) - 2) * 256) && yDifference > 0))) {
@@ -15802,7 +16000,7 @@ class Zoom {
             map.translatePoint.x = (map.tileTranslatePoint.x) / map.scale;
             map.translatePoint.y = (map.tileTranslatePoint.y) / map.scale;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const location = this.maps.getTileGeoLocation(mouseLocation['layerX'], mouseLocation['layerY']);
+            const location = this.maps.getTileGeoLocation(layerX, layerY);
             const minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
             panArgs = {
                 cancel: false, name: pan, maps: map,
@@ -15822,14 +16020,10 @@ class Zoom {
         this.mouseDownPoints = this.mouseMovePoints;
         this.isSingleClick = false;
     }
-    toAlignSublayer() {
-        this.maps.translatePoint.x = !isNullOrUndefined(this.distanceX) ? (this.maps.translatePoint.x -
-            (this.distanceX / this.maps.scale)) : this.maps.translatePoint.x;
-        this.maps.translatePoint.y = !isNullOrUndefined(this.distanceY) ? this.maps.translatePoint.y -
-            (this.distanceY / this.maps.scale) : this.maps.translatePoint.y;
-        this.applyTransform(this.maps, false);
-    }
     /**
+     * @param {number} zoomFactor - Specifies the factor for zooming
+     * @param {string} type - Specifies the type
+     * @returns {void}
      * @private
      */
     toolBarZooming(zoomFactor, type) {
@@ -15922,7 +16116,6 @@ class Zoom {
                     }
                     this.markerLineAnimation(map);
                     map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
-                    const element1 = document.getElementById(this.maps.element.id + '_tiles');
                     const animationDuration = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                     setTimeout(() => {
                         this.applyTransform(this.maps, true);
@@ -15938,12 +16131,11 @@ class Zoom {
         this.triggerZoomComplete(map, prevLevel, type);
     }
     /**
+     * @returns {void}
      * @private
      */
     createZoomingToolbars() {
         const map = this.maps;
-        let zoomInElements;
-        let zoomOutElements;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
             opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
@@ -15997,7 +16189,7 @@ class Zoom {
             });
             this.currentToolbarEle.setAttribute('class', 'e-maps-toolbar');
             this.currentToolbarEle.appendChild(map.renderer.drawCircle(new CircleOption(map.element.id + '_Zooming_ToolBar_' + toolbar + '_Rect', button.fill, { color: borderColor, width: button.borderWidth, opacity: button.borderOpacity }, button.opacity, cx, cy, radius, '')));
-            let opacity = 1;
+            const opacity = 1;
             let direction = '';
             const fill = button.fill;
             this.selectionColor = this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor;
@@ -16025,10 +16217,6 @@ class Zoom {
                         fillColor = this.maps.themeStyle.zoomFillColor;
                         strokeColor = pathStroke;
                     }
-                    else if (!this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
-                        fillColor = fill;
-                        strokeColor = pathStroke;
-                    }
                     else {
                         fillColor = this.selectionColor;
                         strokeColor = this.selectionColor;
@@ -16042,18 +16230,20 @@ class Zoom {
                 }
                 case 'zoomin':
                     direction = 'M 8, 0 L 8, 16 M 0, 8 L 16, 8';
+                    /* eslint-disable no-case-declarations */
                     const zoomInPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar + '_Path', fill, 3, pathStroke, 1, 1, null, direction));
+                    /* eslint-enable no-case-declarations */
                     zoomInPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                     this.currentToolbarEle.appendChild(zoomInPath);
-                    zoomInElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 case 'zoomout':
                     direction = 'M 0, 8 L 16, 8';
+                    /* eslint-disable no-case-declarations */
                     const zoomOutPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, fill, 3, pathStroke, 1, 1, null, direction));
+                    /* eslint-enable no-case-declarations */
                     zoomOutPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                     this.currentToolbarEle.appendChild(zoomOutPath);
-                    zoomOutElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 case 'pan': {
@@ -16083,7 +16273,9 @@ class Zoom {
                     direction = 'M12.364,8h-2.182l2.909,3.25L16,8h-2.182c0-3.575-2.618-6.5-5.818-6.5c-1.128,0-2.218,0.366-3.091,';
                     direction += '1.016l1.055,1.178C6.581,3.328,7.272,3.125,8,3.125C10.4,3.125,12.363,5.319,12.364,8L12.364,8z M11.091,';
                     direction += '13.484l-1.055-1.178C9.419,12.672,8.728,12.875,8,12.875c-2.4,0-4.364-2.194-4.364-4.875h2.182L2.909,4.75L0,8h2.182c0,';
+                    /* eslint-disable no-case-declarations */
                     const resetPath = map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, fill, null, pathStroke, 1, 1, null, direction + '3.575,2.618,6.5,5.818,6.5C9.128,14.5,10.219,14.134,11.091,13.484L11.091,13.484z'));
+                    /* eslint-enable no-case-declarations */
                     resetPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                     this.currentToolbarEle.appendChild(resetPath);
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
@@ -16093,6 +16285,8 @@ class Zoom {
         }
     }
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     performToolBarAction(e) {
@@ -16106,13 +16300,15 @@ class Zoom {
                 isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) + 1 <= this.maps.zoomSettings.maxZoom;
                 break;
             case 'zoomout':
+                /* eslint-disable no-case-declarations */
                 const scaleValue = this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale;
+                /* eslint-enable no-case-declarations */
                 isToolbarPerform = (this.maps.projectionType === 'Miller' || this.maps.projectionType === 'Winkel3' ||
                     this.maps.projectionType === 'AitOff') ? Math.round(scaleValue) - 1 >= this.maps.zoomSettings.minZoom :
                     (scaleValue) - 1 >= this.maps.zoomSettings.minZoom;
                 break;
             case 'reset':
-                isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) != this.maps.zoomSettings.minZoom;
+                isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) !== this.maps.zoomSettings.minZoom;
                 break;
         }
         if (isTouch && isToolbarPerform) {
@@ -16246,6 +16442,8 @@ class Zoom {
         }
     }
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     showTooltip(e) {
@@ -16274,6 +16472,7 @@ class Zoom {
         }
     }
     /**
+     * @returns {void}
      * @private
      */
     removeTooltip() {
@@ -16282,6 +16481,7 @@ class Zoom {
         }
     }
     /**
+     * @returns {void}
      * @private
      */
     alignToolBar() {
@@ -16341,6 +16541,9 @@ class Zoom {
         element.appendChild(style);
     }
     /**
+     * @param {number} factor - Specifies the factor for toolbar
+     * @param {string} id - Specifies the id
+     * @returns {void}
      * @private
      */
     removeToolbarOpacity(factor, id) {
@@ -16353,8 +16556,8 @@ class Zoom {
                 else {
                     this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', 'e-maps-toolbar', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', 'e-maps-toolbar');
                 }
-                let toolbarShapeOpacity = this.maps.toolbarProperties.shapeOpacity;
-                let toolbarButtonOpacity = this.maps.toolbarProperties.borderOpacity;
+                const toolbarShapeOpacity = this.maps.toolbarProperties.shapeOpacity;
+                const toolbarButtonOpacity = this.maps.toolbarProperties.borderOpacity;
                 if (this.maps.isTileMap && (factor <= 1.1 || this.maps.zoomSettings.minZoom === factor)) {
                     if (!this.maps.isDevice) {
                         this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', '', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', '');
@@ -16442,6 +16645,12 @@ class Zoom {
         this.setOpacity('_Zooming_ToolBar_Reset_Rect', '_Zooming_ToolBar_Reset', resetStrokeOpacity, resetOpacity);
     }
     /**
+     * @param {string} zoomClassStyle - Specifies the style for zoom class.
+     * @param {string} zoomInClassStyle - Specifies the style for zoom in.
+     * @param {string} zoomOutClassStyle - Specifies the style for zoom out.
+     * @param {string} panClassStyle -  Specifies the style for pan.
+     * @param {string} resetClassStyle - Specifies the style for reset.
+     * @returns {void}
      * @private
      */
     removeToolbarClass(zoomClassStyle, zoomInClassStyle, zoomOutClassStyle, panClassStyle, resetClassStyle) {
@@ -16479,30 +16688,30 @@ class Zoom {
      * To bind events.
      *
      * @param {Element} element - Specifies the element.
-     * @param {any} process - Specifies the process.
+     * @param {Function} process - Specifies the process.
      * @returns {void}
      * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     wireEvents(element, process) {
         EventHandler.add(element, Browser.touchStartEvent, process, this);
         EventHandler.add(element, 'mouseover', this.showTooltip, this);
         EventHandler.add(element, 'mouseout', this.removeTooltip, this);
     }
     /**
+     * @param {WheelEvent} e - Specifies the wheel event in the map for zooming
+     * @returns {void}
      * @private
      */
     mapMouseWheel(e) {
         if (this.maps.zoomSettings.enable && this.maps.zoomSettings.mouseWheelZoom) {
             const map = this.maps;
-            const size = map.availableSize;
             map.markerZoomedState = false;
             map.zoomPersistence = map.enablePersistence;
             const position = this.getMousePosition(e.pageX, e.pageY);
             const prevLevel = map.tileZoomLevel;
             const prevScale = map.scale;
             const delta = 1;
-            const staticMaxZoomLevel = 22; // google map maximum zoom level value
+            const staticMaxZoomLevel = map.zoomSettings.maxZoom;
             const value = (map.isTileMap) ? prevLevel : prevScale;
             if (((position.x > map.mapAreaRect.x) && (position.x < (map.mapAreaRect.x + map.mapAreaRect.width))) &&
                 (position.y > map.mapAreaRect.y) && position.y < (map.mapAreaRect.y + map.mapAreaRect.height)) {
@@ -16515,8 +16724,8 @@ class Zoom {
                     map.staticMapZoom = map.tileZoomLevel;
                     if (map.staticMapZoom > 0 && map.staticMapZoom < staticMaxZoomLevel) {
                         map.staticMapZoom += 1;
+                        this.performZooming(position, (value + delta), direction);
                     }
-                    this.performZooming(position, (value + delta), direction);
                 }
                 else {
                     map.mapScaleValue = value - delta;
@@ -16537,18 +16746,18 @@ class Zoom {
         }
     }
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     doubleClick(e) {
         const pageX = e.pageX;
         const pageY = e.pageY;
-        const target = e.target;
-        let tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
+        const tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
         if (this.maps.zoomSettings.enable && this.maps.zoomSettings.doubleClickZoom
             && !(e.target['id'].indexOf('_Zooming_') > -1) && isNullOrUndefined(tooltipElement)) {
             const position = this.getMousePosition(pageX, pageY);
             const map = this.maps;
-            const size = map.availableSize;
             const prevLevel = map.tileZoomLevel;
             const prevScale = map.scale;
             map.mapScaleValue = map.mapScaleValue + 1;
@@ -16560,6 +16769,8 @@ class Zoom {
         }
     }
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     mouseDownHandler(e) {
@@ -16567,6 +16778,7 @@ class Zoom {
         let pageY;
         let target;
         let touches = null;
+        //eslint-disable-next-line @typescript-eslint/no-unused-vars
         const element = e.target;
         if (e.type === 'touchstart') {
             this.isTouch = true;
@@ -16578,6 +16790,7 @@ class Zoom {
         else {
             pageX = e.pageX;
             pageY = e.pageY;
+            //eslint-disable-next-line @typescript-eslint/no-unused-vars
             target = e.target;
         }
         if (!this.maps.zoomSettings.enablePanning) {
@@ -16588,10 +16801,10 @@ class Zoom {
             this.isPan = this.isPanModeEnabled = !this.isZoomSelection;
         }
         this.mouseDownLatLong = { x: pageX, y: pageY };
-        let scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
+        const scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
         this.rectZoomingStart = ((this.isZoomSelection && scale < this.maps.zoomSettings.maxZoom) && this.maps.zoomSettings.enable);
         this.mouseDownPoints = this.getMousePosition(pageX, pageY);
-        if (this.isTouch) {
+        if (this.isTouch && touches !== null) {
             this.firstMove = true;
             this.pinchFactor = this.maps.scale;
             this.fingers = touches.length;
@@ -16599,12 +16812,15 @@ class Zoom {
         this.isSingleClick = true;
     }
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     mouseMoveHandler(e) {
         let pageX;
         let pageY;
         const map = this.maps;
+        //eslint-disable-next-line @typescript-eslint/no-unused-vars
         let target;
         let touches = null;
         const zoom = this.maps.zoomSettings;
@@ -16629,7 +16845,7 @@ class Zoom {
             }
         }
         if (this.isTouch) {
-            if (this.maps.zoomSettings.pinchZooming) {
+            if (this.maps.zoomSettings.pinchZooming && touches !== null) {
                 if (this.firstMove && touches.length === 2) {
                     this.rectZoomingStart = false;
                     this.updateInteraction();
@@ -16645,9 +16861,7 @@ class Zoom {
             }
         }
         this.mouseMovePoints = this.getMousePosition(pageX, pageY);
-        const targetId = e.target['id'];
-        const targetEle = e.target;
-        if (zoom.enable && this.isPanModeEnabled && this.maps.markerDragId.indexOf('_MarkerIndex_') == -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
+        if (zoom.enable && this.isPanModeEnabled && this.maps.markerDragId.indexOf('_MarkerIndex_') === -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
             e.preventDefault();
             this.maps.element.style.cursor = 'pointer';
             this.mouseMoveLatLong = { x: pageX, y: pageY };
@@ -16659,9 +16873,9 @@ class Zoom {
                 this.mouseDownLatLong['y'] = pageY;
             }
         }
-        if (this.isTouch ? (touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart) {
+        if (this.isTouch ? (touches !== null && touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart) {
             e.preventDefault();
-            let scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
+            const scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
             if (this.maps.zoomSettings.enableSelectionZooming && scale < this.maps.zoomSettings.maxZoom) {
                 this.drawZoomRectangle();
             }
@@ -16672,10 +16886,11 @@ class Zoom {
         }
     }
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
     mouseUpHandler(e) {
-        const map = this.maps;
         this.rectZoomingStart = false;
         this.isSingleClick = this.isSingleClick ? true : false;
         this.isTouch = false;
@@ -16683,7 +16898,6 @@ class Zoom {
         this.touchMoveList = [];
         this.lastScale = 1;
         this.maps.element.style.cursor = 'auto';
-        // eslint-disable-next-line max-len
         if (this.isPanModeEnabled && this.maps.zoomSettings.enablePanning && !isNullOrUndefined(this.maps.previousPoint) &&
             (this.maps.translatePoint.x !== this.maps.previousPoint.x && this.maps.translatePoint.y !== this.maps.previousPoint.y)) {
             let pageX;
@@ -16691,10 +16905,9 @@ class Zoom {
             let layerX = 0;
             let layerY = 0;
             let target;
-            const rect = this.maps.element.getBoundingClientRect();
             const element = e.target;
             if (e.type.indexOf('touch') !== -1) {
-                let touchArg = e;
+                const touchArg = e;
                 layerX = pageX = touchArg.changedTouches[0].pageX;
                 pageY = touchArg.changedTouches[0].pageY;
                 layerY = pageY - (this.maps.isTileMap ? 10 : 0);
@@ -16706,6 +16919,7 @@ class Zoom {
                 pageY = e.pageY;
                 layerX = e['layerX'];
                 layerY = e['layerY'] - (this.maps.isTileMap ? 10 : 0);
+                //eslint-disable-next-line @typescript-eslint/no-unused-vars
                 target = e.target;
             }
             let panCompleteEventArgs;
@@ -16737,10 +16951,6 @@ class Zoom {
             this.maps.trigger('panComplete', panCompleteEventArgs);
         }
         this.isPanModeEnabled = false;
-        if ((!isNullOrUndefined(this.distanceX) || !isNullOrUndefined(this.distanceY)) && (!isNullOrUndefined(this.currentLayer) && this.currentLayer.type === 'SubLayer')) {
-            this.toAlignSublayer();
-            this.distanceX = this.distanceY = null;
-        }
         const zoomRectElement = getElementByID(this.maps.element.id + '_Selection_Rect_Zooming');
         if (zoomRectElement && this.maps.zoomSettings.enable && this.maps.zoomSettings.enableSelectionZooming) {
             remove(zoomRectElement);
@@ -16748,10 +16958,14 @@ class Zoom {
         }
         this.mouseMoveLatLong = { x: 0, y: 0 };
         this.mouseDownLatLong = { x: 0, y: 0 };
+        this.pinchDistance = null;
     }
     /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
      * @private
      */
+    //eslint-disable-next-line @typescript-eslint/no-unused-vars
     mouseCancelHandler(e) {
         this.isPanModeEnabled = false;
         this.isTouch = false;
@@ -16771,7 +16985,7 @@ class Zoom {
      */
     click(e) {
         const map = this.maps;
-        let tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
+        const tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
         if ((map.markerModule && map.markerModule.sameMarkerData.length > 0) ||
             (e.target['id'].indexOf('MarkerIndex') > -1 && e.target['id'].indexOf('cluster') === -1) || !isNullOrUndefined(tooltipElement)) {
             return null;
@@ -16792,6 +17006,11 @@ class Zoom {
         }
     }
     /**
+     * Gets the Mouse Position
+     *
+     * @param {number} pageX - Specifies the Page x in map
+     * @param {number} pageY - Specifies the Page y in map
+     * @returns {Point} - returns the mouse point position
      * @private
      */
     getMousePosition(pageX, pageY) {
@@ -16806,6 +17025,7 @@ class Zoom {
         return new Point(Math.abs(pageX - positionX), Math.abs(pageY - positionY));
     }
     /**
+     * @returns {void}
      * @private
      */
     addEventListener() {
@@ -16821,6 +17041,7 @@ class Zoom {
         EventHandler.add(this.maps.element, this.cancelEvent, this.mouseCancelHandler, this);
     }
     /**
+     * @returns {void}
      * @private
      */
     removeEventListener() {
@@ -16867,6 +17088,7 @@ class Zoom {
         this.removeEventListener();
         this.layerCollectionEle = null;
         this.currentLayer = null;
+        this.pinchDistance = null;
         this.maps = null;
     }
 }
@@ -16899,6 +17121,7 @@ class Print {
         const argsData = {
             cancel: false, htmlContent: this.getHTMLContent(maps, elements), name: beforePrint
         };
+        //eslint-disable-next-line @typescript-eslint/no-unused-vars
         maps.trigger('beforePrint', argsData, (beforePrintArgs) => {
             if (!argsData.cancel) {
                 print(argsData.htmlContent, printWindow);
@@ -16916,6 +17139,7 @@ class Print {
     getHTMLContent(maps, elements) {
         const div = createElement('div');
         const divElement = maps.element.cloneNode(true);
+        //eslint-disable-next-line @typescript-eslint/no-explicit-any
         let backgroundElement = (!maps.isTileMap ? divElement.getElementsByTagName('svg')[0] : divElement.getElementsByTagName('svg')[1]);
         if (!isNullOrUndefined(backgroundElement)) {
             backgroundElement = backgroundElement.childNodes[0];
@@ -17023,7 +17247,7 @@ class ImageExport {
             const svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             let svgDataElement;
             let tileSvg;
-            let svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
+            const svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
             const backgroundElement = svgObject.childNodes[0];
             const backgroundColor = backgroundElement.getAttribute('fill');
             if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
@@ -17083,7 +17307,7 @@ class ImageExport {
                         const tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                         const exportTileImg = new Image();
                         exportTileImg.crossOrigin = 'Anonymous';
-                        let background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
+                        const background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
                             (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
                         ctxt.fillStyle = background;
                         ctxt.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
@@ -17163,7 +17387,7 @@ class ImageExport {
      * @returns {void}
      * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() { }
 }
 
@@ -17177,7 +17401,7 @@ class PdfExport {
      * Constructor for Maps
      *
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     constructor() { }
     /**
      * To export the file as image/svg format
@@ -17192,7 +17416,7 @@ class PdfExport {
      */
     export(maps, type, fileName, allowDownload, orientation) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const promise = new Promise((resolve, reject) => {
+        const promise = new Promise((resolve) => {
             if (maps.isTileMap) {
                 maps.isExportInitialTileMap = true;
             }
@@ -17250,7 +17474,7 @@ class PdfExport {
                     const tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                     const tileImg = new Image();
                     tileImg.crossOrigin = 'Anonymous';
-                    let background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
+                    const background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
                         (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
                     ctx.fillStyle = background;
                     ctx.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
@@ -17328,7 +17552,7 @@ class PdfExport {
      * @returns {void}
      * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() { }
 }