@syncfusion/ej2-maps 20.3.49 → 20.4.38

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

@@ -16,8 +16,6 @@ var __extends$1 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable max-len */
 /**
  * Helper functions for maps control
@@ -667,9 +665,9 @@ function renderTextElement(option, style, color, parent, isMinus) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function convertElement(element, markerId, data, index, mapObj) {
     var childElement = createElement('div', {
-        id: markerId,
-        styles: 'position: absolute;pointer-events: auto;'
+        id: markerId
     });
+    childElement.style.cssText = 'position: absolute;pointer-events: auto;';
     var elementLength = element.length;
     while (elementLength > 0) {
         childElement.appendChild(element[0]);
@@ -677,13 +675,14 @@ function convertElement(element, markerId, data, index, mapObj) {
     }
     var templateHtml = childElement.innerHTML;
     var properties = Object.keys(data);
+    var regExp = RegExp;
     for (var 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;
@@ -720,6 +719,7 @@ function formatValue(value, maps) {
 function convertStringToValue(stringTemplate, format, data, maps) {
     var templateHtml = (stringTemplate === '') ? format : stringTemplate;
     var templateValue = (stringTemplate === '') ? templateHtml.split('${') : templateHtml.split('{{:');
+    var regExp = RegExp;
     for (var i = 0; i < templateValue.length; i++) {
         if ((templateValue[i].indexOf('}}') > -1 && templateValue[i].indexOf('.') > -1) ||
             (templateValue[i].indexOf('}') > -1 && templateValue[i].search('.') > -1)) {
@@ -729,7 +729,7 @@ function convertStringToValue(stringTemplate, format, data, maps) {
                     var 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);
                 }
             }
         }
@@ -751,15 +751,17 @@ function convertElementFromLabel(element, labelId, data, index, mapObj) {
     var templateHtml = labelEle.outerHTML;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var properties = Object.keys(data);
+    var regExp = RegExp;
     for (var 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', {
+    var templateEle = createElement('div', {
         id: labelId,
-        innerHTML: templateHtml,
-        styles: 'position: absolute'
+        innerHTML: templateHtml
     });
+    templateEle.style.position = 'absolute';
+    return templateEle;
 }
 /**
  *
@@ -861,7 +863,7 @@ function markerShapeChoose(eventArgs, data) {
         var 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]) ?
@@ -870,7 +872,7 @@ function markerShapeChoose(eventArgs, data) {
     }
     else {
         var 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;
         var shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
             ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
                 data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
@@ -949,8 +951,6 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                             container['top'] : (container['bottom'] - container['top'])));
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var translate = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
-                        var transPoint = (maps.isTileMap) ? { x: 0, y: 0 } : (maps.translatePoint.x !== 0) ?
-                            maps.translatePoint : translate['location'];
                         var dataIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_dataIndex_')[1].split('_')[0], 10);
                         var markerIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
                         var markerSetting = currentLayer.markerSettings[markerIndex];
@@ -1599,6 +1599,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
@@ -2089,7 +2090,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;
@@ -2107,8 +2109,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;
@@ -2159,9 +2163,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)) {
@@ -2188,12 +2194,17 @@ function getZoomTranslate(mapObject, layer, animate) {
         var leftPosition = ((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) / factor;
         var 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;
@@ -2204,8 +2215,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;
     }
@@ -2243,8 +2256,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;
@@ -2309,6 +2324,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
  */
@@ -2316,10 +2332,10 @@ function Internalize(maps, value) {
 function getTemplateFunction(template, maps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var 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);
@@ -2401,7 +2417,7 @@ function triggerShapeEvent(targetId, selection, maps, eventName) {
         target: targetId,
         maps: maps
     };
-    maps.trigger(eventName, eventArgs, function (observedArgs) {
+    maps.trigger(eventName, eventArgs, function () {
         eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? eventArgs.opacity : eventArgs.border.opacity;
     });
     return eventArgs;
@@ -2524,7 +2540,8 @@ shapeData, data) {
         maps: map
     };
     map.trigger('itemSelection', eventArgs, function (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));
@@ -2624,16 +2641,16 @@ function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element, isTou
     var demo = str[0].length;
     for (var 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
@@ -2694,7 +2711,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 : [];
@@ -2702,8 +2719,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 });
 //                 }
@@ -2731,13 +2748,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;
     }
 }
 /**
@@ -3134,7 +3152,7 @@ function animate(element, delay, duration, process, end) {
             end.call(_this, { element: element });
             if (element.id.indexOf('Marker') > -1) {
                 var markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
-                markerElement.setAttribute('style', markerStyle);
+                markerElement.style.cssText = markerStyle;
             }
         }
     };
@@ -3847,7 +3865,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
  */
@@ -4405,7 +4423,7 @@ var ZoomSettings = /** @__PURE__ @class */ (function (_super) {
         Property(false)
     ], ZoomSettings.prototype, "doubleClickZoom", void 0);
     __decorate$1([
-        Property(false)
+        Property(true)
     ], ZoomSettings.prototype, "pinchZooming", void 0);
     __decorate$1([
         Property(false)
@@ -4881,18 +4899,18 @@ var Marker = /** @__PURE__ @class */ (function () {
         var 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';
         var 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(function (markerSettings, markerIndex) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
@@ -4942,7 +4960,8 @@ var Marker = /** @__PURE__ @class */ (function () {
                     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;
                     var markerDataLength = markerData.length - maps.markerNullCount;
                     if (_this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(_this.markerSVGObject);
@@ -5000,125 +5019,134 @@ var Marker = /** @__PURE__ @class */ (function () {
     };
     /**
      * To calculate center position and factor value dynamically
+     *
+     * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
+     * @returns {void}
      */
     Marker.prototype.calculateZoomCenterPositionAndFactor = function (layersCollection) {
-        if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
-            var minLong_1;
-            var maxLat_1;
-            var minLat_1;
-            var maxLong_1;
-            var zoomLevel = void 0;
-            var centerLat = void 0;
-            var centerLong = void 0;
-            var maxZoomFact = this.maps.zoomSettings.maxZoom;
-            var mapWidth = this.maps.mapAreaRect.width;
-            var 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, function (currentLayer, layerIndex) {
-                var isMarker = currentLayer.markerSettings.length !== 0;
-                if (isMarker) {
-                    Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSetting, markerIndex) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var markerData = markerSetting.dataSource;
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-                            var latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
-                                !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                            var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
-                                !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                            minLong_1 = isNullOrUndefined(minLong_1) && dataIndex === 0 ?
-                                longitude : minLong_1;
-                            maxLat_1 = isNullOrUndefined(maxLat_1) && dataIndex === 0 ?
-                                latitude : maxLat_1;
-                            minLat_1 = isNullOrUndefined(minLat_1) && dataIndex === 0 ?
-                                latitude : minLat_1;
-                            maxLong_1 = isNullOrUndefined(maxLong_1) && dataIndex === 0 ?
-                                longitude : maxLong_1;
-                            if (minLong_1 > longitude) {
-                                minLong_1 = longitude;
-                            }
-                            if (minLat_1 > latitude) {
-                                minLat_1 = latitude;
-                            }
-                            if (maxLong_1 < longitude) {
-                                maxLong_1 = longitude;
-                            }
-                            if (maxLat_1 < latitude) {
-                                maxLat_1 = latitude;
-                            }
+        if (!isNullOrUndefined(this.maps)) {
+            if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
+                var minLong_1;
+                var maxLat_1;
+                var minLat_1;
+                var maxLong_1;
+                var zoomLevel = void 0;
+                var centerLat = void 0;
+                var centerLong = void 0;
+                var maxZoomFact = this.maps.zoomSettings.maxZoom;
+                var mapWidth = this.maps.mapAreaRect.width;
+                var 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, function (currentLayer) {
+                    var isMarker = currentLayer.markerSettings.length !== 0;
+                    if (isMarker) {
+                        Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSetting) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            var markerData = markerSetting.dataSource;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+                                var latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
+                                    !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                                var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
+                                    !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                                minLong_1 = isNullOrUndefined(minLong_1) && dataIndex === 0 ?
+                                    longitude : minLong_1;
+                                maxLat_1 = isNullOrUndefined(maxLat_1) && dataIndex === 0 ?
+                                    latitude : maxLat_1;
+                                minLat_1 = isNullOrUndefined(minLat_1) && dataIndex === 0 ?
+                                    latitude : minLat_1;
+                                maxLong_1 = isNullOrUndefined(maxLong_1) && dataIndex === 0 ?
+                                    longitude : maxLong_1;
+                                if (minLong_1 > longitude) {
+                                    minLong_1 = longitude;
+                                }
+                                if (minLat_1 > latitude) {
+                                    minLat_1 = latitude;
+                                }
+                                if (maxLong_1 < longitude) {
+                                    maxLong_1 = longitude;
+                                }
+                                if (maxLat_1 < latitude) {
+                                    maxLat_1 = latitude;
+                                }
+                            });
                         });
-                    });
-                }
-            });
-            if (!isNullOrUndefined(minLat_1) && !isNullOrUndefined(minLong_1) &&
-                !isNullOrUndefined(maxLong_1) && !isNullOrUndefined(maxLat_1)) {
-                // To find the center position
-                centerLat = (minLat_1 + maxLat_1) / 2;
-                centerLong = (minLong_1 + maxLong_1) / 2;
-                this.maps.markerCenterLatitude = centerLat;
-                this.maps.markerCenterLongitude = centerLong;
-                if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
-                    this.maps.markerZoomCenterPoint = {
-                        latitude: centerLat,
-                        longitude: centerLong
-                    };
-                }
-                var markerFactor = void 0;
-                if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
-                    zoomLevel = calculateZoomLevel(minLat_1, maxLat_1, minLong_1, maxLong_1, 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_1) && !isNullOrUndefined(minLong_1) &&
+                    !isNullOrUndefined(maxLong_1) && !isNullOrUndefined(maxLat_1)) {
+                    // To find the center position
+                    centerLat = (minLat_1 + maxLat_1) / 2;
+                    centerLong = (minLong_1 + maxLong_1) / 2;
+                    this.maps.markerCenterLatitude = centerLat;
+                    this.maps.markerCenterLongitude = centerLong;
+                    if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
+                        this.maps.markerZoomCenterPoint = {
+                            latitude: centerLat,
+                            longitude: centerLong
+                        };
+                    }
+                    var markerFactor = void 0;
+                    if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
+                        zoomLevel = calculateZoomLevel(minLat_1, maxLat_1, minLong_1, maxLong_1, 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}
      */
     Marker.prototype.markerClick = function (e) {
         var target = e.target.id;
@@ -5140,6 +5168,8 @@ var Marker = /** @__PURE__ @class */ (function () {
     };
     /**
      * To check and trigger Cluster click event
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     Marker.prototype.markerClusterClick = function (e) {
         var target = e.target.id;
@@ -5231,6 +5261,9 @@ var Marker = /** @__PURE__ @class */ (function () {
     };
     /**
      * To check and trigger marker move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     Marker.prototype.markerMove = function (e) {
         var targetId = e.target.id;
@@ -5249,6 +5282,9 @@ var Marker = /** @__PURE__ @class */ (function () {
     };
     /**
      * To check and trigger cluster move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     Marker.prototype.markerClusterMouseMove = function (e) {
         var targetId = e.target.id;
@@ -5257,7 +5293,7 @@ var Marker = /** @__PURE__ @class */ (function () {
         }
         var options = this.getMarker(targetId);
         if (this.maps.markerClusterExpand) {
-            e.target.setAttribute('style', 'cursor: pointer');
+            e.target.style.cursor = 'pointer';
         }
         if (isNullOrUndefined(options)) {
             return;
@@ -5522,6 +5558,7 @@ var BingMap = /** @__PURE__ @class */ (function () {
         }
     };
     /**
+     * @returns {void}
      * @private
      */
     BingMap.prototype.destroy = function () {
@@ -5559,6 +5596,11 @@ var ColorMapping = /** @__PURE__ @class */ (function () {
     };
     /**
      * 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
     ColorMapping.prototype.getColorByValue = function (colorMapping, colorValue, equalValue) {
@@ -5751,10 +5793,7 @@ var ColorMapping = /** @__PURE__ @class */ (function () {
     return 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
  */
@@ -5778,10 +5817,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 height: areaRect.height
             });
             var 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);
         }
@@ -5835,13 +5874,13 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             (!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;
@@ -5853,7 +5892,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         var 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);
             }
         }
@@ -5869,7 +5909,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         else {
             center = { x: null, y: null };
         }
-        var zoomFactorValue = panel.mapObject.zoomSettings.shouldZoomInitially ?
+        var 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))
@@ -5942,7 +5982,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             panel.mapObject.previousZoomFactor = panel.mapObject.zoomSettings.zoomFactor;
         }
         if (panel.mapObject.navigationLineModule) {
-            panel.layerObject.appendChild(panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex));
+            var 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);
@@ -6010,7 +6053,6 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             var imageUrl = resource['imageUrl'];
                             var subDomains = resource['imageUrlSubdomains'];
                             var maxZoom = resource['zoomMax'];
-                            var markerGroupElement = document.getElementById(proxy_1.mapObject.element.id + '_Markers_Group');
                             if (imageUrl !== null && imageUrl !== undefined && imageUrl !== bing_1.imageUrl) {
                                 bing_1.imageUrl = imageUrl;
                             }
@@ -6125,13 +6167,13 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         var colors = shapeSettings.palette.length > 1 ? shapeSettings.palette : getShapeColor(this.mapObject.theme);
         var 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) {
             var _loop_1 = function (i) {
                 var k = void 0;
@@ -6172,8 +6214,6 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 fill = Object.prototype.toString.call(getShapeColor_1) === '[object Object]' && !isNullOrUndefined(getShapeColor_1['fill'])
                     ? getShapeColor_1['fill'] : fill;
                 if (this_1.currentLayer.shapeSettings.borderColorValuePath || this_1.currentLayer.shapeSettings.borderWidthValuePath) {
-                    var borderColorValue = this_1.currentLayer.shapeSettings.borderColorValuePath;
-                    var borderWidthValue = this_1.currentLayer.shapeSettings.borderWidthValuePath;
                     k = checkShapeDataFields(
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this_1.currentLayer.dataSource, currentShapeData['property'], this_1.currentLayer.shapeDataPath, this_1.currentLayer.shapePropertyPath, this_1.currentLayer);
@@ -6300,7 +6340,9 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             var pointData = currentShapeData['point'];
-                            var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (_this.mapObject.isTileMap ? _this.mapObject.scale : _this.currentFactor);
+                            var 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;
@@ -6310,7 +6352,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 var pointData = multiPointData['point'];
                                 var 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);
                             });
@@ -6343,15 +6385,16 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
     /**
      * 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}
      */
+    LayerPanel.prototype.pathAttributeCalculate = function (groupElement, pathEle, drawingType, 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    LayerPanel.prototype.pathAttributeCalculate = function (groupElement, pathEle, drawingType, currentShapeData, index) {
+    currentShapeData, index) {
         var property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
             this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
         var properties;
@@ -6363,10 +6406,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         }
         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) {
@@ -6378,7 +6421,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                     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());
                 }
             }
         }
@@ -6425,9 +6468,9 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             this.mapObject.markerModule.calculateZoomCenterPositionAndFactor(this.mapObject.layersCollection);
         }
         var 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
             var intersect_1 = [];
@@ -6444,8 +6487,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             _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);
@@ -6455,11 +6498,11 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
      *
      * @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}
      */
     LayerPanel.prototype.renderLabel = function (layer, layerIndex, 
@@ -6558,10 +6601,12 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var multiPolygonDatas = [];
                 for (var 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 (var 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;
@@ -6570,15 +6615,15 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 this.currentLayer.layerData.push(multiPolygonDatas);
                 break;
             case 'linestring':
-                var extraSpace_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                var lineExtraSpace_1 = !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(function (points, index) {
+                coordinates.map(function (points) {
                     latitude = points[1];
                     longitude = points[0];
                     var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
-                    _this.calculateBox(point, extraSpace_1);
+                    _this.calculateBox(point, lineExtraSpace_1);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -6591,10 +6636,12 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 var extraSpaces_1 = !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
                 var multiLineData_1 = [];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map(function (multiPoints) {
                     newData = [];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     multiPoints.map(function (points) {
                         latitude = points[1];
                         longitude = points[0];
@@ -6623,8 +6670,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                     point: point, type: type, lat: latitude, lng: longitude, property: properties
                 });
                 break;
-            case 'multipoint': {
-                var extraSpace_2 = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+            case 'multipoint':
+                var extraSpace_1 = (!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) +
                     (this.currentLayer.shapeSettings.circleRadius * 2);
@@ -6634,7 +6681,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                     latitude = points[1];
                     longitude = points[0];
                     var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
-                    _this.calculateBox(point, extraSpace_2);
+                    _this.calculateBox(point, extraSpace_1);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -6643,7 +6690,6 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 newData['type'] = type;
                 this.currentLayer.layerData.push(newData);
                 break;
-            }
             case 'path':
                 this.currentLayer.layerData.push({
                     point: data['d'], type: type, property: properties
@@ -6653,7 +6699,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
     };
     LayerPanel.prototype.calculateBox = function (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);
@@ -6777,6 +6824,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                     case 'multilinestring':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map(function (multiPoint, index) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             multiPoint.map(function (point, index) {
                                 _this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
                             });
@@ -6792,6 +6840,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         _this.calculateRectBox(coordinates, 'point');
                         break;
                     case 'multipoint':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map(function (point, index) {
                             _this.calculateRectBox(point, 'multipoint', index === 0 ? true : false);
                         });
@@ -6807,7 +6856,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         var newData = [];
         var bounds = this.mapObject.baseMapBounds;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        coordinates.map(function (currentPoint, index) {
+        coordinates.map(function (currentPoint) {
             var latitude = currentPoint[1];
             var longitude = currentPoint[0];
             if ((longitude >= bounds.longitude.min && longitude <= bounds.longitude.max)
@@ -6901,8 +6950,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             tileI = (tileI % ycount) + ycount;
                         }
                         var 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 !== '')) {
                             var key = baseLayer.key;
                             tile.src = bing.getBingMap(tile, key, baseLayer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
@@ -6949,7 +6998,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 }
             }
         }
-        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);
         }
     };
@@ -6995,18 +7045,45 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         animateElement = element ? element.children[0] : null;
                     }
                 }
-                var id = 0;
-                var _loop_3 = function (tile) {
-                    var imgElement = createElement('img');
-                    imgElement.setAttribute('height', '256px');
-                    imgElement.setAttribute('width', '256px');
-                    imgElement.setAttribute('src', tile.src);
-                    imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
+                for (var id = 0; id < _this.tiles.length; id++) {
+                    var tile = _this.tiles[id];
+                    var imgElement = null;
                     var mapId = _this.mapObject.element.id;
-                    imgElement.onload = function () {
-                        if (document.getElementById(mapId + '_tile_' + id) && type === 'Pan') {
-                            removeElement(mapId + '_tile_' + id);
+                    if (type === 'Pan') {
+                        var child = document.getElementById(mapId + '_tile_' + id);
+                        var 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'));
                         var child = createElement('div', { id: mapId + '_tile_' + id });
                         child.style.position = 'absolute';
                         child.style.left = tile.left + 'px';
@@ -7017,15 +7094,27 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         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 (var l = _this.tiles.length; l < animateElement.childElementCount; l++) {
+                        var isExistingElement = false;
+                        for (var 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';
                         }
-                    };
-                };
-                for (var _i = 0, _a = _this.tiles; _i < _a.length; _i++) {
-                    var tile = _a[_i];
-                    _loop_3(tile);
+                        else {
+                            animateElement.removeChild(animateElement.children[l]);
+                        }
+                    }
                 }
             }, timeOut);
         }
@@ -7195,8 +7284,6 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
     return LayerPanel;
 }());
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable jsdoc/require-param */
 /**
  * Represents the annotation elements for map.
  */
@@ -7237,8 +7324,9 @@ var Annotations = /** @__PURE__ @class */ (function () {
         var availSize = map.availableSize;
         var id = map.element.id + '_Annotation_' + annotationIndex;
         var 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 + ';';
         var argsData = {
             cancel: false, name: annotationRendering, content: annotation.content,
             annotation: annotation
@@ -7335,11 +7423,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
  */
@@ -7523,18 +7606,20 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.setCulture();
     };
     Maps.prototype.renderElements = function () {
-        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.
@@ -7584,7 +7669,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     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
                         var dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7603,7 +7689,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     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
                         var dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7713,6 +7800,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             }
             if (!this.isResize) {
                 for (var 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) {
                         var markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
@@ -7784,7 +7872,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             }
         }
         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;
     };
     /**
@@ -7878,7 +7968,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     Maps.prototype.addTabIndex = function () {
         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) {
@@ -7906,8 +7996,10 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             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';
             }
@@ -7928,7 +8020,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(elements) && elements.childElementCount > 0) {
                 for (var i = 0; i < elements.childNodes.length; i++) {
                     var childElement = elements.childNodes[i];
-                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') == -1) {
+                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') === -1) {
                         var layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                         for (var j = 0; j < childElement.childNodes.length; j++) {
                             var childNode = childElement.childNodes[j];
@@ -7941,7 +8033,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
             }
-            if (this.zoomModule && (this.previousScale !== this.scale)) {
+            if (this.zoomModule && ((this.previousScale !== this.scale) || this.zoomNotApplied || this.isZoomByPosition)) {
                 this.zoomModule.applyTransform(this, true);
             }
         }
@@ -7949,9 +8041,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     Maps.prototype.createSecondaryElement = function () {
         if (isNullOrUndefined(document.getElementById(this.element.id + '_Secondary_Element'))) {
             var 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);
         }
     };
@@ -8005,18 +8097,20 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
             var 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;';
             var 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);
         }
@@ -8057,7 +8151,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 break;
             }
         }
-        subLayers.map(function (subLayer, subLayerIndex) {
+        subLayers.map(function (subLayer) {
             if (subLayer.visible) {
                 _this.layersCollection.push(subLayer);
             }
@@ -8217,6 +8311,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     Maps.prototype.keyUpHandler = function (event) {
         var 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);
         }
@@ -8250,6 +8347,13 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     Maps.prototype.keyDownHandler = function (event) {
         var zoom = this.zoomModule;
+        if ((event.code === 'ArrowUp' || event.code === 'ArrowDown' || event.code === 'ArrowLeft'
+            || event.code === 'ArrowRight') && zoom) {
+            var 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');
         }
@@ -8324,6 +8428,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * 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}
      */
     Maps.prototype.mapsOnClick = function (e) {
         var _this = this;
@@ -8389,8 +8494,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     Maps.prototype.getClickLocation = function (targetId, pageX, pageY, targetElement, x, y) {
         var layerIndex = 0;
         var 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) {
@@ -8427,12 +8533,21 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 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;
     };
+    Maps.prototype.removeTileMap = function () {
+        var animateElement = document.getElementById(this.element.id + '_animated_tiles');
+        if (!isNullOrUndefined(this.currentTiles) && animateElement.childElementCount !== this.currentTiles.childElementCount) {
+            for (var 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.
      *
@@ -8464,6 +8579,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             pageY = e.pageY;
             target = e.target;
         }
+        if (this.isTileMap) {
+            this.removeTileMap();
+        }
         if (this.isTouch) {
             if (targetEle.id.indexOf('_ToolBar') === -1) {
                 var latLongValue = this.getClickLocation(targetId, pageX, pageY, targetEle, pageX, pageY);
@@ -8496,13 +8614,14 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         var rect = this.element.getBoundingClientRect();
         var element = e.target;
+        var animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
+        if (this.isTileMap && !isNullOrUndefined(animatedTiles)) {
+            this.currentTiles = animatedTiles.cloneNode(true);
+        }
         if (element.id.indexOf('_ToolBar') === -1) {
             var 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);
@@ -8531,6 +8650,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
+     * @returns {void}
      */
     Maps.prototype.mapsOnDoubleClick = function (e) {
         this.notify('dblclick', e);
@@ -8554,8 +8674,10 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 latitude = latLongValue['latitude'];
                 longitude = latLongValue['longitude'];
             }
-            var doubleClickArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
-                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
+            var doubleClickArgs = {
+                cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
+                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null
+            };
             this.trigger('doubleClick', doubleClickArgs);
         }
     };
@@ -8647,28 +8769,30 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.mapsOnResize = function (e) {
         var _this = this;
-        this.isResize = this.isReset = true;
-        var 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(function () {
-                    _this.unWireEVents();
-                    _this.createSVG();
-                    _this.refreshing = true;
-                    _this.wireEVents();
-                    _this.render();
-                    _this.refreshing = false;
-                }, 500);
+        if (!this.isDestroyed) {
+            this.isResize = this.isReset = true;
+            var 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(function () {
+                        _this.unWireEVents();
+                        _this.createSVG();
+                        _this.refreshing = true;
+                        _this.wireEVents();
+                        _this.render();
+                        _this.refreshing = false;
+                    }, 500);
+                }
             }
         }
         return false;
@@ -8683,32 +8807,34 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.zoomByPosition = function (centerPosition, zoomFactor) {
-        var factor = this.mapLayerPanel.calculateFactor(this.layersCollection[0]);
-        var position;
-        var size = this.mapAreaRect;
-        if (!this.isTileMap && this.zoomModule) {
-            if (!isNullOrUndefined(centerPosition)) {
-                position = convertGeoToPoint(centerPosition.latitude, centerPosition.longitude, factor, this.layersCollection[0], this);
-                var mapRect = document.getElementById(this.element.id + '_Layer_Collections').getBoundingClientRect();
-                var svgRect = this.svgObject.getBoundingClientRect();
-                var xDiff = Math.abs(mapRect.left - svgRect.left) / this.scale;
-                var yDiff = Math.abs(mapRect.top - svgRect.top) / this.scale;
-                var x = this.translatePoint.x + xDiff;
-                var 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;
+            var 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));
         }
     };
     /**
@@ -8716,38 +8842,44 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      *
      * @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}
      */
     Maps.prototype.panByDirection = function (direction, mouseLocation) {
-        var xDiff = 0;
-        var 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) {
+            var xDiff = 0;
+            var 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}
      */
     Maps.prototype.addLayer = function (layer) {
-        var mapsLayer = this.layers;
-        mapsLayer.push(layer);
-        this.isAddLayer = true;
-        this.layers = mapsLayer;
+        if (!this.isDestroyed) {
+            var mapsLayer = this.layers;
+            mapsLayer.push(layer);
+            this.isAddLayer = true;
+            this.layers = mapsLayer;
+        }
     };
     /**
      * This method is used to remove a layer from map.
@@ -8756,9 +8888,11 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.removeLayer = function (index) {
-        var mapsLayer = this.layers;
-        mapsLayer.splice(index, 1);
-        this.layers = mapsLayer;
+        if (!this.isDestroyed) {
+            var mapsLayer = this.layers;
+            mapsLayer.splice(index, 1);
+            this.layers = mapsLayer;
+        }
     };
     /**
      * This method is used to add markers dynamically in the maps.
@@ -8770,15 +8904,17 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.addMarker = function (layerIndex, markerCollection) {
-        var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
-        if (markerCollection.length > 0 && layerEle) {
-            for (var _i = 0, markerCollection_1 = markerCollection; _i < markerCollection_1.length; _i++) {
-                var newMarker = markerCollection_1[_i];
-                this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+        if (!this.isDestroyed) {
+            var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
+            if (markerCollection.length > 0 && layerEle) {
+                for (var _i = 0, markerCollection_1 = markerCollection; _i < markerCollection_1.length; _i++) {
+                    var newMarker = markerCollection_1[_i];
+                    this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+                }
+                var markerModule = new Marker(this);
+                markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+                this.arrangeTemplate();
             }
-            var markerModule = new Marker(this);
-            markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
-            this.arrangeTemplate();
         }
     };
     /**
@@ -8791,93 +8927,96 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.shapeSelection = function (layerIndex, propertyName, name, enable) {
-        var targetEle;
-        var subLayerIndex;
-        var popertyNameArray = Array.isArray(propertyName) ? propertyName : Array(propertyName);
-        if (isNullOrUndefined(enable)) {
-            enable = true;
-        }
-        var selectionsettings = this.layers[layerIndex].selectionSettings;
-        if (!selectionsettings.enableMultiSelect && this.legendSelection && enable) {
-            this.removeShapeSelection();
-        }
-        if (this.layers[layerIndex].type === 'SubLayer') {
-            for (var i = 0; i < this.layersCollection.length; i++) {
-                if ((this.layersCollection[i].shapeData === this.layers[layerIndex].shapeData)) {
-                    subLayerIndex = i;
-                    break;
+        if (!this.isDestroyed) {
+            var targetEle = void 0;
+            var subLayerIndex = void 0;
+            var popertyNameArray = Array.isArray(propertyName) ? propertyName : Array(propertyName);
+            if (isNullOrUndefined(enable)) {
+                enable = true;
+            }
+            var selectionsettings = this.layers[layerIndex].selectionSettings;
+            if (!selectionsettings.enableMultiSelect && this.legendSelection && enable) {
+                this.removeShapeSelection();
+            }
+            if (this.layers[layerIndex].type === 'SubLayer') {
+                for (var i = 0; i < this.layersCollection.length; i++) {
+                    if ((this.layersCollection[i].shapeData === this.layers[layerIndex].shapeData)) {
+                        subLayerIndex = i;
+                        break;
+                    }
                 }
             }
-        }
-        if (selectionsettings.enable) {
-            var targetId = void 0;
-            var dataIndex = void 0;
-            var shapeIndex = void 0;
-            var indexValue = void 0;
-            var shapeDataValue = void 0;
-            var data = void 0;
-            var shapeData = this.layers[layerIndex].shapeData['features'];
-            for (var i = 0; i < shapeData.length; i++) {
-                for (var j = 0; j < popertyNameArray.length; j++) {
-                    var propertyName_1 = !isNullOrUndefined(shapeData[i]['properties'][popertyNameArray[j]])
-                        && isNaN(shapeData[i]['properties'][popertyNameArray[j]]) ?
-                        shapeData[i]['properties'][popertyNameArray[j]].toLowerCase() : shapeData[i]['properties'][popertyNameArray[j]];
-                    var shapeName = !isNullOrUndefined(name) && typeof name === 'string' ? name.toLowerCase() : name;
-                    var k = void 0;
-                    if (propertyName_1 === 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]);
-                        }
-                        var 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) {
+                var targetId = void 0;
+                var dataIndex = void 0;
+                var shapeIndex = void 0;
+                var indexValue = void 0;
+                var shapeDataValue = void 0;
+                var data = void 0;
+                var shapeData = this.layers[layerIndex].shapeData['features'];
+                for (var i = 0; i < shapeData.length; i++) {
+                    for (var j = 0; j < popertyNameArray.length; j++) {
+                        var propertyName_1 = !isNullOrUndefined(shapeData[i]['properties'][popertyNameArray[j]])
+                            && isNaN(shapeData[i]['properties'][popertyNameArray[j]]) ?
+                            shapeData[i]['properties'][popertyNameArray[j]].toLowerCase() : shapeData[i]['properties'][popertyNameArray[j]];
+                        var shapeName = !isNullOrUndefined(name) && typeof name === 'string' ? name.toLowerCase() : name;
+                        var k = void 0;
+                        if (propertyName_1 === 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]);
+                            }
+                            var 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);
                             }
-                            var 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;
+                                var 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);
-                            }
-                            var shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
-                            if (shapeToggled) {
-                                removeClass(targetEle);
-                                var 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);
+                                }
+                                var shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
+                                if (shapeToggled) {
+                                    removeClass(targetEle);
+                                    var 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();
+                                        }
                                     }
                                 }
                             }
@@ -8898,48 +9037,55 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.zoomToCoordinates = function (minLatitude, minLongitude, maxLatitude, maxLongitude) {
         var _a, _b;
-        var centerLatitude;
-        var centerLongtitude;
-        var 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) {
-            _a = [maxLatitude, minLatitude], minLatitude = _a[0], maxLatitude = _a[1];
-        }
-        if (minLongitude > maxLongitude) {
-            _b = [maxLongitude, minLongitude], minLongitude = _b[0], maxLongitude = _b[1];
-        }
-        if (!isTwoCoordinates) {
-            centerLatitude = (minLatitude + maxLatitude) / 2;
-            centerLongtitude = (minLongitude + maxLongitude) / 2;
+        if (!this.isDestroyed) {
+            var centerLatitude = void 0;
+            var centerLongtitude = void 0;
+            var 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) {
+                _a = [maxLatitude, minLatitude], minLatitude = _a[0], maxLatitude = _a[1];
+            }
+            if (minLongitude > maxLongitude) {
+                _b = [maxLongitude, minLongitude], minLongitude = _b[0], maxLongitude = _b[1];
+            }
+            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);
+            var 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);
-        var 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.
@@ -8990,6 +9136,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * This method disposes the maps component.
+     *
+     * @returns {void}
      */
     Maps.prototype.destroy = function () {
         this.unWireEVents();
@@ -9046,93 +9194,96 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     Maps.prototype.onPropertyChanged = function (newProp, oldProp) {
-        var render = false;
-        var isMarker = false;
-        var isLayer = false;
-        var isStaticMapType = false;
-        var layerEle;
-        if (newProp['layers']) {
-            var newLayerLength = Object.keys(newProp['layers']).length;
-            layerEle = document.getElementById(this.element.id + '_LayerIndex_' + (newLayerLength - 1));
-        }
-        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-            var prop = _a[_i];
-            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;
-                        var layerPropLength = Object.keys(newProp.layers).length;
-                        for (var x = 0; x < layerPropLength; x++) {
-                            if (!isNullOrUndefined(newProp.layers[x])) {
-                                var collection = Object.keys(newProp.layers[x]);
-                                for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
-                                    var collectionProp = collection_1[_b];
-                                    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) {
+            var render = false;
+            var isMarker = false;
+            var isLayer = false;
+            var isStaticMapType = false;
+            var layerEle = void 0;
+            if (newProp['layers']) {
+                var newLayerLength = Object.keys(newProp['layers']).length;
+                layerEle = document.getElementById(this.element.id + '_LayerIndex_' + (newLayerLength - 1));
+            }
+            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+                var prop = _a[_i];
+                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;
+                            var layerPropLength = Object.keys(newProp.layers).length;
+                            for (var x = 0; x < layerPropLength; x++) {
+                                if (!isNullOrUndefined(newProp.layers[x])) {
+                                    var collection = Object.keys(newProp.layers[x]);
+                                    for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
+                                        var collectionProp = collection_1[_b];
+                                        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.prototype.refresh.call(this);
-                    break;
+                        break;
+                    case 'locale':
+                    case 'currencyCode':
+                        _super.prototype.refresh.call(this);
+                        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();
-            }
         }
     };
     /**
@@ -9145,7 +9296,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         var modules = [];
         var isVisible = this.findVisibleLayers(this.layers);
         var annotationEnable = false;
-        this.annotations.map(function (annotation, index) {
+        this.annotations.map(function (annotation) {
             annotationEnable = annotation.content != null;
         });
         if (this.isBubbleVisible()) {
@@ -9230,10 +9381,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * To find marker visibility
+     *
+     * @returns {boolean} - Returns whether the markers are visible or not.
      */
     Maps.prototype.isMarkersVisible = function () {
         var isVisible = false;
-        Array.prototype.forEach.call(this.layers, function (layer, layerIndex) {
+        Array.prototype.forEach.call(this.layers, function (layer) {
             for (var i = 0; i < layer.markerSettings.length; i++) {
                 if (layer.markerSettings[i].visible) {
                     isVisible = true;
@@ -9245,6 +9398,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * To find DataLabel visibility
+     *
+     * @returns {boolean} - Returns whether the data labels are visible or not.
      */
     Maps.prototype.isDataLabelVisible = function () {
         var isVisible = false;
@@ -9258,10 +9413,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * To find navigation line visibility
+     *
+     * @returns {boolean} - Returns whether the navigation lines are visible or not.
      */
     Maps.prototype.isNavigationVisible = function () {
         var isVisible = false;
-        Array.prototype.forEach.call(this.layers, function (layer, layerIndex) {
+        Array.prototype.forEach.call(this.layers, function (layer) {
             for (var i = 0; i < layer.navigationLineSettings.length; i++) {
                 if (layer.navigationLineSettings[i].visible) {
                     isVisible = true;
@@ -9273,6 +9430,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * 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
      */
     Maps.prototype.getExtraPosition = function () {
@@ -9330,7 +9489,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.print = function (id) {
-        if ((this.allowPrint) && (this.printModule)) {
+        if ((this.allowPrint) && (this.printModule) && !this.isDestroyed) {
             this.printModule.print(this, id);
         }
     };
@@ -9345,18 +9504,20 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.export = function (type, fileName, orientation, allowDownload) {
         var _this = this;
-        if (isNullOrUndefined(allowDownload)) {
-            allowDownload = true;
-        }
-        if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
-            return new Promise(function (resolve, reject) {
-                resolve(_this.imageExportModule.export(_this, type, fileName, allowDownload));
-            });
-        }
-        else if ((this.allowPdfExport) && (this.pdfExportModule)) {
-            return new Promise(function (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(function (resolve, reject) {
+                    resolve(_this.imageExportModule.export(_this, type, fileName, allowDownload));
+                });
+            }
+            else if ((this.allowPdfExport) && (this.pdfExportModule)) {
+                return new Promise(function (resolve, reject) {
+                    resolve(_this.pdfExportModule.export(_this, type, fileName, allowDownload, orientation));
+                });
+            }
         }
         return null;
     };
@@ -9367,19 +9528,22 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {Promise<string>} - Returns the processed Bing URL as Promise.
      */
     Maps.prototype.getBingUrlTemplate = function (url) {
-        var promise = new Promise(function (resolve, reject) {
-            var ajax = new Ajax({
-                url: url
+        var promise;
+        if (!this.isDestroyed) {
+            promise = new Promise(function (resolve, reject) {
+                var ajax = new Ajax({
+                    url: url
+                });
+                ajax.onSuccess = function (json) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var jsonObject = JSON.parse(json);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var resource = jsonObject['resourceSets'][0]['resources'][0];
+                    resolve(resource['imageUrl']);
+                };
+                ajax.send();
             });
-            ajax.onSuccess = function (json) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var jsonObject = JSON.parse(json);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var resource = jsonObject['resourceSets'][0]['resources'][0];
-                resolve(resource['imageUrl']);
-            };
-            ajax.send();
-        });
+        }
         return promise;
     };
     /**
@@ -9460,21 +9624,25 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {GeoPosition}- Returns the geo position
      */
     Maps.prototype.getGeoLocation = function (layerIndex, x, y) {
-        var container = document.getElementById(this.element.id);
-        var pageX = x - container.offsetLeft;
-        var pageY = y - container.offsetTop;
-        var currentLayer = this.layersCollection[layerIndex];
-        var translate = getTranslate(this, currentLayer, false);
-        var translatePoint = translate['location'];
-        var translatePointX = translatePoint.x * this.scale;
-        var translatePointY = translatePoint.y * this.scale;
-        var mapSize = (Math.min(this.mapAreaRect.height, this.mapAreaRect.width)
-            * this.mapLayerPanel['currentFactor']) * this.scale;
-        var xx = (this.clip(pageX - translatePointX, 0, mapSize - 1) / mapSize) - 0.5;
-        var yy = 0.5 - (this.clip(pageY - translatePointY, 0, mapSize - 1) / mapSize);
-        var lat = 90 - 360 * Math.atan(Math.exp(-yy * 2 * Math.PI)) / Math.PI;
-        var long = 360 * xx;
-        return { latitude: lat, longitude: long };
+        var latitude = 0;
+        var longitude = 0;
+        if (!this.isDestroyed) {
+            var container = document.getElementById(this.element.id);
+            var pageX = x - container.offsetLeft;
+            var pageY = y - container.offsetTop;
+            var currentLayer = this.layersCollection[layerIndex];
+            var translate = getTranslate(this, currentLayer, false);
+            var translatePoint = translate['location'];
+            var translatePointX = translatePoint.x * this.scale;
+            var translatePointY = translatePoint.y * this.scale;
+            var mapSize = (Math.min(this.mapAreaRect.height, this.mapAreaRect.width)
+                * this.mapLayerPanel['currentFactor']) * this.scale;
+            var xx = (this.clip(pageX - translatePointX, 0, mapSize - 1) / mapSize) - 0.5;
+            var 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 };
     };
     Maps.prototype.clip = function (value, minVal, maxVal) {
         return Math.min(Math.max(value, minVal), maxVal);
@@ -9487,10 +9655,16 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {GeoPosition} - Returns the position
      */
     Maps.prototype.getTileGeoLocation = function (x, y) {
-        var container = document.getElementById(this.element.id);
-        var ele = document.getElementById(this.element.id + '_tile_parent');
-        var 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'] };
+        var latitude = 0;
+        var longitude = 0;
+        if (!this.isDestroyed) {
+            var container = document.getElementById(this.element.id);
+            var ele = document.getElementById(this.element.id + '_tile_parent');
+            var 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.
@@ -9500,14 +9674,18 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {Object} - Returns the object.
      */
     Maps.prototype.pointToLatLong = function (pageX, pageY) {
-        var padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
-        pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
-        var mapSize = 256 * Math.pow(2, this.tileZoomLevel);
-        var x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
-        var y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
-        var lat = 90 - 360 * Math.atan(Math.exp(-y1 * 2 * Math.PI)) / Math.PI;
-        var long = 360 * x1;
-        return { latitude: lat, longitude: long };
+        var latitude = 0;
+        var longitude = 0;
+        if (!this.isDestroyed) {
+            var padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
+            pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
+            var mapSize = 256 * Math.pow(2, this.tileZoomLevel);
+            var x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
+            var 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([
         Property(null)
@@ -9703,7 +9881,8 @@ var Bubble = /** @__PURE__ @class */ (function () {
         var layerData = layer.layerData;
         var colorValuePath = bubbleSettings.colorValuePath;
         var equalValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
-            (getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : shapeData[colorValuePath]) : shapeData[colorValuePath];
+            (getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : shapeData[colorValuePath]) :
+            shapeData[colorValuePath];
         var colorValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
             Number(getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : Number(shapeData[colorValuePath])) :
             Number(shapeData[colorValuePath]);
@@ -9857,16 +10036,17 @@ var Bubble = /** @__PURE__ @class */ (function () {
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shape.map(function (current, index) {
+            shape.map(function (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
      */
     Bubble.prototype.bubbleClick = function (e) {
@@ -9912,6 +10092,8 @@ var Bubble = /** @__PURE__ @class */ (function () {
     /**
      * To check and trigger bubble move event
      *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @retruns {void}
      * @private
      */
     Bubble.prototype.bubbleMove = function (e) {
@@ -10002,6 +10184,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         var _this = this;
         var dataLabel = layer.dataLabelSettings;
         var style = layer.dataLabelSettings.textStyle;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var templateFn;
         var options;
         var dataLabelSettings = layer.dataLabelSettings;
@@ -10012,7 +10195,6 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var shapeData = shape;
         var element;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var text = '';
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var datasrcObj;
@@ -10151,7 +10333,6 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                 if (eventargs_1.cancel) {
                     return;
                 }
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var position = [];
                 var width = zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied
                     && _this.maps.zoomShapeCollection.length > index ? _this.maps.zoomShapeCollection[index]['width'] :
@@ -10195,8 +10376,14 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                         datasrcObj : shapeData['properties'], _this.maps, eventargs_1.template, _this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                     templateElement.innerHTML = !templateFn ? eventargs_1.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 {
@@ -10266,8 +10453,8 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                     }
                     if (trimmedLable.length > 1) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var border_1 = eventargs_1.border;
-                        if (border_1['width'] > 1) {
+                        var border = eventargs_1.border;
+                        if (border['width'] > 1) {
                             var fill = eventargs_1.fill;
                             var opacity = dataLabelSettings.opacity;
                             var rx = dataLabelSettings.rx;
@@ -10283,8 +10470,8 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                                 x = ((location['x'] + transPoint['x']) * scale) - textSize['width'] / 2;
                                 y = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
                             }
-                            border_1.opacity = isNullOrUndefined(border_1.opacity) ? opacity : border_1.opacity;
-                            var rectOptions = new RectOption(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border_1, opacity, new Rect((x + labelArgs.offsetX), (y + labelArgs.offsetY), textSize['width'], textSize['height']), rx, ry);
+                            border.opacity = isNullOrUndefined(border.opacity) ? opacity : border.opacity;
+                            var rectOptions = new RectOption(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border, opacity, new Rect((x + labelArgs.offsetX), (y + labelArgs.offsetY), textSize['width'], textSize['height']), rx, ry);
                             var rect = _this.maps.renderer.drawRectangle(rectOptions);
                             group.appendChild(rect);
                         }
@@ -10331,7 +10518,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shapes.map(function (current, index) {
+            shapes.map(function (current) {
                 points.push(new Point(current['point']['x'], current['point']['y']));
             });
         }
@@ -10346,7 +10533,6 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         return 'DataLabel';
     };
     /**
-     *
      * @returns {void}
      * @private
      */
@@ -10365,79 +10551,84 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
     function NavigationLine(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.
      */
     NavigationLine.prototype.renderNavigation = function (layer, factor, layerIndex) {
-        var navigationEle;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var navigation = layer.navigationLineSettings;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var longitude;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var point = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var latitude;
-        var visible;
-        var angle;
-        var width;
-        var color;
-        var dashArray;
-        var pathOption;
-        var direction;
-        var showArrow;
-        var arrowColor;
-        var arrowSize;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var arrowSettings;
-        var arrowPosition;
-        var startArrow;
-        var endArrow;
-        var offSet;
-        var offSetValue;
-        var navigationGroup;
-        var d;
-        var group = (this.maps.renderer.createGroup({
-            id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
-        }));
-        for (var 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 (var i_1 = 0; i_1 < longitude['length']; i_1++) {
-                    var location_1 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i_1], latitude[i_1]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i_1], longitude[i_1], factor, layer, this.maps);
-                    point.push(location_1);
-                }
-            }
-            navigationGroup = (this.maps.renderer.createGroup({
-                id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
+        var group;
+        if (!isNullOrUndefined(this.maps)) {
+            var navigationEle = void 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var navigation = layer.navigationLineSettings;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var longitude = void 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var point = [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var latitude = void 0;
+            var visible = void 0;
+            var angle = void 0;
+            var width = void 0;
+            var color = void 0;
+            var dashArray = void 0;
+            var pathOption = void 0;
+            var direction = void 0;
+            var showArrow = void 0;
+            var arrowColor = void 0;
+            var arrowSize = void 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var arrowSettings = void 0;
+            var arrowPosition = void 0;
+            var startArrow = void 0;
+            var endArrow = void 0;
+            var offSet = void 0;
+            var offSetValue = void 0;
+            var navigationGroup = void 0;
+            var d = void 0;
+            group = (this.maps.renderer.createGroup({
+                id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
             }));
-            for (var j = 0; j < point['length'] - 1; j++) {
-                angle = (-1 > angle) ? -1 : angle;
-                angle = (1 < angle) ? 1 : angle;
-                var arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
-                var 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 (var 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 (var i_1 = 0; i_1 < longitude['length']; i_1++) {
+                        var location_1 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i_1], latitude[i_1]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i_1], longitude[i_1], factor, layer, this.maps);
+                        point.push(location_1);
+                    }
+                }
+                navigationGroup = (this.maps.renderer.createGroup({
+                    id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
+                }));
+                for (var j = 0; j < point['length'] - 1; j++) {
+                    angle = (-1 > angle) ? -1 : angle;
+                    angle = (1 < angle) ? 1 : angle;
+                    var arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
+                    var 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'];
@@ -10482,8 +10673,8 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
                     navigationGroup.appendChild(navigationEle);
                     group.appendChild(navigationGroup);
                 }
+                point = [];
             }
-            point = [];
         }
         return group;
     };
@@ -10993,15 +11184,16 @@ var Legend = /** @__PURE__ @class */ (function () {
                 var textId = map.element.id + '_Legend_Text_Index_' + collection['idIndex'];
                 var shapeLocation = new Point(collection['Shape']['x'], (collection['Shape']['y'] - pagingArrowPadding));
                 var textLocation = new Point(collection['Text']['x'], (collection['Text']['y'] - pagingArrowPadding));
-                var imageUrl = ((isNullOrUndefined(collection['ImageSrc'])) ? legend.shape : collection['ImageSrc']);
-                var renderOptions_1 = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
+                var renderOptions = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
                 var 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();
@@ -11011,11 +11203,11 @@ var Legend = /** @__PURE__ @class */ (function () {
                     var 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") {
-                    legendElement.appendChild(drawBalloon(map, renderOptions_1, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
+                if (legendShape === 'Balloon') {
+                    legendElement.appendChild(drawBalloon(map, renderOptions, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
                 }
                 else {
-                    legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions_1));
+                    legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions));
                 }
                 var legendRectSize = collection['Rect']['x'] + collection['Rect']['width'];
                 if (legendRectSize > this.legendBorderRect.width) {
@@ -11050,14 +11242,14 @@ var Legend = /** @__PURE__ @class */ (function () {
                         leftPageElement.appendChild(render.drawPath(leftPageOptions));
                         var 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, '', '');
                         var 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);
                         var 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));
                         var 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);
@@ -11078,7 +11270,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                             'dominant-baseline': ''
                         };
                         var pagingTextElement = render.createText(pageTextOptions, pagingText);
-                        pagingTextElement.setAttribute('style', 'user-select: none;');
+                        pagingTextElement.style.cssText = 'user-select: none;';
                         pagingGroup.appendChild(pagingTextElement);
                         this.legendGroup.appendChild(pagingGroup);
                     }
@@ -11212,11 +11404,14 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     var shapeItemCount = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
                                     var shapeOldFillColor = shapeElement.getAttribute('fill');
+                                    var shapeOldOpacity = shapeElement.getAttribute('fill-opacity');
                                     this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
+                                    this.legendHighlightCollection[length - 1]['shapeOldOpacity'] = shapeOldOpacity;
                                     var shapeOldColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount];
+                                    var 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 = [];
@@ -11281,6 +11476,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         var 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
     Legend.prototype.removeLegend = function (collection) {
@@ -11292,7 +11488,8 @@ var Legend = /** @__PURE__ @class */ (function () {
             for (var j = 0; j < dataCount; j++) {
                 var 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');
+                var shapeOpacity = !isNullOrUndefined(item['shapeOldOpacity']) ? item['shapeOldOpacity'] : item['shapeOpacity'];
+                this.setColor(item['MapShapeCollection']['Elements'][j], shapeFillColor, shapeOpacity, item['shapeOldBorderColor'], item['shapeOldBorderWidth'], 'highlight');
             }
         }
     };
@@ -11484,8 +11681,6 @@ var Legend = /** @__PURE__ @class */ (function () {
                     }
                     if (selectionEle && (selectionEle['IsSelected'] && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
                         || targetElement.getAttribute('class') === 'LineselectionMapStyle'))) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var element = this.maps.legendSelectionCollection[selectionEle['SelectionIndex']];
                         var multiSelection = 0;
                         if (module.enableMultiSelect) {
                             for (var i = 0; i < shapeElement['Elements'].length; i++) {
@@ -11744,7 +11939,8 @@ var Legend = /** @__PURE__ @class */ (function () {
         var legendTitle = legend.title.text;
         var 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
         };
         var textOptions;
         var spacing = 10;
@@ -11805,7 +12001,8 @@ var Legend = /** @__PURE__ @class */ (function () {
         var locationX = !isNullOrUndefined(legend.location.x) ? legend.location.x : 0;
         var 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 {
@@ -11888,7 +12085,8 @@ var Legend = /** @__PURE__ @class */ (function () {
                         _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);
                     }
@@ -12075,6 +12273,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                 if (outOfRangeValues.length === 0) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var range_1 = false;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
                         range_1 = false;
                         var rangeValue = data[colorValuePath];
@@ -12528,10 +12727,12 @@ var Legend = /** @__PURE__ @class */ (function () {
                                     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);
@@ -12595,7 +12796,7 @@ var Legend = /** @__PURE__ @class */ (function () {
                     && 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
@@ -12839,16 +13040,37 @@ var Highlight = /** @__PURE__ @class */ (function () {
             var marker$$1 = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
-        var 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
-        };
+        var borderColor = (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color);
+        var borderWidth = (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale);
+        var borderOpacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity :
+            this.highlightSettings.border.opacity;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var 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
+        };
+        var 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, function () { });
+        }
+        var itemEventArgs = {
+            opacity: eventArgs.opacity,
+            fill: eventArgs.fill,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
             name: itemHighlight,
             target: targetEle.id,
             cancel: false,
@@ -12856,13 +13078,18 @@ var Highlight = /** @__PURE__ @class */ (function () {
             data: data,
             maps: this.maps
         };
-        this.maps.trigger(itemHighlight, eventArgs, function () {
-            eventArgs.border.opacity = isNullOrUndefined(_this.highlightSettings.border.opacity) ? _this.highlightSettings.opacity : _this.highlightSettings.border.opacity;
-            _this.highlightMap(targetEle, eventArgs);
+        this.maps.trigger(itemHighlight, itemEventArgs, function () {
+            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);
         });
     };
     Highlight.prototype.highlightMap = function (targetEle, eventArgs) {
-        if (targetEle.getAttribute('class') === 'highlightMapStyle') {
+        if (targetEle.getAttribute('class') === 'highlightMapStyle' || eventArgs.cancel) {
             return;
         }
         else {
@@ -13041,7 +13268,8 @@ var Selection = /** @__PURE__ @class */ (function () {
         var isLineStringShape = targetElement.parentElement.id.indexOf('LineString') > -1;
         var selectionsettings = this.selectionsettings;
         var 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
@@ -13058,7 +13286,8 @@ var Selection = /** @__PURE__ @class */ (function () {
             maps: this.maps
         };
         this.maps.trigger('itemSelection', eventArgs, function (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') {
@@ -13211,7 +13440,6 @@ var Selection = /** @__PURE__ @class */ (function () {
     return Selection;
 }());
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Map Tooltip
  */
@@ -13244,7 +13472,6 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         }
         var option;
         var currentData = '';
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var targetId = target.id;
         var tooltipEle;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13368,9 +13595,9 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
             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) {
@@ -13393,6 +13620,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 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, function (args) {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
                     (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
@@ -13409,7 +13637,8 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             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],
@@ -13425,7 +13654,8 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             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],
@@ -13448,7 +13678,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                         && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
                         var templateStyle = tooltipTemplateElement.getAttribute('style');
                         templateStyle = templateStyle.replace('pointer-events: none;', 'position-events:all;');
-                        tooltipTemplateElement.setAttribute('style', templateStyle);
+                        tooltipTemplateElement.style.cssText = templateStyle;
                     }
                 }
                 else {
@@ -13741,6 +13971,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         }
         this.maps.zoomNotApplied = false;
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Zoom.prototype.calculateInitalZoomTranslatePoint = function (newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
         mapTotalWidth *= newZoomFactor;
         mapTotalHeight *= newZoomFactor;
@@ -14002,7 +14233,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                     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);
@@ -14040,7 +14271,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         }
                                         else {
                                             markerStyle = 'visibility:hidden';
-                                            currentEle.setAttribute('style', markerStyle);
+                                            currentEle.style.cssText = markerStyle;
                                         }
                                     }
                                 }
@@ -14080,7 +14311,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             var childElement = void 0;
                             for (var k = 0; k < currentEle.childElementCount; k++) {
                                 childElement = currentEle.childNodes[k];
-                                var bubbleTransform = childElement.getAttribute('transform');
                                 layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                                 var bubleIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
                                 var dataIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
@@ -14158,22 +14388,22 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var layerIndex = parseInt((element ? element : layerElement).id.split('_LayerIndex_')[1].split('_')[0], 10);
         var 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);
         }
         var mapsAreaRect = this.maps.mapAreaRect;
         var 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);
         }
@@ -14211,7 +14441,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
                         var location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), _this.maps.tileZoomLevel, _this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, _this.maps);
-                        var animate_1 = currentLayers.animationDuration !== 0 || isNullOrUndefined(_this.maps.zoomModule);
                         var transPoint = { x: x, y: y };
                         if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
                             markerTemplateCounts++;
@@ -14281,15 +14510,12 @@ var Zoom = /** @__PURE__ @class */ (function () {
         if (animate$$1 === void 0) { animate$$1 = false; }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var labelCollection = this.maps.dataLabelModule.dataLabelCollections;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var zoomelement = element.getBoundingClientRect();
         var text;
         var trimmedLable;
         var style = this.maps.layers[this.index].dataLabelSettings.textStyle;
         var zoomtext;
         var zoomtextSize;
         var zoomtrimLabel;
-        var labelPath = this.maps.layers[this.index].dataLabelSettings.labelPath;
         var layerIndex = parseFloat(element.id.split('_LayerIndex_')[1].split('_')[0]);
         var shapeIndex = parseFloat(element.id.split('_shapeIndex_')[1].split('_')[0]);
         var labelIndex;
@@ -14305,16 +14531,25 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 var labelX = label['location']['x'];
                 var labelY = label['location']['y'];
                 if (type === 'Template') {
-                    var 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);
-                    var templateOffset = element.getBoundingClientRect();
-                    var layerOffset = layerEle.getBoundingClientRect();
-                    var elementOffset = element.parentElement.getBoundingClientRect();
-                    var x_3 = ((labelX) + (layerOffset.left - elementOffset.left) - (templateOffset.width / 2));
-                    var y_2 = ((labelY) + (layerOffset.top - elementOffset.top) - (templateOffset.height / 2));
-                    element.style.left = x_3 + 'px';
-                    element.style.top = y_2 + 'px';
+                    var locationX = 0;
+                    var 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 {
+                        var 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);
+                        var layerOffset = layerEle.getBoundingClientRect();
+                        var 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);
@@ -14446,10 +14681,10 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         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';
                             }
                         }
                     }
@@ -14505,6 +14740,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
         }
     };
     /**
+     * @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
      */
     Zoom.prototype.panning = function (direction, xDifference, yDifference, mouseLocation) {
@@ -14586,7 +14826,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
-        this.maps.zoomNotApplied = false;
         this.isSingleClick = false;
     };
     Zoom.prototype.toAlignSublayer = function () {
@@ -14927,7 +15166,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
     Zoom.prototype.alignToolBar = function () {
         var map = this.maps;
         var padding = 10;
-        var element = createElement('div', { id: map.element.id + '_ToolBar', styles: 'position:absolute;z-index:2' });
+        var element = createElement('div', { id: map.element.id + '_ToolBar' });
+        element.style.cssText = 'position:absolute;z-index:2';
         var rectSVGObject = map.renderer.createSvg({
             id: map.element.id + '_Zooming_ToolBar', width: 10, height: 10
         });
@@ -15301,7 +15541,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
     return Zoom;
 }());
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * This module enables the print functionality in maps.
  *
@@ -15311,14 +15550,16 @@ var Print = /** @__PURE__ @class */ (function () {
     /**
      * 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
     function Print(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
      */
@@ -15338,6 +15579,7 @@ var Print = /** @__PURE__ @class */ (function () {
     /**
      * 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
@@ -15397,11 +15639,11 @@ var Print = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     Print.prototype.destroy = function () { };
     return Print;
 }());
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * This module enables the export to Image functionality in Maps control.
  *
@@ -15413,19 +15655,21 @@ var ImageExport = /** @__PURE__ @class */ (function () {
      *
      * @param {Maps} control - Specifies the instance of the map
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     function ImageExport(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
      */
     ImageExport.prototype.export = function (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
         var promise = new Promise(function (resolve, reject) {
             var imageCanvasElement = createElement('canvas', {
                 id: 'ej2-canvas',
@@ -15435,7 +15679,6 @@ var ImageExport = /** @__PURE__ @class */ (function () {
                 }
             });
             var isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
-            var toolbarEle = document.getElementById(maps.element.id + '_ToolBar');
             var svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             var svgDataElement;
             var tileSvg;
@@ -15569,11 +15812,11 @@ var ImageExport = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     ImageExport.prototype.destroy = function () { };
     return ImageExport;
 }());
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * This module enables the export to PDF functionality in Maps control.
  *
@@ -15583,18 +15826,19 @@ var PdfExport = /** @__PURE__ @class */ (function () {
     /**
      * 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
     function PdfExport() {
     }
     /**
      * 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
      */
     PdfExport.prototype.export = function (maps, type, fileName, allowDownload, orientation) {
@@ -15730,6 +15974,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     PdfExport.prototype.destroy = function () { };
     return PdfExport;
 }());