@syncfusion/ej2-maps 20.3.49 → 20.4.38

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

@@ -3,8 +3,6 @@ import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
 
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable max-len */
 /**
  * Helper functions for maps control
@@ -614,9 +612,9 @@ function renderTextElement(option, style, color, parent, isMinus = false) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function convertElement(element, markerId, data, index, mapObj) {
     const childElement = createElement('div', {
-        id: markerId,
-        styles: 'position: absolute;pointer-events: auto;'
+        id: markerId
     });
+    childElement.style.cssText = 'position: absolute;pointer-events: auto;';
     let elementLength = element.length;
     while (elementLength > 0) {
         childElement.appendChild(element[0]);
@@ -624,13 +622,14 @@ function convertElement(element, markerId, data, index, mapObj) {
     }
     let templateHtml = childElement.innerHTML;
     const properties = Object.keys(data);
+    const regExp = RegExp;
     for (let i = 0; i < properties.length; i++) {
         if (typeof data[properties[i]] === 'object') {
             templateHtml = convertStringToValue(templateHtml, '', data, mapObj);
             // eslint-disable-next-line @typescript-eslint/ban-types
         }
         else if (properties[i].toLowerCase() !== 'latitude' && properties[i].toLowerCase() !== 'longitude') {
-            templateHtml = templateHtml.replace(new RegExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
+            templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
         }
     }
     childElement.innerHTML = templateHtml;
@@ -667,6 +666,7 @@ function formatValue(value, maps) {
 function convertStringToValue(stringTemplate, format, data, maps) {
     let templateHtml = (stringTemplate === '') ? format : stringTemplate;
     const templateValue = (stringTemplate === '') ? templateHtml.split('${') : templateHtml.split('{{:');
+    const regExp = RegExp;
     for (let i = 0; i < templateValue.length; i++) {
         if ((templateValue[i].indexOf('}}') > -1 && templateValue[i].indexOf('.') > -1) ||
             (templateValue[i].indexOf('}') > -1 && templateValue[i].search('.') > -1)) {
@@ -676,7 +676,7 @@ function convertStringToValue(stringTemplate, format, data, maps) {
                     const templateSplitValue = (getValueFromObject(data, split[j])).toString();
                     templateHtml = (stringTemplate === '') ?
                         templateHtml.split('${' + split[j] + '}').join(formatValue(templateSplitValue, maps)) :
-                        templateHtml.replace(new RegExp('{{:' + split[j] + '}}', 'g'), templateSplitValue);
+                        templateHtml.replace(new regExp('{{:' + split[j] + '}}', 'g'), templateSplitValue);
                 }
             }
         }
@@ -698,15 +698,17 @@ function convertElementFromLabel(element, labelId, data, index, mapObj) {
     let templateHtml = labelEle.outerHTML;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const properties = Object.keys(data);
+    const regExp = RegExp;
     for (let i = 0; i < properties.length; i++) {
         // eslint-disable-next-line @typescript-eslint/ban-types
-        templateHtml = templateHtml.replace(new RegExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
+        templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
     }
-    return createElement('div', {
+    const templateEle = createElement('div', {
         id: labelId,
-        innerHTML: templateHtml,
-        styles: 'position: absolute'
+        innerHTML: templateHtml
     });
+    templateEle.style.position = 'absolute';
+    return templateEle;
 }
 /**
  *
@@ -808,7 +810,7 @@ function markerShapeChoose(eventArgs, data) {
         const shape = ((eventArgs.shapeValuePath.indexOf('.') > -1) ?
             (getValueFromObject(data, eventArgs.shapeValuePath).toString()) :
             data[eventArgs.shapeValuePath]);
-        eventArgs.shape = (shape.toString() !== "") ? shape : eventArgs.shape;
+        eventArgs.shape = (shape.toString() !== '') ? shape : eventArgs.shape;
         if (data[eventArgs.shapeValuePath] === 'Image') {
             eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
                 ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
@@ -817,7 +819,7 @@ function markerShapeChoose(eventArgs, data) {
     }
     else {
         const shapes = (!isNullOrUndefined(eventArgs.shapeValuePath)) ? ((eventArgs.shapeValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.shapeValuePath).toString() : eventArgs.shape) : eventArgs.shape;
-        eventArgs.shape = (shapes.toString() !== "") ? shapes : eventArgs.shape;
+        eventArgs.shape = (shapes.toString() !== '') ? shapes : eventArgs.shape;
         const shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
             ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
                 data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
@@ -896,8 +898,6 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                             container['top'] : (container['bottom'] - container['top'])));
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const translate = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
-                        const transPoint = (maps.isTileMap) ? { x: 0, y: 0 } : (maps.translatePoint.x !== 0) ?
-                            maps.translatePoint : translate['location'];
                         const dataIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_dataIndex_')[1].split('_')[0], 10);
                         const markerIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
                         const markerSetting = currentLayer.markerSettings[markerIndex];
@@ -1039,7 +1039,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             markerCluster.remove();
         }
         if (zoomCheck) {
-            let layerGroupElement = document.getElementById(maps.element.id + '_Layer_Collections');
+            const layerGroupElement = document.getElementById(maps.element.id + '_Layer_Collections');
             if (!isNullOrUndefined(layerGroupElement)) {
                 layerGroupElement.appendChild(layerElement);
             }
@@ -1546,6 +1546,7 @@ function drawStar(maps, options, size, location, element) {
  * @param {PathOption} options - Specifies the path options
  * @param {Size} size - Specifies the size
  * @param {MapLocation} location - Specifies the map location
+ * @param {string} type - Specifies the type.
  * @param {Element} element - Specifies the element
  * @returns {Element} - Returns the element
  * @private
@@ -2033,7 +2034,8 @@ function getTranslate(mapObject, layer, animate) {
                         mapObject.zoomTranslatePoint.y = y;
                     }
                     else {
-                        if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1 || mapObject.mapScaleValue <= 1.05) && !mapObject.zoomModule.isDragZoom) {
+                        if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1
+                            || mapObject.mapScaleValue <= 1.05) && !mapObject.zoomModule.isDragZoom) {
                             scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
                             scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
                             mapWidth *= scaleFactor;
@@ -2051,8 +2053,10 @@ function getTranslate(mapObject, layer, animate) {
             }
         }
         if (!isNullOrUndefined(mapObject.translatePoint)) {
-            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : x;
-            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : y;
+            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.x : x;
+            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.y : y;
         }
     }
     scaleFactor = (mapObject.enablePersistence) ? ((mapObject.mapScaleValue >= 1) ? mapObject.mapScaleValue : 1) : scaleFactor;
@@ -2103,9 +2107,11 @@ function getZoomTranslate(mapObject, layer, animate) {
     mapObject.mapScaleValue = mapObject.zoomSettings.zoomFactor !== 1 &&
         mapObject.zoomSettings.zoomFactor ===
             mapObject.mapScaleValue ? mapObject.zoomSettings.zoomFactor :
-        mapObject.zoomSettings.zoomFactor !== mapObject.mapScaleValue && !mapObject.centerPositionChanged ? mapObject.mapScaleValue : mapObject.zoomSettings.zoomFactor;
-    if (mapObject.zoomSettings.shouldZoomInitially) {
-        mapObject.mapScaleValue = zoomFactorValue = scaleFactor = ((mapObject.enablePersistence || mapObject.zoomSettings.shouldZoomInitially) && mapObject.scale === 1)
+        mapObject.zoomSettings.zoomFactor !== mapObject.mapScaleValue && !mapObject.centerPositionChanged ?
+            mapObject.mapScaleValue : mapObject.zoomSettings.zoomFactor;
+    if (mapObject.zoomSettings.shouldZoomInitially && !mapObject.isZoomByPosition) {
+        mapObject.mapScaleValue = zoomFactorValue = scaleFactor = ((mapObject.enablePersistence
+            || mapObject.zoomSettings.shouldZoomInitially) && mapObject.scale === 1)
             ? mapObject.scale : (isNullOrUndefined(mapObject.markerZoomFactor)) ? mapObject.mapScaleValue : mapObject.markerZoomFactor;
         zoomFactorValue = mapObject.mapScaleValue;
         if (!isNullOrUndefined(mapObject.markerCenterLatitude) && !isNullOrUndefined(mapObject.markerCenterLongitude)) {
@@ -2132,12 +2138,17 @@ function getZoomTranslate(mapObject, layer, animate) {
         const leftPosition = ((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) / factor;
         const point = checkZoomMethod ? calculateCenterFromPixel(mapObject, layer) :
             convertGeoToPoint(latitude, longitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-        if ((!isNullOrUndefined(mapObject.zoomTranslatePoint) || !isNullOrUndefined(mapObject.previousProjection)) && !mapObject.zoomNotApplied) {
+        if ((!isNullOrUndefined(mapObject.zoomTranslatePoint) || !isNullOrUndefined(mapObject.previousProjection)) &&
+            !mapObject.zoomNotApplied) {
             if (mapObject.previousProjection !== mapObject.projectionType) {
                 x = -point.x + leftPosition;
                 y = -point.y + topPosition;
             }
             else {
+                if (mapObject.isZoomByPosition) {
+                    mapObject.zoomTranslatePoint.x = -point.x + leftPosition;
+                    mapObject.zoomTranslatePoint.y = -point.y + topPosition;
+                }
                 x = mapObject.zoomTranslatePoint.x;
                 y = mapObject.zoomTranslatePoint.y;
                 zoomFactorValue = zoomFactor;
@@ -2148,8 +2159,10 @@ function getZoomTranslate(mapObject, layer, animate) {
             y = -point.y + topPosition + mapObject.mapAreaRect.y / zoomFactor;
         }
         if (!isNullOrUndefined(mapObject.translatePoint)) {
-            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : y;
-            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : x;
+            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.y : y;
+            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.x : x;
         }
         scaleFactor = zoomFactorValue !== 0 ? zoomFactorValue : 1;
     }
@@ -2187,8 +2200,10 @@ function getZoomTranslate(mapObject, layer, animate) {
             }
         }
         if (!isNullOrUndefined(mapObject.translatePoint)) {
-            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : leftPosition;
-            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : topPosition;
+            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.x : leftPosition;
+            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.y : topPosition;
         }
     }
     scaleFactor = (mapObject.enablePersistence) ? (mapObject.mapScaleValue === 0 ? 1 : mapObject.mapScaleValue) : scaleFactor;
@@ -2253,6 +2268,7 @@ function Internalize(maps, value) {
  * Function to compile the template function for maps.
  *
  * @param {string} template - Specifies the template
+ * @param {Maps} maps - Specifies the Maps instance.
  * @returns {Function} - Returns the function
  * @private
  */
@@ -2260,10 +2276,10 @@ function Internalize(maps, value) {
 function getTemplateFunction(template, maps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let templateFn = null;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     try {
         if (document.querySelectorAll(template).length) {
             templateFn = compile(document.querySelector(template).innerHTML.trim());
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
         else if (maps.isVue || maps.isVue3) {
             templateFn = compile(template);
@@ -2345,7 +2361,7 @@ function triggerShapeEvent(targetId, selection, maps, eventName) {
         target: targetId,
         maps: maps
     };
-    maps.trigger(eventName, eventArgs, (observedArgs) => {
+    maps.trigger(eventName, eventArgs, () => {
         eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? eventArgs.opacity : eventArgs.border.opacity;
     });
     return eventArgs;
@@ -2468,7 +2484,8 @@ shapeData, data) {
         maps: map
     };
     map.trigger('itemSelection', eventArgs, (observedArgs) => {
-        eventArgs.border.opacity = isNullOrUndefined(selectionSettings.border.opacity) ? selectionSettings.opacity : selectionSettings.border.opacity;
+        eventArgs.border.opacity = isNullOrUndefined(selectionSettings.border.opacity) ? selectionSettings.opacity :
+            selectionSettings.border.opacity;
         map.shapeSelectionItem.push(eventArgs.shapeData);
         if (!getElement('ShapeselectionMap')) {
             document.body.appendChild(createStyle('ShapeselectionMap', 'ShapeselectionMapStyle', eventArgs));
@@ -2567,16 +2584,16 @@ function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element, isTou
     let demo = str[0].length;
     for (let i = 1; i < str.length; i++) {
         if (demo < str[i].length) {
-            demo = str[i].length;
+            demo = (str[i]).length;
         }
     }
     if (!tooltip) {
         tooltip = createElement('div', {
-            id: id,
-            styles: 'background-color: rgb(255, 255, 255) !important; color:black !important; ' +
-                'position:absolute;border:1px solid rgb(0, 0, 0); padding-left:5px;' +
-                'font-size:12px; font-family: "Segoe UI"; text-align:center'
+            id: id
         });
+        tooltip.style.cssText = 'background-color: rgb(255, 255, 255) !important; color:black !important; ' +
+            'position:absolute;border:1px solid rgb(0, 0, 0); padding-left:5px;' +
+            'font-size:12px; font-family: "Segoe UI"; text-align:center';
     }
     if (x < (areaWidth - width)) {
         // eslint-disable-next-line no-self-assign
@@ -2637,7 +2654,7 @@ function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element) {
 //     if (touches) {
 //         touchList = [];
 //         for (let i: number = 0, length: number = touches.length; i < length; i++) {
-//             touchList.push({ pageX: touches[i].clientX, pageY: touches[i].clientY, pointerId: null });
+//             touchList.push({ pageX: touches[i as number].clientX, pageY: touches[i as number].clientY, pointerId: null });
 //         }
 //     } else {
 //         touchList = touchList ? touchList : [];
@@ -2645,8 +2662,8 @@ function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element) {
 //             touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });
 //         } else {
 //             for (let i: number = 0, length: number = touchList.length; i < length; i++) {
-//                 if (touchList[i].pointerId === e.pointerId) {
-//                     touchList[i] = { pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId };
+//                 if (touchList[i as number].pointerId === e.pointerId) {
+//                     touchList[i as number] = { pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId };
 //                 } else {
 //                     touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });
 //                 }
@@ -2674,13 +2691,14 @@ function createTooltip(id, text, top, left, fontSize) {
         'position:absolute;border:1px solid #707070;font-size:' + fontSize + ';border-radius:2px;';
     if (!tooltip) {
         tooltip = createElement('div', {
-            id: id, innerHTML: '&nbsp;' + text + '&nbsp;', styles: style
+            id: id, innerHTML: '&nbsp;' + text + '&nbsp;'
         });
+        tooltip.style.cssText = style;
         document.body.appendChild(tooltip);
     }
     else {
-        tooltip.setAttribute('innerHTML', '&nbsp;' + text + '&nbsp;');
-        tooltip.setAttribute('styles', style);
+        tooltip.innerHTML = '&nbsp;' + text + '&nbsp;';
+        tooltip.style.cssText = style;
     }
 }
 /**
@@ -3075,8 +3093,8 @@ function animate(element, delay, duration, process, end) {
             window.cancelAnimationFrame(clearAnimation);
             end.call(this, { element: element });
             if (element.id.indexOf('Marker') > -1) {
-                let markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
-                markerElement.setAttribute('style', markerStyle);
+                const markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
+                markerElement.style.cssText = markerStyle;
             }
         }
     };
@@ -3775,7 +3793,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable max-len */
 /**
  * Maps base document
  */
@@ -4230,7 +4248,7 @@ __decorate$1([
     Property(false)
 ], ZoomSettings.prototype, "doubleClickZoom", void 0);
 __decorate$1([
-    Property(false)
+    Property(true)
 ], ZoomSettings.prototype, "pinchZooming", void 0);
 __decorate$1([
     Property(false)
@@ -4662,18 +4680,18 @@ class Marker {
         const currentLayer = maps.layersCollection[layerIndex];
         this.markerSVGObject = maps.renderer.createGroup({
             id: maps.element.id + '_Markers_Group',
-            class: 'GroupElement',
-            style: 'pointer-events: auto;'
+            class: 'GroupElement'
         });
+        this.markerSVGObject.style.pointerEvents = 'auto';
         const markerTemplateEle = createElement('div', {
             id: maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
-            className: maps.element.id + '_template',
-            styles: 'overflow: hidden; position: absolute;pointer-events: none;' +
-                'top:' + maps.mapAreaRect.y + 'px;' +
-                'left:' + maps.mapAreaRect.x + 'px;' +
-                'height:' + maps.mapAreaRect.height + 'px;' +
-                'width:' + maps.mapAreaRect.width + 'px;'
+            className: maps.element.id + '_template'
         });
+        markerTemplateEle.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
+            'top:' + maps.mapAreaRect.y + 'px;' +
+            'left:' + maps.mapAreaRect.x + 'px;' +
+            'height:' + maps.mapAreaRect.height + 'px;' +
+            'width:' + maps.mapAreaRect.width + 'px;';
         currentLayer.markerSettings.map((markerSettings, markerIndex) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerData = markerSettings.dataSource;
@@ -4723,7 +4741,8 @@ class Marker {
                     nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
                     markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
                     markerCount += (eventArgs.cancel) ? 1 : 0;
-                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ? maps.markerNullCount + 1 : maps.markerNullCount;
+                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ?
+                        maps.markerNullCount + 1 : maps.markerNullCount;
                     const markerDataLength = markerData.length - maps.markerNullCount;
                     if (this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(this.markerSVGObject);
@@ -4781,125 +4800,134 @@ class Marker {
     }
     /**
      * To calculate center position and factor value dynamically
+     *
+     * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
+     * @returns {void}
      */
     calculateZoomCenterPositionAndFactor(layersCollection) {
-        if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
-            let minLong;
-            let maxLat;
-            let minLat;
-            let maxLong;
-            let zoomLevel;
-            let centerLat;
-            let centerLong;
-            const maxZoomFact = this.maps.zoomSettings.maxZoom;
-            const mapWidth = this.maps.mapAreaRect.width;
-            const mapHeight = this.maps.mapAreaRect.height;
-            this.maps.markerZoomedState = this.maps.markerZoomedState ? this.maps.markerZoomedState : isNullOrUndefined(this.maps.markerZoomFactor) ?
-                !this.maps.markerZoomedState : this.maps.markerZoomFactor > 1 ? this.maps.markerZoomedState : !this.maps.markerZoomedState;
-            this.maps.defaultState = this.maps.markerZoomedState ? !this.maps.markerZoomedState : this.maps.defaultState;
-            Array.prototype.forEach.call(layersCollection, (currentLayer, layerIndex) => {
-                const isMarker = currentLayer.markerSettings.length !== 0;
-                if (isMarker) {
-                    Array.prototype.forEach.call(currentLayer.markerSettings, (markerSetting, markerIndex) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const markerData = markerSetting.dataSource;
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        Array.prototype.forEach.call(markerData, (data, dataIndex) => {
-                            const latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
-                                !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                            const longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
-                                !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                            minLong = isNullOrUndefined(minLong) && dataIndex === 0 ?
-                                longitude : minLong;
-                            maxLat = isNullOrUndefined(maxLat) && dataIndex === 0 ?
-                                latitude : maxLat;
-                            minLat = isNullOrUndefined(minLat) && dataIndex === 0 ?
-                                latitude : minLat;
-                            maxLong = isNullOrUndefined(maxLong) && dataIndex === 0 ?
-                                longitude : maxLong;
-                            if (minLong > longitude) {
-                                minLong = longitude;
-                            }
-                            if (minLat > latitude) {
-                                minLat = latitude;
-                            }
-                            if (maxLong < longitude) {
-                                maxLong = longitude;
-                            }
-                            if (maxLat < latitude) {
-                                maxLat = latitude;
-                            }
+        if (!isNullOrUndefined(this.maps)) {
+            if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
+                let minLong;
+                let maxLat;
+                let minLat;
+                let maxLong;
+                let zoomLevel;
+                let centerLat;
+                let centerLong;
+                const maxZoomFact = this.maps.zoomSettings.maxZoom;
+                const mapWidth = this.maps.mapAreaRect.width;
+                const mapHeight = this.maps.mapAreaRect.height;
+                this.maps.markerZoomedState = this.maps.markerZoomedState ? this.maps.markerZoomedState :
+                    isNullOrUndefined(this.maps.markerZoomFactor) ? !this.maps.markerZoomedState :
+                        this.maps.markerZoomFactor > 1 ? this.maps.markerZoomedState : !this.maps.markerZoomedState;
+                this.maps.defaultState = this.maps.markerZoomedState ? !this.maps.markerZoomedState : this.maps.defaultState;
+                Array.prototype.forEach.call(layersCollection, (currentLayer) => {
+                    const isMarker = currentLayer.markerSettings.length !== 0;
+                    if (isMarker) {
+                        Array.prototype.forEach.call(currentLayer.markerSettings, (markerSetting) => {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            const markerData = markerSetting.dataSource;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            Array.prototype.forEach.call(markerData, (data, dataIndex) => {
+                                const latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
+                                    !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                                const longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
+                                    !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                                minLong = isNullOrUndefined(minLong) && dataIndex === 0 ?
+                                    longitude : minLong;
+                                maxLat = isNullOrUndefined(maxLat) && dataIndex === 0 ?
+                                    latitude : maxLat;
+                                minLat = isNullOrUndefined(minLat) && dataIndex === 0 ?
+                                    latitude : minLat;
+                                maxLong = isNullOrUndefined(maxLong) && dataIndex === 0 ?
+                                    longitude : maxLong;
+                                if (minLong > longitude) {
+                                    minLong = longitude;
+                                }
+                                if (minLat > latitude) {
+                                    minLat = latitude;
+                                }
+                                if (maxLong < longitude) {
+                                    maxLong = longitude;
+                                }
+                                if (maxLat < latitude) {
+                                    maxLat = latitude;
+                                }
+                            });
                         });
-                    });
-                }
-            });
-            if (!isNullOrUndefined(minLat) && !isNullOrUndefined(minLong) &&
-                !isNullOrUndefined(maxLong) && !isNullOrUndefined(maxLat)) {
-                // To find the center position
-                centerLat = (minLat + maxLat) / 2;
-                centerLong = (minLong + maxLong) / 2;
-                this.maps.markerCenterLatitude = centerLat;
-                this.maps.markerCenterLongitude = centerLong;
-                if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
-                    this.maps.markerZoomCenterPoint = {
-                        latitude: centerLat,
-                        longitude: centerLong
-                    };
-                }
-                let markerFactor;
-                if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
-                    zoomLevel = calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, this.maps);
-                    if (this.maps.isTileMap) {
-                        markerFactor = isNullOrUndefined(this.maps.markerZoomFactor) ?
-                            zoomLevel : isNullOrUndefined(this.maps.mapScaleValue) ?
-                            zoomLevel : this.maps.mapScaleValue > 1 && this.maps.markerZoomFactor !== 1 ?
-                            this.maps.mapScaleValue : zoomLevel;
+                    }
+                });
+                if (!isNullOrUndefined(minLat) && !isNullOrUndefined(minLong) &&
+                    !isNullOrUndefined(maxLong) && !isNullOrUndefined(maxLat)) {
+                    // To find the center position
+                    centerLat = (minLat + maxLat) / 2;
+                    centerLong = (minLong + maxLong) / 2;
+                    this.maps.markerCenterLatitude = centerLat;
+                    this.maps.markerCenterLongitude = centerLong;
+                    if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
+                        this.maps.markerZoomCenterPoint = {
+                            latitude: centerLat,
+                            longitude: centerLong
+                        };
+                    }
+                    let markerFactor;
+                    if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
+                        zoomLevel = calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, this.maps);
+                        if (this.maps.isTileMap) {
+                            markerFactor = isNullOrUndefined(this.maps.markerZoomFactor) ?
+                                zoomLevel : isNullOrUndefined(this.maps.mapScaleValue) ?
+                                zoomLevel : this.maps.mapScaleValue > 1 && this.maps.markerZoomFactor !== 1 ?
+                                this.maps.mapScaleValue : zoomLevel;
+                        }
+                        else {
+                            markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
+                                (Math.floor(this.maps.scale) !== 1 &&
+                                    this.maps.mapScaleValue !== zoomLevel)
+                                    &&
+                                        (isNullOrUndefined(this.maps.shouldZoomCurrentFactor))
+                                    ? this.maps.mapScaleValue : zoomLevel;
+                            if (((markerFactor === this.maps.mapScaleValue &&
+                                (this.maps.markerZoomFactor === 1 || this.maps.mapScaleValue === 1))
+                                && (!this.maps.enablePersistence))) {
+                                markerFactor = zoomLevel;
+                            }
+                        }
                     }
                     else {
+                        zoomLevel = this.calculateIndividualLayerMarkerZoomLevel(mapWidth, mapHeight, maxZoomFact);
                         markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
-                            (Math.floor(this.maps.scale) !== 1 &&
-                                this.maps.mapScaleValue !== zoomLevel)
-                                &&
-                                    (isNullOrUndefined(this.maps.shouldZoomCurrentFactor))
+                            (this.maps.mapScaleValue !== zoomLevel)
                                 ? this.maps.mapScaleValue : zoomLevel;
-                        if (((markerFactor === this.maps.mapScaleValue &&
-                            (this.maps.markerZoomFactor === 1 || this.maps.mapScaleValue === 1))
-                            && (!this.maps.enablePersistence))) {
-                            markerFactor = zoomLevel;
-                        }
                     }
+                    this.maps.markerZoomFactor = markerFactor;
                 }
-                else {
-                    zoomLevel = this.calculateIndividualLayerMarkerZoomLevel(mapWidth, mapHeight, maxZoomFact);
-                    markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
-                        (this.maps.mapScaleValue !== zoomLevel)
-                            ? this.maps.mapScaleValue : zoomLevel;
-                }
-                this.maps.markerZoomFactor = markerFactor;
             }
-        }
-        else {
-            this.maps.markerZoomedState = false;
-            if (this.maps.markerZoomFactor > 1) {
-                this.maps.markerCenterLatitude = null;
-                this.maps.markerCenterLongitude = null;
-                this.maps.markerZoomFactor = 1;
-                if (!this.maps.enablePersistence) {
-                    this.maps.mapScaleValue = 1;
+            else {
+                this.maps.markerZoomedState = false;
+                if (this.maps.markerZoomFactor > 1) {
+                    this.maps.markerCenterLatitude = null;
+                    this.maps.markerCenterLongitude = null;
+                    this.maps.markerZoomFactor = 1;
+                    if (!this.maps.enablePersistence) {
+                        this.maps.mapScaleValue = 1;
+                    }
                 }
-            }
-            if (this.maps.isTileMap && !this.maps.enablePersistence
-                && this.maps.mapScaleValue <= 1) {
-                this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? 1 : this.maps.mapScaleValue;
-                if (this.maps.mapScaleValue === 1 && this.maps.markerZoomFactor === 1) {
-                    this.maps.tileTranslatePoint.x = 0;
-                    this.maps.tileTranslatePoint.y = 0;
+                if (this.maps.isTileMap && !this.maps.enablePersistence
+                    && this.maps.mapScaleValue <= 1) {
+                    this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? (this.maps.isZoomByPosition ? this.maps.tileZoomLevel : 1)
+                        : this.maps.mapScaleValue;
+                    if (this.maps.mapScaleValue === 1 && this.maps.markerZoomFactor === 1) {
+                        this.maps.tileTranslatePoint.x = 0;
+                        this.maps.tileTranslatePoint.y = 0;
+                    }
                 }
             }
         }
     }
     /**
      * To check and trigger marker click event
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerClick(e) {
         const target = e.target.id;
@@ -4921,6 +4949,8 @@ class Marker {
     }
     /**
      * To check and trigger Cluster click event
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerClusterClick(e) {
         const target = e.target.id;
@@ -5011,6 +5041,9 @@ class Marker {
     }
     /**
      * To check and trigger marker move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerMove(e) {
         const targetId = e.target.id;
@@ -5029,6 +5062,9 @@ class Marker {
     }
     /**
      * To check and trigger cluster move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerClusterMouseMove(e) {
         const targetId = e.target.id;
@@ -5037,7 +5073,7 @@ class Marker {
         }
         const options = this.getMarker(targetId);
         if (this.maps.markerClusterExpand) {
-            e.target.setAttribute('style', 'cursor: pointer');
+            e.target.style.cursor = 'pointer';
         }
         if (isNullOrUndefined(options)) {
             return;
@@ -5301,6 +5337,7 @@ class BingMap {
         }
     }
     /**
+     * @returns {void}
      * @private
      */
     destroy() {
@@ -5337,6 +5374,11 @@ class ColorMapping {
     }
     /**
      * To color by value and color mapping
+     *
+     * @param {ColorMappingSettingsModel[]} colorMapping - Specifies the color mapping instance.
+     * @param {number} colorValue - Specifies the color value
+     * @param {string} equalValue - Specifies the equal value.
+     * @returns {any} - Returns the color mapping values.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getColorByValue(colorMapping, colorValue, equalValue) {
@@ -5527,10 +5569,7 @@ class ColorMapping {
     }
 }
 
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable jsdoc/require-param */
 /* eslint-disable no-case-declarations */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * To calculate and render the shape layer
  */
@@ -5553,10 +5592,10 @@ class LayerPanel {
                 height: areaRect.height
             });
             const parentElement = createElement('div', {
-                id: this.mapObject.element.id + '_Tile_SVG_Parent', styles: 'position: absolute; height: ' +
-                    (areaRect.height) + 'px; width: '
-                    + (areaRect.width) + 'px;'
+                id: this.mapObject.element.id + '_Tile_SVG_Parent'
             });
+            parentElement.style.cssText = 'position: absolute; height: ' + (areaRect.height) + 'px; width: ' +
+                (areaRect.width) + 'px;';
             parentElement.appendChild(this.tileSvgObject);
             secondaryEle.appendChild(parentElement);
         }
@@ -5610,13 +5649,13 @@ class LayerPanel {
             (!isNullOrUndefined(panel.mapObject.tileZoomLevel) && panel.mapObject.tileZoomLevel !== 1)) ?
             false : true;
         if (isNullOrUndefined(panel.mapObject.previousCenterLatitude) &&
-            isNullOrUndefined(panel.mapObject.previousCenterLongitude)) {
+            isNullOrUndefined(panel.mapObject.previousCenterLongitude) && !panel.mapObject.isZoomByPosition) {
             panel.mapObject.previousCenterLatitude = panel.mapObject.centerPosition.latitude;
             panel.mapObject.previousCenterLongitude = panel.mapObject.centerPosition.longitude;
         }
-        else if (panel.mapObject.previousCenterLatitude !==
+        else if ((panel.mapObject.previousCenterLatitude !==
             panel.mapObject.centerPosition.latitude && panel.mapObject.previousCenterLongitude !==
-            panel.mapObject.centerPosition.longitude) {
+            panel.mapObject.centerPosition.longitude) || panel.mapObject.isZoomByPosition) {
             panel.mapObject.centerPositionChanged = true;
             panel.mapObject.previousCenterLatitude = panel.mapObject.centerPosition.latitude;
             panel.mapObject.previousCenterLongitude = panel.mapObject.centerPosition.longitude;
@@ -5628,7 +5667,8 @@ class LayerPanel {
         let centerTileMap = center;
         if ((this.mapObject.isTileMap && panel.mapObject.markerModule) && panel.mapObject.zoomSettings.enable) {
             panel.mapObject.markerModule.calculateZoomCenterPositionAndFactor(this.mapObject.layersCollection);
-            if (!isNullOrUndefined(this.mapObject.markerCenterLatitude) && !isNullOrUndefined(this.mapObject.markerCenterLongitude)) {
+            if (!isNullOrUndefined(this.mapObject.markerCenterLatitude) && !isNullOrUndefined(this.mapObject.markerCenterLongitude)
+                && !panel.mapObject.isZoomByPosition) {
                 centerTileMap = new Point(panel.mapObject.markerCenterLongitude, panel.mapObject.markerCenterLatitude);
             }
         }
@@ -5644,7 +5684,7 @@ class LayerPanel {
         else {
             center = { x: null, y: null };
         }
-        let zoomFactorValue = panel.mapObject.zoomSettings.shouldZoomInitially ?
+        let zoomFactorValue = (panel.mapObject.zoomSettings.shouldZoomInitially && !panel.mapObject.isZoomByPosition) ?
             isNullOrUndefined(panel.mapObject.markerZoomFactor) ? 1 :
                 panel.mapObject.markerZoomFactor : panel.mapObject.zoomSettings.zoomFactor;
         zoomFactorValue = (panel.mapObject.enablePersistence) ? ((isNullOrUndefined(panel.mapObject.mapScaleValue))
@@ -5717,7 +5757,10 @@ class LayerPanel {
             panel.mapObject.previousZoomFactor = panel.mapObject.zoomSettings.zoomFactor;
         }
         if (panel.mapObject.navigationLineModule) {
-            panel.layerObject.appendChild(panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex));
+            const navigationLineElement = panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex);
+            if (!isNullOrUndefined(navigationLineElement)) {
+                panel.layerObject.appendChild(navigationLineElement);
+            }
         }
         if (panel.mapObject.markerModule) {
             panel.mapObject.markerModule.markerRender(this.mapObject, panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
@@ -5784,7 +5827,6 @@ class LayerPanel {
                             const imageUrl = resource['imageUrl'];
                             const subDomains = resource['imageUrlSubdomains'];
                             const maxZoom = resource['zoomMax'];
-                            const markerGroupElement = document.getElementById(proxy.mapObject.element.id + '_Markers_Group');
                             if (imageUrl !== null && imageUrl !== undefined && imageUrl !== bing.imageUrl) {
                                 bing.imageUrl = imageUrl;
                             }
@@ -5898,13 +5940,13 @@ class LayerPanel {
         const colors = shapeSettings.palette.length > 1 ? shapeSettings.palette : getShapeColor(this.mapObject.theme);
         const labelTemplateEle = createElement('div', {
             id: this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_Label_Template_Group',
-            className: this.mapObject.element.id + '_template',
-            styles: 'pointer-events: none; overflow: hidden; position: absolute;' +
-                'top:' + this.mapObject.mapAreaRect.y + 'px;' +
-                'left:' + this.mapObject.mapAreaRect.x + 'px;' +
-                'height:' + this.mapObject.mapAreaRect.height + 'px;' +
-                'width:' + this.mapObject.mapAreaRect.width + 'px;'
+            className: this.mapObject.element.id + '_template'
         });
+        labelTemplateEle.style.cssText = 'pointer-events: none; overflow: hidden; position: absolute;' +
+            'top:' + this.mapObject.mapAreaRect.y + 'px;' +
+            'left:' + this.mapObject.mapAreaRect.x + 'px;' +
+            'height:' + this.mapObject.mapAreaRect.height + 'px;' +
+            'width:' + this.mapObject.mapAreaRect.width + 'px;';
         if (this.currentLayer.layerData.length !== 0) {
             for (let i = 0; i < this.currentLayer.layerData.length; i++) {
                 let k;
@@ -5945,8 +5987,6 @@ class LayerPanel {
                 fill = Object.prototype.toString.call(getShapeColor$$1) === '[object Object]' && !isNullOrUndefined(getShapeColor$$1['fill'])
                     ? getShapeColor$$1['fill'] : fill;
                 if (this.currentLayer.shapeSettings.borderColorValuePath || this.currentLayer.shapeSettings.borderWidthValuePath) {
-                    const borderColorValue = this.currentLayer.shapeSettings.borderColorValuePath;
-                    const borderWidthValue = this.currentLayer.shapeSettings.borderWidthValuePath;
                     k = checkShapeDataFields(
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this.currentLayer.dataSource, currentShapeData['property'], this.currentLayer.shapeDataPath, this.currentLayer.shapePropertyPath, this.currentLayer);
@@ -6073,7 +6113,9 @@ class LayerPanel {
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             const pointData = currentShapeData['point'];
-                            const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (this.mapObject.isTileMap ? this.mapObject.scale : this.currentFactor);
+                            const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ?
+                                shapeSettings.circleRadius : shapeSettings.circleRadius / (this.mapObject.isTileMap ?
+                                this.mapObject.scale : this.currentFactor);
                             circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                             pathEle = this.mapObject.renderer.drawCircle(circleOptions);
                             break;
@@ -6083,7 +6125,7 @@ class LayerPanel {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 const pointData = multiPointData['point'];
                                 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);
+                                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);
                             });
@@ -6112,15 +6154,16 @@ class LayerPanel {
     /**
      * layer features as bubble, marker, datalabel, navigation line.
      *
-     * @param {groupElement} Element - Specifies the element to append the group
-     * @param {pathEle} Element - Specifies the svg element
-     * @param {drawingType} string - Specifies the data type
-     * @param {currentShapeData} any - Specifies the layer of shapedata.
-     * @param {index} number - Specifies the tab index.
+     * @param {Element} groupElement - Specifies the element to append the group.
+     * @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
-    pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, index) {
+    currentShapeData, index) {
         const property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
             this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
         let properties;
@@ -6132,10 +6175,10 @@ class LayerPanel {
         }
         pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
             (currentShapeData['property'][properties]) : ''));
-        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + index + 3).toString());
+        pathEle.tabIndex = this.mapObject.tabIndex + index + 3;
         pathEle.setAttribute('role', '');
         if (drawingType === 'LineString' || drawingType === 'MultiLineString') {
-            pathEle.setAttribute('style', 'outline:none');
+            pathEle.style.cssText = 'outline:none';
         }
         maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
         if (this.mapObject.toggledShapeElementId) {
@@ -6147,7 +6190,7 @@ class LayerPanel {
                     pathEle.setAttribute('stroke', styleProperty.border.color);
                     pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
                     pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
-                    pathEle.setAttribute('stroke-width', (styleProperty.border.width).toString());
+                    pathEle.setAttribute('stroke-width', (isNullOrUndefined(styleProperty.border.width) ? 0 : styleProperty.border.width).toString());
                 }
             }
         }
@@ -6189,9 +6232,9 @@ class LayerPanel {
             this.mapObject.markerModule.calculateZoomCenterPositionAndFactor(this.mapObject.layersCollection);
         }
         const group = (this.mapObject.renderer.createGroup({
-            id: this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_dataLableIndex_Group',
-            style: 'pointer-events: none;'
+            id: this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_dataLableIndex_Group'
         }));
+        group.style.pointerEvents = 'none';
         if (this.mapObject.dataLabelModule && this.currentLayer.dataLabelSettings.visible) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const intersect = [];
@@ -6208,8 +6251,8 @@ class LayerPanel {
             this.layerObject.appendChild(element);
         });
         if (this.mapObject.markerModule) {
-            this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
-                : this.currentFactor), null);
+            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.layerGroup.appendChild(this.layerObject);
@@ -6219,11 +6262,11 @@ class LayerPanel {
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {number} layerIndex - Specifies the layer index
-     * @param {object[]} shape - Specifies the shape
+     * @param {any[]} shape - Specifies the shape
      * @param {Element} group - Specifies the group
      * @param {number} shapeIndex - Specifies the shape index
      * @param {HTMLElement} labelTemplateEle - Specifies the label template element
-     * @param {object[]} intersect - Specifies the intersect
+     * @param {any[]} intersect - Specifies the intersect
      * @returns {void}
      */
     renderLabel(layer, layerIndex, 
@@ -6321,10 +6364,12 @@ class LayerPanel {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const multiPolygonDatas = [];
                 for (let i = 0; i < coordinates.length; i++) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    newData = this.calculatePolygonBox(coordinates[i][0], data, properties);
-                    if (newData.length > 0) {
-                        multiPolygonDatas.push(newData);
+                    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);
+                        if (newData.length > 0) {
+                            multiPolygonDatas.push(newData);
+                        }
                     }
                 }
                 multiPolygonDatas['property'] = properties;
@@ -6333,15 +6378,15 @@ class LayerPanel {
                 this.currentLayer.layerData.push(multiPolygonDatas);
                 break;
             case 'linestring':
-                const extraSpace = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                const lineExtraSpace = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                     (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                         parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                coordinates.map((points, index) => {
+                coordinates.map((points) => {
                     latitude = points[1];
                     longitude = points[0];
                     const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
-                    this.calculateBox(point, extraSpace);
+                    this.calculateBox(point, lineExtraSpace);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -6354,10 +6399,12 @@ class LayerPanel {
                 const extraSpaces = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                     (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                         parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const multiLineData = [];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map((multiPoints) => {
                     newData = [];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     multiPoints.map((points) => {
                         latitude = points[1];
                         longitude = points[0];
@@ -6386,7 +6433,7 @@ class LayerPanel {
                     point: point, type: type, lat: latitude, lng: longitude, property: properties
                 });
                 break;
-            case 'multipoint': {
+            case 'multipoint':
                 const extraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                     (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                         parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
@@ -6406,7 +6453,6 @@ class LayerPanel {
                 newData['type'] = type;
                 this.currentLayer.layerData.push(newData);
                 break;
-            }
             case 'path':
                 this.currentLayer.layerData.push({
                     point: data['d'], type: type, property: properties
@@ -6416,7 +6462,8 @@ class LayerPanel {
     }
     calculateBox(point, extraSpace) {
         if (isNullOrUndefined(this.rectBounds)) {
-            this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace, y: point.y + extraSpace } };
+            this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace,
+                    y: point.y + extraSpace } };
         }
         else {
             this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x - extraSpace);
@@ -6539,6 +6586,7 @@ class LayerPanel {
                     case 'multilinestring':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map((multiPoint, index) => {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             multiPoint.map((point, index) => {
                                 this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
                             });
@@ -6554,6 +6602,7 @@ class LayerPanel {
                         this.calculateRectBox(coordinates, 'point');
                         break;
                     case 'multipoint':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map((point, index) => {
                             this.calculateRectBox(point, 'multipoint', index === 0 ? true : false);
                         });
@@ -6568,7 +6617,7 @@ class LayerPanel {
         const newData = [];
         const bounds = this.mapObject.baseMapBounds;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        coordinates.map((currentPoint, index) => {
+        coordinates.map((currentPoint) => {
             const latitude = currentPoint[1];
             const longitude = currentPoint[0];
             if ((longitude >= bounds.longitude.min && longitude <= bounds.longitude.max)
@@ -6661,8 +6710,8 @@ class LayerPanel {
                             tileI = (tileI % ycount) + ycount;
                         }
                         const tile = new Tile(tileI % ycount, j);
-                        tile.left = x;
-                        tile.top = y;
+                        tile.left = Math.round(x);
+                        tile.top = Math.round(y);
                         if (baseLayer.layerType === 'Bing' || (bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
                             const key = baseLayer.key;
                             tile.src = bing.getBingMap(tile, key, baseLayer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
@@ -6707,7 +6756,8 @@ class LayerPanel {
                 }
             }
         }
-        if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset) {
+        if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset || this.mapObject.isZoomByPosition
+            || this.mapObject.zoomNotApplied) {
             this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
         }
     }
@@ -6752,18 +6802,45 @@ class LayerPanel {
                         animateElement = element ? element.children[0] : null;
                     }
                 }
-                let id = 0;
-                for (const tile of this.tiles) {
-                    const imgElement = createElement('img');
-                    imgElement.setAttribute('height', '256px');
-                    imgElement.setAttribute('width', '256px');
-                    imgElement.setAttribute('src', tile.src);
-                    imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
+                for (let id = 0; id < this.tiles.length; id++) {
+                    const tile = this.tiles[id];
+                    let imgElement = null;
                     const mapId = this.mapObject.element.id;
-                    imgElement.onload = () => {
-                        if (document.getElementById(mapId + '_tile_' + id) && type === 'Pan') {
-                            removeElement(mapId + '_tile_' + 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'));
+                            child.appendChild(imgElement);
+                            animateElement.appendChild(child);
+                        }
+                    }
+                    else {
+                        imgElement = createElement('img');
+                        imgElement.setAttribute('height', '256px');
+                        imgElement.setAttribute('width', '256px');
+                        imgElement.setAttribute('src', tile.src);
+                        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';
@@ -6774,11 +6851,27 @@ class LayerPanel {
                         if (animateElement) {
                             animateElement.appendChild(child);
                         }
-                        id++;
-                        if (id === this.tiles.length && document.getElementById(this.mapObject.element.id + '_animated_tiles_old')) {
-                            removeElement(this.mapObject.element.id + '_animated_tiles_old');
+                    }
+                    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 (isExistingElement) {
+                            animateElement.children[l].style.display = 'none';
+                        }
+                        else {
+                            animateElement.removeChild(animateElement.children[l]);
+                        }
+                    }
                 }
             }, timeOut);
         }
@@ -6947,8 +7040,6 @@ class LayerPanel {
     }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable jsdoc/require-param */
 /**
  * Represents the annotation elements for map.
  */
@@ -6987,8 +7078,9 @@ class Annotations {
         const availSize = map.availableSize;
         const id = map.element.id + '_Annotation_' + annotationIndex;
         const childElement = createElement('div', {
-            id: map.element.id + '_Annotation_' + annotationIndex, styles: 'position: absolute; z-index:' + annotation.zIndex + ';'
+            id: map.element.id + '_Annotation_' + annotationIndex
         });
+        childElement.style.cssText = 'position: absolute; z-index:' + annotation.zIndex + ';';
         const argsData = {
             cancel: false, name: annotationRendering, content: annotation.content,
             annotation: annotation
@@ -7071,11 +7163,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable radix */
-/* eslint-disable max-len */
-/* eslint-disable valid-jsdoc */
 /**
  * Maps Component file
  */
@@ -7252,18 +7339,20 @@ let Maps = class Maps extends Component {
         this.setCulture();
     }
     renderElements() {
-        this.trigger(load, { maps: this });
-        this.createSVG();
-        this.findBaseAndSubLayers();
-        this.createSecondaryElement();
-        this.addTabIndex();
-        this.themeStyle = getThemeStyle(this.theme);
-        this.renderBorder();
-        this.renderTitle(this.titleSettings, 'title', null, null);
-        this.renderArea();
-        this.processRequestJsonData();
-        this.renderComplete();
-        this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
+        if (!this.isDestroyed) {
+            this.trigger(load, { maps: this });
+            this.createSVG();
+            this.findBaseAndSubLayers();
+            this.createSecondaryElement();
+            this.addTabIndex();
+            this.themeStyle = getThemeStyle(this.theme);
+            this.renderBorder();
+            this.renderTitle(this.titleSettings, 'title', null, null);
+            this.renderArea();
+            this.processRequestJsonData();
+            this.renderComplete();
+            this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
+        }
     }
     /**
      * To Initialize the control rendering.
@@ -7312,7 +7401,8 @@ let Maps = class Maps extends Component {
                     if (layer.markerSettings[i].dataSource instanceof DataManager) {
                         this.serverProcess['request']++;
                         dataModule = layer.markerSettings[i].dataSource;
-                        queryModule = layer.markerSettings[i].query instanceof Query ? layer.markerSettings[i].query : new Query();
+                        queryModule = layer.markerSettings[i].query instanceof Query ?
+                            layer.markerSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7328,7 +7418,8 @@ let Maps = class Maps extends Component {
                     if (layer.bubbleSettings[i].dataSource instanceof DataManager) {
                         this.serverProcess['request']++;
                         dataModule = layer.bubbleSettings[i].dataSource;
-                        queryModule = layer.bubbleSettings[i].query instanceof Query ? layer.bubbleSettings[i].query : new Query();
+                        queryModule = layer.bubbleSettings[i].query instanceof Query ?
+                            layer.bubbleSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7413,7 +7504,7 @@ let Maps = class Maps extends Component {
         const position = this.getExtraPosition();
         for (let i = 0; i < this.layers.length; i++) {
             if (position.x !== 0 || position.y !== 0) {
-                let markerTemplate$$1 = document.getElementById(this.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                const markerTemplate$$1 = document.getElementById(this.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
                 if (!isNullOrUndefined(markerTemplate$$1)) {
                     markerTemplate$$1.style.top = this.mapAreaRect.y + position.y + 'px';
                     markerTemplate$$1.style.left = this.mapAreaRect.x + position.x + 'px';
@@ -7434,6 +7525,7 @@ let Maps = class Maps extends Component {
             }
             if (!this.isResize) {
                 for (let k = 0; k < this.layers[i].markerSettings.length; k++) {
+                    // eslint-disable-next-line max-len
                     if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
                         && this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
                         const markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
@@ -7505,7 +7597,9 @@ let Maps = class Maps extends Component {
             }
         }
         this.zoomingChange();
-        this.trigger(loaded, { maps: this, isResized: this.isResize });
+        if (!this.isZoomByPosition && !this.zoomNotApplied) {
+            this.trigger(loaded, { maps: this, isResized: this.isResize });
+        }
         this.isResize = false;
     }
     /**
@@ -7599,7 +7693,7 @@ let Maps = class Maps extends Component {
     addTabIndex() {
         this.element.setAttribute('aria-label', this.description || 'Maps Element');
         this.element.setAttribute('role', '');
-        this.element.setAttribute('tabindex', this.tabIndex.toString());
+        this.element.tabIndex = this.tabIndex;
     }
     // private setSecondaryElementPosition(): void {
     //     if (!this.isTileMap) {
@@ -7617,8 +7711,8 @@ let Maps = class Maps extends Component {
             this.zoomModule.layerCollectionEle = getElementByID(this.element.id + '_Layer_Collections');
         }
         if (this.isTileMap && getElementByID(this.element.id + '_Tile_SVG') && getElementByID(this.element.id + '_tile_parent')) {
-            let tileElement = getElementByID(this.element.id + '_tile_parent');
-            let tileSvgElement = getElementByID(this.element.id + '_Tile_SVG');
+            const tileElement = getElementByID(this.element.id + '_tile_parent');
+            const tileSvgElement = getElementByID(this.element.id + '_Tile_SVG');
             const tileSvgParentElement = getElementByID(this.element.id + '_Tile_SVG_Parent');
             const tileRect = tileElement.getBoundingClientRect();
             const tileSvgRect = tileSvgElement.getBoundingClientRect();
@@ -7627,8 +7721,10 @@ let Maps = class Maps extends Component {
             tileSvgParentElement.style.left = left + 'px';
             tileSvgParentElement.style.top = top + 'px';
             if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
-                tileElement.style.width = tileSvgElement.style.width = this.legendModule.legendTotalRect.width.toString();
-                tileElement.style.height = tileSvgElement.style.height = this.legendModule.legendTotalRect.height.toString();
+                tileElement.style.width = tileSvgElement.style.width =
+                    this.legendModule.legendTotalRect.width.toString();
+                tileElement.style.height = tileSvgElement.style.height =
+                    this.legendModule.legendTotalRect.height.toString();
                 tileSvgParentElement.style.width = this.legendModule.legendTotalRect.width + 'px';
                 tileSvgParentElement.style.height = this.legendModule.legendTotalRect.height + 'px';
             }
@@ -7649,7 +7745,7 @@ let Maps = class Maps extends Component {
             if (!isNullOrUndefined(elements) && elements.childElementCount > 0) {
                 for (let i = 0; i < elements.childNodes.length; i++) {
                     const childElement = elements.childNodes[i];
-                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') == -1) {
+                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') === -1) {
                         const layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                         for (let j = 0; j < childElement.childNodes.length; j++) {
                             const childNode = childElement.childNodes[j];
@@ -7662,7 +7758,7 @@ let Maps = class Maps extends Component {
                     }
                 }
             }
-            if (this.zoomModule && (this.previousScale !== this.scale)) {
+            if (this.zoomModule && ((this.previousScale !== this.scale) || this.zoomNotApplied || this.isZoomByPosition)) {
                 this.zoomModule.applyTransform(this, true);
             }
         }
@@ -7670,9 +7766,9 @@ let Maps = class Maps extends Component {
     createSecondaryElement() {
         if (isNullOrUndefined(document.getElementById(this.element.id + '_Secondary_Element'))) {
             const secondaryElement = createElement('div', {
-                id: this.element.id + '_Secondary_Element',
-                styles: 'position: absolute;z-index:2;'
+                id: this.element.id + '_Secondary_Element'
             });
+            secondaryElement.style.cssText = 'position: absolute;z-index:2;';
             this.element.appendChild(secondaryElement);
         }
     }
@@ -7726,18 +7822,20 @@ let Maps = class Maps extends Component {
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
             const ele = createElement('div', {
-                id: this.element.id + '_tile_parent', styles: 'position: absolute; left: ' +
-                    (this.mapAreaRect.x) + 'px; right: ' + (this.margin.right) + 'px; top: '
-                    + (this.mapAreaRect.y + padding) + 'px; height: ' +
-                    (this.mapAreaRect.height) + 'px; width: '
-                    + (this.mapAreaRect.width) + 'px; overflow: hidden;'
+                id: this.element.id + '_tile_parent'
             });
+            ele.style.cssText = 'position: absolute; left: ' +
+                (this.mapAreaRect.x) + 'px; right: ' + (this.margin.right) + 'px; top: '
+                + (this.mapAreaRect.y + padding) + 'px; height: ' +
+                (this.mapAreaRect.height) + 'px; width: '
+                + (this.mapAreaRect.width) + 'px; overflow: hidden;';
             const ele1 = createElement('div', {
-                id: this.element.id + '_tiles', styles: 'position: absolute; left: ' +
-                    (this.mapAreaRect.x) + 'px;  right: ' + (this.margin.right) + 'px; top: '
-                    + (this.mapAreaRect.y + padding) + 'px; height: ' + (this.mapAreaRect.height) + 'px; width: '
-                    + (this.mapAreaRect.width) + 'px; overflow: hidden;'
+                id: this.element.id + '_tiles'
             });
+            ele1.style.cssText = 'position: absolute; left: ' +
+                (this.mapAreaRect.x) + 'px;  right: ' + (this.margin.right) + 'px; top: '
+                + (this.mapAreaRect.y + padding) + 'px; height: ' + (this.mapAreaRect.height) + 'px; width: '
+                + (this.mapAreaRect.width) + 'px; overflow: hidden;';
             this.element.appendChild(ele);
             this.element.appendChild(ele1);
         }
@@ -7777,7 +7875,7 @@ let Maps = class Maps extends Component {
                 break;
             }
         }
-        subLayers.map((subLayer, subLayerIndex) => {
+        subLayers.map((subLayer) => {
             if (subLayer.visible) {
                 this.layersCollection.push(subLayer);
             }
@@ -7937,6 +8035,9 @@ let Maps = class Maps extends Component {
     }
     keyUpHandler(event) {
         const id = event.target['id'];
+        if (this.isTileMap) {
+            this.removeTileMap();
+        }
         if (event.code === 'Tab' && id.indexOf('_LayerIndex_') > -1 && id.indexOf('shapeIndex') > -1) {
             this.keyboardHighlightSelection(id, event.type);
         }
@@ -7970,6 +8071,13 @@ let Maps = class Maps extends Component {
     }
     keyDownHandler(event) {
         const zoom = this.zoomModule;
+        if ((event.code === 'ArrowUp' || event.code === 'ArrowDown' || event.code === 'ArrowLeft'
+            || event.code === 'ArrowRight') && zoom) {
+            const animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
+            if (this.isTileMap && !isNullOrUndefined(animatedTiles)) {
+                this.currentTiles = animatedTiles.cloneNode(true);
+            }
+        }
         if ((event.key === '+' || event.code === 'Equal') && zoom) {
             zoom.performZoomingByToolBar('zoomin');
         }
@@ -8044,6 +8152,7 @@ let Maps = class Maps extends Component {
      * This method is used to perform the operations when a click operation is performed on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
+     * @returns {void}
      */
     mapsOnClick(e) {
         const targetEle = e.target;
@@ -8108,8 +8217,9 @@ let Maps = class Maps extends Component {
     getClickLocation(targetId, pageX, pageY, targetElement, x, y) {
         let layerIndex = 0;
         let latLongValue;
-        if (targetId.indexOf('_LayerIndex_') !== -1 && !this.isTileMap && (parseInt(this.mouseDownEvent['x']) === parseInt(this.mouseClickEvent['x']))
-            && (parseInt(this.mouseDownEvent['y']) === parseInt(this.mouseClickEvent['y']))) {
+        if (targetId.indexOf('_LayerIndex_') !== -1 && !this.isTileMap &&
+            (parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
+            (parseInt(this.mouseDownEvent['y'], 10) === parseInt(this.mouseClickEvent['y'], 10))) {
             layerIndex = parseFloat(targetId.split('_LayerIndex_')[1].split('_')[0]);
             if (this.layers[layerIndex].geometryType === 'Normal') {
                 if (targetId.indexOf('_shapeIndex_') > -1) {
@@ -8146,12 +8256,21 @@ let Maps = class Maps extends Component {
                 latLongValue = this.getGeoLocation(layerIndex, x, y);
             }
         }
-        else if (this.isTileMap && (parseInt(this.mouseDownEvent['x']) === parseInt(this.mouseClickEvent['x']))
-            && (parseInt(this.mouseDownEvent['y']) === parseInt(this.mouseClickEvent['y']))) {
+        else if (this.isTileMap && (parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
+            (parseInt(this.mouseDownEvent['y'], 10) === parseInt(this.mouseClickEvent['y'], 10))) {
             latLongValue = this.getTileGeoLocation(x, y);
         }
         return latLongValue;
     }
+    removeTileMap() {
+        const animateElement = document.getElementById(this.element.id + '_animated_tiles');
+        if (!isNullOrUndefined(this.currentTiles) && animateElement.childElementCount !== this.currentTiles.childElementCount) {
+            for (let l = animateElement.childElementCount - 1; l >= this.currentTiles.childElementCount; l--) {
+                animateElement.removeChild(animateElement.children[l]);
+            }
+        }
+        this.currentTiles = null;
+    }
     /**
      * This method is used to perform operations when mouse click on maps.
      *
@@ -8183,6 +8302,9 @@ let Maps = class Maps extends Component {
             pageY = e.pageY;
             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);
@@ -8215,13 +8337,14 @@ let Maps = class Maps extends Component {
         }
         const rect = this.element.getBoundingClientRect();
         const element = e.target;
+        const animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
+        if (this.isTileMap && !isNullOrUndefined(animatedTiles)) {
+            this.currentTiles = animatedTiles.cloneNode(true);
+        }
         if (element.id.indexOf('_ToolBar') === -1) {
             const markerModule = this.markerModule;
             if (element.id.indexOf('shapeIndex') > -1 || element.id.indexOf('Tile') > -1) {
                 this.mergeCluster();
-                if (element.id.indexOf('shapeIndex') > -1) {
-                    this.triggerShapeSelection(element);
-                }
             }
             if (markerModule) {
                 markerModule.markerClick(e);
@@ -8250,6 +8373,7 @@ let Maps = class Maps extends Component {
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
+     * @returns {void}
      */
     mapsOnDoubleClick(e) {
         this.notify('dblclick', e);
@@ -8273,8 +8397,10 @@ let Maps = class Maps extends Component {
                 latitude = latLongValue['latitude'];
                 longitude = latLongValue['longitude'];
             }
-            const doubleClickArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
-                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
+            const doubleClickArgs = {
+                cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
+                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null
+            };
             this.trigger('doubleClick', doubleClickArgs);
         }
     }
@@ -8365,28 +8491,30 @@ let Maps = class Maps extends Component {
      * @param e - Specifies the arguments of window resize event.
      */
     mapsOnResize(e) {
-        this.isResize = this.isReset = true;
-        const args = {
-            cancel: false,
-            name: resize,
-            previousSize: this.availableSize,
-            currentSize: calculateSize(this),
-            maps: this
-        };
-        this.trigger(resize, args);
-        if (!args.cancel) {
-            if (this.resizeTo) {
-                clearTimeout(this.resizeTo);
-            }
-            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
-                this.resizeTo = setTimeout(() => {
-                    this.unWireEVents();
-                    this.createSVG();
-                    this.refreshing = true;
-                    this.wireEVents();
-                    this.render();
-                    this.refreshing = false;
-                }, 500);
+        if (!this.isDestroyed) {
+            this.isResize = this.isReset = true;
+            const args = {
+                cancel: false,
+                name: resize,
+                previousSize: this.availableSize,
+                currentSize: calculateSize(this),
+                maps: this
+            };
+            this.trigger(resize, args);
+            if (!args.cancel) {
+                if (this.resizeTo) {
+                    clearTimeout(this.resizeTo);
+                }
+                if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
+                    this.resizeTo = setTimeout(() => {
+                        this.unWireEVents();
+                        this.createSVG();
+                        this.refreshing = true;
+                        this.wireEVents();
+                        this.render();
+                        this.refreshing = false;
+                    }, 500);
+                }
             }
         }
         return false;
@@ -8401,32 +8529,34 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     zoomByPosition(centerPosition, zoomFactor) {
-        const factor = this.mapLayerPanel.calculateFactor(this.layersCollection[0]);
-        let position;
-        const size = this.mapAreaRect;
-        if (!this.isTileMap && this.zoomModule) {
-            if (!isNullOrUndefined(centerPosition)) {
-                position = convertGeoToPoint(centerPosition.latitude, centerPosition.longitude, factor, this.layersCollection[0], this);
-                const mapRect = document.getElementById(this.element.id + '_Layer_Collections').getBoundingClientRect();
-                const svgRect = this.svgObject.getBoundingClientRect();
-                const xDiff = Math.abs(mapRect.left - svgRect.left) / this.scale;
-                const yDiff = Math.abs(mapRect.top - svgRect.top) / this.scale;
-                const x = this.translatePoint.x + xDiff;
-                const y = this.translatePoint.y + yDiff;
-                this.scale = zoomFactor;
-                this.translatePoint.x = ((mapRect.left < svgRect.left ? x : 0) + (size.width / 2) - (position.x * zoomFactor)) / zoomFactor;
-                this.translatePoint.y = ((mapRect.top < svgRect.top ? y : 0) + (size.height / 2) - (position.y * zoomFactor)) / zoomFactor;
-                this.zoomModule.applyTransform(this);
+        if (!this.isDestroyed) {
+            this.zoomNotApplied = false;
+            let isRefresh = this.zoomSettings.zoomFactor === zoomFactor;
+            if (!this.isTileMap && this.zoomModule) {
+                if (!isNullOrUndefined(centerPosition)) {
+                    this.zoomSettings.zoomFactor = zoomFactor;
+                    isRefresh = this.centerPosition.latitude === centerPosition.latitude &&
+                        this.centerPosition.longitude === centerPosition.longitude ? true : isRefresh;
+                    this.centerPosition = centerPosition;
+                    this.isZoomByPosition = true;
+                    this.mapScaleValue = null;
+                }
+                else {
+                    this.zoomSettings.zoomFactor = zoomFactor;
+                    this.isZoomByPosition = true;
+                    this.mapScaleValue = null;
+                }
             }
-            else {
-                position = { x: size.width / 2, y: size.height / 2 };
-                this.zoomModule.performZooming(position, zoomFactor, zoomFactor > this.scale ? 'ZoomIn' : 'ZoomOut');
+            else if (this.zoomModule) {
+                this.tileZoomLevel = this.zoomSettings.zoomFactor = zoomFactor;
+                isRefresh = this.centerPosition.latitude === centerPosition.latitude &&
+                    this.centerPosition.longitude === centerPosition.longitude ? true : isRefresh;
+                this.centerPosition = centerPosition;
+                this.isZoomByPosition = true;
+            }
+            if (isRefresh) {
+                this.refresh();
             }
-        }
-        else if (this.zoomModule) {
-            this.tileZoomLevel = zoomFactor;
-            this.tileTranslatePoint = this.mapLayerPanel['panTileMap'](this.availableSize.width, this.availableSize.height, { x: centerPosition.longitude, y: centerPosition.latitude });
-            this.mapLayerPanel.generateTiles(zoomFactor, this.tileTranslatePoint, null, new BingMap(this));
         }
     }
     /**
@@ -8434,38 +8564,44 @@ let Maps = class Maps extends Component {
      *
      * @param {PanDirection} direction - Specifies the direction in which the panning is performed.
      * @param {PointerEvent | TouchEvent} mouseLocation - Specifies the location of the mouse pointer in maps.
+     * @returns {void}
      */
     panByDirection(direction, mouseLocation) {
-        let xDiff = 0;
-        let yDiff = 0;
-        switch (direction) {
-            case 'Left':
-                xDiff = -(this.mapAreaRect.width / 7);
-                break;
-            case 'Right':
-                xDiff = (this.mapAreaRect.width / 7);
-                break;
-            case 'Top':
-                yDiff = -(this.mapAreaRect.height / 7);
-                break;
-            case 'Bottom':
-                yDiff = (this.mapAreaRect.height / 7);
-                break;
-        }
-        if (this.zoomModule) {
-            this.zoomModule.panning(direction, xDiff, yDiff, mouseLocation);
+        if (!this.isDestroyed) {
+            let xDiff = 0;
+            let yDiff = 0;
+            switch (direction) {
+                case 'Left':
+                    xDiff = -(this.mapAreaRect.width / 7);
+                    break;
+                case 'Right':
+                    xDiff = (this.mapAreaRect.width / 7);
+                    break;
+                case 'Top':
+                    yDiff = -(this.mapAreaRect.height / 7);
+                    break;
+                case 'Bottom':
+                    yDiff = (this.mapAreaRect.height / 7);
+                    break;
+            }
+            if (this.zoomModule) {
+                this.zoomModule.panning(direction, xDiff, yDiff, mouseLocation);
+            }
         }
     }
     /**
      * This method is used to add the layers dynamically to the maps.
      *
      * @param {Object} layer - Specifies the layer for the maps.
+     * @returns {void}
      */
     addLayer(layer) {
-        let mapsLayer = this.layers;
-        mapsLayer.push(layer);
-        this.isAddLayer = true;
-        this.layers = mapsLayer;
+        if (!this.isDestroyed) {
+            const mapsLayer = this.layers;
+            mapsLayer.push(layer);
+            this.isAddLayer = true;
+            this.layers = mapsLayer;
+        }
     }
     /**
      * This method is used to remove a layer from map.
@@ -8474,9 +8610,11 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     removeLayer(index) {
-        let mapsLayer = this.layers;
-        mapsLayer.splice(index, 1);
-        this.layers = mapsLayer;
+        if (!this.isDestroyed) {
+            const mapsLayer = this.layers;
+            mapsLayer.splice(index, 1);
+            this.layers = mapsLayer;
+        }
     }
     /**
      * This method is used to add markers dynamically in the maps.
@@ -8488,14 +8626,16 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     addMarker(layerIndex, markerCollection) {
-        const layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
-        if (markerCollection.length > 0 && layerEle) {
-            for (const newMarker of markerCollection) {
-                this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+        if (!this.isDestroyed) {
+            const layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
+            if (markerCollection.length > 0 && layerEle) {
+                for (const newMarker of markerCollection) {
+                    this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+                }
+                const markerModule = new Marker(this);
+                markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+                this.arrangeTemplate();
             }
-            const markerModule = new Marker(this);
-            markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
-            this.arrangeTemplate();
         }
     }
     /**
@@ -8508,93 +8648,96 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     shapeSelection(layerIndex, propertyName, name, enable) {
-        let targetEle;
-        let subLayerIndex;
-        const popertyNameArray = Array.isArray(propertyName) ? propertyName : Array(propertyName);
-        if (isNullOrUndefined(enable)) {
-            enable = true;
-        }
-        const selectionsettings = this.layers[layerIndex].selectionSettings;
-        if (!selectionsettings.enableMultiSelect && this.legendSelection && enable) {
-            this.removeShapeSelection();
-        }
-        if (this.layers[layerIndex].type === 'SubLayer') {
-            for (let i = 0; i < this.layersCollection.length; i++) {
-                if ((this.layersCollection[i].shapeData === this.layers[layerIndex].shapeData)) {
-                    subLayerIndex = i;
-                    break;
+        if (!this.isDestroyed) {
+            let targetEle;
+            let subLayerIndex;
+            const popertyNameArray = Array.isArray(propertyName) ? propertyName : Array(propertyName);
+            if (isNullOrUndefined(enable)) {
+                enable = true;
+            }
+            const selectionsettings = this.layers[layerIndex].selectionSettings;
+            if (!selectionsettings.enableMultiSelect && this.legendSelection && enable) {
+                this.removeShapeSelection();
+            }
+            if (this.layers[layerIndex].type === 'SubLayer') {
+                for (let i = 0; i < this.layersCollection.length; i++) {
+                    if ((this.layersCollection[i].shapeData === this.layers[layerIndex].shapeData)) {
+                        subLayerIndex = i;
+                        break;
+                    }
                 }
             }
-        }
-        if (selectionsettings.enable) {
-            let targetId;
-            let dataIndex;
-            let shapeIndex;
-            let indexValue;
-            let shapeDataValue;
-            let data;
-            const shapeData = this.layers[layerIndex].shapeData['features'];
-            for (let i = 0; i < shapeData.length; i++) {
-                for (let j = 0; j < popertyNameArray.length; j++) {
-                    const propertyName = !isNullOrUndefined(shapeData[i]['properties'][popertyNameArray[j]])
-                        && isNaN(shapeData[i]['properties'][popertyNameArray[j]]) ?
-                        shapeData[i]['properties'][popertyNameArray[j]].toLowerCase() : shapeData[i]['properties'][popertyNameArray[j]];
-                    const shapeName = !isNullOrUndefined(name) && typeof name === 'string' ? name.toLowerCase() : name;
-                    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]);
-                        }
-                        const baseLayer = this.layers[layerIndex];
-                        if (this.baseLayerIndex >= 0 && baseLayer.isBaseLayer) {
-                            indexValue = 0;
-                        }
-                        else if (this.layers[layerIndex].type === 'SubLayer') {
-                            indexValue = subLayerIndex;
-                        }
-                        targetId = this.element.id + '_' + 'LayerIndex_' + indexValue + '_shapeIndex_' + i + '_dataIndex_' + k;
-                        targetEle = getElement(targetId);
-                        if (isNullOrUndefined(k) && isNullOrUndefined(targetEle)) {
-                            targetId = this.element.id + '_' + 'LayerIndex_' + layerIndex + '_shapeIndex_' + i + '_dataIndex_null';
+            if (selectionsettings.enable) {
+                let targetId;
+                let dataIndex;
+                let shapeIndex;
+                let indexValue;
+                let shapeDataValue;
+                let data;
+                const shapeData = this.layers[layerIndex].shapeData['features'];
+                for (let i = 0; i < shapeData.length; i++) {
+                    for (let j = 0; j < popertyNameArray.length; j++) {
+                        const propertyName = !isNullOrUndefined(shapeData[i]['properties'][popertyNameArray[j]])
+                            && isNaN(shapeData[i]['properties'][popertyNameArray[j]]) ?
+                            shapeData[i]['properties'][popertyNameArray[j]].toLowerCase() : shapeData[i]['properties'][popertyNameArray[j]];
+                        const shapeName = !isNullOrUndefined(name) && typeof name === 'string' ? name.toLowerCase() : name;
+                        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]);
+                            }
+                            const baseLayer = this.layers[layerIndex];
+                            if (this.baseLayerIndex >= 0 && baseLayer.isBaseLayer) {
+                                indexValue = 0;
+                            }
+                            else if (this.layers[layerIndex].type === 'SubLayer') {
+                                indexValue = subLayerIndex;
+                            }
+                            targetId = this.element.id + '_' + 'LayerIndex_' + indexValue + '_shapeIndex_' + i + '_dataIndex_' + k;
                             targetEle = getElement(targetId);
-                        }
-                        shapeIndex = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                        shapeDataValue = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
-                            this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
-                        dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
-                        data = isNullOrUndefined(dataIndex) ? null : this.layers[layerIndex].dataSource[dataIndex];
-                        if (enable) {
-                            triggerItemSelectionEvent(selectionsettings, this, targetEle, shapeDataValue, data);
-                            this.shapeSelectionClass = getElement('ShapeselectionMap');
-                            if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1) {
-                                this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
+                            if (isNullOrUndefined(k) && isNullOrUndefined(targetEle)) {
+                                targetId = this.element.id + '_' + 'LayerIndex_' + layerIndex + '_shapeIndex_' + i + '_dataIndex_null';
+                                targetEle = getElement(targetId);
                             }
-                            const shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
-                            if (shapeToggled) {
-                                targetEle.setAttribute('class', 'ShapeselectionMapStyle');
-                                if (this.selectedElementId.indexOf(targetEle.getAttribute('id')) === -1) {
-                                    this.selectedElementId.push(targetEle.getAttribute('id'));
+                            shapeIndex = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
+                            shapeDataValue = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
+                                this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
+                            dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
+                            data = isNullOrUndefined(dataIndex) ? null : this.layers[layerIndex].dataSource[dataIndex];
+                            if (enable) {
+                                triggerItemSelectionEvent(selectionsettings, this, targetEle, shapeDataValue, data);
+                                this.shapeSelectionClass = getElement('ShapeselectionMap');
+                                if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1) {
+                                    this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
                                 }
-                                if (!selectionsettings.enableMultiSelect) {
-                                    return;
+                                const shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
+                                if (shapeToggled) {
+                                    targetEle.setAttribute('class', 'ShapeselectionMapStyle');
+                                    if (this.selectedElementId.indexOf(targetEle.getAttribute('id')) === -1) {
+                                        this.selectedElementId.push(targetEle.getAttribute('id'));
+                                    }
+                                    if (!selectionsettings.enableMultiSelect) {
+                                        return;
+                                    }
                                 }
                             }
-                        }
-                        else {
-                            this.legendSelection = (!selectionsettings.enableMultiSelect && !this.legendSelection) ?
-                                true : this.legendSelection;
-                            if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1 &&
-                                targetEle.getAttribute('class') === 'ShapeselectionMapStyle') {
-                                this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
-                            }
-                            const shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
-                            if (shapeToggled) {
-                                removeClass(targetEle);
-                                const selectedElementIdIndex = this.selectedElementId.indexOf(targetEle.getAttribute('id'));
-                                if (selectedElementIdIndex !== -1) {
-                                    this.selectedElementId.splice(selectedElementIdIndex, 1);
-                                    if (!selectionsettings.enableMultiSelect && this.legendSelection && this.selectedElementId.length > 0) {
-                                        this.removeShapeSelection();
+                            else {
+                                this.legendSelection = (!selectionsettings.enableMultiSelect && !this.legendSelection) ?
+                                    true : this.legendSelection;
+                                if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1 &&
+                                    targetEle.getAttribute('class') === 'ShapeselectionMapStyle') {
+                                    this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
+                                }
+                                const shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
+                                if (shapeToggled) {
+                                    removeClass(targetEle);
+                                    const selectedElementIdIndex = this.selectedElementId.indexOf(targetEle.getAttribute('id'));
+                                    if (selectedElementIdIndex !== -1) {
+                                        this.selectedElementId.splice(selectedElementIdIndex, 1);
+                                        if (!selectionsettings.enableMultiSelect && this.legendSelection
+                                            && this.selectedElementId.length > 0) {
+                                            this.removeShapeSelection();
+                                        }
                                     }
                                 }
                             }
@@ -8614,48 +8757,55 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     zoomToCoordinates(minLatitude, minLongitude, maxLatitude, maxLongitude) {
-        let centerLatitude;
-        let centerLongtitude;
-        let isTwoCoordinates = false;
-        if (isNullOrUndefined(maxLatitude) && isNullOrUndefined(maxLongitude)
-            || isNullOrUndefined(minLatitude) && isNullOrUndefined(minLongitude)) {
-            minLatitude = isNullOrUndefined(minLatitude) ? 0 : minLatitude;
-            minLongitude = isNullOrUndefined(minLatitude) ? 0 : minLongitude;
-            maxLatitude = isNullOrUndefined(maxLatitude) ? minLatitude : maxLatitude;
-            maxLongitude = isNullOrUndefined(maxLongitude) ? minLongitude : maxLongitude;
-            isTwoCoordinates = true;
-        }
-        if (minLatitude > maxLatitude) {
-            [minLatitude, maxLatitude] = [maxLatitude, minLatitude];
-        }
-        if (minLongitude > maxLongitude) {
-            [minLongitude, maxLongitude] = [maxLongitude, minLongitude];
-        }
-        if (!isTwoCoordinates) {
-            centerLatitude = (minLatitude + maxLatitude) / 2;
-            centerLongtitude = (minLongitude + maxLongitude) / 2;
+        if (!this.isDestroyed) {
+            let centerLatitude;
+            let centerLongtitude;
+            let isTwoCoordinates = false;
+            this.centerPosition = {
+                latitude: null,
+                longitude: null
+            };
+            this.isZoomByPosition = false;
+            if (isNullOrUndefined(maxLatitude) && isNullOrUndefined(maxLongitude)
+                || isNullOrUndefined(minLatitude) && isNullOrUndefined(minLongitude)) {
+                minLatitude = isNullOrUndefined(minLatitude) ? 0 : minLatitude;
+                minLongitude = isNullOrUndefined(minLatitude) ? 0 : minLongitude;
+                maxLatitude = isNullOrUndefined(maxLatitude) ? minLatitude : maxLatitude;
+                maxLongitude = isNullOrUndefined(maxLongitude) ? minLongitude : maxLongitude;
+                isTwoCoordinates = true;
+            }
+            if (minLatitude > maxLatitude) {
+                [minLatitude, maxLatitude] = [maxLatitude, minLatitude];
+            }
+            if (minLongitude > maxLongitude) {
+                [minLongitude, maxLongitude] = [maxLongitude, minLongitude];
+            }
+            if (!isTwoCoordinates) {
+                centerLatitude = (minLatitude + maxLatitude) / 2;
+                centerLongtitude = (minLongitude + maxLongitude) / 2;
+            }
+            else {
+                centerLatitude = (minLatitude + maxLatitude);
+                centerLongtitude = (minLongitude + maxLongitude);
+            }
+            this.centerLatOfGivenLocation = centerLatitude;
+            this.centerLongOfGivenLocation = centerLongtitude;
+            this.minLatOfGivenLocation = minLatitude;
+            this.minLongOfGivenLocation = minLongitude;
+            this.maxLatOfGivenLocation = maxLatitude;
+            this.maxLongOfGivenLocation = maxLongitude;
+            this.zoomNotApplied = true;
+            this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
+            const zoomArgs = {
+                cancel: false, name: 'zoom', type: zoomIn, maps: this,
+                tileTranslatePoint: {}, translatePoint: {},
+                tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
+                scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
+                    { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation }
+            };
+            this.trigger('zoom', zoomArgs);
+            this.refresh();
         }
-        else {
-            centerLatitude = (minLatitude + maxLatitude);
-            centerLongtitude = (minLongitude + maxLongitude);
-        }
-        this.centerLatOfGivenLocation = centerLatitude;
-        this.centerLongOfGivenLocation = centerLongtitude;
-        this.minLatOfGivenLocation = minLatitude;
-        this.minLongOfGivenLocation = minLongitude;
-        this.maxLatOfGivenLocation = maxLatitude;
-        this.maxLongOfGivenLocation = maxLongitude;
-        this.zoomNotApplied = true;
-        this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
-        const zoomArgs = {
-            cancel: false, name: 'zoom', type: zoomIn, maps: this,
-            tileTranslatePoint: {}, translatePoint: {},
-            tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
-            scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
-                { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation }
-        };
-        this.trigger('zoom', zoomArgs);
-        this.refresh();
     }
     /**
      * This method is used to remove multiple selected shapes in the maps.
@@ -8706,6 +8856,8 @@ let Maps = class Maps extends Component {
     }
     /**
      * This method disposes the maps component.
+     *
+     * @returns {void}
      */
     destroy() {
         this.unWireEVents();
@@ -8762,91 +8914,94 @@ let Maps = class Maps extends Component {
      * @private
      */
     onPropertyChanged(newProp, oldProp) {
-        let render = false;
-        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':
-                    this.renderBorder();
-                    break;
-                case 'height':
-                case 'width':
-                case 'layers':
-                case 'projectionType':
-                case 'centerPosition':
-                case 'legendSettings':
-                case 'baseLayerIndex':
-                    if (prop === 'layers') {
-                        isLayer = true;
-                        const layerPropLength = Object.keys(newProp.layers).length;
-                        for (let x = 0; x < layerPropLength; x++) {
-                            if (!isNullOrUndefined(newProp.layers[x])) {
-                                const collection = Object.keys(newProp.layers[x]);
-                                for (const collectionProp of collection) {
-                                    if ((collectionProp === 'layerType' && newProp.layers[x].layerType !== 'Geometry') || (isNullOrUndefined(this.layers[x].shapeData)
-                                        && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
-                                        this.isReset = true;
-                                    }
-                                    else if (collectionProp === 'markerSettings') {
-                                        isMarker = true;
-                                    }
-                                    else if (collectionProp === 'staticMapType') {
-                                        isStaticMapType = true;
+        if (!this.isDestroyed) {
+            let render = false;
+            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':
+                        this.renderBorder();
+                        break;
+                    case 'height':
+                    case 'width':
+                    case 'layers':
+                    case 'projectionType':
+                    case 'centerPosition':
+                    case 'legendSettings':
+                    case 'baseLayerIndex':
+                        if (prop === 'layers') {
+                            isLayer = true;
+                            const layerPropLength = Object.keys(newProp.layers).length;
+                            for (let x = 0; x < layerPropLength; x++) {
+                                if (!isNullOrUndefined(newProp.layers[x])) {
+                                    const collection = Object.keys(newProp.layers[x]);
+                                    for (const collectionProp of collection) {
+                                        if ((collectionProp === 'layerType' && newProp.layers[x].layerType !== 'Geometry') ||
+                                            (isNullOrUndefined(this.layers[x].shapeData)
+                                                && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
+                                            this.isReset = true;
+                                        }
+                                        else if (collectionProp === 'markerSettings') {
+                                            isMarker = true;
+                                        }
+                                        else if (collectionProp === 'staticMapType') {
+                                            isStaticMapType = true;
+                                        }
                                     }
                                 }
                             }
                         }
-                    }
-                    render = true;
-                    break;
-                case 'zoomSettings':
-                    if (!isNullOrUndefined(oldProp.zoomSettings)) {
-                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor && !isLayer) {
-                            render = false;
-                        }
-                        else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
-                            this.zoomSettings.zoomFactor = 1;
-                            render = true;
-                        }
-                        else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
-                            this.zoomSettings.zoomFactor = 1;
-                            render = true;
-                        }
-                        else {
-                            render = true;
+                        render = true;
+                        break;
+                    case 'zoomSettings':
+                        if (!isNullOrUndefined(oldProp.zoomSettings)) {
+                            if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor && !isLayer) {
+                                render = false;
+                            }
+                            else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
+                                this.zoomSettings.zoomFactor = 1;
+                                render = true;
+                            }
+                            else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
+                                this.zoomSettings.zoomFactor = 1;
+                                render = true;
+                            }
+                            else {
+                                render = true;
+                            }
                         }
-                    }
-                    break;
-                case 'locale':
-                case 'currencyCode':
-                    super.refresh();
-                    break;
+                        break;
+                    case 'locale':
+                    case 'currencyCode':
+                        super.refresh();
+                        break;
+                }
             }
-        }
-        if (render) {
-            if (newProp.layers && isMarker) {
-                removeElement(this.element.id + '_Markers_Group');
-                if (this.isTileMap) {
-                    this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
+            if (render) {
+                if (newProp.layers && isMarker) {
+                    removeElement(this.element.id + '_Markers_Group');
+                    if (this.isTileMap) {
+                        this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
+                    }
+                    else {
+                        this.render();
+                    }
+                }
+                else if (newProp.layers && isStaticMapType) {
+                    this.mapLayerPanel.renderGoogleMap(this.layers[this.layers.length - 1].key, this.staticMapZoom);
                 }
                 else {
-                    this.render();
+                    this.createSVG();
+                    this.renderElements();
                 }
             }
-            else if (newProp.layers && isStaticMapType) {
-                this.mapLayerPanel.renderGoogleMap(this.layers[this.layers.length - 1].key, this.staticMapZoom);
-            }
-            else {
-                this.createSVG();
-                this.renderElements();
-            }
         }
     }
     /**
@@ -8859,7 +9014,7 @@ let Maps = class Maps extends Component {
         const modules = [];
         const isVisible = this.findVisibleLayers(this.layers);
         let annotationEnable = false;
-        this.annotations.map((annotation, index) => {
+        this.annotations.map((annotation) => {
             annotationEnable = annotation.content != null;
         });
         if (this.isBubbleVisible()) {
@@ -8944,10 +9099,12 @@ let Maps = class Maps extends Component {
     }
     /**
      * To find marker visibility
+     *
+     * @returns {boolean} - Returns whether the markers are visible or not.
      */
     isMarkersVisible() {
         let isVisible = false;
-        Array.prototype.forEach.call(this.layers, (layer, layerIndex) => {
+        Array.prototype.forEach.call(this.layers, (layer) => {
             for (let i = 0; i < layer.markerSettings.length; i++) {
                 if (layer.markerSettings[i].visible) {
                     isVisible = true;
@@ -8959,6 +9116,8 @@ let Maps = class Maps extends Component {
     }
     /**
      * To find DataLabel visibility
+     *
+     * @returns {boolean} - Returns whether the data labels are visible or not.
      */
     isDataLabelVisible() {
         let isVisible = false;
@@ -8972,10 +9131,12 @@ let Maps = class Maps extends Component {
     }
     /**
      * To find navigation line visibility
+     *
+     * @returns {boolean} - Returns whether the navigation lines are visible or not.
      */
     isNavigationVisible() {
         let isVisible = false;
-        Array.prototype.forEach.call(this.layers, (layer, layerIndex) => {
+        Array.prototype.forEach.call(this.layers, (layer) => {
             for (let i = 0; i < layer.navigationLineSettings.length; i++) {
                 if (layer.navigationLineSettings[i].visible) {
                     isVisible = true;
@@ -8987,6 +9148,8 @@ let Maps = class Maps extends Component {
     }
     /**
      * To find space between the secondary element and svg element.
+     *
+     * @returns {Point} - Returns the left and top value of the secondary element of Maps.
      * @private
      */
     getExtraPosition() {
@@ -9042,7 +9205,7 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     print(id) {
-        if ((this.allowPrint) && (this.printModule)) {
+        if ((this.allowPrint) && (this.printModule) && !this.isDestroyed) {
             this.printModule.print(this, id);
         }
     }
@@ -9056,18 +9219,20 @@ let Maps = class Maps extends Component {
      * @returns {Promise<string>} - Returns the string value.
      */
     export(type, fileName, orientation, allowDownload) {
-        if (isNullOrUndefined(allowDownload)) {
-            allowDownload = true;
-        }
-        if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
-            return new Promise((resolve, reject) => {
-                resolve(this.imageExportModule.export(this, type, fileName, allowDownload));
-            });
-        }
-        else if ((this.allowPdfExport) && (this.pdfExportModule)) {
-            return new Promise((resolve, reject) => {
-                resolve(this.pdfExportModule.export(this, type, fileName, allowDownload, orientation));
-            });
+        if (!this.isDestroyed) {
+            if (isNullOrUndefined(allowDownload)) {
+                allowDownload = true;
+            }
+            if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
+                return new Promise((resolve, reject) => {
+                    resolve(this.imageExportModule.export(this, type, fileName, allowDownload));
+                });
+            }
+            else if ((this.allowPdfExport) && (this.pdfExportModule)) {
+                return new Promise((resolve, reject) => {
+                    resolve(this.pdfExportModule.export(this, type, fileName, allowDownload, orientation));
+                });
+            }
         }
         return null;
     }
@@ -9078,19 +9243,22 @@ let Maps = class Maps extends Component {
      * @returns {Promise<string>} - Returns the processed Bing URL as Promise.
      */
     getBingUrlTemplate(url) {
-        const promise = new Promise((resolve, reject) => {
-            const ajax = new Ajax({
-                url: url
+        let promise;
+        if (!this.isDestroyed) {
+            promise = new Promise((resolve, reject) => {
+                const ajax = new Ajax({
+                    url: url
+                });
+                ajax.onSuccess = (json) => {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const jsonObject = JSON.parse(json);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const resource = jsonObject['resourceSets'][0]['resources'][0];
+                    resolve(resource['imageUrl']);
+                };
+                ajax.send();
             });
-            ajax.onSuccess = (json) => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const jsonObject = JSON.parse(json);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const resource = jsonObject['resourceSets'][0]['resources'][0];
-                resolve(resource['imageUrl']);
-            };
-            ajax.send();
-        });
+        }
         return promise;
     }
     /**
@@ -9162,21 +9330,25 @@ let Maps = class Maps extends Component {
      * @returns {GeoPosition}- Returns the geo position
      */
     getGeoLocation(layerIndex, x, y) {
-        const container = document.getElementById(this.element.id);
-        const pageX = x - container.offsetLeft;
-        const pageY = y - container.offsetTop;
-        const currentLayer = this.layersCollection[layerIndex];
-        const translate = getTranslate(this, currentLayer, false);
-        const translatePoint = translate['location'];
-        const translatePointX = translatePoint.x * this.scale;
-        const translatePointY = translatePoint.y * this.scale;
-        const mapSize = (Math.min(this.mapAreaRect.height, this.mapAreaRect.width)
-            * this.mapLayerPanel['currentFactor']) * this.scale;
-        const xx = (this.clip(pageX - translatePointX, 0, mapSize - 1) / mapSize) - 0.5;
-        const yy = 0.5 - (this.clip(pageY - translatePointY, 0, mapSize - 1) / mapSize);
-        const lat = 90 - 360 * Math.atan(Math.exp(-yy * 2 * Math.PI)) / Math.PI;
-        const long = 360 * xx;
-        return { latitude: lat, longitude: long };
+        let latitude = 0;
+        let longitude = 0;
+        if (!this.isDestroyed) {
+            const container = document.getElementById(this.element.id);
+            const pageX = x - container.offsetLeft;
+            const pageY = y - container.offsetTop;
+            const currentLayer = this.layersCollection[layerIndex];
+            const translate = getTranslate(this, currentLayer, false);
+            const translatePoint = translate['location'];
+            const translatePointX = translatePoint.x * this.scale;
+            const translatePointY = translatePoint.y * this.scale;
+            const mapSize = (Math.min(this.mapAreaRect.height, this.mapAreaRect.width)
+                * this.mapLayerPanel['currentFactor']) * this.scale;
+            const xx = (this.clip(pageX - translatePointX, 0, mapSize - 1) / mapSize) - 0.5;
+            const yy = 0.5 - (this.clip(pageY - translatePointY, 0, mapSize - 1) / mapSize);
+            latitude = 90 - 360 * Math.atan(Math.exp(-yy * 2 * Math.PI)) / Math.PI;
+            longitude = 360 * xx;
+        }
+        return { latitude: latitude, longitude: longitude };
     }
     clip(value, minVal, maxVal) {
         return Math.min(Math.max(value, minVal), maxVal);
@@ -9189,10 +9361,16 @@ let Maps = class Maps extends Component {
      * @returns {GeoPosition} - Returns the position
      */
     getTileGeoLocation(x, y) {
-        const container = document.getElementById(this.element.id);
-        const ele = document.getElementById(this.element.id + '_tile_parent');
-        const latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - container.offsetLeft), y + this.mapAreaRect.y - (ele.offsetTop - container.offsetTop));
-        return { latitude: latLong['latitude'], longitude: latLong['longitude'] };
+        let latitude = 0;
+        let longitude = 0;
+        if (!this.isDestroyed) {
+            const container = document.getElementById(this.element.id);
+            const ele = document.getElementById(this.element.id + '_tile_parent');
+            const latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - container.offsetLeft), y + this.mapAreaRect.y - (ele.offsetTop - container.offsetTop));
+            latitude = latLong['latitude'];
+            longitude = latLong['longitude'];
+        }
+        return { latitude: latitude, longitude: longitude };
     }
     /**
      * This method is used to convert the point to latitude and longitude in maps.
@@ -9202,14 +9380,18 @@ let Maps = class Maps extends Component {
      * @returns {Object} - Returns the object.
      */
     pointToLatLong(pageX, pageY) {
-        const padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
-        pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
-        const mapSize = 256 * Math.pow(2, this.tileZoomLevel);
-        const x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
-        const y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
-        const lat = 90 - 360 * Math.atan(Math.exp(-y1 * 2 * Math.PI)) / Math.PI;
-        const long = 360 * x1;
-        return { latitude: lat, longitude: long };
+        let latitude = 0;
+        let longitude = 0;
+        if (!this.isDestroyed) {
+            const padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
+            pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
+            const mapSize = 256 * Math.pow(2, this.tileZoomLevel);
+            const x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
+            const y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
+            latitude = 90 - 360 * Math.atan(Math.exp(-y1 * 2 * Math.PI)) / Math.PI;
+            longitude = 360 * x1;
+        }
+        return { latitude: latitude, longitude: longitude };
     }
 };
 __decorate([
@@ -9403,7 +9585,8 @@ class Bubble {
         const layerData = layer.layerData;
         const colorValuePath = bubbleSettings.colorValuePath;
         const equalValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
-            (getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : shapeData[colorValuePath]) : shapeData[colorValuePath];
+            (getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : shapeData[colorValuePath]) :
+            shapeData[colorValuePath];
         const colorValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
             Number(getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : Number(shapeData[colorValuePath])) :
             Number(shapeData[colorValuePath]);
@@ -9557,16 +9740,17 @@ class Bubble {
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shape.map((current, index) => {
+            shape.map((current) => {
                 points.push(new Point(current['point']['x'], current['point']['y']));
             });
         }
         return points;
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble click event
      *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      * @private
      */
     bubbleClick(e) {
@@ -9612,6 +9796,8 @@ class Bubble {
     /**
      * To check and trigger bubble move event
      *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @retruns {void}
      * @private
      */
     bubbleMove(e) {
@@ -9700,6 +9886,7 @@ class DataLabel {
     layerData, group, labelTemplateElement, index, intersect) {
         const dataLabel = layer.dataLabelSettings;
         const style = layer.dataLabelSettings.textStyle;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let templateFn;
         let options;
         const dataLabelSettings = layer.dataLabelSettings;
@@ -9710,7 +9897,6 @@ class DataLabel {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const shapeData = shape;
         let element;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let text = '';
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let datasrcObj;
@@ -9732,7 +9918,7 @@ class DataLabel {
         const properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?
             layer.shapePropertyPath : [layer.shapePropertyPath]);
         let propertyPath;
-        let isPoint = false;
+        const isPoint = false;
         const animate$$1 = layer.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const translate = (this.maps.isTileMap) ? new Object() : ((this.maps.zoomSettings.zoomFactor > 1 &&
@@ -9849,7 +10035,6 @@ class DataLabel {
                 if (eventargs.cancel) {
                     return;
                 }
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 let position = [];
                 let width = zoomLabelsPosition && scaleZoomValue > 1 && !this.maps.zoomNotApplied
                     && this.maps.zoomShapeCollection.length > index ? this.maps.zoomShapeCollection[index]['width'] :
@@ -9893,8 +10078,14 @@ class DataLabel {
                         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.style.left = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location['x'])) * scale) + labelArgs.offsetX + 'px';
-                    labelElement.style.top = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location['y'])) * scale) + labelArgs.offsetY + 'px';
+                    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';
+                    }
+                    else {
+                        labelElement.style.left = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location['x'])) * scale) + labelArgs.offsetX + 'px';
+                        labelElement.style.top = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location['y'])) * scale) + labelArgs.offsetY + 'px';
+                    }
                     labelTemplateElement.appendChild(labelElement);
                 }
                 else {
@@ -10029,7 +10220,7 @@ class DataLabel {
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shapes.map((current, index) => {
+            shapes.map((current) => {
                 points.push(new Point(current['point']['x'], current['point']['y']));
             });
         }
@@ -10044,7 +10235,6 @@ class DataLabel {
         return 'DataLabel';
     }
     /**
-     *
      * @returns {void}
      * @private
      */
@@ -10062,79 +10252,84 @@ class NavigationLine {
     constructor(maps) {
         this.maps = maps;
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To render navigation line for maps
+     *
+     * @param {LayerSettings} layer - Specifies the layer instance to which the navigation line is to be rendered.
+     * @param {number} factor - Specifies the current zoom factor of the Maps.
+     * @param {number} layerIndex -Specifies the index of current layer.
+     * @returns {Element} - Returns the navigation line element.
      */
     renderNavigation(layer, factor, layerIndex) {
-        let navigationEle;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const navigation = layer.navigationLineSettings;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let longitude;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let point = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let latitude;
-        let visible;
-        let angle;
-        let width;
-        let color;
-        let dashArray;
-        let pathOption;
-        let direction;
-        let showArrow;
-        let arrowColor;
-        let arrowSize;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let arrowSettings;
-        let arrowPosition;
-        let startArrow;
-        let endArrow;
-        let offSet;
-        let offSetValue;
-        let navigationGroup;
-        let d;
-        const group = (this.maps.renderer.createGroup({
-            id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
-        }));
-        for (let i = 0; i < navigation.length; i++) {
-            latitude = navigation[i]['properties']['latitude'];
-            longitude = navigation[i]['properties']['longitude'];
-            visible = navigation[i]['properties']['visible'];
-            angle = navigation[i]['angle'];
-            width = navigation[i]['width'] || 1;
-            color = navigation[i]['color'];
-            dashArray = navigation[i]['properties']['dashArray'];
-            arrowSettings = navigation[i]['properties']['arrowSettings'];
-            showArrow = (isNullOrUndefined(arrowSettings)) ? false : arrowSettings['properties']['showArrow'];
-            if (longitude['length'] === latitude['length'] && visible) {
-                for (let i = 0; i < longitude['length']; i++) {
-                    const location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i], latitude[i]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i], longitude[i], factor, layer, this.maps);
-                    point.push(location);
-                }
-            }
-            navigationGroup = (this.maps.renderer.createGroup({
-                id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
+        let group;
+        if (!isNullOrUndefined(this.maps)) {
+            let navigationEle;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const navigation = layer.navigationLineSettings;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let longitude;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let point = [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let latitude;
+            let visible;
+            let angle;
+            let width;
+            let color;
+            let dashArray;
+            let pathOption;
+            let direction;
+            let showArrow;
+            let arrowColor;
+            let arrowSize;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let arrowSettings;
+            let arrowPosition;
+            let startArrow;
+            let endArrow;
+            let offSet;
+            let offSetValue;
+            let navigationGroup;
+            let d;
+            group = (this.maps.renderer.createGroup({
+                id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
             }));
-            for (let j = 0; j < point['length'] - 1; j++) {
-                angle = (-1 > angle) ? -1 : angle;
-                angle = (1 < angle) ? 1 : angle;
-                const arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
-                const radius = this.convertRadius(point[j], point[j + 1]);
-                if (angle <= 1 && angle > 0) {
-                    direction = 0;
-                    if (point[j]['x'] > point[j + 1]['x']) {
-                        direction = 1;
-                    }
-                }
-                if (angle >= -1 && angle < 0) {
-                    direction = 1;
-                    if (point[j]['x'] > point[j + 1]['x']) {
+            for (let i = 0; i < navigation.length; i++) {
+                latitude = navigation[i]['properties']['latitude'];
+                longitude = navigation[i]['properties']['longitude'];
+                visible = navigation[i]['properties']['visible'];
+                angle = navigation[i]['angle'];
+                width = navigation[i]['width'] || 1;
+                color = navigation[i]['color'];
+                dashArray = navigation[i]['properties']['dashArray'];
+                arrowSettings = navigation[i]['properties']['arrowSettings'];
+                showArrow = (isNullOrUndefined(arrowSettings)) ? false : arrowSettings['properties']['showArrow'];
+                if (longitude['length'] === latitude['length'] && visible) {
+                    for (let i = 0; i < longitude['length']; i++) {
+                        const location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i], latitude[i]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i], longitude[i], factor, layer, this.maps);
+                        point.push(location);
+                    }
+                }
+                navigationGroup = (this.maps.renderer.createGroup({
+                    id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
+                }));
+                for (let j = 0; j < point['length'] - 1; j++) {
+                    angle = (-1 > angle) ? -1 : angle;
+                    angle = (1 < angle) ? 1 : angle;
+                    const arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
+                    const radius = this.convertRadius(point[j], point[j + 1]);
+                    if (angle <= 1 && angle > 0) {
                         direction = 0;
+                        if (point[j]['x'] > point[j + 1]['x']) {
+                            direction = 1;
+                        }
+                    }
+                    if (angle >= -1 && angle < 0) {
+                        direction = 1;
+                        if (point[j]['x'] > point[j + 1]['x']) {
+                            direction = 0;
+                        }
                     }
-                }
-                if (point[j]['x'] !== point[j + 1]['x']) {
                     if (showArrow) {
                         arrowColor = arrowSettings['properties']['color'];
                         arrowSize = arrowSettings['properties']['size'];
@@ -10179,8 +10374,8 @@ class NavigationLine {
                     navigationGroup.appendChild(navigationEle);
                     group.appendChild(navigationGroup);
                 }
+                point = [];
             }
-            point = [];
         }
         return group;
     }
@@ -10512,7 +10707,7 @@ class Legend {
                                 }
                             }
                             else {
-                                let padding = 10;
+                                const padding = 10;
                                 shapeX = shapeLocation[j - 1].x;
                                 shapeY = prevPositionY + padding + (shapeHeight / 2);
                             }
@@ -10673,7 +10868,7 @@ class Legend {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const collection = this.totalPages[page]['Collection'][i];
                 const shapeBorder = collection['shapeBorder'];
-                let legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
+                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'])) ?
@@ -10687,15 +10882,16 @@ class Legend {
                 const textId = map.element.id + '_Legend_Text_Index_' + collection['idIndex'];
                 const shapeLocation = new Point(collection['Shape']['x'], (collection['Shape']['y'] - pagingArrowPadding));
                 const textLocation = new Point(collection['Text']['x'], (collection['Text']['y'] - pagingArrowPadding));
-                const imageUrl = ((isNullOrUndefined(collection['ImageSrc'])) ? legend.shape : collection['ImageSrc']);
                 const renderOptions = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
                 const legendTextStyle = {
                     fontFamily: legend.textStyle.fontFamily, fontStyle: legend.textStyle.fontStyle,
-                    fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color, opacity: legend.textStyle.opacity
+                    fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color,
+                    opacity: legend.textStyle.opacity
                 };
                 legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
                     this.maps.themeStyle.legendTextColor;
-                legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily : this.maps.themeStyle.fontFamily;
+                legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily :
+                    this.maps.themeStyle.fontFamily;
                 legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
                 if (i === 0) {
                     this.renderLegendBorder();
@@ -10705,7 +10901,7 @@ class Legend {
                     const marker$$1 = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
                     legendShape = !isNullOrUndefined(marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']]) && marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] !== '' ? marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] : marker$$1.shape;
                 }
-                if (legendShape === "Balloon") {
+                if (legendShape === 'Balloon') {
                     legendElement.appendChild(drawBalloon(map, renderOptions, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
                 }
                 else {
@@ -10744,14 +10940,14 @@ class Legend {
                         leftPageElement.appendChild(render.drawPath(leftPageOptions));
                         const leftRectPageOptions = new RectOption(map.element.id + '_Left_Page_Rect', 'transparent', {}, 1, new Rect(leftPageX - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
                         let pathEle = render.drawRectangle(leftRectPageOptions);
-                        pathEle.setAttribute('tabindex', ((page + 1) === 1 ? -1 : map.tabIndex + 1).toString());
+                        pathEle.tabIndex = (page + 1) === 1 ? -1 : (map.tabIndex + 1);
                         leftPageElement.appendChild(pathEle);
                         this.wireEvents(leftPageElement);
                         const rightPageOptions = new PathOption(map.element.id + '_Right_Page', '#a6a6a6', 0, '#a6a6a6', ((page + 1) === this.totalPages.length ? 0.5 : 1), 1, '', rightPath);
                         rightPageElement.appendChild(render.drawPath(rightPageOptions));
                         const rightRectPageOptions = new RectOption(map.element.id + '_Right_Page_Rect', 'transparent', {}, 1, new Rect(rightPageX - spacing - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
                         pathEle = render.drawRectangle(rightRectPageOptions);
-                        pathEle.setAttribute('tabindex', ((page + 1) === this.totalPages.length ? -1 : map.tabIndex + 2).toString());
+                        pathEle.tabIndex = (page + 1) === this.totalPages.length ? -1 : (map.tabIndex + 2);
                         rightPageElement.appendChild(pathEle);
                         this.wireEvents(rightPageElement);
                         pagingGroup.appendChild(leftPageElement);
@@ -10771,8 +10967,8 @@ class Legend {
                             'opacity': 1,
                             'dominant-baseline': ''
                         };
-                        let pagingTextElement = render.createText(pageTextOptions, pagingText);
-                        pagingTextElement.setAttribute('style', 'user-select: none;');
+                        const pagingTextElement = render.createText(pageTextOptions, pagingText);
+                        pagingTextElement.style.cssText = 'user-select: none;';
                         pagingGroup.appendChild(pagingTextElement);
                         this.legendGroup.appendChild(pagingGroup);
                     }
@@ -10906,11 +11102,14 @@ class Legend {
                                     this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     const shapeItemCount = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
                                     const shapeOldFillColor = shapeElement.getAttribute('fill');
+                                    const shapeOldOpacity = shapeElement.getAttribute('fill-opacity');
                                     this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
+                                    this.legendHighlightCollection[length - 1]['shapeOldOpacity'] = shapeOldOpacity;
                                     const shapeOldColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount];
+                                    const shapeOldFillOpacity = this.legendHighlightCollection[length - 1]['shapeOldOpacity'];
                                     this.shapePreviousColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'];
-                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
-                                    this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendHighlightColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
+                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, isNullOrUndefined(module.opacity) ? shapeOldFillOpacity : module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
+                                    this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendHighlightColor, isNullOrUndefined(module.opacity) ? shapeOldFillOpacity : module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                 }
                                 else if (value === 'selection') {
                                     this.legendHighlightCollection = [];
@@ -10975,6 +11174,7 @@ class Legend {
         const length = collection.length;
         collection[length - 1]['MapShapeCollection'] = { Elements: [] };
         collection[length - 1]['shapeOldFillColor'] = [];
+        collection[length - 1]['shapeOldOpacity'] = null;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     removeLegend(collection) {
@@ -10986,7 +11186,8 @@ class Legend {
             for (let j = 0; j < dataCount; j++) {
                 const shapeFillColor = item['legendOldFill'].indexOf('url') !== -1
                     ? item['shapeOldFillColor'][j] : item['legendOldFill'];
-                this.setColor(item['MapShapeCollection']['Elements'][j], shapeFillColor, item['shapeOpacity'], item['shapeOldBorderColor'], item['shapeOldBorderWidth'], 'highlight');
+                const shapeOpacity = !isNullOrUndefined(item['shapeOldOpacity']) ? item['shapeOldOpacity'] : item['shapeOpacity'];
+                this.setColor(item['MapShapeCollection']['Elements'][j], shapeFillColor, shapeOpacity, item['shapeOldBorderColor'], item['shapeOldBorderWidth'], 'highlight');
             }
         }
     }
@@ -11178,8 +11379,6 @@ class Legend {
                     }
                     if (selectionEle && (selectionEle['IsSelected'] && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
                         || targetElement.getAttribute('class') === 'LineselectionMapStyle'))) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const element = this.maps.legendSelectionCollection[selectionEle['SelectionIndex']];
                         let multiSelection = 0;
                         if (module.enableMultiSelect) {
                             for (let i = 0; i < shapeElement['Elements'].length; i++) {
@@ -11438,7 +11637,8 @@ class Legend {
         const legendTitle = legend.title.text;
         const textStyle = {
             fontFamily: legend.titleStyle.fontFamily, fontStyle: legend.titleStyle.fontStyle,
-            fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color, opacity: legend.titleStyle.opacity
+            fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color,
+            opacity: legend.titleStyle.opacity
         };
         let textOptions;
         const spacing = 10;
@@ -11499,7 +11699,8 @@ class Legend {
         const locationX = !isNullOrUndefined(legend.location.x) ? legend.location.x : 0;
         const locationY = !isNullOrUndefined(legend.location.y) ? legend.location.y : 0;
         if (legend.position === 'Float') {
-            this.translate = map.isTileMap ? new Point(locationX, locationY + (spacing / 4)) : new Point(locationX + map.mapAreaRect.x, locationY + map.mapAreaRect.y);
+            this.translate = map.isTileMap ? new Point(locationX, locationY + (spacing / 4)) :
+                new Point(locationX + map.mapAreaRect.x, locationY + map.mapAreaRect.y);
             this.legendTotalRect = map.mapAreaRect;
         }
         else {
@@ -11581,7 +11782,8 @@ class Legend {
                         this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
                     else {
-                        newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
+                        newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill,
+                            name: text,
                             shape: (!isNullOrUndefined(marker$$1.shapeValuePath) && !isNullOrUndefined(data[marker$$1.shapeValuePath]) && data[marker$$1.shapeValuePath] !== '') ? data[marker$$1.shapeValuePath] : (this.maps.legendSettings.useMarkerShape ? marker$$1.shape : this.maps.legendSettings.shape) });
                         this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
@@ -11760,6 +11962,7 @@ 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) => {
                         range = false;
                         const rangeValue = data[colorValuePath];
@@ -12207,10 +12410,12 @@ class Legend {
                                     this.maps.toggledShapeElementId.splice(toggledShapeIdIndex, 1);
                                 }
                                 mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
+                                mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 :
+                                    this.maps.layers[k].shapeSettings.border.width).toString());
                                 mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
                                 mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
-                                    this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity).toString());
+                                    this.maps.layers[k].shapeSettings.opacity :
+                                    this.maps.layers[k].shapeSettings.border.opacity).toString());
                                 mapLegendElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
                                 if (targetEle !== null) {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
@@ -12274,7 +12479,7 @@ class Legend {
                     && isNaN(shapeData['properties'][shapePath]) ?
                     shapeData['properties'][shapePath].toLowerCase() : shapeData['properties'][shapePath];
                 if (shapeDataValueCase === dataPathValueCase) {
-                    if (shapeData['geometry']['type'] != 'MultiPoint') {
+                    if (shapeData['geometry']['type'] !== 'MultiPoint') {
                         legendData.push({
                             layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
                             name: data[dataPath], value: value, pointIndex: -1
@@ -12516,16 +12721,37 @@ class Highlight {
             const marker$$1 = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
-        const border = {
-            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color),
-            width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
-            opacity: this.highlightSettings.border.opacity
-        };
+        const borderColor = (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color);
+        const borderWidth = (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale);
+        const borderOpacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity :
+            this.highlightSettings.border.opacity;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const eventArgs = {
             opacity: this.highlightSettings.opacity,
             fill: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
                 ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none') : 'transparent',
-            border: border,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
+            cancel: false
+        };
+        const shapeEventArgs = {
+            opacity: eventArgs.opacity,
+            fill: eventArgs.fill,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
+            name: shapeHighlight,
+            target: targetEle.id,
+            cancel: false,
+            shapeData: shapeData,
+            data: data,
+            maps: this.maps
+        };
+        if (targetEle.id.indexOf('shapeIndex') > -1) {
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            this.maps.trigger(shapeHighlight, shapeEventArgs, () => { });
+        }
+        const itemEventArgs = {
+            opacity: eventArgs.opacity,
+            fill: eventArgs.fill,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
             name: itemHighlight,
             target: targetEle.id,
             cancel: false,
@@ -12533,13 +12759,18 @@ class Highlight {
             data: data,
             maps: this.maps
         };
-        this.maps.trigger(itemHighlight, eventArgs, () => {
-            eventArgs.border.opacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity : this.highlightSettings.border.opacity;
-            this.highlightMap(targetEle, eventArgs);
+        this.maps.trigger(itemHighlight, itemEventArgs, () => {
+            itemEventArgs.cancel = eventArgs.cancel !== itemEventArgs.cancel ? itemEventArgs.cancel : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.cancel : eventArgs.cancel;
+            itemEventArgs.fill = eventArgs.fill !== itemEventArgs.fill ? itemEventArgs.fill : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.fill : eventArgs.fill;
+            itemEventArgs.opacity = eventArgs.opacity !== itemEventArgs.opacity ? itemEventArgs.opacity : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.opacity : eventArgs.opacity;
+            itemEventArgs.border.color = eventArgs.border.color !== itemEventArgs.border.color ? itemEventArgs.border.color : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.color : eventArgs.border.color;
+            itemEventArgs.border.width = eventArgs.border.width !== itemEventArgs.border.width ? itemEventArgs.border.width : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.width : eventArgs.border.width;
+            itemEventArgs.border.opacity = eventArgs.border.opacity !== itemEventArgs.border.opacity ? itemEventArgs.border.opacity : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.opacity : eventArgs.border.opacity;
+            this.highlightMap(targetEle, itemEventArgs);
         });
     }
     highlightMap(targetEle, eventArgs) {
-        if (targetEle.getAttribute('class') === 'highlightMapStyle') {
+        if (targetEle.getAttribute('class') === 'highlightMapStyle' || eventArgs.cancel) {
             return;
         }
         else {
@@ -12716,7 +12947,8 @@ class Selection {
         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,
+            color: isLineStringShape ? (this.selectionsettings.fill || this.selectionsettings.border.color) :
+                this.selectionsettings.border.color,
             width: isLineStringShape ? (this.selectionsettings.border.width / this.maps.scale) :
                 (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)),
             opacity: this.selectionsettings.border.opacity
@@ -12733,7 +12965,8 @@ class Selection {
             maps: this.maps
         };
         this.maps.trigger('itemSelection', eventArgs, (observedArgs) => {
-            eventArgs.border.opacity = isNullOrUndefined(this.selectionsettings.border.opacity) ? this.selectionsettings.opacity : this.selectionsettings.border.opacity;
+            eventArgs.border.opacity = isNullOrUndefined(this.selectionsettings.border.opacity) ?
+                this.selectionsettings.opacity : this.selectionsettings.border.opacity;
             if (!eventArgs.cancel) {
                 if (targetElement.getAttribute('class') === this.selectionType + 'selectionMapStyle'
                     || targetElement.getAttribute('class') === 'LineselectionMapStyle') {
@@ -12885,7 +13118,6 @@ class Selection {
     }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Map Tooltip
  */
@@ -12917,7 +13149,6 @@ class MapsTooltip {
         }
         let option;
         let currentData = '';
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const targetId = target.id;
         let tooltipEle;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13041,9 +13272,9 @@ class MapsTooltip {
             else {
                 tooltipEle = createElement('div', {
                     id: this.maps.element.id + '_mapsTooltip',
-                    className: 'EJ2-maps-Tooltip',
-                    styles: 'position: absolute;pointer-events:none;'
+                    className: 'EJ2-maps-Tooltip'
                 });
+                tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
                 document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
             }
             if (option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
@@ -13066,6 +13297,7 @@ class MapsTooltip {
                 maps: this.maps,
                 element: target, eventArgs: e, content: !isNullOrUndefined(currentData) ? currentData.toString() : ''
             };
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             this.maps.trigger(tooltipRender, tooltipArgs, (args) => {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
                     (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
@@ -13082,7 +13314,8 @@ class MapsTooltip {
                             header: '',
                             data: option['data'],
                             template: option['template'],
-                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                [currentData.toString()],
                             shapes: [],
                             location: option['location'],
                             palette: [markerFill],
@@ -13098,7 +13331,8 @@ class MapsTooltip {
                             header: '',
                             data: tooltipArgs.options['data'],
                             template: tooltipArgs.options['template'],
-                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                [currentData.toString()],
                             shapes: [],
                             location: tooltipArgs.options['location'],
                             palette: [markerFill],
@@ -13121,7 +13355,7 @@ class MapsTooltip {
                         && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
                         let templateStyle = tooltipTemplateElement.getAttribute('style');
                         templateStyle = templateStyle.replace('pointer-events: none;', 'position-events:all;');
-                        tooltipTemplateElement.setAttribute('style', templateStyle);
+                        tooltipTemplateElement.style.cssText = templateStyle;
                     }
                 }
                 else {
@@ -13410,12 +13644,13 @@ class Zoom {
         }
         this.maps.zoomNotApplied = false;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
         mapTotalWidth *= newZoomFactor;
         mapTotalHeight *= newZoomFactor;
-        let widthDiff = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
-        var translatePointX = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
-        var translatePointY = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
+        const widthDiff = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
+        const translatePointX = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
+        const translatePointY = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
         return new Point(translatePointX, translatePointY);
     }
     triggerZoomEvent(prevTilePoint, prevLevel, type) {
@@ -13671,7 +13906,7 @@ class Zoom {
                                     layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index));
                                 }
                             }
-                            else if (currentEle.id.indexOf('Legend') == -1) {
+                            else if (currentEle.id.indexOf('Legend') === -1) {
                                 changeBorderWidth(currentEle, this.index, scale, maps);
                                 maps.zoomTranslatePoint = maps.translatePoint;
                                 this.animateTransform(currentEle, animate$$1, x, y, scale);
@@ -13709,7 +13944,7 @@ class Zoom {
                                         }
                                         else {
                                             markerStyle = 'visibility:hidden';
-                                            currentEle.setAttribute('style', markerStyle);
+                                            currentEle.style.cssText = markerStyle;
                                         }
                                     }
                                 }
@@ -13749,7 +13984,6 @@ class Zoom {
                             let childElement;
                             for (let k = 0; k < currentEle.childElementCount; k++) {
                                 childElement = currentEle.childNodes[k];
-                                const bubbleTransform = childElement.getAttribute('transform');
                                 layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                                 const bubleIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
                                 const dataIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
@@ -13778,7 +14012,7 @@ class Zoom {
                             this.intersect = [];
                             maps.zoomLabelPositions = [];
                             maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
-                            let labelAnimate = !maps.isTileMap && animate$$1;
+                            const labelAnimate = !maps.isTileMap && animate$$1;
                             for (let k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     const labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
@@ -13825,22 +14059,22 @@ class Zoom {
         const layerIndex = parseInt((element ? element : layerElement).id.split('_LayerIndex_')[1].split('_')[0], 10);
         const markerSVGObject = this.maps.renderer.createGroup({
             id: this.maps.element.id + '_Markers_Group',
-            class: 'GroupElement',
-            style: 'pointer-events: auto;'
+            class: 'GroupElement'
         });
+        markerSVGObject.style.pointerEvents = 'auto';
         if (document.getElementById(markerSVGObject.id)) {
             removeElement(markerSVGObject.id);
         }
         const mapsAreaRect = this.maps.mapAreaRect;
         const markerTemplateElements = createElement('div', {
             id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
-            className: 'template',
-            styles: 'overflow: hidden; position: absolute;pointer-events: none;' +
-                'top:' + mapsAreaRect.y + 'px;' +
-                'left:' + mapsAreaRect.x + 'px;' +
-                'height:' + mapsAreaRect.height + 'px;' +
-                'width:' + mapsAreaRect.width + 'px;'
+            className: 'template'
         });
+        markerTemplateElements.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
+            'top:' + mapsAreaRect.y + 'px;' +
+            'left:' + mapsAreaRect.x + 'px;' +
+            'height:' + mapsAreaRect.height + 'px;' +
+            'width:' + mapsAreaRect.width + 'px;';
         if (document.getElementById(markerTemplateElements.id)) {
             removeElement(markerTemplateElements.id);
         }
@@ -13878,7 +14112,6 @@ class Zoom {
                         const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
                         const location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, this.maps);
-                        const animate$$1 = currentLayers.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
                         const transPoint = { x: x, y: y };
                         if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
                             markerTemplateCounts++;
@@ -13947,15 +14180,12 @@ class Zoom {
     dataLabelTranslate(element, factor, x, y, scale, type, animate$$1 = false) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const labelCollection = this.maps.dataLabelModule.dataLabelCollections;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const zoomelement = element.getBoundingClientRect();
         let text;
         let trimmedLable;
         const style = this.maps.layers[this.index].dataLabelSettings.textStyle;
         let zoomtext;
         let zoomtextSize;
         let zoomtrimLabel;
-        const labelPath = this.maps.layers[this.index].dataLabelSettings.labelPath;
         const layerIndex = parseFloat(element.id.split('_LayerIndex_')[1].split('_')[0]);
         const shapeIndex = parseFloat(element.id.split('_shapeIndex_')[1].split('_')[0]);
         let labelIndex;
@@ -13971,16 +14201,25 @@ class Zoom {
                 let labelX = label['location']['x'];
                 let labelY = label['location']['y'];
                 if (type === 'Template') {
-                    const layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
-                    labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
-                    labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
-                    const templateOffset = element.getBoundingClientRect();
-                    const layerOffset = layerEle.getBoundingClientRect();
-                    const elementOffset = element.parentElement.getBoundingClientRect();
-                    const x = ((labelX) + (layerOffset.left - elementOffset.left) - (templateOffset.width / 2));
-                    const y = ((labelY) + (layerOffset.top - elementOffset.top) - (templateOffset.height / 2));
-                    element.style.left = x + 'px';
-                    element.style.top = y + 'px';
+                    let locationX = 0;
+                    let locationY = 0;
+                    if (this.maps.isTileMap) {
+                        zoomtext = label['dataLabelText'];
+                        zoomtextSize = measureText(zoomtext, style);
+                        locationX = ((labelX + x) * scale) - (zoomtextSize['width'] / 2);
+                        locationY = ((labelY + y) * scale) - (zoomtextSize['height']);
+                    }
+                    else {
+                        const layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
+                        labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
+                        labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
+                        const layerOffset = layerEle.getBoundingClientRect();
+                        const elementOffset = element.parentElement.getBoundingClientRect();
+                        locationX = ((labelX) + (layerOffset.left - elementOffset.left));
+                        locationY = ((labelY) + (layerOffset.top - elementOffset.top));
+                    }
+                    element.style.left = locationX + 'px';
+                    element.style.top = locationY + 'px';
                 }
                 else {
                     labelX = ((labelX + x) * scale);
@@ -14111,10 +14350,10 @@ class Zoom {
                         if (element['style']['display'] !== 'none') {
                             if ((staticMapOffset['x'] > templateOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < templateOffset['x'] + templateOffset['width'])
                                 && (staticMapOffset['y'] > templateOffset['y'] || staticMapOffset['y'] + staticMapOffset['height'] < templateOffset['y'] + templateOffset['height'])) {
-                                element['style']['display'] = 'none';
+                                element.style.display = 'none';
                             }
                             else if ((staticMapOffset['x'] > templateOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < templateOffset['x'] + templateOffset['width'])) {
-                                element['style']['display'] = 'none';
+                                element.style.display = 'none';
                             }
                         }
                     }
@@ -14170,6 +14409,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.
+     * @returns {void}
      * @private
      */
     panning(direction, xDifference, yDifference, mouseLocation) {
@@ -14251,7 +14495,6 @@ class Zoom {
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
-        this.maps.zoomNotApplied = false;
         this.isSingleClick = false;
     }
     toAlignSublayer() {
@@ -14591,7 +14834,8 @@ class Zoom {
     alignToolBar() {
         const map = this.maps;
         const padding = 10;
-        const element = createElement('div', { id: map.element.id + '_ToolBar', styles: 'position:absolute;z-index:2' });
+        const element = createElement('div', { id: map.element.id + '_ToolBar' });
+        element.style.cssText = 'position:absolute;z-index:2';
         const rectSVGObject = map.renderer.createSvg({
             id: map.element.id + '_Zooming_ToolBar', width: 10, height: 10
         });
@@ -14633,7 +14877,7 @@ class Zoom {
                 }
                 break;
         }
-        let extraPosition = map.getExtraPosition();
+        const extraPosition = map.getExtraPosition();
         element.style.left = x + extraPosition.x + 'px';
         element.style.top = y + extraPosition.y + 'px';
         const color = this.maps.zoomSettings.highlightColor || this.maps.themeStyle.zoomSelectionColor;
@@ -14964,7 +15208,6 @@ class Zoom {
     }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * This module enables the print functionality in maps.
  *
@@ -14974,18 +15217,20 @@ class Print {
     /**
      * Constructor for Maps
      *
-     * @param {Maps} control - Specifies the instance of the map
+     * @param {Maps} control - Specifies the instance of the Maps
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     constructor(control) { }
     /**
      * To print the Maps
      *
-     * @param {string[] | string | Element} elements - Specifies the element
+     * @param {Maps} maps -Specifies the Maps instance.
+     * @param {string[] | string | Element} elements - Specifies the element of the Maps
      * @returns {void}
      * @private
      */
     print(maps, elements) {
-        let printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+        const printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
         printWindow.moveTo(0, 0);
         printWindow.resizeTo(screen.availWidth, screen.availHeight);
         const argsData = {
@@ -15000,13 +15245,14 @@ class Print {
     /**
      * To get the html string of the Maps
      *
+     * @param {Maps} maps -Specifies the Maps instance.
      * @param {string[] | string | Element} elements - Specifies the html element
      * @returns {Element} - Returns the div element
      * @private
      */
     getHTMLContent(maps, elements) {
-        let div = createElement('div');
-        let divElement = maps.element.cloneNode(true);
+        const div = createElement('div');
+        const divElement = maps.element.cloneNode(true);
         if (maps.isTileMap) {
             for (let i = 0; i < divElement.childElementCount; i++) {
                 if (divElement.children[i].id === maps.element.id + '_tile_parent') {
@@ -15059,10 +15305,10 @@ class Print {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() { }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * This module enables the export to Image functionality in Maps control.
  *
@@ -15074,19 +15320,21 @@ class ImageExport {
      *
      * @param {Maps} control - Specifies the instance of the map
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     constructor(control) {
     }
     /**
      * To export the file as image/svg format
      *
-     * @param {ExportType} type - Specifies the type of the image file
-     * @param {string} fileName - Specifies the file name of the image file
+     * @param {Maps} maps - Specifies the Maps instance.
+     * @param {ExportType} type - Specifies the type of the image file for exporting.
+     * @param {string} fileName - Specifies the file name of the image file for exporting.
      * @param {boolean} allowDownload - Specifies whether to download image as a file or not.
-     * @returns {Promise<string>} - Returns the promise string.
+     * @returns {Promise<string>} - Specifies the base64 string of the exported image which is returned when the allowDownload is set to false.
      * @private
      */
     export(maps, type, fileName, allowDownload) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
         const promise = new Promise((resolve, reject) => {
             const imageCanvasElement = createElement('canvas', {
                 id: 'ej2-canvas',
@@ -15096,11 +15344,10 @@ class ImageExport {
                 }
             });
             const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
-            const toolbarEle = document.getElementById(maps.element.id + '_ToolBar');
             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);
             if (!maps.isTileMap) {
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
                     maps.svgObject.outerHTML + '</svg>';
@@ -15143,8 +15390,8 @@ class ImageExport {
                 }
                 else {
                     const svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
-                    let top = parseFloat(svgParentElement.getAttribute('y'));
-                    let left = parseFloat(svgParentElement.getAttribute('x'));
+                    const top = parseFloat(svgParentElement.getAttribute('y'));
+                    const left = parseFloat(svgParentElement.getAttribute('x'));
                     const imgxHttp = new XMLHttpRequest();
                     const imgTileLength = maps.mapLayerPanel.tiles.length;
                     for (let i = 0; i <= imgTileLength + 1; i++) {
@@ -15154,7 +15401,7 @@ class ImageExport {
                         ctxt.fillStyle = maps.background ? maps.background : '#FFFFFF';
                         ctxt.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                         ctxt.font = maps.titleSettings.textStyle.size + ' Arial';
-                        let titleElement = document.getElementById(maps.element.id + '_Map_title');
+                        const titleElement = document.getElementById(maps.element.id + '_Map_title');
                         if (!isNullOrUndefined(titleElement)) {
                             ctxt.fillStyle = titleElement.getAttribute('fill');
                             ctxt.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
@@ -15227,10 +15474,10 @@ class ImageExport {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     destroy() { }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * This module enables the export to PDF functionality in Maps control.
  *
@@ -15240,17 +15487,18 @@ class PdfExport {
     /**
      * Constructor for Maps
      *
-     * @param {Maps} control Specifies the instance of the map
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     constructor() { }
     /**
      * To export the file as image/svg format
      *
-     * @param {ExportType} type - Specifies the type of the document
-     * @param {string} fileName - Specifies the file name of the document
-     * @param {boolean} allowDownload - Specifies whether to download the document or not
-     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component
-     * @returns {Promise<string>} - Returns the promise string
+     * @param {Maps} maps - Specifies the Maps instance.
+     * @param {ExportType} type - Specifies the type of the document.
+     * @param {string} fileName - Specifies the name of the PDF document.
+     * @param {boolean} allowDownload - Specifies whether to download the document or not.
+     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component.
+     * @returns {Promise<string>} - Returns "null" value when the allowDownload is set to false.
      * @private
      */
     export(maps, type, fileName, allowDownload, orientation) {
@@ -15300,8 +15548,8 @@ class PdfExport {
             }
             else {
                 const svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
-                let top = parseFloat(svgParentElement.getAttribute('y'));
-                let left = parseFloat(svgParentElement.getAttribute('x'));
+                const top = parseFloat(svgParentElement.getAttribute('y'));
+                const left = parseFloat(svgParentElement.getAttribute('x'));
                 const xHttp = new XMLHttpRequest();
                 const tileLength = maps.mapLayerPanel.tiles.length;
                 for (let i = 0; i <= tileLength + 1; i++) {
@@ -15311,7 +15559,7 @@ class PdfExport {
                     ctx.fillStyle = maps.background ? maps.background : '#FFFFFF';
                     ctx.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                     ctx.font = maps.titleSettings.textStyle.size + ' Arial';
-                    let titleElement = document.getElementById(maps.element.id + '_Map_title');
+                    const titleElement = document.getElementById(maps.element.id + '_Map_title');
                     if (!isNullOrUndefined(titleElement)) {
                         ctx.fillStyle = titleElement.getAttribute('fill');
                         ctx.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
@@ -15354,7 +15602,7 @@ class PdfExport {
                         }
                         else {
                             setTimeout(() => {
-                                let tileSvg = document.getElementById(maps.element.id + '_Tile_SVG');
+                                const tileSvg = document.getElementById(maps.element.id + '_Tile_SVG');
                                 tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                             }, 300);
                         }
@@ -15383,6 +15631,7 @@ class PdfExport {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     destroy() { }
 }