@syncfusion/ej2-maps 20.3.56 → 20.4.40

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

@@ -3,8 +3,6 @@ import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
 
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable max-len */
 /**
  * Helper functions for maps control
@@ -624,13 +622,14 @@ function convertElement(element, markerId, data, index, mapObj) {
     }
     let templateHtml = childElement.innerHTML;
     const properties = Object.keys(data);
+    const regExp = RegExp;
     for (let i = 0; i < properties.length; i++) {
         if (typeof data[properties[i]] === 'object') {
             templateHtml = convertStringToValue(templateHtml, '', data, mapObj);
             // eslint-disable-next-line @typescript-eslint/ban-types
         }
         else if (properties[i].toLowerCase() !== 'latitude' && properties[i].toLowerCase() !== 'longitude') {
-            templateHtml = templateHtml.replace(new RegExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
+            templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
         }
     }
     childElement.innerHTML = templateHtml;
@@ -667,6 +666,7 @@ function formatValue(value, maps) {
 function convertStringToValue(stringTemplate, format, data, maps) {
     let templateHtml = (stringTemplate === '') ? format : stringTemplate;
     const templateValue = (stringTemplate === '') ? templateHtml.split('${') : templateHtml.split('{{:');
+    const regExp = RegExp;
     for (let i = 0; i < templateValue.length; i++) {
         if ((templateValue[i].indexOf('}}') > -1 && templateValue[i].indexOf('.') > -1) ||
             (templateValue[i].indexOf('}') > -1 && templateValue[i].search('.') > -1)) {
@@ -676,7 +676,7 @@ function convertStringToValue(stringTemplate, format, data, maps) {
                     const templateSplitValue = (getValueFromObject(data, split[j])).toString();
                     templateHtml = (stringTemplate === '') ?
                         templateHtml.split('${' + split[j] + '}').join(formatValue(templateSplitValue, maps)) :
-                        templateHtml.replace(new RegExp('{{:' + split[j] + '}}', 'g'), templateSplitValue);
+                        templateHtml.replace(new regExp('{{:' + split[j] + '}}', 'g'), templateSplitValue);
                 }
             }
         }
@@ -698,11 +698,12 @@ function convertElementFromLabel(element, labelId, data, index, mapObj) {
     let templateHtml = labelEle.outerHTML;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const properties = Object.keys(data);
+    const regExp = RegExp;
     for (let i = 0; i < properties.length; i++) {
         // eslint-disable-next-line @typescript-eslint/ban-types
-        templateHtml = templateHtml.replace(new RegExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
+        templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
     }
-    let templateEle = createElement('div', {
+    const templateEle = createElement('div', {
         id: labelId,
         innerHTML: templateHtml
     });
@@ -809,7 +810,7 @@ function markerShapeChoose(eventArgs, data) {
         const shape = ((eventArgs.shapeValuePath.indexOf('.') > -1) ?
             (getValueFromObject(data, eventArgs.shapeValuePath).toString()) :
             data[eventArgs.shapeValuePath]);
-        eventArgs.shape = (shape.toString() !== "") ? shape : eventArgs.shape;
+        eventArgs.shape = (shape.toString() !== '') ? shape : eventArgs.shape;
         if (data[eventArgs.shapeValuePath] === 'Image') {
             eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
                 ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
@@ -818,7 +819,7 @@ function markerShapeChoose(eventArgs, data) {
     }
     else {
         const shapes = (!isNullOrUndefined(eventArgs.shapeValuePath)) ? ((eventArgs.shapeValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.shapeValuePath).toString() : eventArgs.shape) : eventArgs.shape;
-        eventArgs.shape = (shapes.toString() !== "") ? shapes : eventArgs.shape;
+        eventArgs.shape = (shapes.toString() !== '') ? shapes : eventArgs.shape;
         const shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
             ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
                 data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
@@ -897,8 +898,6 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                             container['top'] : (container['bottom'] - container['top'])));
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const translate = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
-                        const transPoint = (maps.isTileMap) ? { x: 0, y: 0 } : (maps.translatePoint.x !== 0) ?
-                            maps.translatePoint : translate['location'];
                         const dataIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_dataIndex_')[1].split('_')[0], 10);
                         const markerIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
                         const markerSetting = currentLayer.markerSettings[markerIndex];
@@ -1040,7 +1039,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             markerCluster.remove();
         }
         if (zoomCheck) {
-            let layerGroupElement = document.getElementById(maps.element.id + '_Layer_Collections');
+            const layerGroupElement = document.getElementById(maps.element.id + '_Layer_Collections');
             if (!isNullOrUndefined(layerGroupElement)) {
                 layerGroupElement.appendChild(layerElement);
             }
@@ -1547,6 +1546,7 @@ function drawStar(maps, options, size, location, element) {
  * @param {PathOption} options - Specifies the path options
  * @param {Size} size - Specifies the size
  * @param {MapLocation} location - Specifies the map location
+ * @param {string} type - Specifies the type.
  * @param {Element} element - Specifies the element
  * @returns {Element} - Returns the element
  * @private
@@ -2034,7 +2034,8 @@ function getTranslate(mapObject, layer, animate) {
                         mapObject.zoomTranslatePoint.y = y;
                     }
                     else {
-                        if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1 || mapObject.mapScaleValue <= 1.05) && !mapObject.zoomModule.isDragZoom) {
+                        if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1
+                            || mapObject.mapScaleValue <= 1.05) && !mapObject.zoomModule.isDragZoom) {
                             scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
                             scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
                             mapWidth *= scaleFactor;
@@ -2052,8 +2053,10 @@ function getTranslate(mapObject, layer, animate) {
             }
         }
         if (!isNullOrUndefined(mapObject.translatePoint)) {
-            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : x;
-            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : y;
+            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.x : x;
+            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.y : y;
         }
     }
     scaleFactor = (mapObject.enablePersistence) ? ((mapObject.mapScaleValue >= 1) ? mapObject.mapScaleValue : 1) : scaleFactor;
@@ -2104,9 +2107,11 @@ function getZoomTranslate(mapObject, layer, animate) {
     mapObject.mapScaleValue = mapObject.zoomSettings.zoomFactor !== 1 &&
         mapObject.zoomSettings.zoomFactor ===
             mapObject.mapScaleValue ? mapObject.zoomSettings.zoomFactor :
-        mapObject.zoomSettings.zoomFactor !== mapObject.mapScaleValue && !mapObject.centerPositionChanged ? mapObject.mapScaleValue : mapObject.zoomSettings.zoomFactor;
+        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.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)) {
@@ -2133,7 +2138,8 @@ function getZoomTranslate(mapObject, layer, animate) {
         const leftPosition = ((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) / factor;
         const point = checkZoomMethod ? calculateCenterFromPixel(mapObject, layer) :
             convertGeoToPoint(latitude, longitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-        if ((!isNullOrUndefined(mapObject.zoomTranslatePoint) || !isNullOrUndefined(mapObject.previousProjection)) && !mapObject.zoomNotApplied) {
+        if ((!isNullOrUndefined(mapObject.zoomTranslatePoint) || !isNullOrUndefined(mapObject.previousProjection)) &&
+            !mapObject.zoomNotApplied) {
             if (mapObject.previousProjection !== mapObject.projectionType) {
                 x = -point.x + leftPosition;
                 y = -point.y + topPosition;
@@ -2153,8 +2159,10 @@ function getZoomTranslate(mapObject, layer, animate) {
             y = -point.y + topPosition + mapObject.mapAreaRect.y / zoomFactor;
         }
         if (!isNullOrUndefined(mapObject.translatePoint)) {
-            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : y;
-            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : x;
+            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.y : y;
+            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.x : x;
         }
         scaleFactor = zoomFactorValue !== 0 ? zoomFactorValue : 1;
     }
@@ -2192,8 +2200,10 @@ function getZoomTranslate(mapObject, layer, animate) {
             }
         }
         if (!isNullOrUndefined(mapObject.translatePoint)) {
-            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.x : leftPosition;
-            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ? mapObject.translatePoint.y : topPosition;
+            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.x : leftPosition;
+            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
+                mapObject.translatePoint.y : topPosition;
         }
     }
     scaleFactor = (mapObject.enablePersistence) ? (mapObject.mapScaleValue === 0 ? 1 : mapObject.mapScaleValue) : scaleFactor;
@@ -2258,6 +2268,7 @@ function Internalize(maps, value) {
  * Function to compile the template function for maps.
  *
  * @param {string} template - Specifies the template
+ * @param {Maps} maps - Specifies the Maps instance.
  * @returns {Function} - Returns the function
  * @private
  */
@@ -2265,10 +2276,10 @@ function Internalize(maps, value) {
 function getTemplateFunction(template, maps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let templateFn = null;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     try {
         if (document.querySelectorAll(template).length) {
             templateFn = compile(document.querySelector(template).innerHTML.trim());
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
         else if (maps.isVue || maps.isVue3) {
             templateFn = compile(template);
@@ -2473,7 +2484,8 @@ shapeData, data) {
         maps: map
     };
     map.trigger('itemSelection', eventArgs, (observedArgs) => {
-        eventArgs.border.opacity = isNullOrUndefined(selectionSettings.border.opacity) ? selectionSettings.opacity : selectionSettings.border.opacity;
+        eventArgs.border.opacity = isNullOrUndefined(selectionSettings.border.opacity) ? selectionSettings.opacity :
+            selectionSettings.border.opacity;
         map.shapeSelectionItem.push(eventArgs.shapeData);
         if (!getElement('ShapeselectionMap')) {
             document.body.appendChild(createStyle('ShapeselectionMap', 'ShapeselectionMapStyle', eventArgs));
@@ -2572,7 +2584,7 @@ function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element, isTou
     let demo = str[0].length;
     for (let i = 1; i < str.length; i++) {
         if (demo < str[i].length) {
-            demo = str[i].length;
+            demo = (str[i]).length;
         }
     }
     if (!tooltip) {
@@ -2642,7 +2654,7 @@ function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element) {
 //     if (touches) {
 //         touchList = [];
 //         for (let i: number = 0, length: number = touches.length; i < length; i++) {
-//             touchList.push({ pageX: touches[i].clientX, pageY: touches[i].clientY, pointerId: null });
+//             touchList.push({ pageX: touches[i as number].clientX, pageY: touches[i as number].clientY, pointerId: null });
 //         }
 //     } else {
 //         touchList = touchList ? touchList : [];
@@ -2650,8 +2662,8 @@ function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element) {
 //             touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });
 //         } else {
 //             for (let i: number = 0, length: number = touchList.length; i < length; i++) {
-//                 if (touchList[i].pointerId === e.pointerId) {
-//                     touchList[i] = { pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId };
+//                 if (touchList[i as number].pointerId === e.pointerId) {
+//                     touchList[i as number] = { pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId };
 //                 } else {
 //                     touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });
 //                 }
@@ -3081,7 +3093,7 @@ function animate(element, delay, duration, process, end) {
             window.cancelAnimationFrame(clearAnimation);
             end.call(this, { element: element });
             if (element.id.indexOf('Marker') > -1) {
-                let markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
+                const markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
                 markerElement.style.cssText = markerStyle;
             }
         }
@@ -3781,7 +3793,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable max-len */
 /**
  * Maps base document
  */
@@ -4729,7 +4741,8 @@ class Marker {
                     nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
                     markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
                     markerCount += (eventArgs.cancel) ? 1 : 0;
-                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ? maps.markerNullCount + 1 : maps.markerNullCount;
+                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ?
+                        maps.markerNullCount + 1 : maps.markerNullCount;
                     const markerDataLength = markerData.length - maps.markerNullCount;
                     if (this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(this.markerSVGObject);
@@ -4787,126 +4800,134 @@ class Marker {
     }
     /**
      * To calculate center position and factor value dynamically
+     *
+     * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
+     * @returns {void}
      */
     calculateZoomCenterPositionAndFactor(layersCollection) {
-        if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
-            let minLong;
-            let maxLat;
-            let minLat;
-            let maxLong;
-            let zoomLevel;
-            let centerLat;
-            let centerLong;
-            const maxZoomFact = this.maps.zoomSettings.maxZoom;
-            const mapWidth = this.maps.mapAreaRect.width;
-            const mapHeight = this.maps.mapAreaRect.height;
-            this.maps.markerZoomedState = this.maps.markerZoomedState ? this.maps.markerZoomedState : isNullOrUndefined(this.maps.markerZoomFactor) ?
-                !this.maps.markerZoomedState : this.maps.markerZoomFactor > 1 ? this.maps.markerZoomedState : !this.maps.markerZoomedState;
-            this.maps.defaultState = this.maps.markerZoomedState ? !this.maps.markerZoomedState : this.maps.defaultState;
-            Array.prototype.forEach.call(layersCollection, (currentLayer, layerIndex) => {
-                const isMarker = currentLayer.markerSettings.length !== 0;
-                if (isMarker) {
-                    Array.prototype.forEach.call(currentLayer.markerSettings, (markerSetting, markerIndex) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const markerData = markerSetting.dataSource;
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        Array.prototype.forEach.call(markerData, (data, dataIndex) => {
-                            const latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
-                                !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                            const longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
-                                !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                            minLong = isNullOrUndefined(minLong) && dataIndex === 0 ?
-                                longitude : minLong;
-                            maxLat = isNullOrUndefined(maxLat) && dataIndex === 0 ?
-                                latitude : maxLat;
-                            minLat = isNullOrUndefined(minLat) && dataIndex === 0 ?
-                                latitude : minLat;
-                            maxLong = isNullOrUndefined(maxLong) && dataIndex === 0 ?
-                                longitude : maxLong;
-                            if (minLong > longitude) {
-                                minLong = longitude;
-                            }
-                            if (minLat > latitude) {
-                                minLat = latitude;
-                            }
-                            if (maxLong < longitude) {
-                                maxLong = longitude;
-                            }
-                            if (maxLat < latitude) {
-                                maxLat = latitude;
-                            }
+        if (!isNullOrUndefined(this.maps)) {
+            if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
+                let minLong;
+                let maxLat;
+                let minLat;
+                let maxLong;
+                let zoomLevel;
+                let centerLat;
+                let centerLong;
+                const maxZoomFact = this.maps.zoomSettings.maxZoom;
+                const mapWidth = this.maps.mapAreaRect.width;
+                const mapHeight = this.maps.mapAreaRect.height;
+                this.maps.markerZoomedState = this.maps.markerZoomedState ? this.maps.markerZoomedState :
+                    isNullOrUndefined(this.maps.markerZoomFactor) ? !this.maps.markerZoomedState :
+                        this.maps.markerZoomFactor > 1 ? this.maps.markerZoomedState : !this.maps.markerZoomedState;
+                this.maps.defaultState = this.maps.markerZoomedState ? !this.maps.markerZoomedState : this.maps.defaultState;
+                Array.prototype.forEach.call(layersCollection, (currentLayer) => {
+                    const isMarker = currentLayer.markerSettings.length !== 0;
+                    if (isMarker) {
+                        Array.prototype.forEach.call(currentLayer.markerSettings, (markerSetting) => {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            const markerData = markerSetting.dataSource;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            Array.prototype.forEach.call(markerData, (data, dataIndex) => {
+                                const latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
+                                    !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                                const longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
+                                    !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                                minLong = isNullOrUndefined(minLong) && dataIndex === 0 ?
+                                    longitude : minLong;
+                                maxLat = isNullOrUndefined(maxLat) && dataIndex === 0 ?
+                                    latitude : maxLat;
+                                minLat = isNullOrUndefined(minLat) && dataIndex === 0 ?
+                                    latitude : minLat;
+                                maxLong = isNullOrUndefined(maxLong) && dataIndex === 0 ?
+                                    longitude : maxLong;
+                                if (minLong > longitude) {
+                                    minLong = longitude;
+                                }
+                                if (minLat > latitude) {
+                                    minLat = latitude;
+                                }
+                                if (maxLong < longitude) {
+                                    maxLong = longitude;
+                                }
+                                if (maxLat < latitude) {
+                                    maxLat = latitude;
+                                }
+                            });
                         });
-                    });
-                }
-            });
-            if (!isNullOrUndefined(minLat) && !isNullOrUndefined(minLong) &&
-                !isNullOrUndefined(maxLong) && !isNullOrUndefined(maxLat)) {
-                // To find the center position
-                centerLat = (minLat + maxLat) / 2;
-                centerLong = (minLong + maxLong) / 2;
-                this.maps.markerCenterLatitude = centerLat;
-                this.maps.markerCenterLongitude = centerLong;
-                if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
-                    this.maps.markerZoomCenterPoint = {
-                        latitude: centerLat,
-                        longitude: centerLong
-                    };
-                }
-                let markerFactor;
-                if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
-                    zoomLevel = calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, this.maps);
-                    if (this.maps.isTileMap) {
-                        markerFactor = isNullOrUndefined(this.maps.markerZoomFactor) ?
-                            zoomLevel : isNullOrUndefined(this.maps.mapScaleValue) ?
-                            zoomLevel : this.maps.mapScaleValue > 1 && this.maps.markerZoomFactor !== 1 ?
-                            this.maps.mapScaleValue : zoomLevel;
+                    }
+                });
+                if (!isNullOrUndefined(minLat) && !isNullOrUndefined(minLong) &&
+                    !isNullOrUndefined(maxLong) && !isNullOrUndefined(maxLat)) {
+                    // To find the center position
+                    centerLat = (minLat + maxLat) / 2;
+                    centerLong = (minLong + maxLong) / 2;
+                    this.maps.markerCenterLatitude = centerLat;
+                    this.maps.markerCenterLongitude = centerLong;
+                    if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
+                        this.maps.markerZoomCenterPoint = {
+                            latitude: centerLat,
+                            longitude: centerLong
+                        };
+                    }
+                    let markerFactor;
+                    if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
+                        zoomLevel = calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, this.maps);
+                        if (this.maps.isTileMap) {
+                            markerFactor = isNullOrUndefined(this.maps.markerZoomFactor) ?
+                                zoomLevel : isNullOrUndefined(this.maps.mapScaleValue) ?
+                                zoomLevel : this.maps.mapScaleValue > 1 && this.maps.markerZoomFactor !== 1 ?
+                                this.maps.mapScaleValue : zoomLevel;
+                        }
+                        else {
+                            markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
+                                (Math.floor(this.maps.scale) !== 1 &&
+                                    this.maps.mapScaleValue !== zoomLevel)
+                                    &&
+                                        (isNullOrUndefined(this.maps.shouldZoomCurrentFactor))
+                                    ? this.maps.mapScaleValue : zoomLevel;
+                            if (((markerFactor === this.maps.mapScaleValue &&
+                                (this.maps.markerZoomFactor === 1 || this.maps.mapScaleValue === 1))
+                                && (!this.maps.enablePersistence))) {
+                                markerFactor = zoomLevel;
+                            }
+                        }
                     }
                     else {
+                        zoomLevel = this.calculateIndividualLayerMarkerZoomLevel(mapWidth, mapHeight, maxZoomFact);
                         markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
-                            (Math.floor(this.maps.scale) !== 1 &&
-                                this.maps.mapScaleValue !== zoomLevel)
-                                &&
-                                    (isNullOrUndefined(this.maps.shouldZoomCurrentFactor))
+                            (this.maps.mapScaleValue !== zoomLevel)
                                 ? this.maps.mapScaleValue : zoomLevel;
-                        if (((markerFactor === this.maps.mapScaleValue &&
-                            (this.maps.markerZoomFactor === 1 || this.maps.mapScaleValue === 1))
-                            && (!this.maps.enablePersistence))) {
-                            markerFactor = zoomLevel;
-                        }
                     }
+                    this.maps.markerZoomFactor = markerFactor;
                 }
-                else {
-                    zoomLevel = this.calculateIndividualLayerMarkerZoomLevel(mapWidth, mapHeight, maxZoomFact);
-                    markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
-                        (this.maps.mapScaleValue !== zoomLevel)
-                            ? this.maps.mapScaleValue : zoomLevel;
-                }
-                this.maps.markerZoomFactor = markerFactor;
             }
-        }
-        else {
-            this.maps.markerZoomedState = false;
-            if (this.maps.markerZoomFactor > 1) {
-                this.maps.markerCenterLatitude = null;
-                this.maps.markerCenterLongitude = null;
-                this.maps.markerZoomFactor = 1;
-                if (!this.maps.enablePersistence) {
-                    this.maps.mapScaleValue = 1;
+            else {
+                this.maps.markerZoomedState = false;
+                if (this.maps.markerZoomFactor > 1) {
+                    this.maps.markerCenterLatitude = null;
+                    this.maps.markerCenterLongitude = null;
+                    this.maps.markerZoomFactor = 1;
+                    if (!this.maps.enablePersistence) {
+                        this.maps.mapScaleValue = 1;
+                    }
                 }
-            }
-            if (this.maps.isTileMap && !this.maps.enablePersistence
-                && this.maps.mapScaleValue <= 1) {
-                this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? (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;
+                if (this.maps.isTileMap && !this.maps.enablePersistence
+                    && this.maps.mapScaleValue <= 1) {
+                    this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? (this.maps.isZoomByPosition ? this.maps.tileZoomLevel : 1)
+                        : this.maps.mapScaleValue;
+                    if (this.maps.mapScaleValue === 1 && this.maps.markerZoomFactor === 1) {
+                        this.maps.tileTranslatePoint.x = 0;
+                        this.maps.tileTranslatePoint.y = 0;
+                    }
                 }
             }
         }
     }
     /**
      * To check and trigger marker click event
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerClick(e) {
         const target = e.target.id;
@@ -4928,6 +4949,8 @@ class Marker {
     }
     /**
      * To check and trigger Cluster click event
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerClusterClick(e) {
         const target = e.target.id;
@@ -5018,6 +5041,9 @@ class Marker {
     }
     /**
      * To check and trigger marker move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerMove(e) {
         const targetId = e.target.id;
@@ -5036,6 +5062,9 @@ class Marker {
     }
     /**
      * To check and trigger cluster move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerClusterMouseMove(e) {
         const targetId = e.target.id;
@@ -5308,6 +5337,7 @@ class BingMap {
         }
     }
     /**
+     * @returns {void}
      * @private
      */
     destroy() {
@@ -5344,6 +5374,11 @@ class ColorMapping {
     }
     /**
      * To color by value and color mapping
+     *
+     * @param {ColorMappingSettingsModel[]} colorMapping - Specifies the color mapping instance.
+     * @param {number} colorValue - Specifies the color value
+     * @param {string} equalValue - Specifies the equal value.
+     * @returns {any} - Returns the color mapping values.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getColorByValue(colorMapping, colorValue, equalValue) {
@@ -5534,10 +5569,7 @@ class ColorMapping {
     }
 }
 
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable jsdoc/require-param */
 /* eslint-disable no-case-declarations */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * To calculate and render the shape layer
  */
@@ -5725,7 +5757,10 @@ class LayerPanel {
             panel.mapObject.previousZoomFactor = panel.mapObject.zoomSettings.zoomFactor;
         }
         if (panel.mapObject.navigationLineModule) {
-            panel.layerObject.appendChild(panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex));
+            const navigationLineElement = panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex);
+            if (!isNullOrUndefined(navigationLineElement)) {
+                panel.layerObject.appendChild(navigationLineElement);
+            }
         }
         if (panel.mapObject.markerModule) {
             panel.mapObject.markerModule.markerRender(this.mapObject, panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
@@ -5792,7 +5827,6 @@ class LayerPanel {
                             const imageUrl = resource['imageUrl'];
                             const subDomains = resource['imageUrlSubdomains'];
                             const maxZoom = resource['zoomMax'];
-                            const markerGroupElement = document.getElementById(proxy.mapObject.element.id + '_Markers_Group');
                             if (imageUrl !== null && imageUrl !== undefined && imageUrl !== bing.imageUrl) {
                                 bing.imageUrl = imageUrl;
                             }
@@ -5953,8 +5987,6 @@ class LayerPanel {
                 fill = Object.prototype.toString.call(getShapeColor$$1) === '[object Object]' && !isNullOrUndefined(getShapeColor$$1['fill'])
                     ? getShapeColor$$1['fill'] : fill;
                 if (this.currentLayer.shapeSettings.borderColorValuePath || this.currentLayer.shapeSettings.borderWidthValuePath) {
-                    const borderColorValue = this.currentLayer.shapeSettings.borderColorValuePath;
-                    const borderWidthValue = this.currentLayer.shapeSettings.borderWidthValuePath;
                     k = checkShapeDataFields(
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this.currentLayer.dataSource, currentShapeData['property'], this.currentLayer.shapeDataPath, this.currentLayer.shapePropertyPath, this.currentLayer);
@@ -6081,7 +6113,9 @@ class LayerPanel {
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             const pointData = currentShapeData['point'];
-                            const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (this.mapObject.isTileMap ? this.mapObject.scale : this.currentFactor);
+                            const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ?
+                                shapeSettings.circleRadius : shapeSettings.circleRadius / (this.mapObject.isTileMap ?
+                                this.mapObject.scale : this.currentFactor);
                             circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                             pathEle = this.mapObject.renderer.drawCircle(circleOptions);
                             break;
@@ -6091,7 +6125,7 @@ class LayerPanel {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 const pointData = multiPointData['point'];
                                 const circleRadius = (this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (this.mapObject.isTileMap ? this.mapObject.scale : this.currentFactor);
-                                circleOptions = new CircleOption((shapeID + "_multiLine_" + index), eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
+                                circleOptions = new CircleOption((shapeID + '_multiLine_' + index), eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                                 pathEle = this.mapObject.renderer.drawCircle(circleOptions);
                                 this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
                             });
@@ -6120,15 +6154,16 @@ class LayerPanel {
     /**
      * layer features as bubble, marker, datalabel, navigation line.
      *
-     * @param {groupElement} Element - Specifies the element to append the group
-     * @param {pathEle} Element - Specifies the svg element
-     * @param {drawingType} string - Specifies the data type
-     * @param {currentShapeData} any - Specifies the layer of shapedata.
-     * @param {index} number - Specifies the tab index.
+     * @param {Element} groupElement - Specifies the element to append the group.
+     * @param {Element} pathEle - Specifies the svg element.
+     * @param {string} drawingType - Specifies the data type.
+     * @param {any} currentShapeData - Specifies the layer of shapedata.
+     * @param {number} index - Specifies the tab index.
      * @returns {void}
      */
+    pathAttributeCalculate(groupElement, pathEle, drawingType, 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, index) {
+    currentShapeData, index) {
         const property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
             this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
         let properties;
@@ -6155,7 +6190,7 @@ class LayerPanel {
                     pathEle.setAttribute('stroke', styleProperty.border.color);
                     pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
                     pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
-                    pathEle.setAttribute('stroke-width', (styleProperty.border.width).toString());
+                    pathEle.setAttribute('stroke-width', (isNullOrUndefined(styleProperty.border.width) ? 0 : styleProperty.border.width).toString());
                 }
             }
         }
@@ -6216,8 +6251,8 @@ class LayerPanel {
             this.layerObject.appendChild(element);
         });
         if (this.mapObject.markerModule) {
-            this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
-                : this.currentFactor), null);
+            this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor) :
+                this.currentFactor), null);
         }
         this.translateLayerElements(this.layerObject, layerIndex);
         this.layerGroup.appendChild(this.layerObject);
@@ -6227,11 +6262,11 @@ class LayerPanel {
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {number} layerIndex - Specifies the layer index
-     * @param {object[]} shape - Specifies the shape
+     * @param {any[]} shape - Specifies the shape
      * @param {Element} group - Specifies the group
      * @param {number} shapeIndex - Specifies the shape index
      * @param {HTMLElement} labelTemplateEle - Specifies the label template element
-     * @param {object[]} intersect - Specifies the intersect
+     * @param {any[]} intersect - Specifies the intersect
      * @returns {void}
      */
     renderLabel(layer, layerIndex, 
@@ -6329,10 +6364,12 @@ class LayerPanel {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const multiPolygonDatas = [];
                 for (let i = 0; i < coordinates.length; i++) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    newData = this.calculatePolygonBox(coordinates[i][0], data, properties);
-                    if (newData.length > 0) {
-                        multiPolygonDatas.push(newData);
+                    for (let j = 0; j < coordinates[i].length; j++) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        newData = this.calculatePolygonBox(coordinates[i][j], data, properties);
+                        if (newData.length > 0) {
+                            multiPolygonDatas.push(newData);
+                        }
                     }
                 }
                 multiPolygonDatas['property'] = properties;
@@ -6341,15 +6378,15 @@ class LayerPanel {
                 this.currentLayer.layerData.push(multiPolygonDatas);
                 break;
             case 'linestring':
-                const extraSpace = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                const lineExtraSpace = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                     (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                         parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                coordinates.map((points, index) => {
+                coordinates.map((points) => {
                     latitude = points[1];
                     longitude = points[0];
                     const point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
-                    this.calculateBox(point, extraSpace);
+                    this.calculateBox(point, lineExtraSpace);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -6362,10 +6399,12 @@ class LayerPanel {
                 const extraSpaces = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                     (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                         parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const multiLineData = [];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map((multiPoints) => {
                     newData = [];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     multiPoints.map((points) => {
                         latitude = points[1];
                         longitude = points[0];
@@ -6394,7 +6433,7 @@ class LayerPanel {
                     point: point, type: type, lat: latitude, lng: longitude, property: properties
                 });
                 break;
-            case 'multipoint': {
+            case 'multipoint':
                 const extraSpace = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                     (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                         parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
@@ -6414,7 +6453,6 @@ class LayerPanel {
                 newData['type'] = type;
                 this.currentLayer.layerData.push(newData);
                 break;
-            }
             case 'path':
                 this.currentLayer.layerData.push({
                     point: data['d'], type: type, property: properties
@@ -6424,7 +6462,8 @@ class LayerPanel {
     }
     calculateBox(point, extraSpace) {
         if (isNullOrUndefined(this.rectBounds)) {
-            this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace, y: point.y + extraSpace } };
+            this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace,
+                    y: point.y + extraSpace } };
         }
         else {
             this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x - extraSpace);
@@ -6547,6 +6586,7 @@ class LayerPanel {
                     case 'multilinestring':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map((multiPoint, index) => {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             multiPoint.map((point, index) => {
                                 this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
                             });
@@ -6562,6 +6602,7 @@ class LayerPanel {
                         this.calculateRectBox(coordinates, 'point');
                         break;
                     case 'multipoint':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map((point, index) => {
                             this.calculateRectBox(point, 'multipoint', index === 0 ? true : false);
                         });
@@ -6576,7 +6617,7 @@ class LayerPanel {
         const newData = [];
         const bounds = this.mapObject.baseMapBounds;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        coordinates.map((currentPoint, index) => {
+        coordinates.map((currentPoint) => {
             const latitude = currentPoint[1];
             const longitude = currentPoint[0];
             if ((longitude >= bounds.longitude.min && longitude <= bounds.longitude.max)
@@ -6669,8 +6710,8 @@ class LayerPanel {
                             tileI = (tileI % ycount) + ycount;
                         }
                         const tile = new Tile(tileI % ycount, j);
-                        tile.left = x;
-                        tile.top = y;
+                        tile.left = Math.round(x);
+                        tile.top = Math.round(y);
                         if (baseLayer.layerType === 'Bing' || (bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
                             const key = baseLayer.key;
                             tile.src = bing.getBingMap(tile, key, baseLayer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
@@ -6761,18 +6802,45 @@ class LayerPanel {
                         animateElement = element ? element.children[0] : null;
                     }
                 }
-                let id = 0;
-                for (const tile of this.tiles) {
-                    const imgElement = createElement('img');
-                    imgElement.setAttribute('height', '256px');
-                    imgElement.setAttribute('width', '256px');
-                    imgElement.setAttribute('src', tile.src);
-                    imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
+                for (let id = 0; id < this.tiles.length; id++) {
+                    const tile = this.tiles[id];
+                    let imgElement = null;
                     const mapId = this.mapObject.element.id;
-                    imgElement.onload = () => {
-                        if (document.getElementById(mapId + '_tile_' + id) && type === 'Pan') {
-                            removeElement(mapId + '_tile_' + id);
+                    if (type === 'Pan') {
+                        let child = document.getElementById(mapId + '_tile_' + id);
+                        let isNewTile = false;
+                        if (isNullOrUndefined(child)) {
+                            isNewTile = true;
+                            child = createElement('div', { id: mapId + '_tile_' + id });
+                            imgElement = createElement('img');
+                        }
+                        else {
+                            child.style.removeProperty('display');
+                            imgElement = child.children[0];
+                        }
+                        if (!isNewTile && imgElement && imgElement.src !== tile.src) {
+                            imgElement.src = tile.src;
+                        }
+                        child.style.position = 'absolute';
+                        child.style.left = tile.left + 'px';
+                        child.style.top = tile.top + 'px';
+                        child.style.height = tile.height + 'px';
+                        child.style.width = tile.width + 'px';
+                        if (isNewTile) {
+                            imgElement.setAttribute('height', '256px');
+                            imgElement.setAttribute('width', '256px');
+                            imgElement.setAttribute('src', tile.src);
+                            imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
+                            child.appendChild(imgElement);
+                            animateElement.appendChild(child);
                         }
+                    }
+                    else {
+                        imgElement = createElement('img');
+                        imgElement.setAttribute('height', '256px');
+                        imgElement.setAttribute('width', '256px');
+                        imgElement.setAttribute('src', tile.src);
+                        imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
                         const child = createElement('div', { id: mapId + '_tile_' + id });
                         child.style.position = 'absolute';
                         child.style.left = tile.left + 'px';
@@ -6783,11 +6851,27 @@ class LayerPanel {
                         if (animateElement) {
                             animateElement.appendChild(child);
                         }
-                        id++;
-                        if (id === this.tiles.length && document.getElementById(this.mapObject.element.id + '_animated_tiles_old')) {
-                            removeElement(this.mapObject.element.id + '_animated_tiles_old');
+                    }
+                    if (id === (this.tiles.length - 1) && document.getElementById(this.mapObject.element.id + '_animated_tiles_old')) {
+                        removeElement(this.mapObject.element.id + '_animated_tiles_old');
+                    }
+                }
+                if (!isNullOrUndefined(this.mapObject.currentTiles)) {
+                    for (let l = this.tiles.length; l < animateElement.childElementCount; l++) {
+                        let isExistingElement = false;
+                        for (let a = 0; a < this.mapObject.currentTiles.childElementCount; a++) {
+                            if (!isExistingElement &&
+                                this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
+                                isExistingElement = true;
+                            }
                         }
-                    };
+                        if (isExistingElement) {
+                            animateElement.children[l].style.display = 'none';
+                        }
+                        else {
+                            animateElement.removeChild(animateElement.children[l]);
+                        }
+                    }
                 }
             }, timeOut);
         }
@@ -6956,8 +7040,6 @@ class LayerPanel {
     }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable jsdoc/require-param */
 /**
  * Represents the annotation elements for map.
  */
@@ -7081,11 +7163,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable radix */
-/* eslint-disable max-len */
-/* eslint-disable valid-jsdoc */
 /**
  * Maps Component file
  */
@@ -7262,18 +7339,20 @@ let Maps = class Maps extends Component {
         this.setCulture();
     }
     renderElements() {
-        this.trigger(load, { maps: this });
-        this.createSVG();
-        this.findBaseAndSubLayers();
-        this.createSecondaryElement();
-        this.addTabIndex();
-        this.themeStyle = getThemeStyle(this.theme);
-        this.renderBorder();
-        this.renderTitle(this.titleSettings, 'title', null, null);
-        this.renderArea();
-        this.processRequestJsonData();
-        this.renderComplete();
-        this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
+        if (!this.isDestroyed) {
+            this.trigger(load, { maps: this });
+            this.createSVG();
+            this.findBaseAndSubLayers();
+            this.createSecondaryElement();
+            this.addTabIndex();
+            this.themeStyle = getThemeStyle(this.theme);
+            this.renderBorder();
+            this.renderTitle(this.titleSettings, 'title', null, null);
+            this.renderArea();
+            this.processRequestJsonData();
+            this.renderComplete();
+            this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
+        }
     }
     /**
      * To Initialize the control rendering.
@@ -7322,7 +7401,8 @@ let Maps = class Maps extends Component {
                     if (layer.markerSettings[i].dataSource instanceof DataManager) {
                         this.serverProcess['request']++;
                         dataModule = layer.markerSettings[i].dataSource;
-                        queryModule = layer.markerSettings[i].query instanceof Query ? layer.markerSettings[i].query : new Query();
+                        queryModule = layer.markerSettings[i].query instanceof Query ?
+                            layer.markerSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7338,7 +7418,8 @@ let Maps = class Maps extends Component {
                     if (layer.bubbleSettings[i].dataSource instanceof DataManager) {
                         this.serverProcess['request']++;
                         dataModule = layer.bubbleSettings[i].dataSource;
-                        queryModule = layer.bubbleSettings[i].query instanceof Query ? layer.bubbleSettings[i].query : new Query();
+                        queryModule = layer.bubbleSettings[i].query instanceof Query ?
+                            layer.bubbleSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7423,7 +7504,7 @@ let Maps = class Maps extends Component {
         const position = this.getExtraPosition();
         for (let i = 0; i < this.layers.length; i++) {
             if (position.x !== 0 || position.y !== 0) {
-                let markerTemplate$$1 = document.getElementById(this.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                const markerTemplate$$1 = document.getElementById(this.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
                 if (!isNullOrUndefined(markerTemplate$$1)) {
                     markerTemplate$$1.style.top = this.mapAreaRect.y + position.y + 'px';
                     markerTemplate$$1.style.left = this.mapAreaRect.x + position.x + 'px';
@@ -7444,6 +7525,7 @@ let Maps = class Maps extends Component {
             }
             if (!this.isResize) {
                 for (let k = 0; k < this.layers[i].markerSettings.length; k++) {
+                    // eslint-disable-next-line max-len
                     if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
                         && this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
                         const markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
@@ -7629,8 +7711,8 @@ let Maps = class Maps extends Component {
             this.zoomModule.layerCollectionEle = getElementByID(this.element.id + '_Layer_Collections');
         }
         if (this.isTileMap && getElementByID(this.element.id + '_Tile_SVG') && getElementByID(this.element.id + '_tile_parent')) {
-            let tileElement = getElementByID(this.element.id + '_tile_parent');
-            let tileSvgElement = getElementByID(this.element.id + '_Tile_SVG');
+            const tileElement = getElementByID(this.element.id + '_tile_parent');
+            const tileSvgElement = getElementByID(this.element.id + '_Tile_SVG');
             const tileSvgParentElement = getElementByID(this.element.id + '_Tile_SVG_Parent');
             const tileRect = tileElement.getBoundingClientRect();
             const tileSvgRect = tileSvgElement.getBoundingClientRect();
@@ -7639,8 +7721,10 @@ let Maps = class Maps extends Component {
             tileSvgParentElement.style.left = left + 'px';
             tileSvgParentElement.style.top = top + 'px';
             if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
-                tileElement.style.width = tileSvgElement.style.width = this.legendModule.legendTotalRect.width.toString();
-                tileElement.style.height = tileSvgElement.style.height = this.legendModule.legendTotalRect.height.toString();
+                tileElement.style.width = tileSvgElement.style.width =
+                    this.legendModule.legendTotalRect.width.toString();
+                tileElement.style.height = tileSvgElement.style.height =
+                    this.legendModule.legendTotalRect.height.toString();
                 tileSvgParentElement.style.width = this.legendModule.legendTotalRect.width + 'px';
                 tileSvgParentElement.style.height = this.legendModule.legendTotalRect.height + 'px';
             }
@@ -7661,7 +7745,7 @@ let Maps = class Maps extends Component {
             if (!isNullOrUndefined(elements) && elements.childElementCount > 0) {
                 for (let i = 0; i < elements.childNodes.length; i++) {
                     const childElement = elements.childNodes[i];
-                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') == -1) {
+                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') === -1) {
                         const layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                         for (let j = 0; j < childElement.childNodes.length; j++) {
                             const childNode = childElement.childNodes[j];
@@ -7791,7 +7875,7 @@ let Maps = class Maps extends Component {
                 break;
             }
         }
-        subLayers.map((subLayer, subLayerIndex) => {
+        subLayers.map((subLayer) => {
             if (subLayer.visible) {
                 this.layersCollection.push(subLayer);
             }
@@ -7951,6 +8035,9 @@ let Maps = class Maps extends Component {
     }
     keyUpHandler(event) {
         const id = event.target['id'];
+        if (this.isTileMap) {
+            this.removeTileMap();
+        }
         if (event.code === 'Tab' && id.indexOf('_LayerIndex_') > -1 && id.indexOf('shapeIndex') > -1) {
             this.keyboardHighlightSelection(id, event.type);
         }
@@ -7984,6 +8071,13 @@ let Maps = class Maps extends Component {
     }
     keyDownHandler(event) {
         const zoom = this.zoomModule;
+        if ((event.code === 'ArrowUp' || event.code === 'ArrowDown' || event.code === 'ArrowLeft'
+            || event.code === 'ArrowRight') && zoom) {
+            const animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
+            if (this.isTileMap && !isNullOrUndefined(animatedTiles)) {
+                this.currentTiles = animatedTiles.cloneNode(true);
+            }
+        }
         if ((event.key === '+' || event.code === 'Equal') && zoom) {
             zoom.performZoomingByToolBar('zoomin');
         }
@@ -8058,6 +8152,7 @@ let Maps = class Maps extends Component {
      * This method is used to perform the operations when a click operation is performed on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
+     * @returns {void}
      */
     mapsOnClick(e) {
         const targetEle = e.target;
@@ -8122,8 +8217,9 @@ let Maps = class Maps extends Component {
     getClickLocation(targetId, pageX, pageY, targetElement, x, y) {
         let layerIndex = 0;
         let latLongValue;
-        if (targetId.indexOf('_LayerIndex_') !== -1 && !this.isTileMap && (parseInt(this.mouseDownEvent['x']) === parseInt(this.mouseClickEvent['x']))
-            && (parseInt(this.mouseDownEvent['y']) === parseInt(this.mouseClickEvent['y']))) {
+        if (targetId.indexOf('_LayerIndex_') !== -1 && !this.isTileMap &&
+            (parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
+            (parseInt(this.mouseDownEvent['y'], 10) === parseInt(this.mouseClickEvent['y'], 10))) {
             layerIndex = parseFloat(targetId.split('_LayerIndex_')[1].split('_')[0]);
             if (this.layers[layerIndex].geometryType === 'Normal') {
                 if (targetId.indexOf('_shapeIndex_') > -1) {
@@ -8160,12 +8256,21 @@ let Maps = class Maps extends Component {
                 latLongValue = this.getGeoLocation(layerIndex, x, y);
             }
         }
-        else if (this.isTileMap && (parseInt(this.mouseDownEvent['x']) === parseInt(this.mouseClickEvent['x']))
-            && (parseInt(this.mouseDownEvent['y']) === parseInt(this.mouseClickEvent['y']))) {
+        else if (this.isTileMap && (parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
+            (parseInt(this.mouseDownEvent['y'], 10) === parseInt(this.mouseClickEvent['y'], 10))) {
             latLongValue = this.getTileGeoLocation(x, y);
         }
         return latLongValue;
     }
+    removeTileMap() {
+        const animateElement = document.getElementById(this.element.id + '_animated_tiles');
+        if (!isNullOrUndefined(this.currentTiles) && animateElement.childElementCount < this.currentTiles.childElementCount) {
+            for (let l = animateElement.childElementCount - 1; l >= this.currentTiles.childElementCount; l--) {
+                animateElement.removeChild(animateElement.children[l]);
+            }
+        }
+        this.currentTiles = null;
+    }
     /**
      * This method is used to perform operations when mouse click on maps.
      *
@@ -8197,6 +8302,9 @@ let Maps = class Maps extends Component {
             pageY = e.pageY;
             target = e.target;
         }
+        if (this.isTileMap) {
+            this.removeTileMap();
+        }
         if (this.isTouch) {
             if (targetEle.id.indexOf('_ToolBar') === -1) {
                 const latLongValue = this.getClickLocation(targetId, pageX, pageY, targetEle, pageX, pageY);
@@ -8229,6 +8337,10 @@ let Maps = class Maps extends Component {
         }
         const rect = this.element.getBoundingClientRect();
         const element = e.target;
+        const animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
+        if (this.isTileMap && !isNullOrUndefined(animatedTiles)) {
+            this.currentTiles = animatedTiles.cloneNode(true);
+        }
         if (element.id.indexOf('_ToolBar') === -1) {
             const markerModule = this.markerModule;
             if (element.id.indexOf('shapeIndex') > -1 || element.id.indexOf('Tile') > -1) {
@@ -8261,6 +8373,7 @@ let Maps = class Maps extends Component {
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
+     * @returns {void}
      */
     mapsOnDoubleClick(e) {
         this.notify('dblclick', e);
@@ -8284,8 +8397,10 @@ let Maps = class Maps extends Component {
                 latitude = latLongValue['latitude'];
                 longitude = latLongValue['longitude'];
             }
-            const doubleClickArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
-                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
+            const doubleClickArgs = {
+                cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
+                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null
+            };
             this.trigger('doubleClick', doubleClickArgs);
         }
     }
@@ -8376,28 +8491,30 @@ let Maps = class Maps extends Component {
      * @param e - Specifies the arguments of window resize event.
      */
     mapsOnResize(e) {
-        this.isResize = this.isReset = true;
-        const args = {
-            cancel: false,
-            name: resize,
-            previousSize: this.availableSize,
-            currentSize: calculateSize(this),
-            maps: this
-        };
-        this.trigger(resize, args);
-        if (!args.cancel) {
-            if (this.resizeTo) {
-                clearTimeout(this.resizeTo);
-            }
-            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
-                this.resizeTo = setTimeout(() => {
-                    this.unWireEVents();
-                    this.createSVG();
-                    this.refreshing = true;
-                    this.wireEVents();
-                    this.render();
-                    this.refreshing = false;
-                }, 500);
+        if (!this.isDestroyed) {
+            this.isResize = this.isReset = true;
+            const args = {
+                cancel: false,
+                name: resize,
+                previousSize: this.availableSize,
+                currentSize: calculateSize(this),
+                maps: this
+            };
+            this.trigger(resize, args);
+            if (!args.cancel) {
+                if (this.resizeTo) {
+                    clearTimeout(this.resizeTo);
+                }
+                if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
+                    this.resizeTo = setTimeout(() => {
+                        this.unWireEVents();
+                        this.createSVG();
+                        this.refreshing = true;
+                        this.wireEVents();
+                        this.render();
+                        this.refreshing = false;
+                    }, 500);
+                }
             }
         }
         return false;
@@ -8412,69 +8529,79 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     zoomByPosition(centerPosition, zoomFactor) {
-        this.zoomNotApplied = false;
-        let isRefresh = this.zoomSettings.zoomFactor == zoomFactor;
-        if (!this.isTileMap && this.zoomModule) {
-            if (!isNullOrUndefined(centerPosition)) {
-                this.zoomSettings.zoomFactor = zoomFactor;
-                isRefresh = this.centerPosition.latitude === centerPosition.latitude && this.centerPosition.longitude === centerPosition.longitude ? true : isRefresh;
+        if (!this.isDestroyed) {
+            this.zoomNotApplied = false;
+            let isRefresh = this.zoomSettings.zoomFactor === zoomFactor;
+            if (!this.isTileMap && this.zoomModule) {
+                if (!isNullOrUndefined(centerPosition)) {
+                    this.zoomSettings.zoomFactor = zoomFactor;
+                    isRefresh = this.centerPosition.latitude === centerPosition.latitude &&
+                        this.centerPosition.longitude === centerPosition.longitude ? true : isRefresh;
+                    this.centerPosition = centerPosition;
+                    this.isZoomByPosition = true;
+                    this.mapScaleValue = null;
+                }
+                else {
+                    this.zoomSettings.zoomFactor = zoomFactor;
+                    this.isZoomByPosition = true;
+                    this.mapScaleValue = null;
+                }
+            }
+            else 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;
-                this.mapScaleValue = null;
             }
-            else {
-                this.zoomSettings.zoomFactor = zoomFactor;
-                this.isZoomByPosition = true;
-                this.mapScaleValue = null;
+            if (isRefresh) {
+                this.refresh();
             }
         }
-        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();
-        }
     }
     /**
      * This method is used to perform panning by specifying the direction.
      *
      * @param {PanDirection} direction - Specifies the direction in which the panning is performed.
      * @param {PointerEvent | TouchEvent} mouseLocation - Specifies the location of the mouse pointer in maps.
+     * @returns {void}
      */
     panByDirection(direction, mouseLocation) {
-        let xDiff = 0;
-        let yDiff = 0;
-        switch (direction) {
-            case 'Left':
-                xDiff = -(this.mapAreaRect.width / 7);
-                break;
-            case 'Right':
-                xDiff = (this.mapAreaRect.width / 7);
-                break;
-            case 'Top':
-                yDiff = -(this.mapAreaRect.height / 7);
-                break;
-            case 'Bottom':
-                yDiff = (this.mapAreaRect.height / 7);
-                break;
-        }
-        if (this.zoomModule) {
-            this.zoomModule.panning(direction, xDiff, yDiff, mouseLocation);
+        if (!this.isDestroyed) {
+            let xDiff = 0;
+            let yDiff = 0;
+            switch (direction) {
+                case 'Left':
+                    xDiff = -(this.mapAreaRect.width / 7);
+                    break;
+                case 'Right':
+                    xDiff = (this.mapAreaRect.width / 7);
+                    break;
+                case 'Top':
+                    yDiff = -(this.mapAreaRect.height / 7);
+                    break;
+                case 'Bottom':
+                    yDiff = (this.mapAreaRect.height / 7);
+                    break;
+            }
+            if (this.zoomModule) {
+                this.zoomModule.panning(direction, xDiff, yDiff, mouseLocation);
+            }
         }
     }
     /**
      * This method is used to add the layers dynamically to the maps.
      *
      * @param {Object} layer - Specifies the layer for the maps.
+     * @returns {void}
      */
     addLayer(layer) {
-        let mapsLayer = this.layers;
-        mapsLayer.push(layer);
-        this.isAddLayer = true;
-        this.layers = mapsLayer;
+        if (!this.isDestroyed) {
+            const mapsLayer = this.layers;
+            mapsLayer.push(layer);
+            this.isAddLayer = true;
+            this.layers = mapsLayer;
+        }
     }
     /**
      * This method is used to remove a layer from map.
@@ -8483,9 +8610,11 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     removeLayer(index) {
-        let mapsLayer = this.layers;
-        mapsLayer.splice(index, 1);
-        this.layers = mapsLayer;
+        if (!this.isDestroyed) {
+            const mapsLayer = this.layers;
+            mapsLayer.splice(index, 1);
+            this.layers = mapsLayer;
+        }
     }
     /**
      * This method is used to add markers dynamically in the maps.
@@ -8497,14 +8626,16 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     addMarker(layerIndex, markerCollection) {
-        const layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
-        if (markerCollection.length > 0 && layerEle) {
-            for (const newMarker of markerCollection) {
-                this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+        if (!this.isDestroyed) {
+            const layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
+            if (markerCollection.length > 0 && layerEle) {
+                for (const newMarker of markerCollection) {
+                    this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+                }
+                const markerModule = new Marker(this);
+                markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+                this.arrangeTemplate();
             }
-            const markerModule = new Marker(this);
-            markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
-            this.arrangeTemplate();
         }
     }
     /**
@@ -8517,93 +8648,96 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     shapeSelection(layerIndex, propertyName, name, enable) {
-        let targetEle;
-        let subLayerIndex;
-        const popertyNameArray = Array.isArray(propertyName) ? propertyName : Array(propertyName);
-        if (isNullOrUndefined(enable)) {
-            enable = true;
-        }
-        const selectionsettings = this.layers[layerIndex].selectionSettings;
-        if (!selectionsettings.enableMultiSelect && this.legendSelection && enable) {
-            this.removeShapeSelection();
-        }
-        if (this.layers[layerIndex].type === 'SubLayer') {
-            for (let i = 0; i < this.layersCollection.length; i++) {
-                if ((this.layersCollection[i].shapeData === this.layers[layerIndex].shapeData)) {
-                    subLayerIndex = i;
-                    break;
+        if (!this.isDestroyed) {
+            let targetEle;
+            let subLayerIndex;
+            const popertyNameArray = Array.isArray(propertyName) ? propertyName : Array(propertyName);
+            if (isNullOrUndefined(enable)) {
+                enable = true;
+            }
+            const selectionsettings = this.layers[layerIndex].selectionSettings;
+            if (!selectionsettings.enableMultiSelect && this.legendSelection && enable) {
+                this.removeShapeSelection();
+            }
+            if (this.layers[layerIndex].type === 'SubLayer') {
+                for (let i = 0; i < this.layersCollection.length; i++) {
+                    if ((this.layersCollection[i].shapeData === this.layers[layerIndex].shapeData)) {
+                        subLayerIndex = i;
+                        break;
+                    }
                 }
             }
-        }
-        if (selectionsettings.enable) {
-            let targetId;
-            let dataIndex;
-            let shapeIndex;
-            let indexValue;
-            let shapeDataValue;
-            let data;
-            const shapeData = this.layers[layerIndex].shapeData['features'];
-            for (let i = 0; i < shapeData.length; i++) {
-                for (let j = 0; j < popertyNameArray.length; j++) {
-                    const propertyName = !isNullOrUndefined(shapeData[i]['properties'][popertyNameArray[j]])
-                        && isNaN(shapeData[i]['properties'][popertyNameArray[j]]) ?
-                        shapeData[i]['properties'][popertyNameArray[j]].toLowerCase() : shapeData[i]['properties'][popertyNameArray[j]];
-                    const shapeName = !isNullOrUndefined(name) && typeof name === 'string' ? name.toLowerCase() : name;
-                    let k;
-                    if (propertyName === shapeName) {
-                        if (!isNullOrUndefined(this.layers[layerIndex].shapeSettings.colorValuePath)) {
-                            k = checkShapeDataFields(this.layers[layerIndex].dataSource, shapeData[i]['properties'], this.layers[layerIndex].shapeDataPath, this.layers[layerIndex].shapePropertyPath, this.layers[layerIndex]);
-                        }
-                        const baseLayer = this.layers[layerIndex];
-                        if (this.baseLayerIndex >= 0 && baseLayer.isBaseLayer) {
-                            indexValue = 0;
-                        }
-                        else if (this.layers[layerIndex].type === 'SubLayer') {
-                            indexValue = subLayerIndex;
-                        }
-                        targetId = this.element.id + '_' + 'LayerIndex_' + indexValue + '_shapeIndex_' + i + '_dataIndex_' + k;
-                        targetEle = getElement(targetId);
-                        if (isNullOrUndefined(k) && isNullOrUndefined(targetEle)) {
-                            targetId = this.element.id + '_' + 'LayerIndex_' + layerIndex + '_shapeIndex_' + i + '_dataIndex_null';
+            if (selectionsettings.enable) {
+                let targetId;
+                let dataIndex;
+                let shapeIndex;
+                let indexValue;
+                let shapeDataValue;
+                let data;
+                const shapeData = this.layers[layerIndex].shapeData['features'];
+                for (let i = 0; i < shapeData.length; i++) {
+                    for (let j = 0; j < popertyNameArray.length; j++) {
+                        const propertyName = !isNullOrUndefined(shapeData[i]['properties'][popertyNameArray[j]])
+                            && isNaN(shapeData[i]['properties'][popertyNameArray[j]]) ?
+                            shapeData[i]['properties'][popertyNameArray[j]].toLowerCase() : shapeData[i]['properties'][popertyNameArray[j]];
+                        const shapeName = !isNullOrUndefined(name) && typeof name === 'string' ? name.toLowerCase() : name;
+                        let k;
+                        if (propertyName === shapeName) {
+                            if (!isNullOrUndefined(this.layers[layerIndex].shapeSettings.colorValuePath)) {
+                                k = checkShapeDataFields(this.layers[layerIndex].dataSource, shapeData[i]['properties'], this.layers[layerIndex].shapeDataPath, this.layers[layerIndex].shapePropertyPath, this.layers[layerIndex]);
+                            }
+                            const baseLayer = this.layers[layerIndex];
+                            if (this.baseLayerIndex >= 0 && baseLayer.isBaseLayer) {
+                                indexValue = 0;
+                            }
+                            else if (this.layers[layerIndex].type === 'SubLayer') {
+                                indexValue = subLayerIndex;
+                            }
+                            targetId = this.element.id + '_' + 'LayerIndex_' + indexValue + '_shapeIndex_' + i + '_dataIndex_' + k;
                             targetEle = getElement(targetId);
-                        }
-                        shapeIndex = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                        shapeDataValue = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
-                            this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
-                        dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
-                        data = isNullOrUndefined(dataIndex) ? null : this.layers[layerIndex].dataSource[dataIndex];
-                        if (enable) {
-                            triggerItemSelectionEvent(selectionsettings, this, targetEle, shapeDataValue, data);
-                            this.shapeSelectionClass = getElement('ShapeselectionMap');
-                            if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1) {
-                                this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
+                            if (isNullOrUndefined(k) && isNullOrUndefined(targetEle)) {
+                                targetId = this.element.id + '_' + 'LayerIndex_' + layerIndex + '_shapeIndex_' + i + '_dataIndex_null';
+                                targetEle = getElement(targetId);
                             }
-                            const shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
-                            if (shapeToggled) {
-                                targetEle.setAttribute('class', 'ShapeselectionMapStyle');
-                                if (this.selectedElementId.indexOf(targetEle.getAttribute('id')) === -1) {
-                                    this.selectedElementId.push(targetEle.getAttribute('id'));
+                            shapeIndex = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
+                            shapeDataValue = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
+                                this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
+                            dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
+                            data = isNullOrUndefined(dataIndex) ? null : this.layers[layerIndex].dataSource[dataIndex];
+                            if (enable) {
+                                triggerItemSelectionEvent(selectionsettings, this, targetEle, shapeDataValue, data);
+                                this.shapeSelectionClass = getElement('ShapeselectionMap');
+                                if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1) {
+                                    this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
                                 }
-                                if (!selectionsettings.enableMultiSelect) {
-                                    return;
+                                const shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
+                                if (shapeToggled) {
+                                    targetEle.setAttribute('class', 'ShapeselectionMapStyle');
+                                    if (this.selectedElementId.indexOf(targetEle.getAttribute('id')) === -1) {
+                                        this.selectedElementId.push(targetEle.getAttribute('id'));
+                                    }
+                                    if (!selectionsettings.enableMultiSelect) {
+                                        return;
+                                    }
                                 }
                             }
-                        }
-                        else {
-                            this.legendSelection = (!selectionsettings.enableMultiSelect && !this.legendSelection) ?
-                                true : this.legendSelection;
-                            if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1 &&
-                                targetEle.getAttribute('class') === 'ShapeselectionMapStyle') {
-                                this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
-                            }
-                            const shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
-                            if (shapeToggled) {
-                                removeClass(targetEle);
-                                const selectedElementIdIndex = this.selectedElementId.indexOf(targetEle.getAttribute('id'));
-                                if (selectedElementIdIndex !== -1) {
-                                    this.selectedElementId.splice(selectedElementIdIndex, 1);
-                                    if (!selectionsettings.enableMultiSelect && this.legendSelection && this.selectedElementId.length > 0) {
-                                        this.removeShapeSelection();
+                            else {
+                                this.legendSelection = (!selectionsettings.enableMultiSelect && !this.legendSelection) ?
+                                    true : this.legendSelection;
+                                if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1 &&
+                                    targetEle.getAttribute('class') === 'ShapeselectionMapStyle') {
+                                    this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
+                                }
+                                const shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
+                                if (shapeToggled) {
+                                    removeClass(targetEle);
+                                    const selectedElementIdIndex = this.selectedElementId.indexOf(targetEle.getAttribute('id'));
+                                    if (selectedElementIdIndex !== -1) {
+                                        this.selectedElementId.splice(selectedElementIdIndex, 1);
+                                        if (!selectionsettings.enableMultiSelect && this.legendSelection
+                                            && this.selectedElementId.length > 0) {
+                                            this.removeShapeSelection();
+                                        }
                                     }
                                 }
                             }
@@ -8623,53 +8757,55 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     zoomToCoordinates(minLatitude, minLongitude, maxLatitude, maxLongitude) {
-        let centerLatitude;
-        let centerLongtitude;
-        let isTwoCoordinates = false;
-        this.centerPosition = {
-            latitude: null,
-            longitude: null
-        };
-        this.isZoomByPosition = false;
-        if (isNullOrUndefined(maxLatitude) && isNullOrUndefined(maxLongitude)
-            || isNullOrUndefined(minLatitude) && isNullOrUndefined(minLongitude)) {
-            minLatitude = isNullOrUndefined(minLatitude) ? 0 : minLatitude;
-            minLongitude = isNullOrUndefined(minLatitude) ? 0 : minLongitude;
-            maxLatitude = isNullOrUndefined(maxLatitude) ? minLatitude : maxLatitude;
-            maxLongitude = isNullOrUndefined(maxLongitude) ? minLongitude : maxLongitude;
-            isTwoCoordinates = true;
-        }
-        if (minLatitude > maxLatitude) {
-            [minLatitude, maxLatitude] = [maxLatitude, minLatitude];
-        }
-        if (minLongitude > maxLongitude) {
-            [minLongitude, maxLongitude] = [maxLongitude, minLongitude];
-        }
-        if (!isTwoCoordinates) {
-            centerLatitude = (minLatitude + maxLatitude) / 2;
-            centerLongtitude = (minLongitude + maxLongitude) / 2;
+        if (!this.isDestroyed) {
+            let centerLatitude;
+            let centerLongtitude;
+            let isTwoCoordinates = false;
+            this.centerPosition = {
+                latitude: null,
+                longitude: null
+            };
+            this.isZoomByPosition = false;
+            if (isNullOrUndefined(maxLatitude) && isNullOrUndefined(maxLongitude)
+                || isNullOrUndefined(minLatitude) && isNullOrUndefined(minLongitude)) {
+                minLatitude = isNullOrUndefined(minLatitude) ? 0 : minLatitude;
+                minLongitude = isNullOrUndefined(minLatitude) ? 0 : minLongitude;
+                maxLatitude = isNullOrUndefined(maxLatitude) ? minLatitude : maxLatitude;
+                maxLongitude = isNullOrUndefined(maxLongitude) ? minLongitude : maxLongitude;
+                isTwoCoordinates = true;
+            }
+            if (minLatitude > maxLatitude) {
+                [minLatitude, maxLatitude] = [maxLatitude, minLatitude];
+            }
+            if (minLongitude > maxLongitude) {
+                [minLongitude, maxLongitude] = [maxLongitude, minLongitude];
+            }
+            if (!isTwoCoordinates) {
+                centerLatitude = (minLatitude + maxLatitude) / 2;
+                centerLongtitude = (minLongitude + maxLongitude) / 2;
+            }
+            else {
+                centerLatitude = (minLatitude + maxLatitude);
+                centerLongtitude = (minLongitude + maxLongitude);
+            }
+            this.centerLatOfGivenLocation = centerLatitude;
+            this.centerLongOfGivenLocation = centerLongtitude;
+            this.minLatOfGivenLocation = minLatitude;
+            this.minLongOfGivenLocation = minLongitude;
+            this.maxLatOfGivenLocation = maxLatitude;
+            this.maxLongOfGivenLocation = maxLongitude;
+            this.zoomNotApplied = true;
+            this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
+            const zoomArgs = {
+                cancel: false, name: 'zoom', type: zoomIn, maps: this,
+                tileTranslatePoint: {}, translatePoint: {},
+                tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
+                scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
+                    { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation }
+            };
+            this.trigger('zoom', zoomArgs);
+            this.refresh();
         }
-        else {
-            centerLatitude = (minLatitude + maxLatitude);
-            centerLongtitude = (minLongitude + maxLongitude);
-        }
-        this.centerLatOfGivenLocation = centerLatitude;
-        this.centerLongOfGivenLocation = centerLongtitude;
-        this.minLatOfGivenLocation = minLatitude;
-        this.minLongOfGivenLocation = minLongitude;
-        this.maxLatOfGivenLocation = maxLatitude;
-        this.maxLongOfGivenLocation = maxLongitude;
-        this.zoomNotApplied = true;
-        this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
-        const zoomArgs = {
-            cancel: false, name: 'zoom', type: zoomIn, maps: this,
-            tileTranslatePoint: {}, translatePoint: {},
-            tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
-            scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
-                { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation }
-        };
-        this.trigger('zoom', zoomArgs);
-        this.refresh();
     }
     /**
      * This method is used to remove multiple selected shapes in the maps.
@@ -8720,6 +8856,8 @@ let Maps = class Maps extends Component {
     }
     /**
      * This method disposes the maps component.
+     *
+     * @returns {void}
      */
     destroy() {
         this.unWireEVents();
@@ -8776,91 +8914,94 @@ let Maps = class Maps extends Component {
      * @private
      */
     onPropertyChanged(newProp, oldProp) {
-        let render = false;
-        let isMarker = false;
-        let isLayer = false;
-        let isStaticMapType = false;
-        let layerEle;
-        if (newProp['layers']) {
-            const newLayerLength = Object.keys(newProp['layers']).length;
-            layerEle = document.getElementById(this.element.id + '_LayerIndex_' + (newLayerLength - 1));
-        }
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-                case 'background':
-                    this.renderBorder();
-                    break;
-                case 'height':
-                case 'width':
-                case 'layers':
-                case 'projectionType':
-                case 'centerPosition':
-                case 'legendSettings':
-                case 'baseLayerIndex':
-                    if (prop === 'layers') {
-                        isLayer = true;
-                        const layerPropLength = Object.keys(newProp.layers).length;
-                        for (let x = 0; x < layerPropLength; x++) {
-                            if (!isNullOrUndefined(newProp.layers[x])) {
-                                const collection = Object.keys(newProp.layers[x]);
-                                for (const collectionProp of collection) {
-                                    if ((collectionProp === 'layerType' && newProp.layers[x].layerType !== 'Geometry') || (isNullOrUndefined(this.layers[x].shapeData)
-                                        && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
-                                        this.isReset = true;
-                                    }
-                                    else if (collectionProp === 'markerSettings') {
-                                        isMarker = true;
-                                    }
-                                    else if (collectionProp === 'staticMapType') {
-                                        isStaticMapType = true;
+        if (!this.isDestroyed) {
+            let render = false;
+            let isMarker = false;
+            let isLayer = false;
+            let isStaticMapType = false;
+            let layerEle;
+            if (newProp['layers']) {
+                const newLayerLength = Object.keys(newProp['layers']).length;
+                layerEle = document.getElementById(this.element.id + '_LayerIndex_' + (newLayerLength - 1));
+            }
+            for (const prop of Object.keys(newProp)) {
+                switch (prop) {
+                    case 'background':
+                        this.renderBorder();
+                        break;
+                    case 'height':
+                    case 'width':
+                    case 'layers':
+                    case 'projectionType':
+                    case 'centerPosition':
+                    case 'legendSettings':
+                    case 'baseLayerIndex':
+                        if (prop === 'layers') {
+                            isLayer = true;
+                            const layerPropLength = Object.keys(newProp.layers).length;
+                            for (let x = 0; x < layerPropLength; x++) {
+                                if (!isNullOrUndefined(newProp.layers[x])) {
+                                    const collection = Object.keys(newProp.layers[x]);
+                                    for (const collectionProp of collection) {
+                                        if ((collectionProp === 'layerType' && newProp.layers[x].layerType !== 'Geometry') ||
+                                            (isNullOrUndefined(this.layers[x].shapeData)
+                                                && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
+                                            this.isReset = true;
+                                        }
+                                        else if (collectionProp === 'markerSettings') {
+                                            isMarker = true;
+                                        }
+                                        else if (collectionProp === 'staticMapType') {
+                                            isStaticMapType = true;
+                                        }
                                     }
                                 }
                             }
                         }
-                    }
-                    render = true;
-                    break;
-                case 'zoomSettings':
-                    if (!isNullOrUndefined(oldProp.zoomSettings)) {
-                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor && !isLayer) {
-                            render = false;
-                        }
-                        else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
-                            this.zoomSettings.zoomFactor = 1;
-                            render = true;
-                        }
-                        else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
-                            this.zoomSettings.zoomFactor = 1;
-                            render = true;
-                        }
-                        else {
-                            render = true;
+                        render = true;
+                        break;
+                    case 'zoomSettings':
+                        if (!isNullOrUndefined(oldProp.zoomSettings)) {
+                            if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor && !isLayer) {
+                                render = false;
+                            }
+                            else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
+                                this.zoomSettings.zoomFactor = 1;
+                                render = true;
+                            }
+                            else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
+                                this.zoomSettings.zoomFactor = 1;
+                                render = true;
+                            }
+                            else {
+                                render = true;
+                            }
                         }
-                    }
-                    break;
-                case 'locale':
-                case 'currencyCode':
-                    super.refresh();
-                    break;
+                        break;
+                    case 'locale':
+                    case 'currencyCode':
+                        super.refresh();
+                        break;
+                }
             }
-        }
-        if (render) {
-            if (newProp.layers && isMarker) {
-                removeElement(this.element.id + '_Markers_Group');
-                if (this.isTileMap) {
-                    this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
+            if (render) {
+                if (newProp.layers && isMarker) {
+                    removeElement(this.element.id + '_Markers_Group');
+                    if (this.isTileMap) {
+                        this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
+                    }
+                    else {
+                        this.render();
+                    }
+                }
+                else if (newProp.layers && isStaticMapType) {
+                    this.mapLayerPanel.renderGoogleMap(this.layers[this.layers.length - 1].key, this.staticMapZoom);
                 }
                 else {
-                    this.render();
+                    this.createSVG();
+                    this.renderElements();
                 }
             }
-            else if (newProp.layers && isStaticMapType) {
-                this.mapLayerPanel.renderGoogleMap(this.layers[this.layers.length - 1].key, this.staticMapZoom);
-            }
-            else {
-                this.createSVG();
-                this.renderElements();
-            }
         }
     }
     /**
@@ -8873,7 +9014,7 @@ let Maps = class Maps extends Component {
         const modules = [];
         const isVisible = this.findVisibleLayers(this.layers);
         let annotationEnable = false;
-        this.annotations.map((annotation, index) => {
+        this.annotations.map((annotation) => {
             annotationEnable = annotation.content != null;
         });
         if (this.isBubbleVisible()) {
@@ -8958,10 +9099,12 @@ let Maps = class Maps extends Component {
     }
     /**
      * To find marker visibility
+     *
+     * @returns {boolean} - Returns whether the markers are visible or not.
      */
     isMarkersVisible() {
         let isVisible = false;
-        Array.prototype.forEach.call(this.layers, (layer, layerIndex) => {
+        Array.prototype.forEach.call(this.layers, (layer) => {
             for (let i = 0; i < layer.markerSettings.length; i++) {
                 if (layer.markerSettings[i].visible) {
                     isVisible = true;
@@ -8973,6 +9116,8 @@ let Maps = class Maps extends Component {
     }
     /**
      * To find DataLabel visibility
+     *
+     * @returns {boolean} - Returns whether the data labels are visible or not.
      */
     isDataLabelVisible() {
         let isVisible = false;
@@ -8986,10 +9131,12 @@ let Maps = class Maps extends Component {
     }
     /**
      * To find navigation line visibility
+     *
+     * @returns {boolean} - Returns whether the navigation lines are visible or not.
      */
     isNavigationVisible() {
         let isVisible = false;
-        Array.prototype.forEach.call(this.layers, (layer, layerIndex) => {
+        Array.prototype.forEach.call(this.layers, (layer) => {
             for (let i = 0; i < layer.navigationLineSettings.length; i++) {
                 if (layer.navigationLineSettings[i].visible) {
                     isVisible = true;
@@ -9001,6 +9148,8 @@ let Maps = class Maps extends Component {
     }
     /**
      * To find space between the secondary element and svg element.
+     *
+     * @returns {Point} - Returns the left and top value of the secondary element of Maps.
      * @private
      */
     getExtraPosition() {
@@ -9056,7 +9205,7 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     print(id) {
-        if ((this.allowPrint) && (this.printModule)) {
+        if ((this.allowPrint) && (this.printModule) && !this.isDestroyed) {
             this.printModule.print(this, id);
         }
     }
@@ -9070,18 +9219,20 @@ let Maps = class Maps extends Component {
      * @returns {Promise<string>} - Returns the string value.
      */
     export(type, fileName, orientation, allowDownload) {
-        if (isNullOrUndefined(allowDownload)) {
-            allowDownload = true;
-        }
-        if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
-            return new Promise((resolve, reject) => {
-                resolve(this.imageExportModule.export(this, type, fileName, allowDownload));
-            });
-        }
-        else if ((this.allowPdfExport) && (this.pdfExportModule)) {
-            return new Promise((resolve, reject) => {
-                resolve(this.pdfExportModule.export(this, type, fileName, allowDownload, orientation));
-            });
+        if (!this.isDestroyed) {
+            if (isNullOrUndefined(allowDownload)) {
+                allowDownload = true;
+            }
+            if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
+                return new Promise((resolve, reject) => {
+                    resolve(this.imageExportModule.export(this, type, fileName, allowDownload));
+                });
+            }
+            else if ((this.allowPdfExport) && (this.pdfExportModule)) {
+                return new Promise((resolve, reject) => {
+                    resolve(this.pdfExportModule.export(this, type, fileName, allowDownload, orientation));
+                });
+            }
         }
         return null;
     }
@@ -9092,19 +9243,22 @@ let Maps = class Maps extends Component {
      * @returns {Promise<string>} - Returns the processed Bing URL as Promise.
      */
     getBingUrlTemplate(url) {
-        const promise = new Promise((resolve, reject) => {
-            const ajax = new Ajax({
-                url: url
+        let promise;
+        if (!this.isDestroyed) {
+            promise = new Promise((resolve, reject) => {
+                const ajax = new Ajax({
+                    url: url
+                });
+                ajax.onSuccess = (json) => {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const jsonObject = JSON.parse(json);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const resource = jsonObject['resourceSets'][0]['resources'][0];
+                    resolve(resource['imageUrl']);
+                };
+                ajax.send();
             });
-            ajax.onSuccess = (json) => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const jsonObject = JSON.parse(json);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const resource = jsonObject['resourceSets'][0]['resources'][0];
-                resolve(resource['imageUrl']);
-            };
-            ajax.send();
-        });
+        }
         return promise;
     }
     /**
@@ -9176,21 +9330,25 @@ let Maps = class Maps extends Component {
      * @returns {GeoPosition}- Returns the geo position
      */
     getGeoLocation(layerIndex, x, y) {
-        const container = document.getElementById(this.element.id);
-        const pageX = x - container.offsetLeft;
-        const pageY = y - container.offsetTop;
-        const currentLayer = this.layersCollection[layerIndex];
-        const translate = getTranslate(this, currentLayer, false);
-        const translatePoint = translate['location'];
-        const translatePointX = translatePoint.x * this.scale;
-        const translatePointY = translatePoint.y * this.scale;
-        const mapSize = (Math.min(this.mapAreaRect.height, this.mapAreaRect.width)
-            * this.mapLayerPanel['currentFactor']) * this.scale;
-        const xx = (this.clip(pageX - translatePointX, 0, mapSize - 1) / mapSize) - 0.5;
-        const yy = 0.5 - (this.clip(pageY - translatePointY, 0, mapSize - 1) / mapSize);
-        const lat = 90 - 360 * Math.atan(Math.exp(-yy * 2 * Math.PI)) / Math.PI;
-        const long = 360 * xx;
-        return { latitude: lat, longitude: long };
+        let latitude = 0;
+        let longitude = 0;
+        if (!this.isDestroyed) {
+            const container = document.getElementById(this.element.id);
+            const pageX = x - container.offsetLeft;
+            const pageY = y - container.offsetTop;
+            const currentLayer = this.layersCollection[layerIndex];
+            const translate = getTranslate(this, currentLayer, false);
+            const translatePoint = translate['location'];
+            const translatePointX = translatePoint.x * this.scale;
+            const translatePointY = translatePoint.y * this.scale;
+            const mapSize = (Math.min(this.mapAreaRect.height, this.mapAreaRect.width)
+                * this.mapLayerPanel['currentFactor']) * this.scale;
+            const xx = (this.clip(pageX - translatePointX, 0, mapSize - 1) / mapSize) - 0.5;
+            const yy = 0.5 - (this.clip(pageY - translatePointY, 0, mapSize - 1) / mapSize);
+            latitude = 90 - 360 * Math.atan(Math.exp(-yy * 2 * Math.PI)) / Math.PI;
+            longitude = 360 * xx;
+        }
+        return { latitude: latitude, longitude: longitude };
     }
     clip(value, minVal, maxVal) {
         return Math.min(Math.max(value, minVal), maxVal);
@@ -9203,10 +9361,16 @@ let Maps = class Maps extends Component {
      * @returns {GeoPosition} - Returns the position
      */
     getTileGeoLocation(x, y) {
-        const container = document.getElementById(this.element.id);
-        const ele = document.getElementById(this.element.id + '_tile_parent');
-        const latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - container.offsetLeft), y + this.mapAreaRect.y - (ele.offsetTop - container.offsetTop));
-        return { latitude: latLong['latitude'], longitude: latLong['longitude'] };
+        let latitude = 0;
+        let longitude = 0;
+        if (!this.isDestroyed) {
+            const container = document.getElementById(this.element.id);
+            const ele = document.getElementById(this.element.id + '_tile_parent');
+            const latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - container.offsetLeft), y + this.mapAreaRect.y - (ele.offsetTop - container.offsetTop));
+            latitude = latLong['latitude'];
+            longitude = latLong['longitude'];
+        }
+        return { latitude: latitude, longitude: longitude };
     }
     /**
      * This method is used to convert the point to latitude and longitude in maps.
@@ -9216,14 +9380,18 @@ let Maps = class Maps extends Component {
      * @returns {Object} - Returns the object.
      */
     pointToLatLong(pageX, pageY) {
-        const padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
-        pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
-        const mapSize = 256 * Math.pow(2, this.tileZoomLevel);
-        const x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
-        const y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
-        const lat = 90 - 360 * Math.atan(Math.exp(-y1 * 2 * Math.PI)) / Math.PI;
-        const long = 360 * x1;
-        return { latitude: lat, longitude: long };
+        let latitude = 0;
+        let longitude = 0;
+        if (!this.isDestroyed) {
+            const padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
+            pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
+            const mapSize = 256 * Math.pow(2, this.tileZoomLevel);
+            const x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
+            const y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
+            latitude = 90 - 360 * Math.atan(Math.exp(-y1 * 2 * Math.PI)) / Math.PI;
+            longitude = 360 * x1;
+        }
+        return { latitude: latitude, longitude: longitude };
     }
 };
 __decorate([
@@ -9417,7 +9585,8 @@ class Bubble {
         const layerData = layer.layerData;
         const colorValuePath = bubbleSettings.colorValuePath;
         const equalValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
-            (getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : shapeData[colorValuePath]) : shapeData[colorValuePath];
+            (getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : shapeData[colorValuePath]) :
+            shapeData[colorValuePath];
         const colorValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
             Number(getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : Number(shapeData[colorValuePath])) :
             Number(shapeData[colorValuePath]);
@@ -9571,16 +9740,17 @@ class Bubble {
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shape.map((current, index) => {
+            shape.map((current) => {
                 points.push(new Point(current['point']['x'], current['point']['y']));
             });
         }
         return points;
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble click event
      *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      * @private
      */
     bubbleClick(e) {
@@ -9626,6 +9796,8 @@ class Bubble {
     /**
      * To check and trigger bubble move event
      *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @retruns {void}
      * @private
      */
     bubbleMove(e) {
@@ -9714,6 +9886,7 @@ class DataLabel {
     layerData, group, labelTemplateElement, index, intersect) {
         const dataLabel = layer.dataLabelSettings;
         const style = layer.dataLabelSettings.textStyle;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let templateFn;
         let options;
         const dataLabelSettings = layer.dataLabelSettings;
@@ -9724,7 +9897,6 @@ class DataLabel {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const shapeData = shape;
         let element;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let text = '';
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let datasrcObj;
@@ -9746,7 +9918,7 @@ class DataLabel {
         const properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?
             layer.shapePropertyPath : [layer.shapePropertyPath]);
         let propertyPath;
-        let isPoint = false;
+        const isPoint = false;
         const animate$$1 = layer.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const translate = (this.maps.isTileMap) ? new Object() : ((this.maps.zoomSettings.zoomFactor > 1 &&
@@ -9863,7 +10035,6 @@ class DataLabel {
                 if (eventargs.cancel) {
                     return;
                 }
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 let position = [];
                 let width = zoomLabelsPosition && scaleZoomValue > 1 && !this.maps.zoomNotApplied
                     && this.maps.zoomShapeCollection.length > index ? this.maps.zoomShapeCollection[index]['width'] :
@@ -10049,7 +10220,7 @@ class DataLabel {
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shapes.map((current, index) => {
+            shapes.map((current) => {
                 points.push(new Point(current['point']['x'], current['point']['y']));
             });
         }
@@ -10064,7 +10235,6 @@ class DataLabel {
         return 'DataLabel';
     }
     /**
-     *
      * @returns {void}
      * @private
      */
@@ -10082,123 +10252,130 @@ class NavigationLine {
     constructor(maps) {
         this.maps = maps;
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To render navigation line for maps
+     *
+     * @param {LayerSettings} layer - Specifies the layer instance to which the navigation line is to be rendered.
+     * @param {number} factor - Specifies the current zoom factor of the Maps.
+     * @param {number} layerIndex -Specifies the index of current layer.
+     * @returns {Element} - Returns the navigation line element.
      */
     renderNavigation(layer, factor, layerIndex) {
-        let navigationEle;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const navigation = layer.navigationLineSettings;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let longitude;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let point = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let latitude;
-        let visible;
-        let angle;
-        let width;
-        let color;
-        let dashArray;
-        let pathOption;
-        let direction;
-        let showArrow;
-        let arrowColor;
-        let arrowSize;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let arrowSettings;
-        let arrowPosition;
-        let startArrow;
-        let endArrow;
-        let offSet;
-        let offSetValue;
-        let navigationGroup;
-        let d;
-        const group = (this.maps.renderer.createGroup({
-            id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
-        }));
-        for (let i = 0; i < navigation.length; i++) {
-            latitude = navigation[i]['properties']['latitude'];
-            longitude = navigation[i]['properties']['longitude'];
-            visible = navigation[i]['properties']['visible'];
-            angle = navigation[i]['angle'];
-            width = navigation[i]['width'] || 1;
-            color = navigation[i]['color'];
-            dashArray = navigation[i]['properties']['dashArray'];
-            arrowSettings = navigation[i]['properties']['arrowSettings'];
-            showArrow = (isNullOrUndefined(arrowSettings)) ? false : arrowSettings['properties']['showArrow'];
-            if (longitude['length'] === latitude['length'] && visible) {
-                for (let i = 0; i < longitude['length']; i++) {
-                    const location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i], latitude[i]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i], longitude[i], factor, layer, this.maps);
-                    point.push(location);
-                }
-            }
-            navigationGroup = (this.maps.renderer.createGroup({
-                id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
+        let group;
+        if (!isNullOrUndefined(this.maps)) {
+            let navigationEle;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const navigation = layer.navigationLineSettings;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let longitude;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let point = [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let latitude;
+            let visible;
+            let angle;
+            let width;
+            let color;
+            let dashArray;
+            let pathOption;
+            let direction;
+            let showArrow;
+            let arrowColor;
+            let arrowSize;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let arrowSettings;
+            let arrowPosition;
+            let startArrow;
+            let endArrow;
+            let offSet;
+            let offSetValue;
+            let navigationGroup;
+            let d;
+            group = (this.maps.renderer.createGroup({
+                id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
             }));
-            for (let j = 0; j < point['length'] - 1; j++) {
-                angle = (-1 > angle) ? -1 : angle;
-                angle = (1 < angle) ? 1 : angle;
-                const arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
-                const radius = this.convertRadius(point[j], point[j + 1]);
-                if (angle <= 1 && angle > 0) {
-                    direction = 0;
-                    if (point[j]['x'] > point[j + 1]['x']) {
-                        direction = 1;
-                    }
-                }
-                if (angle >= -1 && angle < 0) {
-                    direction = 1;
-                    if (point[j]['x'] > point[j + 1]['x']) {
+            for (let i = 0; i < navigation.length; i++) {
+                latitude = navigation[i]['properties']['latitude'];
+                longitude = navigation[i]['properties']['longitude'];
+                visible = navigation[i]['properties']['visible'];
+                angle = navigation[i]['angle'];
+                width = navigation[i]['width'] || 1;
+                color = navigation[i]['color'];
+                dashArray = navigation[i]['properties']['dashArray'];
+                arrowSettings = navigation[i]['properties']['arrowSettings'];
+                showArrow = (isNullOrUndefined(arrowSettings)) ? false : arrowSettings['properties']['showArrow'];
+                if (longitude['length'] === latitude['length'] && visible) {
+                    for (let i = 0; i < longitude['length']; i++) {
+                        const location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i], latitude[i]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i], longitude[i], factor, layer, this.maps);
+                        point.push(location);
+                    }
+                }
+                navigationGroup = (this.maps.renderer.createGroup({
+                    id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
+                }));
+                for (let j = 0; j < point['length'] - 1; j++) {
+                    angle = (-1 > angle) ? -1 : angle;
+                    angle = (1 < angle) ? 1 : angle;
+                    const arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
+                    const radius = this.convertRadius(point[j], point[j + 1]);
+                    if (angle <= 1 && angle > 0) {
                         direction = 0;
+                        if (point[j]['x'] > point[j + 1]['x']) {
+                            direction = 1;
+                        }
                     }
-                }
-                if (showArrow) {
-                    arrowColor = arrowSettings['properties']['color'];
-                    arrowSize = arrowSettings['properties']['size'];
-                    offSetValue = (arrowSettings['properties']['offSet'] === undefined) ? 0 : arrowSettings['properties']['offSet'];
-                    const divide = (Math.round(arrowSize / 2));
-                    arrowPosition = arrowSettings['properties']['position'];
-                    startArrow = (arrowPosition === 'Start') ? 'url(#triangle' + i + ')' : null;
-                    endArrow = (arrowPosition === 'End') ? 'url(#triangle' + i + ')' : null;
-                    if (offSet !== 0 && angle === 0) {
-                        offSet = (arrowPosition === 'Start') ? offSetValue : -(offSetValue);
-                    }
-                    offSet = (isNullOrUndefined(offSet)) ? 0 : offSet;
-                    const triId = this.maps.element.id + '_triangle';
-                    const defElement = this.maps.renderer.createDefs();
-                    defElement.innerHTML += '<marker id="' + 'triangle' + i + '"></marker>';
-                    const markerEle = defElement.querySelector('#' + 'triangle' + i);
-                    markerEle.setAttribute('markerWidth', (arrowSize.toString()));
-                    markerEle.setAttribute('markerHeight', (arrowSize.toString()));
-                    markerEle.setAttribute('refX', (divide - offSet).toString());
-                    markerEle.setAttribute('refY', divide.toString());
-                    markerEle.setAttribute('orient', 'auto');
-                    const d2 = 'M 0,0  L 0,' + arrowSize + ' L ' + divide + ', ' + divide + ' Z';
-                    pathOption = new PathOption(triId, arrowColor, width, color, 1, 1, dashArray, d2);
+                    if (angle >= -1 && angle < 0) {
+                        direction = 1;
+                        if (point[j]['x'] > point[j + 1]['x']) {
+                            direction = 0;
+                        }
+                    }
+                    if (showArrow) {
+                        arrowColor = arrowSettings['properties']['color'];
+                        arrowSize = arrowSettings['properties']['size'];
+                        offSetValue = (arrowSettings['properties']['offSet'] === undefined) ? 0 : arrowSettings['properties']['offSet'];
+                        const divide = (Math.round(arrowSize / 2));
+                        arrowPosition = arrowSettings['properties']['position'];
+                        startArrow = (arrowPosition === 'Start') ? 'url(#triangle' + i + ')' : null;
+                        endArrow = (arrowPosition === 'End') ? 'url(#triangle' + i + ')' : null;
+                        if (offSet !== 0 && angle === 0) {
+                            offSet = (arrowPosition === 'Start') ? offSetValue : -(offSetValue);
+                        }
+                        offSet = (isNullOrUndefined(offSet)) ? 0 : offSet;
+                        const triId = this.maps.element.id + '_triangle';
+                        const defElement = this.maps.renderer.createDefs();
+                        defElement.innerHTML += '<marker id="' + 'triangle' + i + '"></marker>';
+                        const markerEle = defElement.querySelector('#' + 'triangle' + i);
+                        markerEle.setAttribute('markerWidth', (arrowSize.toString()));
+                        markerEle.setAttribute('markerHeight', (arrowSize.toString()));
+                        markerEle.setAttribute('refX', (divide - offSet).toString());
+                        markerEle.setAttribute('refY', divide.toString());
+                        markerEle.setAttribute('orient', 'auto');
+                        const d2 = 'M 0,0  L 0,' + arrowSize + ' L ' + divide + ', ' + divide + ' Z';
+                        pathOption = new PathOption(triId, arrowColor, width, color, 1, 1, dashArray, d2);
+                        navigationEle = this.maps.renderer.drawPath(pathOption);
+                        markerEle.appendChild(navigationEle);
+                        defElement.appendChild(markerEle);
+                        navigationGroup.appendChild(defElement);
+                    }
+                    angle = Math.abs(angle);
+                    d = (angle === 0) ? 'M ' + point[j]['x'] + ',' + point[j]['y'] + 'L ' + point[j + 1]['x']
+                        + ',' + point[j + 1]['y'] + ' ' :
+                        'M ' + point[j]['x'] + ',' + point[j]['y'] + ' A ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) +
+                            ' ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) + ' ' + 0 + ',' + 0 + ','
+                            + direction + ' , ' + point[j + 1]['x'] + ',' + point[j + 1]['y'] + ' ';
+                    pathOption = new PathOption(arcId, 'none', width, color, 1, 1, dashArray, d);
                     navigationEle = this.maps.renderer.drawPath(pathOption);
-                    markerEle.appendChild(navigationEle);
-                    defElement.appendChild(markerEle);
-                    navigationGroup.appendChild(defElement);
-                }
-                angle = Math.abs(angle);
-                d = (angle === 0) ? 'M ' + point[j]['x'] + ',' + point[j]['y'] + 'L ' + point[j + 1]['x']
-                    + ',' + point[j + 1]['y'] + ' ' :
-                    'M ' + point[j]['x'] + ',' + point[j]['y'] + ' A ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) +
-                        ' ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) + ' ' + 0 + ',' + 0 + ','
-                        + direction + ' , ' + point[j + 1]['x'] + ',' + point[j + 1]['y'] + ' ';
-                pathOption = new PathOption(arcId, 'none', width, color, 1, 1, dashArray, d);
-                navigationEle = this.maps.renderer.drawPath(pathOption);
-                if (!isNullOrUndefined(arrowPosition)) {
-                    const position = (arrowPosition === 'Start') ? navigationEle.setAttribute('marker-start', startArrow)
-                        : navigationEle.setAttribute('marker-end', endArrow);
-                }
-                maintainSelection(this.maps.selectedNavigationElementId, this.maps.navigationSelectionClass, navigationEle, 'navigationlineselectionMapStyle');
-                navigationGroup.appendChild(navigationEle);
-                group.appendChild(navigationGroup);
-            }
-            point = [];
+                    if (!isNullOrUndefined(arrowPosition)) {
+                        const position = (arrowPosition === 'Start') ? navigationEle.setAttribute('marker-start', startArrow)
+                            : navigationEle.setAttribute('marker-end', endArrow);
+                    }
+                    maintainSelection(this.maps.selectedNavigationElementId, this.maps.navigationSelectionClass, navigationEle, 'navigationlineselectionMapStyle');
+                    navigationGroup.appendChild(navigationEle);
+                    group.appendChild(navigationGroup);
+                }
+                point = [];
+            }
         }
         return group;
     }
@@ -10530,7 +10707,7 @@ class Legend {
                                 }
                             }
                             else {
-                                let padding = 10;
+                                const padding = 10;
                                 shapeX = shapeLocation[j - 1].x;
                                 shapeY = prevPositionY + padding + (shapeHeight / 2);
                             }
@@ -10691,7 +10868,7 @@ class Legend {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const collection = this.totalPages[page]['Collection'][i];
                 const shapeBorder = collection['shapeBorder'];
-                let legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
+                const legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
                 let legendText = collection['DisplayText'];
                 const pagingArrowPadding = 4;
                 const shape = ((legend.type === 'Markers') ? ((isNullOrUndefined(collection['ImageSrc'])) ?
@@ -10705,15 +10882,16 @@ class Legend {
                 const textId = map.element.id + '_Legend_Text_Index_' + collection['idIndex'];
                 const shapeLocation = new Point(collection['Shape']['x'], (collection['Shape']['y'] - pagingArrowPadding));
                 const textLocation = new Point(collection['Text']['x'], (collection['Text']['y'] - pagingArrowPadding));
-                const imageUrl = ((isNullOrUndefined(collection['ImageSrc'])) ? legend.shape : collection['ImageSrc']);
                 const renderOptions = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
                 const legendTextStyle = {
                     fontFamily: legend.textStyle.fontFamily, fontStyle: legend.textStyle.fontStyle,
-                    fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color, opacity: legend.textStyle.opacity
+                    fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color,
+                    opacity: legend.textStyle.opacity
                 };
                 legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
                     this.maps.themeStyle.legendTextColor;
-                legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily : this.maps.themeStyle.fontFamily;
+                legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily :
+                    this.maps.themeStyle.fontFamily;
                 legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
                 if (i === 0) {
                     this.renderLegendBorder();
@@ -10723,7 +10901,7 @@ class Legend {
                     const marker$$1 = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
                     legendShape = !isNullOrUndefined(marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']]) && marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] !== '' ? marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] : marker$$1.shape;
                 }
-                if (legendShape === "Balloon") {
+                if (legendShape === 'Balloon') {
                     legendElement.appendChild(drawBalloon(map, renderOptions, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
                 }
                 else {
@@ -10789,7 +10967,7 @@ class Legend {
                             'opacity': 1,
                             'dominant-baseline': ''
                         };
-                        let pagingTextElement = render.createText(pageTextOptions, pagingText);
+                        const pagingTextElement = render.createText(pageTextOptions, pagingText);
                         pagingTextElement.style.cssText = 'user-select: none;';
                         pagingGroup.appendChild(pagingTextElement);
                         this.legendGroup.appendChild(pagingGroup);
@@ -11201,8 +11379,6 @@ class Legend {
                     }
                     if (selectionEle && (selectionEle['IsSelected'] && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
                         || targetElement.getAttribute('class') === 'LineselectionMapStyle'))) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const element = this.maps.legendSelectionCollection[selectionEle['SelectionIndex']];
                         let multiSelection = 0;
                         if (module.enableMultiSelect) {
                             for (let i = 0; i < shapeElement['Elements'].length; i++) {
@@ -11461,7 +11637,8 @@ class Legend {
         const legendTitle = legend.title.text;
         const textStyle = {
             fontFamily: legend.titleStyle.fontFamily, fontStyle: legend.titleStyle.fontStyle,
-            fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color, opacity: legend.titleStyle.opacity
+            fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color,
+            opacity: legend.titleStyle.opacity
         };
         let textOptions;
         const spacing = 10;
@@ -11522,7 +11699,8 @@ class Legend {
         const locationX = !isNullOrUndefined(legend.location.x) ? legend.location.x : 0;
         const locationY = !isNullOrUndefined(legend.location.y) ? legend.location.y : 0;
         if (legend.position === 'Float') {
-            this.translate = map.isTileMap ? new Point(locationX, locationY + (spacing / 4)) : new Point(locationX + map.mapAreaRect.x, locationY + map.mapAreaRect.y);
+            this.translate = map.isTileMap ? new Point(locationX, locationY + (spacing / 4)) :
+                new Point(locationX + map.mapAreaRect.x, locationY + map.mapAreaRect.y);
             this.legendTotalRect = map.mapAreaRect;
         }
         else {
@@ -11604,7 +11782,8 @@ class Legend {
                         this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
                     else {
-                        newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
+                        newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill,
+                            name: text,
                             shape: (!isNullOrUndefined(marker$$1.shapeValuePath) && !isNullOrUndefined(data[marker$$1.shapeValuePath]) && data[marker$$1.shapeValuePath] !== '') ? data[marker$$1.shapeValuePath] : (this.maps.legendSettings.useMarkerShape ? marker$$1.shape : this.maps.legendSettings.shape) });
                         this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
@@ -11783,6 +11962,7 @@ class Legend {
                 if (outOfRangeValues.length === 0) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     let range = false;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     Array.prototype.forEach.call(dataSource, (data, dataIndex) => {
                         range = false;
                         const rangeValue = data[colorValuePath];
@@ -12010,12 +12190,25 @@ class Legend {
                                 }
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
-                                    legendShapeId.setAttribute('fill', '#E5E5E5');
-                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
-                                        legendShapeId.setAttribute('stroke', '#E5E5E5');
-                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#E5E5E5');
+                                    if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                        legendShapeId.setAttribute('fill', legendToggleFill);
+                                        legendShapeId.setAttribute('fill-opacity', (legendToggleOpacity).toString());
+                                        legendShapeId.setAttribute('stroke', legendToggleBorderColor);
+                                        legendShapeId.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
+                                        legendShapeId.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
+                                        legendTextId.setAttribute('fill', legendToggleFill);
+                                    }
+                                    else {
+                                        legendTextId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
+                                        legendShapeId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
+                                        legendShapeId.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
+                                        legendShapeId.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
+                                        legendShapeId.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
+                                        legendShapeId.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());
+                                    }
                                 }
                             }
                             else {
@@ -12028,6 +12221,10 @@ class Legend {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
+                                    legendShapeId.setAttribute('fill-opacity', this.legendCollection[legendIndex]['opacity']);
+                                    legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['shapeBorder']['color']);
+                                    legendShapeId.setAttribute('stroke-width', this.legendCollection[legendIndex]['shapeBorder']['width']);
+                                    legendShapeId.setAttribute('stroke-opacity', this.legendCollection[legendIndex]['shapeBorder']['opacity']);
                                     if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
                                         legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
                                     }
@@ -12154,9 +12351,25 @@ class Legend {
                                 }
                                 if (targetEle !== null) {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#E5E5E5');
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
-                                    legendShapeId.setAttribute('fill', '#E5E5E5');
+                                    if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                        legendTextId.setAttribute('fill', legendToggleFill);
+                                        legendShapeId.setAttribute('fill', legendToggleFill);
+                                        legendShapeId.setAttribute('fill-opacity', (legendToggleOpacity).toString());
+                                        legendShapeId.setAttribute('stroke', legendToggleBorderColor);
+                                        legendShapeId.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
+                                        legendShapeId.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
+                                    }
+                                    else {
+                                        legendTextId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
+                                        legendShapeId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
+                                        legendShapeId.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
+                                        legendShapeId.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
+                                        legendShapeId.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());
+                                        legendShapeId.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
+                                    }
                                 }
                             }
                             else {
@@ -12169,6 +12382,10 @@ class Legend {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
+                                    legendShapeId.setAttribute('fill-opacity', this.legendCollection[legendIndex]['opacity']);
+                                    legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['shapeBorder']['color']);
+                                    legendShapeId.setAttribute('stroke-width', this.legendCollection[legendIndex]['shapeBorder']['width']);
+                                    legendShapeId.setAttribute('stroke-opacity', this.legendCollection[legendIndex]['shapeBorder']['opacity']);
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
                                     legendTextId.setAttribute('fill', '#757575');
                                 }
@@ -12230,10 +12447,12 @@ class Legend {
                                     this.maps.toggledShapeElementId.splice(toggledShapeIdIndex, 1);
                                 }
                                 mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
+                                mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 :
+                                    this.maps.layers[k].shapeSettings.border.width).toString());
                                 mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
                                 mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
-                                    this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity).toString());
+                                    this.maps.layers[k].shapeSettings.opacity :
+                                    this.maps.layers[k].shapeSettings.border.opacity).toString());
                                 mapLegendElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
                                 if (targetEle !== null) {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
@@ -12297,7 +12516,7 @@ class Legend {
                     && isNaN(shapeData['properties'][shapePath]) ?
                     shapeData['properties'][shapePath].toLowerCase() : shapeData['properties'][shapePath];
                 if (shapeDataValueCase === dataPathValueCase) {
-                    if (shapeData['geometry']['type'] != 'MultiPoint') {
+                    if (shapeData['geometry']['type'] !== 'MultiPoint') {
                         legendData.push({
                             layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
                             name: data[dataPath], value: value, pointIndex: -1
@@ -12541,7 +12760,9 @@ class Highlight {
         }
         const borderColor = (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color);
         const borderWidth = (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale);
-        const borderOpacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity : this.highlightSettings.border.opacity;
+        const borderOpacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity :
+            this.highlightSettings.border.opacity;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const eventArgs = {
             opacity: this.highlightSettings.opacity,
             fill: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
@@ -12561,6 +12782,7 @@ class Highlight {
             maps: this.maps
         };
         if (targetEle.id.indexOf('shapeIndex') > -1) {
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
             this.maps.trigger(shapeHighlight, shapeEventArgs, () => { });
         }
         const itemEventArgs = {
@@ -12762,7 +12984,8 @@ class Selection {
         const isLineStringShape = targetElement.parentElement.id.indexOf('LineString') > -1;
         const selectionsettings = this.selectionsettings;
         const border = {
-            color: isLineStringShape ? (this.selectionsettings.fill || this.selectionsettings.border.color) : this.selectionsettings.border.color,
+            color: isLineStringShape ? (this.selectionsettings.fill || this.selectionsettings.border.color) :
+                this.selectionsettings.border.color,
             width: isLineStringShape ? (this.selectionsettings.border.width / this.maps.scale) :
                 (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)),
             opacity: this.selectionsettings.border.opacity
@@ -12779,7 +13002,8 @@ class Selection {
             maps: this.maps
         };
         this.maps.trigger('itemSelection', eventArgs, (observedArgs) => {
-            eventArgs.border.opacity = isNullOrUndefined(this.selectionsettings.border.opacity) ? this.selectionsettings.opacity : this.selectionsettings.border.opacity;
+            eventArgs.border.opacity = isNullOrUndefined(this.selectionsettings.border.opacity) ?
+                this.selectionsettings.opacity : this.selectionsettings.border.opacity;
             if (!eventArgs.cancel) {
                 if (targetElement.getAttribute('class') === this.selectionType + 'selectionMapStyle'
                     || targetElement.getAttribute('class') === 'LineselectionMapStyle') {
@@ -12931,7 +13155,6 @@ class Selection {
     }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Map Tooltip
  */
@@ -12963,7 +13186,6 @@ class MapsTooltip {
         }
         let option;
         let currentData = '';
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const targetId = target.id;
         let tooltipEle;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13112,6 +13334,7 @@ class MapsTooltip {
                 maps: this.maps,
                 element: target, eventArgs: e, content: !isNullOrUndefined(currentData) ? currentData.toString() : ''
             };
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             this.maps.trigger(tooltipRender, tooltipArgs, (args) => {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
                     (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
@@ -13128,7 +13351,8 @@ class MapsTooltip {
                             header: '',
                             data: option['data'],
                             template: option['template'],
-                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                [currentData.toString()],
                             shapes: [],
                             location: option['location'],
                             palette: [markerFill],
@@ -13144,7 +13368,8 @@ class MapsTooltip {
                             header: '',
                             data: tooltipArgs.options['data'],
                             template: tooltipArgs.options['template'],
-                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                [currentData.toString()],
                             shapes: [],
                             location: tooltipArgs.options['location'],
                             palette: [markerFill],
@@ -13456,12 +13681,13 @@ class Zoom {
         }
         this.maps.zoomNotApplied = false;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
         mapTotalWidth *= newZoomFactor;
         mapTotalHeight *= newZoomFactor;
-        let widthDiff = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
-        var translatePointX = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
-        var translatePointY = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
+        const widthDiff = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
+        const translatePointX = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
+        const translatePointY = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
         return new Point(translatePointX, translatePointY);
     }
     triggerZoomEvent(prevTilePoint, prevLevel, type) {
@@ -13704,7 +13930,8 @@ class Zoom {
                     this.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
                     this.currentLayer = maps.layersCollection[this.index];
                     const factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
-                    for (let j = 0; j < layerElement.childElementCount; j++) {
+                    const elementCount = layerElement.childElementCount;
+                    for (let j = 0; j < elementCount; j++) {
                         let currentEle = layerElement.childNodes[j];
                         if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
                             && (!(currentEle.id.indexOf('_dataLableIndex_Group') > -1))) {
@@ -13717,7 +13944,7 @@ class Zoom {
                                     layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index));
                                 }
                             }
-                            else if (currentEle.id.indexOf('Legend') == -1) {
+                            else if (currentEle.id.indexOf('Legend') === -1) {
                                 changeBorderWidth(currentEle, this.index, scale, maps);
                                 maps.zoomTranslatePoint = maps.translatePoint;
                                 this.animateTransform(currentEle, animate$$1, x, y, scale);
@@ -13795,7 +14022,6 @@ class Zoom {
                             let childElement;
                             for (let k = 0; k < currentEle.childElementCount; k++) {
                                 childElement = currentEle.childNodes[k];
-                                const bubbleTransform = childElement.getAttribute('transform');
                                 layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                                 const bubleIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
                                 const dataIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
@@ -13824,7 +14050,7 @@ class Zoom {
                             this.intersect = [];
                             maps.zoomLabelPositions = [];
                             maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
-                            let labelAnimate = !maps.isTileMap && animate$$1;
+                            const labelAnimate = !maps.isTileMap && animate$$1;
                             for (let k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     const labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
@@ -13924,7 +14150,6 @@ class Zoom {
                         const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
                         const location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, this.maps);
-                        const animate$$1 = currentLayers.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
                         const transPoint = { x: x, y: y };
                         if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
                             markerTemplateCounts++;
@@ -13993,15 +14218,12 @@ class Zoom {
     dataLabelTranslate(element, factor, x, y, scale, type, animate$$1 = false) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const labelCollection = this.maps.dataLabelModule.dataLabelCollections;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const zoomelement = element.getBoundingClientRect();
         let text;
         let trimmedLable;
         const style = this.maps.layers[this.index].dataLabelSettings.textStyle;
         let zoomtext;
         let zoomtextSize;
         let zoomtrimLabel;
-        const labelPath = this.maps.layers[this.index].dataLabelSettings.labelPath;
         const layerIndex = parseFloat(element.id.split('_LayerIndex_')[1].split('_')[0]);
         const shapeIndex = parseFloat(element.id.split('_shapeIndex_')[1].split('_')[0]);
         let labelIndex;
@@ -14029,7 +14251,6 @@ class Zoom {
                         const layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
                         labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
                         labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
-                        const templateOffset = element.getBoundingClientRect();
                         const layerOffset = layerEle.getBoundingClientRect();
                         const elementOffset = element.parentElement.getBoundingClientRect();
                         locationX = ((labelX) + (layerOffset.left - elementOffset.left));
@@ -14226,6 +14447,11 @@ class Zoom {
         }
     }
     /**
+     * @param {PanDirection} direction - Specifies the direction of the panning.
+     * @param {number} xDifference - Specifies the distance moved in the horizontal direction.
+     * @param {number} yDifference - Specifies the distance moved in the vertical direction.
+     * @param {PointerEvent | TouchEvent | KeyboardEvent} mouseLocation - Specifies the pointer event argument.
+     * @returns {void}
      * @private
      */
     panning(direction, xDifference, yDifference, mouseLocation) {
@@ -14689,7 +14915,7 @@ class Zoom {
                 }
                 break;
         }
-        let extraPosition = map.getExtraPosition();
+        const extraPosition = map.getExtraPosition();
         element.style.left = x + extraPosition.x + 'px';
         element.style.top = y + extraPosition.y + 'px';
         const color = this.maps.zoomSettings.highlightColor || this.maps.themeStyle.zoomSelectionColor;
@@ -15020,7 +15246,6 @@ class Zoom {
     }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * This module enables the print functionality in maps.
  *
@@ -15030,18 +15255,20 @@ class Print {
     /**
      * Constructor for Maps
      *
-     * @param {Maps} control - Specifies the instance of the map
+     * @param {Maps} control - Specifies the instance of the Maps
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     constructor(control) { }
     /**
      * To print the Maps
      *
-     * @param {string[] | string | Element} elements - Specifies the element
+     * @param {Maps} maps -Specifies the Maps instance.
+     * @param {string[] | string | Element} elements - Specifies the element of the Maps
      * @returns {void}
      * @private
      */
     print(maps, elements) {
-        let printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+        const printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
         printWindow.moveTo(0, 0);
         printWindow.resizeTo(screen.availWidth, screen.availHeight);
         const argsData = {
@@ -15056,13 +15283,14 @@ class Print {
     /**
      * To get the html string of the Maps
      *
+     * @param {Maps} maps -Specifies the Maps instance.
      * @param {string[] | string | Element} elements - Specifies the html element
      * @returns {Element} - Returns the div element
      * @private
      */
     getHTMLContent(maps, elements) {
-        let div = createElement('div');
-        let divElement = maps.element.cloneNode(true);
+        const div = createElement('div');
+        const divElement = maps.element.cloneNode(true);
         if (maps.isTileMap) {
             for (let i = 0; i < divElement.childElementCount; i++) {
                 if (divElement.children[i].id === maps.element.id + '_tile_parent') {
@@ -15115,10 +15343,10 @@ class Print {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() { }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * This module enables the export to Image functionality in Maps control.
  *
@@ -15130,19 +15358,21 @@ class ImageExport {
      *
      * @param {Maps} control - Specifies the instance of the map
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     constructor(control) {
     }
     /**
      * To export the file as image/svg format
      *
-     * @param {ExportType} type - Specifies the type of the image file
-     * @param {string} fileName - Specifies the file name of the image file
+     * @param {Maps} maps - Specifies the Maps instance.
+     * @param {ExportType} type - Specifies the type of the image file for exporting.
+     * @param {string} fileName - Specifies the file name of the image file for exporting.
      * @param {boolean} allowDownload - Specifies whether to download image as a file or not.
-     * @returns {Promise<string>} - Returns the promise string.
+     * @returns {Promise<string>} - Specifies the base64 string of the exported image which is returned when the allowDownload is set to false.
      * @private
      */
     export(maps, type, fileName, allowDownload) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
         const promise = new Promise((resolve, reject) => {
             const imageCanvasElement = createElement('canvas', {
                 id: 'ej2-canvas',
@@ -15152,11 +15382,10 @@ class ImageExport {
                 }
             });
             const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
-            const toolbarEle = document.getElementById(maps.element.id + '_ToolBar');
             const svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             let svgDataElement;
             let tileSvg;
-            let svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
+            const svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
             if (!maps.isTileMap) {
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
                     maps.svgObject.outerHTML + '</svg>';
@@ -15199,8 +15428,8 @@ class ImageExport {
                 }
                 else {
                     const svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
-                    let top = parseFloat(svgParentElement.getAttribute('y'));
-                    let left = parseFloat(svgParentElement.getAttribute('x'));
+                    const top = parseFloat(svgParentElement.getAttribute('y'));
+                    const left = parseFloat(svgParentElement.getAttribute('x'));
                     const imgxHttp = new XMLHttpRequest();
                     const imgTileLength = maps.mapLayerPanel.tiles.length;
                     for (let i = 0; i <= imgTileLength + 1; i++) {
@@ -15210,7 +15439,7 @@ class ImageExport {
                         ctxt.fillStyle = maps.background ? maps.background : '#FFFFFF';
                         ctxt.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                         ctxt.font = maps.titleSettings.textStyle.size + ' Arial';
-                        let titleElement = document.getElementById(maps.element.id + '_Map_title');
+                        const titleElement = document.getElementById(maps.element.id + '_Map_title');
                         if (!isNullOrUndefined(titleElement)) {
                             ctxt.fillStyle = titleElement.getAttribute('fill');
                             ctxt.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
@@ -15283,10 +15512,10 @@ class ImageExport {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     destroy() { }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * This module enables the export to PDF functionality in Maps control.
  *
@@ -15296,17 +15525,18 @@ class PdfExport {
     /**
      * Constructor for Maps
      *
-     * @param {Maps} control Specifies the instance of the map
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     constructor() { }
     /**
      * To export the file as image/svg format
      *
-     * @param {ExportType} type - Specifies the type of the document
-     * @param {string} fileName - Specifies the file name of the document
-     * @param {boolean} allowDownload - Specifies whether to download the document or not
-     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component
-     * @returns {Promise<string>} - Returns the promise string
+     * @param {Maps} maps - Specifies the Maps instance.
+     * @param {ExportType} type - Specifies the type of the document.
+     * @param {string} fileName - Specifies the name of the PDF document.
+     * @param {boolean} allowDownload - Specifies whether to download the document or not.
+     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component.
+     * @returns {Promise<string>} - Returns "null" value when the allowDownload is set to false.
      * @private
      */
     export(maps, type, fileName, allowDownload, orientation) {
@@ -15356,8 +15586,8 @@ class PdfExport {
             }
             else {
                 const svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
-                let top = parseFloat(svgParentElement.getAttribute('y'));
-                let left = parseFloat(svgParentElement.getAttribute('x'));
+                const top = parseFloat(svgParentElement.getAttribute('y'));
+                const left = parseFloat(svgParentElement.getAttribute('x'));
                 const xHttp = new XMLHttpRequest();
                 const tileLength = maps.mapLayerPanel.tiles.length;
                 for (let i = 0; i <= tileLength + 1; i++) {
@@ -15367,7 +15597,7 @@ class PdfExport {
                     ctx.fillStyle = maps.background ? maps.background : '#FFFFFF';
                     ctx.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                     ctx.font = maps.titleSettings.textStyle.size + ' Arial';
-                    let titleElement = document.getElementById(maps.element.id + '_Map_title');
+                    const titleElement = document.getElementById(maps.element.id + '_Map_title');
                     if (!isNullOrUndefined(titleElement)) {
                         ctx.fillStyle = titleElement.getAttribute('fill');
                         ctx.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
@@ -15410,7 +15640,7 @@ class PdfExport {
                         }
                         else {
                             setTimeout(() => {
-                                let tileSvg = document.getElementById(maps.element.id + '_Tile_SVG');
+                                const tileSvg = document.getElementById(maps.element.id + '_Tile_SVG');
                                 tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                             }, 300);
                         }
@@ -15439,6 +15669,7 @@ class PdfExport {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     destroy() { }
 }