@syncfusion/ej2-maps 20.2.45 → 20.3.49

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

@@ -1039,7 +1039,10 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             markerCluster.remove();
         }
         if (zoomCheck) {
-            document.getElementById(maps.element.id + '_Layer_Collections').appendChild(layerElement);
+            let layerGroupElement = document.getElementById(maps.element.id + '_Layer_Collections');
+            if (!isNullOrUndefined(layerGroupElement)) {
+                layerGroupElement.appendChild(layerElement);
+            }
         }
     });
 }
@@ -1056,15 +1059,16 @@ function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
     const markerIndex = sameMarkerData[0].markerIndex;
     const dataIndex = sameMarkerData[0].dataIndex;
     const markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    const marker = maps.layers[layerIndex].markerSettings[markerIndex];
     const clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    const clusterEle = getElement(clusterId);
+    const clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElement(clusterId + '_Group') : getElement(clusterId);
     const clusterEleLabel = getElement(clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'visible');
     clusterEleLabel.setAttribute('visibility', 'visible');
     let markerEle;
     const markerDataLength = sameMarkerData[0].data.length;
     for (let i = 0; i < markerDataLength; i++) {
-        markerEle = getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+        markerEle = marker.shape === 'Balloon' ? getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         markerEle['style']['visibility'] = 'hidden';
     }
     removeElement(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine');
@@ -1086,13 +1090,13 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     const getElementFunction = isDom ? getElement : markerElement.querySelector.bind(markerElement);
     const getQueryConnect = isDom ? '' : '#';
     const markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    const marker = maps.layers[layerIndex].markerSettings[markerIndex];
     const clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    const clusterEle = getElementFunction(getQueryConnect + '' + clusterId);
+    const clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
     const clusterEleLabel = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'hidden');
     clusterEleLabel.setAttribute('visibility', 'hidden');
-    const marker = maps.layers[layerIndex].markerSettings[markerIndex];
-    let markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
+    let markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
     const height = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().height : marker.height;
     const width = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
     const centerX = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[0];
@@ -1128,7 +1132,7 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
         const x1 = centerX + radius * Math.sin((Math.PI * 2 * newAngle) / 360);
         const y1 = centerY + radius * Math.cos((Math.PI * 2 * newAngle) / 360);
         path += start + 'L ' + (x1) + ' ' + y1 + ' ';
-        markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+        markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         if (markerEle.parentElement.id.indexOf('Template_Group') > -1) {
             markerEle['style']['transform'] = '';
             markerEle['style']['left'] = maps.isTileMap ? x1 - (width / 2) + 'px' : (x1 - (width / 2) - 10) + 'px';
@@ -1149,7 +1153,12 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     markerElement = isDom ? getElementFunction(maps.element.id + '_Markers_Group') : markerElement;
     const groupEle = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine' });
     groupEle.appendChild(maps.renderer.drawPath(options));
-    markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0'));
+    if (marker.shape === 'Balloon') {
+        markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0_Group'));
+    }
+    else {
+        markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0'));
+    }
 }
 /**
  *
@@ -1176,6 +1185,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
         dashArray: markerSettings.dashArray, borderOpacity: isNullOrUndefined(eventArgs.border.opacity) ? markerSettings.opacity :
             eventArgs.border.opacity
     };
+    removeElement(markerID);
     const ele = drawSymbols(eventArgs.shape, eventArgs.imageUrl, { x: 0, y: 0 }, markerID, shapeCustom, markerCollection, maps);
     const x = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x;
     const y = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y;
@@ -1553,7 +1563,7 @@ function drawBalloon(maps, options, size, location, type, element) {
     const y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
     if (type === 'Marker') {
-        const g = maps.renderer.createGroup({ id: options.id });
+        const g = maps.renderer.createGroup({ id: options.id + '_Group' });
         appendShape(balloon, g);
         pathElement = appendShape(g, element);
     }
@@ -1624,7 +1634,7 @@ function checkShapeDataFields(dataSource, properties, dataPath, propertyPath, la
                 dataSource[i][dataPath]);
             const shapePath = checkPropertyPath(shapeDataPath, propertyPath, properties);
             const shapeDataPathValue = !isNullOrUndefined(shapeDataPath) && isNaN(properties[shapePath])
-                ? shapeDataPath.toLowerCase() : shapeDataPath;
+                ? (typeof shapeDataPath === 'string' ? shapeDataPath.toLowerCase() : shapeDataPath) : shapeDataPath;
             const propertiesShapePathValue = !isNullOrUndefined(properties[shapePath]) && isNaN(properties[shapePath])
                 ? properties[shapePath].toLowerCase() : properties[shapePath];
             if (shapeDataPathValue === propertiesShapePathValue) {
@@ -1648,7 +1658,8 @@ function checkPropertyPath(shapeData, shapePropertyPath, shape) {
             const properties = (Object.prototype.toString.call(shapePropertyPath) === '[object Array]' ?
                 shapePropertyPath : [shapePropertyPath]);
             for (let i = 0; i < properties.length; i++) {
-                const shapeDataValue = !isNullOrUndefined(shapeData) ? shapeData.toLowerCase() : shapeData;
+                const shapeDataValue = !isNullOrUndefined(shapeData) && typeof shapeData === 'string' ?
+                    shapeData.toLowerCase() : shapeData;
                 const shapePropertiesValue = !isNullOrUndefined(shape[properties[i]])
                     && isNaN(shape[properties[i]])
                     ? shape[properties[i]].toLowerCase() : shape[properties[i]];
@@ -1973,6 +1984,7 @@ function getTranslate(mapObject, layer, animate) {
                     mapHeight = size.height;
                 }
                 scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
                 mapWidth *= scaleFactor;
                 mapHeight *= scaleFactor;
                 const widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
@@ -2023,6 +2035,7 @@ function getTranslate(mapObject, layer, animate) {
                     else {
                         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;
                             x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
                             mapHeight *= scaleFactor;
@@ -3062,8 +3075,7 @@ function animate(element, delay, duration, process, end) {
             window.cancelAnimationFrame(clearAnimation);
             end.call(this, { element: element });
             if (element.id.indexOf('Marker') > -1) {
-                console.log(element);
-                let markerElement = getElementByID(element.id.split('_')[0] + '_Markers_Group');
+                let markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
                 markerElement.setAttribute('style', markerStyle);
             }
         }
@@ -4640,42 +4652,42 @@ class Marker {
         this.trackElements = [];
         this.sameMarkerData = [];
     }
-    markerRender(layerElement, layerIndex, factor, type) {
+    markerRender(maps, layerElement, layerIndex, factor, type) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let templateFn;
         let markerCount = 0;
         let nullCount = 0;
         let markerTemplateCount = 0;
-        this.maps.translateType = 'marker';
-        const currentLayer = this.maps.layersCollection[layerIndex];
-        this.markerSVGObject = this.maps.renderer.createGroup({
-            id: this.maps.element.id + '_Markers_Group',
+        maps.translateType = 'marker';
+        const currentLayer = maps.layersCollection[layerIndex];
+        this.markerSVGObject = maps.renderer.createGroup({
+            id: maps.element.id + '_Markers_Group',
             class: 'GroupElement',
             style: 'pointer-events: auto;'
         });
         const markerTemplateEle = createElement('div', {
-            id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
-            className: this.maps.element.id + '_template',
+            id: maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
+            className: maps.element.id + '_template',
             styles: 'overflow: hidden; position: absolute;pointer-events: none;' +
-                'top:' + this.maps.mapAreaRect.y + 'px;' +
-                'left:' + this.maps.mapAreaRect.x + 'px;' +
-                'height:' + this.maps.mapAreaRect.height + 'px;' +
-                'width:' + this.maps.mapAreaRect.width + 'px;'
+                'top:' + maps.mapAreaRect.y + 'px;' +
+                'left:' + maps.mapAreaRect.x + 'px;' +
+                'height:' + maps.mapAreaRect.height + 'px;' +
+                'width:' + maps.mapAreaRect.width + 'px;'
         });
         currentLayer.markerSettings.map((markerSettings, markerIndex) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerData = markerSettings.dataSource;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, (data, dataIndex) => {
-                this.maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : this.maps.markerNullCount;
+                maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                 let eventArgs = {
                     cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
                     width: markerSettings.width, imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
-                    template: markerSettings.template, data: data, maps: this.maps, marker: markerSettings,
+                    template: markerSettings.template, data: data, maps: maps, marker: markerSettings,
                     border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
                     shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
                 };
-                this.maps.trigger('markerRendering', eventArgs, (MarkerArgs) => {
+                maps.trigger('markerRendering', eventArgs, (MarkerArgs) => {
                     eventArgs = markerColorChoose(eventArgs, data);
                     eventArgs = markerShapeChoose(eventArgs, data);
                     const lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
@@ -4686,56 +4698,56 @@ class Marker {
                         parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
                     const offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
-                        const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                        const markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
-                        let location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, this.maps);
-                        const animate$$1 = currentLayer.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
+                        let location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+                        const animate$$1 = currentLayer.animationDuration !== 0 || isNullOrUndefined(maps.zoomModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const translate = (this.maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(this.maps.zoomModule)) ? location = convertTileLatLongToPoint(new MapLocation(lng, lat), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : new Object() :
-                            !isNullOrUndefined(this.maps.zoomModule) && this.maps.zoomSettings.zoomFactor > 1 ?
-                                getZoomTranslate(this.maps, currentLayer, animate$$1) :
-                                getTranslate(this.maps, currentLayer, animate$$1);
-                        const scale = type === 'AddMarker' ? this.maps.scale : translate['scale'];
-                        const transPoint = type === 'AddMarker' ? this.maps.translatePoint : translate['location'];
+                        const translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object() :
+                            !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
+                                getZoomTranslate(maps, currentLayer, animate$$1) :
+                                getTranslate(maps, currentLayer, animate$$1);
+                        const scale = type === 'AddMarker' ? maps.scale : translate['scale'];
+                        const transPoint = type === 'AddMarker' ? maps.translatePoint : translate['location'];
                         if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
                             markerTemplateCount++;
-                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location, transPoint, scale, offset, this.maps);
+                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location, transPoint, scale, offset, maps);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            this.maps.renderReactTemplates();
+                            maps.renderReactTemplates();
                         }
                         else if (!eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
                             markerCount++;
-                            marker(eventArgs, markerSettings, markerData, dataIndex, location, transPoint, markerID, offset, scale, this.maps, this.markerSVGObject);
+                            marker(eventArgs, markerSettings, markerData, dataIndex, location, transPoint, markerID, offset, scale, maps, this.markerSVGObject);
                         }
                     }
                     nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
                     markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
                     markerCount += (eventArgs.cancel) ? 1 : 0;
-                    this.maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ? this.maps.markerNullCount + 1 : this.maps.markerNullCount;
-                    const markerDataLength = markerData.length - this.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);
                         if (currentLayer.markerClusterSettings.allowClustering) {
-                            this.maps.svgObject.appendChild(this.markerSVGObject);
-                            this.maps.element.appendChild(this.maps.svgObject);
+                            maps.svgObject.appendChild(this.markerSVGObject);
+                            maps.element.appendChild(maps.svgObject);
                             if ((currentLayer.layerType === 'OSM' || (currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData)))
-                                && this.maps.zoomSettings.enable) {
+                                && maps.zoomSettings.enable) {
                                 layerElement.appendChild(this.markerSVGObject);
                             }
                             else {
-                                clusterTemplate(currentLayer, this.markerSVGObject, this.maps, layerIndex, this.markerSVGObject, layerElement, true, false);
+                                clusterTemplate(currentLayer, this.markerSVGObject, maps, layerIndex, this.markerSVGObject, layerElement, true, false);
                             }
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            this.maps.renderReactTemplates();
+                            maps.renderReactTemplates();
                         }
                     }
-                    if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
-                        getElementByID(this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
-                        if (this.maps.checkInitialRender) {
+                    if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
+                        getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
+                        if (maps.checkInitialRender) {
                             if (currentLayer.markerClusterSettings.allowClustering) {
-                                clusterTemplate(currentLayer, markerTemplateEle, this.maps, layerIndex, this.markerSVGObject, layerElement, false, false);
+                                clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, this.markerSVGObject, layerElement, false, false);
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                this.maps.renderReactTemplates();
+                                maps.renderReactTemplates();
                             }
                         }
                     }
@@ -4978,7 +4990,7 @@ class Marker {
                 }
                 if ((target.indexOf('_cluster_') > -1)) {
                     let isClusterSame = false;
-                    const clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? target.split('_datalabel_')[0] : target);
+                    const clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? layer.markerClusterSettings.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : layer.markerClusterSettings.shape === 'Balloon' ? target + '_Group' : target);
                     const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerHTML.split(',').map(Number) : clusterElement.innerHTML.split(',').map(Number);
                     collection = [];
                     for (const i of indexes) {
@@ -5047,14 +5059,14 @@ class Marker {
     /**
      * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the map
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.maps = null;
+        this.trackElements = [];
+        this.markerSVGObject = null;
+        this.sameMarkerData = [];
     }
 }
 
@@ -5288,6 +5300,13 @@ class BingMap {
             return '';
         }
     }
+    /**
+     * @private
+     */
+    destroy() {
+        this.maps = null;
+        this.subDomains = [];
+    }
 }
 
 /**
@@ -5701,7 +5720,7 @@ class LayerPanel {
             panel.layerObject.appendChild(panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex));
         }
         if (panel.mapObject.markerModule) {
-            panel.mapObject.markerModule.markerRender(panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
+            panel.mapObject.markerModule.markerRender(this.mapObject, panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
         }
         panel.translateLayerElements(panel.layerObject, layerIndex);
         panel.layerGroup.appendChild(panel.layerObject);
@@ -5779,7 +5798,7 @@ class LayerPanel {
                             proxy.renderTileLayer(proxy, layer, layerIndex, bing);
                             this.mapObject.arrangeTemplate();
                             if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
-                                this.mapObject.zoomModule.applyTransform(true);
+                                this.mapObject.zoomModule.applyTransform(this.mapObject, true);
                             }
                         };
                         ajax.send();
@@ -5823,7 +5842,7 @@ class LayerPanel {
         proxy.renderTileLayer(proxy, layer, layerIndex, bing);
         this.mapObject.arrangeTemplate();
         if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
-            this.mapObject.zoomModule.applyTransform(true);
+            this.mapObject.zoomModule.applyTransform(this.mapObject, true);
         }
     }
     bubbleCalculation(bubbleSettings, range) {
@@ -6114,6 +6133,7 @@ class LayerPanel {
         pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
             (currentShapeData['property'][properties]) : ''));
         pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + index + 3).toString());
+        pathEle.setAttribute('role', '');
         if (drawingType === 'LineString' || drawingType === 'MultiLineString') {
             pathEle.setAttribute('style', 'outline:none');
         }
@@ -6188,7 +6208,7 @@ class LayerPanel {
             this.layerObject.appendChild(element);
         });
         if (this.mapObject.markerModule) {
-            this.mapObject.markerModule.markerRender(this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
+            this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
                 : this.currentFactor), null);
         }
         this.translateLayerElements(this.layerObject, layerIndex);
@@ -6738,6 +6758,7 @@ class LayerPanel {
                     imgElement.setAttribute('height', '256px');
                     imgElement.setAttribute('width', '256px');
                     imgElement.setAttribute('src', tile.src);
+                    imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
                     const mapId = this.mapObject.element.id;
                     imgElement.onload = () => {
                         if (document.getElementById(mapId + '_tile_' + id) && type === 'Pan') {
@@ -6845,7 +6866,7 @@ class LayerPanel {
             '&zoom=' + zoom + '&center=' + center + '&maptype=' + mapType + '&key=' + apikey;
         document.getElementById(this.mapObject.element.id + '_tile_parent').innerHTML
             = '<div id="' + this.mapObject.element.id + '_StaticGoogleMap"' + 'style="position:absolute; left:' + eleWidth + 'px; top:'
-                + eleHeight + 'px"><img src="' + staticMapString + '"></div>';
+                + eleHeight + 'px"><img src="' + staticMapString + '"' + 'alt="' + this.mapObject.getLocalizedLabel('ImageNotFound') + '"></div>';
     }
     /**
      * To find the tile translate point
@@ -6903,6 +6924,27 @@ class LayerPanel {
         this.mapObject.previousTileHeight = factorY;
         return new Point(x, y);
     }
+    /**
+     * @returns {void}
+     * @private
+     */
+    destroy() {
+        this.mapObject = null;
+        this.groupElements = [];
+        this.layerObject = null;
+        this.currentLayer = null;
+        this.rectBounds = null;
+        this.tiles = [];
+        this.clipRectElement = null;
+        this.tileSvgObject = null;
+        this.ajaxModule = null;
+        this.ajaxResponse = [];
+        this.layerGroup = null;
+        if (!isNullOrUndefined(this.bing)) {
+            this.bing.destroy();
+        }
+        this.bing = null;
+    }
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -7015,12 +7057,11 @@ class Annotations {
     /**
      * To destroy the annotation.
      *
-     * @param {Maps} map - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    destroy(map) {
-        // Destroy method performed here
+    destroy() {
+        this.map = null;
     }
 }
 
@@ -7366,7 +7407,9 @@ let Maps = class Maps extends Component {
             this.dataLabelShape = [];
         }
         this.mapLayerPanel.measureLayerPanel();
-        this.element.appendChild(this.svgObject);
+        if (!isNullOrUndefined(this.svgObject)) {
+            this.element.appendChild(this.svgObject);
+        }
         const position = this.getExtraPosition();
         for (let i = 0; i < this.layers.length; i++) {
             if (position.x !== 0 || position.y !== 0) {
@@ -7555,6 +7598,7 @@ let Maps = class Maps extends Component {
      */
     addTabIndex() {
         this.element.setAttribute('aria-label', this.description || 'Maps Element');
+        this.element.setAttribute('role', '');
         this.element.setAttribute('tabindex', this.tabIndex.toString());
     }
     // private setSecondaryElementPosition(): void {
@@ -7619,7 +7663,7 @@ let Maps = class Maps extends Component {
                 }
             }
             if (this.zoomModule && (this.previousScale !== this.scale)) {
-                this.zoomModule.applyTransform(true);
+                this.zoomModule.applyTransform(this, true);
             }
         }
     }
@@ -7796,6 +7840,7 @@ let Maps = class Maps extends Component {
             const titleBounds = new Rect(location.x, location.y, elementSize.width, elementSize.height);
             const element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
             element.setAttribute('aria-label', this.description || title.text);
+            element.setAttribute('role', '');
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
                 height = Math.abs((titleBounds.y + this.margin.bottom) - this.availableSize.height);
                 this.mapAreaRect = new Rect(this.margin.left, titleBounds.y + 10, width, height - 10);
@@ -8371,7 +8416,7 @@ let Maps = class Maps extends Component {
                 this.scale = zoomFactor;
                 this.translatePoint.x = ((mapRect.left < svgRect.left ? x : 0) + (size.width / 2) - (position.x * zoomFactor)) / zoomFactor;
                 this.translatePoint.y = ((mapRect.top < svgRect.top ? y : 0) + (size.height / 2) - (position.y * zoomFactor)) / zoomFactor;
-                this.zoomModule.applyTransform();
+                this.zoomModule.applyTransform(this);
             }
             else {
                 position = { x: size.width / 2, y: size.height / 2 };
@@ -8449,7 +8494,7 @@ let Maps = class Maps extends Component {
                 this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
             }
             const markerModule = new Marker(this);
-            markerModule.markerRender(layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+            markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
             this.arrangeTemplate();
         }
     }
@@ -8494,7 +8539,7 @@ let Maps = class Maps extends Component {
                     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) ? name.toLowerCase() : name;
+                    const shapeName = !isNullOrUndefined(name) && typeof name === 'string' ? name.toLowerCase() : name;
                     let k;
                     if (propertyName === shapeName) {
                         if (!isNullOrUndefined(this.layers[layerIndex].shapeSettings.colorValuePath)) {
@@ -8655,7 +8700,8 @@ let Maps = class Maps extends Component {
             Zoom: 'Zoom',
             ZoomOut: 'Zoom out',
             Pan: 'Pan',
-            Reset: 'Reset'
+            Reset: 'Reset',
+            ImageNotFound: 'Image Not Found'
         };
     }
     /**
@@ -8663,6 +8709,7 @@ let Maps = class Maps extends Component {
      */
     destroy() {
         this.unWireEVents();
+        super.destroy();
         this.shapeSelectionItem = [];
         this.toggledShapeElementId = [];
         this.toggledLegendId = [];
@@ -8677,11 +8724,14 @@ let Maps = class Maps extends Component {
         this.zoomLabelPositions = [];
         this.mouseDownEvent = { x: null, y: null };
         this.mouseClickEvent = { x: null, y: null };
+        this.formatFunction = null;
+        //TODO: Calling the below code throws spec issue.
+        //this.renderer = null;
+        this.availableSize = new Size(0, 0);
         if (document.getElementById('mapsmeasuretext')) {
             document.getElementById('mapsmeasuretext').remove();
         }
         this.removeSvg();
-        super.destroy();
     }
     /**
      * Gets component name
@@ -8993,7 +9043,7 @@ let Maps = class Maps extends Component {
      */
     print(id) {
         if ((this.allowPrint) && (this.printModule)) {
-            this.printModule.print(id);
+            this.printModule.print(this, id);
         }
     }
     /**
@@ -9011,12 +9061,12 @@ let Maps = class Maps extends Component {
         }
         if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
             return new Promise((resolve, reject) => {
-                resolve(this.imageExportModule.export(type, fileName, allowDownload));
+                resolve(this.imageExportModule.export(this, type, fileName, allowDownload));
             });
         }
         else if ((this.allowPdfExport) && (this.pdfExportModule)) {
             return new Promise((resolve, reject) => {
-                resolve(this.pdfExportModule.export(type, fileName, allowDownload, orientation));
+                resolve(this.pdfExportModule.export(this, type, fileName, allowDownload, orientation));
             });
         }
         return null;
@@ -9591,14 +9641,13 @@ class Bubble {
     /**
      * To destroy the bubble.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.bubbleCollection = [];
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
     }
 }
 
@@ -9620,10 +9669,10 @@ class DataLabel {
         for (let i = 0; i < dataSource.length; i++) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const data = dataSource[i];
-            const dataShapePathValue = !isNullOrUndefined(data[shapeDataPath]) && isNaN(data[shapeDataPath]) ?
-                data[shapeDataPath].toLowerCase() : data[shapeDataPath];
-            shapeName = !isNullOrUndefined(shapeName) ? shapeName.toString() : shapeName;
-            shapeNameValue = !isNullOrUndefined(shapeName) ? shapeName.toLowerCase() : shapeName;
+            const dataShapePathValue = !isNullOrUndefined(data[shapeDataPath]) && isNaN(data[shapeDataPath]) &&
+                typeof data[shapeDataPath] === 'string' ? data[shapeDataPath].toLowerCase() : data[shapeDataPath];
+            shapeName = !isNullOrUndefined(shapeName) && typeof shapeName === 'string' ? shapeName.toString() : shapeName;
+            shapeNameValue = !isNullOrUndefined(shapeName) && typeof shapeName === 'string' ? shapeName.toLowerCase() : shapeName;
             if ((dataShapePathValue) === shapeNameValue) {
                 text = data;
                 break;
@@ -9794,7 +9843,7 @@ class DataLabel {
             const eventargs = {
                 name: dataLabelRendering, maps: this.maps, cancel: false, border: { color: dataLabel.border.color,
                     width: dataLabel.border.width, opacity: dataLabel.border.opacity }, datalabel: dataLabel,
-                fill: dataLabel.fill, template: dataLabel.template, text: text
+                fill: dataLabel.fill, template: dataLabel.template, text: text, offsetX: 0, offsetY: 0
             };
             this.maps.trigger('dataLabelRendering', eventargs, (labelArgs) => {
                 if (eventargs.cancel) {
@@ -9844,8 +9893,8 @@ class DataLabel {
                         datasrcObj : shapeData['properties'], this.maps, eventargs.template, this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                     templateElement.innerHTML = !templateFn ? eventargs.template : '';
                     labelElement = convertElementFromLabel(templateElement, labelId, !isNullOrUndefined(datasrcObj) ? datasrcObj : shapeData['properties'], index, this.maps);
-                    labelElement.style.left = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location['x'])) * scale) + 'px';
-                    labelElement.style.top = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location['y'])) * scale) + 'px';
+                    labelElement.style.left = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location['x'])) * scale) + labelArgs.offsetX + 'px';
+                    labelElement.style.top = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location['y'])) * scale) + labelArgs.offsetY + 'px';
                     labelTemplateElement.appendChild(labelElement);
                 }
                 else {
@@ -9933,26 +9982,26 @@ class DataLabel {
                                 y = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
                             }
                             border.opacity = isNullOrUndefined(border.opacity) ? opacity : border.opacity;
-                            const rectOptions = new RectOption(this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border, opacity, new Rect(x, y, textSize['width'], textSize['height']), rx, ry);
+                            const rectOptions = new RectOption(this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border, opacity, new Rect((x + labelArgs.offsetX), (y + labelArgs.offsetY), textSize['width'], textSize['height']), rx, ry);
                             const rect = this.maps.renderer.drawRectangle(rectOptions);
                             group.appendChild(rect);
                         }
                     }
                     element = renderTextElement(options, style, style.color || this.maps.themeStyle.dataLabelFontColor, group);
                     if (zoomLabelsPosition && scaleZoomValue > 1 && !this.maps.zoomNotApplied) {
-                        element.setAttribute('transform', 'translate( ' + ((location['x'])) + ' '
-                            + (((location['y']))) + ' )');
+                        element.setAttribute('transform', 'translate( ' + ((location['x'] + labelArgs.offsetX)) + ' '
+                            + (((location['y'] + labelArgs.offsetY))) + ' )');
                         location['x'] = locationX;
                         location['y'] = locationY;
                     }
                     else {
-                        element.setAttribute('transform', 'translate( ' + ((location['x'] + transPoint.x) * scale) + ' '
-                            + (((location['y'] + transPoint.y) * scale) + (elementSize.height / 4)) + ' )');
+                        element.setAttribute('transform', 'translate( ' + (((location['x'] + transPoint.x) * scale) + labelArgs.offsetX) + ' '
+                            + ((((location['y'] + transPoint.y) * scale) + (elementSize.height / 4)) + labelArgs.offsetY) + ' )');
                     }
                     group.appendChild(element);
                 }
                 this.dataLabelCollections.push({
-                    location: { x: location['x'], y: location['y'] },
+                    location: { x: location['x'] + labelArgs.offsetX, y: location['y'] + labelArgs.offsetY },
                     element: isNullOrUndefined(labelElement) ? element : labelElement,
                     layerIndex: layerIndex,
                     shapeIndex: sublayerIndexLabel ? oldIndex : index,
@@ -9995,16 +10044,14 @@ class DataLabel {
         return 'DataLabel';
     }
     /**
-     * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.dataLabelCollections = [];
+        this.value = null;
+        this.maps = null;
     }
 }
 
@@ -10155,14 +10202,11 @@ class NavigationLine {
     /**
      * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the map
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.maps = null;
     }
 }
 
@@ -11919,6 +11963,9 @@ class Legend {
                                 '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                 '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                             if (!isNullOrUndefined(shape['shape']) && shape['shape'] === 'Balloon') {
+                                mapElement = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
+                                    '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
+                                    '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id);
                                 mapElement = mapElement.children[0];
                             }
                             if (isVisible && mapElement !== null) {
@@ -12060,6 +12107,9 @@ class Legend {
                                 '_BubbleIndex_' + j + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
                                 '_MarkerIndex_' + j + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id);
                             if (!isNullOrUndefined(mapdata['shape']) && mapdata['shape'] === 'Balloon') {
+                                LegendInteractive = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
+                                    '_BubbleIndex_' + j + '_dataIndex_' + mapdata['dataIndex'] + '_Group', this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
+                                    '_MarkerIndex_' + j + '_dataIndex_' + mapdata['dataIndex'] + '_Group', this.maps.element.id);
                                 LegendInteractive = LegendInteractive.children[0];
                             }
                             if (isVisible && LegendInteractive !== null) {
@@ -12218,10 +12268,11 @@ class Legend {
                 const shapeData = layerData[i];
                 const dataPathValue = (dataPath.indexOf('.') > -1) ? getValueFromObject(data, dataPath) : data[dataPath];
                 const shapePath = checkPropertyPath(data[dataPath], shapePropertyPath, shapeData['properties']);
-                const dataPathValueCase = !isNullOrUndefined(dataPathValue)
-                    ? dataPathValue.toLowerCase() : dataPathValue;
+                const dataPathValueCase = !isNullOrUndefined(dataPathValue) &&
+                    typeof dataPathValue === 'string' ? dataPathValue.toLowerCase() : dataPathValue;
                 const shapeDataValueCase = !isNullOrUndefined(shapeData['properties'][shapePath])
-                    && isNaN(shapeData['properties'][shapePath]) ? shapeData['properties'][shapePath].toLowerCase() : shapeData['properties'][shapePath];
+                    && isNaN(shapeData['properties'][shapePath]) ?
+                    shapeData['properties'][shapePath].toLowerCase() : shapeData['properties'][shapePath];
                 if (shapeDataValueCase === dataPathValueCase) {
                     if (shapeData['geometry']['type'] != 'MultiPoint') {
                         legendData.push({
@@ -12282,15 +12333,30 @@ class Legend {
     /**
      * To destroy the legend.
      *
-     * @param {Maps} maps - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.legendCollection = [];
+        this.legendRenderingCollections = [];
+        this.translate = null;
+        this.legendBorderRect = null;
+        this.initialMapAreaRect = null;
+        this.legendTotalRect = null;
+        this.totalPages = [];
+        this.legendItemRect = null;
+        this.legendGroup = null;
+        this.shapeHighlightCollection = [];
+        this.legendHighlightCollection = [];
+        this.shapePreviousColor = [];
+        this.selectedNonLegendShapes = [];
+        this.legendLinearGradient = null;
+        this.currentLayer = null;
+        this.defsElement = null;
+        this.legendElement = [];
+        this.oldShapeElement = null;
         this.removeEventListener();
+        this.maps = null;
     }
 }
 
@@ -12507,15 +12573,13 @@ class Highlight {
     /**
      * To destroy the highlight.
      *
-     * @param {Maps} maps - Specifies the maps instance
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.highlightSettings = null;
         this.removeEventListener();
+        this.maps = null;
     }
 }
 
@@ -12811,15 +12875,13 @@ class Selection {
     /**
      * To destroy the selection.
      *
-     * @param {Maps} maps - Specifies the maps instance.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.selectionsettings = null;
         this.removeEventListener();
+        this.maps = null;
     }
 }
 
@@ -13192,12 +13254,17 @@ class MapsTooltip {
     /**
      * To destroy the tooltip.
      *
-     * @param {Maps} maps Specifies the maps instance
      * @returns {void}
      * @private
      */
-    destroy(maps) {
+    destroy() {
+        if (!isNullOrUndefined(this.svgTooltip)) {
+            this.svgTooltip.destroy();
+        }
+        this.svgTooltip = null;
         this.removeEventListener();
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
     }
 }
 
@@ -13210,7 +13277,6 @@ class Zoom {
         this.mouseEnter = false;
         this.isTouch = false;
         this.rectZoomingStart = false;
-        this.pinchRect = new Rect(0, 0, 0, 0);
         this.browserName = Browser.info.name;
         // eslint-disable-next-line @typescript-eslint/ban-types
         this.isPointer = Browser.isPointer;
@@ -13234,7 +13300,6 @@ class Zoom {
         this.selectionColor = this.maps.zoomSettings.selectionColor;
         this.fillColor = this.maps.zoomSettings.color;
         this.addEventListener();
-        this.groupElements = [];
     }
     /**
      * To perform zooming for maps
@@ -13274,6 +13339,7 @@ class Zoom {
                     mapTotalHeight = availSize.height;
                 }
                 newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
                 map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
             }
             else {
@@ -13291,7 +13357,7 @@ class Zoom {
                 map.scale = map.mapScaleValue = map.previousScale;
             }
             else {
-                this.applyTransform();
+                this.applyTransform(map);
             }
         }
         else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
@@ -13335,7 +13401,7 @@ class Zoom {
                     //         element1 = element1;
                     //     }
                     // }
-                    this.applyTransform();
+                    this.applyTransform(this.maps);
                     if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                         document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                     }
@@ -13437,7 +13503,7 @@ class Zoom {
             }
             if (!isZoomCancelled) {
                 map.mapScaleValue = zoomCalculationFactor;
-                this.applyTransform(true);
+                this.applyTransform(map, true);
                 this.maps.zoomNotApplied = false;
                 this.zoomingRect = null;
             }
@@ -13486,6 +13552,7 @@ class Zoom {
                     mapTotalHeight = availSize.height;
                 }
                 zoomCalculationFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                zoomCalculationFactor = zoomCalculationFactor > 1.05 ? 1 : zoomCalculationFactor;
                 map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomCalculationFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
             }
             else {
@@ -13524,7 +13591,7 @@ class Zoom {
             }
         }
         if (!isZoomCancelled) {
-            this.applyTransform();
+            this.applyTransform(map);
         }
     }
     drawZoomRectangle() {
@@ -13571,17 +13638,17 @@ class Zoom {
             zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
         }
     }
-    applyTransform(animate$$1) {
+    applyTransform(maps, animate$$1) {
         let layerIndex;
         this.templateCount = 0;
         let markerStyle;
-        const scale = this.maps.scale;
-        const x = this.maps.translatePoint.x;
-        const y = this.maps.translatePoint.y;
+        const scale = maps.scale;
+        const x = maps.translatePoint.x;
+        const y = maps.translatePoint.y;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.maps.zoomShapeCollection = [];
-        if (document.getElementById(this.maps.element.id + '_mapsTooltip')) {
-            removeElement(this.maps.element.id + '_mapsTooltip');
+        maps.zoomShapeCollection = [];
+        if (document.getElementById(maps.element.id + '_mapsTooltip')) {
+            removeElement(maps.element.id + '_mapsTooltip');
         }
         if (this.layerCollectionEle) {
             for (let i = 0; i < this.layerCollectionEle.childElementCount; i++) {
@@ -13589,29 +13656,29 @@ class Zoom {
                 if (layerElement.tagName === 'g') {
                     this.templateCount++;
                     this.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
-                    this.currentLayer = this.maps.layersCollection[this.index];
-                    const factor = this.maps.mapLayerPanel.calculateFactor(this.currentLayer);
+                    this.currentLayer = maps.layersCollection[this.index];
+                    const factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
                     for (let j = 0; j < layerElement.childElementCount; 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))) {
-                            if (this.maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
+                            if (maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
                                 currentEle.remove();
                                 if (layerElement.children.length > 0 && layerElement.children[0]) {
-                                    layerElement.insertBefore(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index), layerElement.children[1]);
+                                    layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index), layerElement.children[1]);
                                 }
                                 else {
-                                    layerElement.appendChild(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index));
+                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index));
                                 }
                             }
                             else if (currentEle.id.indexOf('Legend') == -1) {
-                                changeBorderWidth(currentEle, this.index, scale, this.maps);
-                                this.maps.zoomTranslatePoint = this.maps.translatePoint;
+                                changeBorderWidth(currentEle, this.index, scale, maps);
+                                maps.zoomTranslatePoint = maps.translatePoint;
                                 this.animateTransform(currentEle, animate$$1, x, y, scale);
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if (!this.isPanning) {
+                            if (!this.isPanning && !isNullOrUndefined(currentEle.childNodes[0])) {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate$$1);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -13630,11 +13697,11 @@ class Zoom {
                                             markerSelectionValues['latitude'] ||
                                             this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x]['longitude'] ===
                                                 markerSelectionValues['longitude']) {
-                                            this.maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, this.maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
+                                            maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
                                         }
                                     }
-                                    if ((this.currentLayer.animationDuration > 0 || (this.maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
-                                        if (this.maps.isTileMap) {
+                                    if ((this.currentLayer.animationDuration > 0 || (maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
+                                        if (maps.isTileMap) {
                                             const groupElement = document.querySelector('.GroupElement');
                                             if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
                                                 groupElement.style.display = 'none';
@@ -13646,29 +13713,29 @@ class Zoom {
                                         }
                                     }
                                 }
-                                if (this.isPanning && this.maps.markerModule.sameMarkerData.length > 0) {
-                                    clusterSeparate(this.maps.markerModule.sameMarkerData, this.maps, currentEle, true);
+                                if (this.isPanning && maps.markerModule.sameMarkerData.length > 0) {
+                                    clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
                                 }
-                                else if (this.maps.markerModule.sameMarkerData.length > 0) {
-                                    this.maps.markerModule.sameMarkerData = [];
-                                    if (document.getElementById(this.maps.element.id + '_mapsTooltip')) {
-                                        removeElement(this.maps.element.id + '_mapsTooltip');
+                                else if (maps.markerModule.sameMarkerData.length > 0) {
+                                    maps.markerModule.sameMarkerData = [];
+                                    if (document.getElementById(maps.element.id + '_mapsTooltip')) {
+                                        removeElement(maps.element.id + '_mapsTooltip');
                                     }
                                 }
-                                if (document.getElementById(this.maps.element.id + '_mapsTooltip') && this.maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
+                                if (document.getElementById(maps.element.id + '_mapsTooltip') && maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
                                     && !this.isPanning) {
-                                    const mapsTooltip = this.maps.mapsTooltipModule;
+                                    const mapsTooltip = maps.mapsTooltipModule;
                                     const tooltipElement = currentEle.querySelector('#' + mapsTooltip.tooltipTargetID);
                                     if (!isNullOrUndefined(tooltipElement)) {
                                         if (tooltipElement['style']['visibility'] === 'hidden') {
-                                            removeElement(this.maps.element.id + '_mapsTooltip');
+                                            removeElement(maps.element.id + '_mapsTooltip');
                                         }
                                         else {
                                             let x = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[1]);
                                             let y = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[2]);
-                                            if (this.maps.isTileMap) {
-                                                x += +getElement(this.maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
-                                                y += +getElement(this.maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
+                                            if (maps.isTileMap) {
+                                                x += +getElement(maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
+                                                y += +getElement(maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
                                             }
                                             mapsTooltip.svgTooltip.location.x = x;
                                             mapsTooltip.svgTooltip.location.y = y;
@@ -13686,9 +13753,9 @@ class Zoom {
                                 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]);
-                                for (let l = 0; l < this.maps.bubbleModule.bubbleCollection.length; l++) {
+                                for (let l = 0; l < maps.bubbleModule.bubbleCollection.length; l++) {
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                    const bubbleCollection = this.maps.bubbleModule.bubbleCollection[l];
+                                    const bubbleCollection = maps.bubbleModule.bubbleCollection[l];
                                     if (bubbleCollection['LayerIndex'] === layerIndex && bubbleCollection['BubbleIndex'] === bubleIndex &&
                                         bubbleCollection['DataIndex'] === dataIndex) {
                                         const centerX = bubbleCollection['center']['x'];
@@ -13707,25 +13774,25 @@ class Zoom {
                                 }
                             }
                         }
-                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(this.maps.layers[this.index])) {
+                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this.index])) {
                             this.intersect = [];
-                            this.maps.zoomLabelPositions = [];
-                            this.maps.zoomLabelPositions = this.maps.dataLabelModule.dataLabelCollections;
-                            let labelAnimate = !this.maps.isTileMap && animate$$1;
+                            maps.zoomLabelPositions = [];
+                            maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
+                            let 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]);
                                     this.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
-                                    this.maps.zoomShapeCollection.push(this.zoomshapewidth);
+                                    maps.zoomShapeCollection.push(this.zoomshapewidth);
                                     this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate);
-                                    const dataLabel = this.maps.layers[this.index].dataLabelSettings;
+                                    const dataLabel = maps.layers[this.index].dataLabelSettings;
                                     const border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
-                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1) {
-                                            const labelX = ((this.maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
-                                            const labelY = ((this.maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
+                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !isNullOrUndefined(maps.zoomLabelPositions[labelIndex])) {
+                                            const labelX = ((maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
+                                            const labelY = ((maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
                                             const zoomtext = currentEle.childNodes[k]['innerHTML'];
-                                            const style = this.maps.layers[this.index].dataLabelSettings.textStyle;
+                                            const style = maps.layers[this.index].dataLabelSettings.textStyle;
                                             const zoomtextSize = measureText(zoomtext, style);
                                             const padding = 5;
                                             const rectElement = currentEle.childNodes[k - 1];
@@ -13740,11 +13807,11 @@ class Zoom {
                         }
                     }
                 }
-                this.maps.arrangeTemplate();
+                maps.arrangeTemplate();
             }
             if (!isNullOrUndefined(this.currentLayer)) {
-                if (!animate$$1 || this.currentLayer.animationDuration === 0 || this.maps.isTileMap) {
-                    this.processTemplate(x, y, scale, this.maps);
+                if (!animate$$1 || this.currentLayer.animationDuration === 0 || maps.isTileMap) {
+                    this.processTemplate(x, y, scale, maps);
                 }
             }
         }
@@ -14144,15 +14211,15 @@ class Zoom {
             if (!panArgs.cancel) {
                 if (panningXDirection && panningYDirection) {
                     map.translatePoint = new Point(x, y);
-                    this.applyTransform();
+                    this.applyTransform(map);
                 }
                 else if (panningXDirection) {
                     map.translatePoint = new Point(x, map.translatePoint.y);
-                    this.applyTransform();
+                    this.applyTransform(map);
                 }
                 else if (panningYDirection) {
                     map.translatePoint = new Point(map.translatePoint.x, y);
-                    this.applyTransform();
+                    this.applyTransform(map);
                 }
             }
             this.maps.zoomNotApplied = false;
@@ -14180,7 +14247,7 @@ class Zoom {
             };
             map.trigger(pan, panArgs);
             map.mapLayerPanel.generateTiles(map.tileZoomLevel, map.tileTranslatePoint, 'Pan');
-            this.applyTransform();
+            this.applyTransform(map);
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
@@ -14192,7 +14259,7 @@ class Zoom {
             (this.distanceX / this.maps.scale)) : this.maps.translatePoint.x;
         this.maps.translatePoint.y = !isNullOrUndefined(this.distanceY) ? this.maps.translatePoint.y -
             (this.distanceY / this.maps.scale) : this.maps.translatePoint.y;
-        this.applyTransform(false);
+        this.applyTransform(this.maps, false);
     }
     toolBarZooming(zoomFactor, type) {
         const map = this.maps;
@@ -14229,6 +14296,7 @@ class Zoom {
                     mapHeight = size.height;
                 }
                 zoomFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                zoomFactor = zoomFactor > 1.05 ? 1 : zoomFactor;
                 map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomFactor, mapWidth, mapHeight, size, min, map);
             }
             else {
@@ -14248,7 +14316,7 @@ class Zoom {
                 map.scale = map.previousScale;
             }
             else {
-                this.applyTransform(true);
+                this.applyTransform(map, true);
             }
         }
         else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
@@ -14286,7 +14354,7 @@ class Zoom {
                     const element1 = document.getElementById(this.maps.element.id + '_tiles');
                     const animationDuration = this.maps.layersCollection[0].animationDuration;
                     setTimeout(() => {
-                        this.applyTransform(true);
+                        this.applyTransform(this.maps, true);
                         if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                             document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                         }
@@ -14299,6 +14367,8 @@ class Zoom {
     }
     createZoomingToolbars() {
         const map = this.maps;
+        let zoomInElements;
+        let zoomOutElements;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
             opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
@@ -14316,7 +14386,6 @@ class Zoom {
         const toolBarLength = map.zoomSettings.toolbars.length;
         const toolWidth = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (toolBarLength * kitWidth) + (toolBarLength * padding) : (kitWidth * 2);
         const toolHeight = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (kitHeight * 2) : (toolBarLength * kitHeight) + (toolBarLength * padding);
-        this.toolBarGroup.appendChild(map.renderer.drawRectangle(new RectOption(map.element.id + '_Zooming_Rect', 'transparent', { color: 'transparent', width: 1 }, 1, new Rect(0, 0, toolWidth, toolHeight), 0, 0)));
         const defElement = map.renderer.createDefs();
         defElement.innerHTML = shadowElement;
         this.toolBarGroup.appendChild(defElement);
@@ -14365,13 +14434,13 @@ class Zoom {
                 case 'zoomin':
                     direction = 'M 8, 0 L 8, 16 M 0, 8 L 16, 8';
                     this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar + '_Path', fill, 3, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction)));
-                    this.zoomInElements = this.currentToolbarEle;
+                    zoomInElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 case 'zoomout':
                     direction = 'M 0, 8 L 16, 8';
                     this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar, fill, 3, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction)));
-                    this.zoomOutElements = this.currentToolbarEle;
+                    zoomOutElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 case 'pan': {
@@ -14868,15 +14937,30 @@ class Zoom {
     /**
      * To destroy the zoom.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
+    destroy() {
+        this.toolBarGroup = null;
+        this.currentToolbarEle = null;
+        this.zoomingRect = null;
+        this.zoomElements = null;
+        this.panElements = null;
+        this.baseTranslatePoint = null;
+        this.touchStartList = null;
+        this.touchMoveList = null;
+        this.previousTouchMoveList = null;
+        this.mouseDownPoints = null;
+        this.mouseMovePoints = null;
+        this.startTouches = [];
+        this.zoomshapewidth = null;
+        this.intersect = [];
+        this.mouseDownLatLong = null;
+        this.mouseMoveLatLong = null;
         this.removeEventListener();
-        /**
-         * Destroy method performed here
-         */
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
+        this.currentLayer = null;
     }
 }
 
@@ -14892,9 +14976,7 @@ class Print {
      *
      * @param {Maps} control - Specifies the instance of the map
      */
-    constructor(control) {
-        this.control = control;
-    }
+    constructor(control) { }
     /**
      * To print the Maps
      *
@@ -14902,16 +14984,16 @@ class Print {
      * @returns {void}
      * @private
      */
-    print(elements) {
-        this.printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
-        this.printWindow.moveTo(0, 0);
-        this.printWindow.resizeTo(screen.availWidth, screen.availHeight);
+    print(maps, elements) {
+        let printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+        printWindow.moveTo(0, 0);
+        printWindow.resizeTo(screen.availWidth, screen.availHeight);
         const argsData = {
-            cancel: false, htmlContent: this.getHTMLContent(elements), name: beforePrint
+            cancel: false, htmlContent: this.getHTMLContent(maps, elements), name: beforePrint
         };
-        this.control.trigger('beforePrint', argsData, (beforePrintArgs) => {
+        maps.trigger('beforePrint', argsData, (beforePrintArgs) => {
             if (!argsData.cancel) {
-                print(argsData.htmlContent, this.printWindow);
+                print(argsData.htmlContent, printWindow);
             }
         });
     }
@@ -14922,20 +15004,19 @@ class Print {
      * @returns {Element} - Returns the div element
      * @private
      */
-    getHTMLContent(elements) {
-        const elementRect = getClientElement(this.control.element.id);
+    getHTMLContent(maps, elements) {
         let div = createElement('div');
-        let divElement = this.control.element.cloneNode(true);
-        if (this.control.isTileMap) {
+        let divElement = maps.element.cloneNode(true);
+        if (maps.isTileMap) {
             for (let i = 0; i < divElement.childElementCount; i++) {
-                if (divElement.children[i].id === this.control.element.id + '_tile_parent') {
+                if (divElement.children[i].id === maps.element.id + '_tile_parent') {
                     divElement.children[i].style.removeProperty('height');
                     divElement.children[i].style.removeProperty('width');
                     divElement.children[i].style.removeProperty('top');
                     divElement.children[i].style.removeProperty('left');
                     divElement.children[i].style.removeProperty('right');
                     divElement.children[i].style.removeProperty('overflow');
-                    const svgElement = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
+                    const svgElement = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
                     divElement.children[i].children[0].style.overflow = 'hidden';
                     divElement.children[i].children[0].style.position = 'absolute';
                     divElement.children[i].children[0].style.height = svgElement.style.height;
@@ -14975,15 +15056,10 @@ class Print {
     /**
      * To destroy the print.
      *
-     * @param {Maps} maps - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
-    }
+    destroy() { }
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -14999,7 +15075,6 @@ class ImageExport {
      * @param {Maps} control - Specifies the instance of the map
      */
     constructor(control) {
-        this.control = control;
     }
     /**
      * To export the file as image/svg format
@@ -15010,28 +15085,28 @@ class ImageExport {
      * @returns {Promise<string>} - Returns the promise string.
      * @private
      */
-    export(type, fileName, allowDownload) {
+    export(maps, type, fileName, allowDownload) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const promise = new Promise((resolve, reject) => {
             const imageCanvasElement = createElement('canvas', {
                 id: 'ej2-canvas',
                 attrs: {
-                    'width': this.control.availableSize.width.toString(),
-                    'height': this.control.availableSize.height.toString()
+                    'width': maps.availableSize.width.toString(),
+                    'height': maps.availableSize.height.toString()
                 }
             });
             const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
-            const toolbarEle = document.getElementById(this.control.element.id + '_ToolBar');
-            const svgParent = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
+            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(this.control.element.id + '_svg').cloneNode(true);
-            if (!this.control.isTileMap) {
+            let 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">' +
-                    this.control.svgObject.outerHTML + '</svg>';
+                    maps.svgObject.outerHTML + '</svg>';
             }
             else {
-                tileSvg = getElementByID(this.control.element.id + '_Tile_SVG').cloneNode(true);
+                tileSvg = getElementByID(maps.element.id + '_Tile_SVG').cloneNode(true);
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
                     svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
             }
@@ -15048,7 +15123,7 @@ class ImageExport {
             else {
                 const image = new Image();
                 const ctxt = imageCanvasElement.getContext('2d');
-                if (!this.control.isTileMap) {
+                if (!maps.isTileMap) {
                     image.onload = (() => {
                         ctxt.drawImage(image, 0, 0);
                         window.URL.revokeObjectURL(url);
@@ -15067,22 +15142,22 @@ class ImageExport {
                     image.src = url;
                 }
                 else {
-                    const svgParentElement = document.getElementById(this.control.element.id + '_MapAreaBorder');
+                    const svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
                     let top = parseFloat(svgParentElement.getAttribute('y'));
                     let left = parseFloat(svgParentElement.getAttribute('x'));
                     const imgxHttp = new XMLHttpRequest();
-                    const imgTileLength = this.control.mapLayerPanel.tiles.length;
+                    const imgTileLength = maps.mapLayerPanel.tiles.length;
                     for (let i = 0; i <= imgTileLength + 1; i++) {
-                        const tile = document.getElementById(this.control.element.id + '_tile_' + (i - 1));
+                        const tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                         const exportTileImg = new Image();
                         exportTileImg.crossOrigin = 'Anonymous';
-                        ctxt.fillStyle = this.control.background ? this.control.background : '#FFFFFF';
-                        ctxt.fillRect(0, 0, this.control.availableSize.width, this.control.availableSize.height);
-                        ctxt.font = this.control.titleSettings.textStyle.size + ' Arial';
-                        let titleElement = document.getElementById(this.control.element.id + '_Map_title');
+                        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');
                         if (!isNullOrUndefined(titleElement)) {
                             ctxt.fillStyle = titleElement.getAttribute('fill');
-                            ctxt.fillText(this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                            ctxt.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
                         }
                         exportTileImg.onload = (() => {
                             if (i === 0 || i === imgTileLength + 1) {
@@ -15096,7 +15171,6 @@ class ImageExport {
                                 }
                             }
                             else {
-                                const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
                                 ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left, parseFloat(tile.style.top) +
                                     top);
                             }
@@ -15150,15 +15224,10 @@ class ImageExport {
     /**
      * To destroy the ImageExport.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
-    }
+    destroy() { }
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -15173,9 +15242,7 @@ class PdfExport {
      *
      * @param {Maps} control Specifies the instance of the map
      */
-    constructor(control) {
-        this.control = control;
-    }
+    constructor() { }
     /**
      * To export the file as image/svg format
      *
@@ -15186,24 +15253,24 @@ class PdfExport {
      * @returns {Promise<string>} - Returns the promise string
      * @private
      */
-    export(type, fileName, allowDownload, orientation) {
+    export(maps, type, fileName, allowDownload, orientation) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const promise = new Promise((resolve, reject) => {
             const canvasElement = createElement('canvas', {
                 id: 'ej2-canvas',
                 attrs: {
-                    'width': this.control.availableSize.width.toString(),
-                    'height': this.control.availableSize.height.toString()
+                    'width': maps.availableSize.width.toString(),
+                    'height': maps.availableSize.height.toString()
                 }
             });
             orientation = isNullOrUndefined(orientation) ? PdfPageOrientation.Landscape : orientation;
-            const svgParent = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
+            const svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             let svgData;
-            const exportElement = this.control.svgObject.cloneNode(true);
+            const exportElement = maps.svgObject.cloneNode(true);
             const backgroundElement = exportElement.childNodes[0];
             const backgroundColor = backgroundElement.getAttribute('fill');
-            if ((this.control.theme === 'Tailwind' || this.control.theme === 'TailwindDark' || this.control.theme === 'Bootstrap5' || this.control.theme === 'Bootstrap5Dark'
-                || this.control.theme === 'Fluent' || this.control.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            if ((maps.theme === 'Tailwind' || maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5' || maps.theme === 'Bootstrap5Dark'
+                || maps.theme === 'Fluent' || maps.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
             const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
@@ -15211,7 +15278,7 @@ class PdfExport {
             const pdfDocument = new PdfDocument();
             const image = new Image();
             const ctx = canvasElement.getContext('2d');
-            if (!this.control.isTileMap) {
+            if (!maps.isTileMap) {
                 image.onload = (() => {
                     ctx.drawImage(image, 0, 0);
                     window.URL.revokeObjectURL(url);
@@ -15219,7 +15286,7 @@ class PdfExport {
                         let imageString = canvasElement.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
                         pdfDocument.pageSettings.orientation = orientation;
                         imageString = imageString.slice(imageString.indexOf(',') + 1);
-                        pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(imageString), 0, 0, (this.control.availableSize.width - 60), this.control.availableSize.height);
+                        pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(imageString), 0, 0, (maps.availableSize.width - 60), maps.availableSize.height);
                         if (allowDownload) {
                             pdfDocument.save(fileName + '.pdf');
                             pdfDocument.destroy();
@@ -15232,22 +15299,22 @@ class PdfExport {
                 image.src = url;
             }
             else {
-                const svgParentElement = document.getElementById(this.control.element.id + '_MapAreaBorder');
+                const svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
                 let top = parseFloat(svgParentElement.getAttribute('y'));
                 let left = parseFloat(svgParentElement.getAttribute('x'));
                 const xHttp = new XMLHttpRequest();
-                const tileLength = this.control.mapLayerPanel.tiles.length;
+                const tileLength = maps.mapLayerPanel.tiles.length;
                 for (let i = 0; i <= tileLength + 1; i++) {
-                    const tile = document.getElementById(this.control.element.id + '_tile_' + (i - 1));
+                    const tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                     const tileImg = new Image();
                     tileImg.crossOrigin = 'Anonymous';
-                    ctx.fillStyle = this.control.background ? this.control.background : '#FFFFFF';
-                    ctx.fillRect(0, 0, this.control.availableSize.width, this.control.availableSize.height);
-                    ctx.font = this.control.titleSettings.textStyle.size + ' Arial';
-                    let titleElement = document.getElementById(this.control.element.id + '_Map_title');
+                    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');
                     if (!isNullOrUndefined(titleElement)) {
                         ctx.fillStyle = titleElement.getAttribute('fill');
-                        ctx.fillText(this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                        ctx.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
                     }
                     tileImg.onload = (() => {
                         if (i === 0 || i === tileLength + 1) {
@@ -15261,7 +15328,6 @@ class PdfExport {
                             }
                         }
                         else {
-                            const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
                             ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left, parseFloat(tile.style.top) + top);
                         }
                         ctx.drawImage(tileImg, 0, 0);
@@ -15271,7 +15337,7 @@ class PdfExport {
                                 let x = localStorage.getItem('saved-image-example');
                                 pdfDocument.pageSettings.orientation = orientation;
                                 x = x.slice(x.indexOf(',') + 1);
-                                pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(x), 0, 0, (this.control.availableSize.width - 60), this.control.availableSize.height);
+                                pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(x), 0, 0, (maps.availableSize.width - 60), maps.availableSize.height);
                                 if (allowDownload) {
                                     pdfDocument.save(fileName + '.pdf');
                                     pdfDocument.destroy();
@@ -15288,7 +15354,7 @@ class PdfExport {
                         }
                         else {
                             setTimeout(() => {
-                                let tileSvg = document.getElementById(this.control.element.id + '_Tile_SVG');
+                                let tileSvg = document.getElementById(maps.element.id + '_Tile_SVG');
                                 tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                             }, 300);
                         }
@@ -15312,17 +15378,12 @@ class PdfExport {
         return 'PdfExport';
     }
     /**
-     * To destroy the PdfExports.
+     * To destroy the PdfExport.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps) {
-        /**
-         * Destroy method performed here
-         */
-    }
+    destroy() { }
 }
 
 /**