@syncfusion/ej2-maps 20.2.43 → 20.3.47

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

@@ -1092,7 +1092,10 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             markerCluster.remove();
         }
         if (zoomCheck) {
-            document.getElementById(maps.element.id + '_Layer_Collections').appendChild(layerElement);
+            var layerGroupElement = document.getElementById(maps.element.id + '_Layer_Collections');
+            if (!isNullOrUndefined(layerGroupElement)) {
+                layerGroupElement.appendChild(layerElement);
+            }
         }
     });
 }
@@ -1109,15 +1112,16 @@ function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
     var markerIndex = sameMarkerData[0].markerIndex;
     var dataIndex = sameMarkerData[0].dataIndex;
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    var clusterEle = getElement(clusterId);
+    var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElement(clusterId + '_Group') : getElement(clusterId);
     var clusterEleLabel = getElement(clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'visible');
     clusterEleLabel.setAttribute('visibility', 'visible');
     var markerEle;
     var markerDataLength = sameMarkerData[0].data.length;
     for (var 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');
@@ -1139,13 +1143,13 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     var getElementFunction = isDom ? getElement : markerElement.querySelector.bind(markerElement);
     var getQueryConnect = isDom ? '' : '#';
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    var clusterEle = getElementFunction(getQueryConnect + '' + clusterId);
+    var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
     var clusterEleLabel = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'hidden');
     clusterEleLabel.setAttribute('visibility', 'hidden');
-    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
-    var markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
+    var markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
     var height = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().height : marker.height;
     var width = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
     var centerX = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[0];
@@ -1181,7 +1185,7 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
         var x1 = centerX + radius * Math.sin((Math.PI * 2 * newAngle) / 360);
         var 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';
@@ -1202,7 +1206,12 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     markerElement = isDom ? getElementFunction(maps.element.id + '_Markers_Group') : markerElement;
     var 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'));
+    }
 }
 /**
  *
@@ -1229,6 +1238,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
         dashArray: markerSettings.dashArray, borderOpacity: isNullOrUndefined(eventArgs.border.opacity) ? markerSettings.opacity :
             eventArgs.border.opacity
     };
+    removeElement(markerID);
     var ele = drawSymbols(eventArgs.shape, eventArgs.imageUrl, { x: 0, y: 0 }, markerID, shapeCustom, markerCollection, maps);
     var x = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x;
     var y = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y;
@@ -1606,7 +1616,7 @@ function drawBalloon(maps, options, size, location, type, element) {
     var y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
     if (type === 'Marker') {
-        var g = maps.renderer.createGroup({ id: options.id });
+        var g = maps.renderer.createGroup({ id: options.id + '_Group' });
         appendShape(balloon, g);
         pathElement = appendShape(g, element);
     }
@@ -2029,6 +2039,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;
                 var widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
@@ -2079,6 +2090,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;
@@ -3120,8 +3132,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);
-                var markerElement = getElementByID(element.id.split('_')[0] + '_Markers_Group');
+                var markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
                 markerElement.setAttribute('style', markerStyle);
             }
         }
@@ -4858,43 +4869,43 @@ var Marker = /** @__PURE__ @class */ (function () {
         this.trackElements = [];
         this.sameMarkerData = [];
     }
-    Marker.prototype.markerRender = function (layerElement, layerIndex, factor, type) {
+    Marker.prototype.markerRender = function (maps, layerElement, layerIndex, factor, type) {
         var _this = this;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var templateFn;
         var markerCount = 0;
         var nullCount = 0;
         var markerTemplateCount = 0;
-        this.maps.translateType = 'marker';
-        var currentLayer = this.maps.layersCollection[layerIndex];
-        this.markerSVGObject = this.maps.renderer.createGroup({
-            id: this.maps.element.id + '_Markers_Group',
+        maps.translateType = 'marker';
+        var currentLayer = maps.layersCollection[layerIndex];
+        this.markerSVGObject = maps.renderer.createGroup({
+            id: maps.element.id + '_Markers_Group',
             class: 'GroupElement',
             style: 'pointer-events: auto;'
         });
         var 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(function (markerSettings, markerIndex) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-                _this.maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : _this.maps.markerNullCount;
+                maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                 var 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, function (MarkerArgs) {
+                maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
                     eventArgs = markerColorChoose(eventArgs, data);
                     eventArgs = markerShapeChoose(eventArgs, data);
                     var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
@@ -4905,56 +4916,56 @@ var Marker = /** @__PURE__ @class */ (function () {
                         parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
                     var offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
-                        var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                        var markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
-                        var location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, _this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, _this.maps);
-                        var animate$$1 = currentLayer.animationDuration !== 0 || isNullOrUndefined(_this.maps.zoomModule);
+                        var location_1 = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+                        var animate$$1 = currentLayer.animationDuration !== 0 || isNullOrUndefined(maps.zoomModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var translate = (_this.maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(_this.maps.zoomModule)) ? location_1 = 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);
-                        var scale = type === 'AddMarker' ? _this.maps.scale : translate['scale'];
-                        var transPoint = type === 'AddMarker' ? _this.maps.translatePoint : translate['location'];
+                        var translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = 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);
+                        var scale = type === 'AddMarker' ? maps.scale : translate['scale'];
+                        var transPoint = type === 'AddMarker' ? maps.translatePoint : translate['location'];
                         if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
                             markerTemplateCount++;
-                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, _this.maps);
+                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, maps);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            _this.maps.renderReactTemplates();
+                            maps.renderReactTemplates();
                         }
                         else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
                             markerCount++;
-                            marker(eventArgs, markerSettings, markerData, dataIndex, location_1, transPoint, markerID, offset, scale, _this.maps, _this.markerSVGObject);
+                            marker(eventArgs, markerSettings, markerData, dataIndex, location_1, 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;
-                    var markerDataLength = markerData.length - _this.maps.markerNullCount;
+                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ? maps.markerNullCount + 1 : maps.markerNullCount;
+                    var markerDataLength = markerData.length - maps.markerNullCount;
                     if (_this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(_this.markerSVGObject);
                         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();
                             }
                         }
                     }
@@ -5197,7 +5208,7 @@ var Marker = /** @__PURE__ @class */ (function () {
                 }
                 if ((target.indexOf('_cluster_') > -1)) {
                     var isClusterSame = false;
-                    var clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? target.split('_datalabel_')[0] : target);
+                    var 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);
                     var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerHTML.split(',').map(Number) : clusterElement.innerHTML.split(',').map(Number);
                     collection_1 = [];
                     for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
@@ -5267,14 +5278,14 @@ var Marker = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the map
      * @returns {void}
      * @private
      */
-    Marker.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Marker.prototype.destroy = function () {
+        this.maps = null;
+        this.trackElements = [];
+        this.markerSVGObject = null;
+        this.sameMarkerData = [];
     };
     return Marker;
 }());
@@ -5509,6 +5520,13 @@ var BingMap = /** @__PURE__ @class */ (function () {
             return '';
         }
     };
+    /**
+     * @private
+     */
+    BingMap.prototype.destroy = function () {
+        this.maps = null;
+        this.subDomains = [];
+    };
     return BingMap;
 }());
 
@@ -5926,7 +5944,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             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);
@@ -6005,7 +6023,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                             proxy_1.renderTileLayer(proxy_1, layer, layerIndex, bing_1);
                             _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();
@@ -6049,7 +6067,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         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);
         }
     };
     LayerPanel.prototype.bubbleCalculation = function (bubbleSettings, range) {
@@ -6345,6 +6363,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
             (currentShapeData['property'][properties]) : ''));
         pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + index + 3).toString());
+        pathEle.setAttribute('role', '');
         if (drawingType === 'LineString' || drawingType === 'MultiLineString') {
             pathEle.setAttribute('style', 'outline:none');
         }
@@ -6424,7 +6443,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             _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);
@@ -6981,6 +7000,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                     imgElement.setAttribute('height', '256px');
                     imgElement.setAttribute('width', '256px');
                     imgElement.setAttribute('src', tile.src);
+                    imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
                     var mapId = _this.mapObject.element.id;
                     imgElement.onload = function () {
                         if (document.getElementById(mapId + '_tile_' + id) && type === 'Pan') {
@@ -7092,7 +7112,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             '&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
@@ -7150,6 +7170,27 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         this.mapObject.previousTileHeight = factorY;
         return new Point(x, y);
     };
+    /**
+     * @returns {void}
+     * @private
+     */
+    LayerPanel.prototype.destroy = function () {
+        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;
+    };
     return LayerPanel;
 }());
 
@@ -7265,12 +7306,11 @@ var Annotations = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the annotation.
      *
-     * @param {Maps} map - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    Annotations.prototype.destroy = function (map) {
-        // Destroy method performed here
+    Annotations.prototype.destroy = function () {
+        this.map = null;
     };
     return Annotations;
 }());
@@ -7645,7 +7685,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             this.dataLabelShape = [];
         }
         this.mapLayerPanel.measureLayerPanel();
-        this.element.appendChild(this.svgObject);
+        if (!isNullOrUndefined(this.svgObject)) {
+            this.element.appendChild(this.svgObject);
+        }
         var position = this.getExtraPosition();
         for (var i = 0; i < this.layers.length; i++) {
             if (position.x !== 0 || position.y !== 0) {
@@ -7834,6 +7876,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.addTabIndex = function () {
         this.element.setAttribute('aria-label', this.description || 'Maps Element');
+        this.element.setAttribute('role', '');
         this.element.setAttribute('tabindex', this.tabIndex.toString());
     };
     // private setSecondaryElementPosition(): void {
@@ -7898,7 +7941,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (this.zoomModule && (this.previousScale !== this.scale)) {
-                this.zoomModule.applyTransform(true);
+                this.zoomModule.applyTransform(this, true);
             }
         }
     };
@@ -8076,6 +8119,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             var titleBounds = new Rect(location_1.x, location_1.y, elementSize.width, elementSize.height);
             var 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);
@@ -8653,7 +8697,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 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 };
@@ -8732,7 +8776,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
             }
             var markerModule = new Marker(this);
-            markerModule.markerRender(layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+            markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
             this.arrangeTemplate();
         }
     };
@@ -8939,7 +8983,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             Zoom: 'Zoom',
             ZoomOut: 'Zoom out',
             Pan: 'Pan',
-            Reset: 'Reset'
+            Reset: 'Reset',
+            ImageNotFound: 'Image Not Found'
         };
     };
     /**
@@ -8947,6 +8992,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.destroy = function () {
         this.unWireEVents();
+        _super.prototype.destroy.call(this);
         this.shapeSelectionItem = [];
         this.toggledShapeElementId = [];
         this.toggledLegendId = [];
@@ -8961,11 +9007,14 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         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.prototype.destroy.call(this);
     };
     /**
      * Gets component name
@@ -9281,7 +9330,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.print = function (id) {
         if ((this.allowPrint) && (this.printModule)) {
-            this.printModule.print(id);
+            this.printModule.print(this, id);
         }
     };
     /**
@@ -9300,12 +9349,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
             return new Promise(function (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(function (resolve, reject) {
-                resolve(_this.pdfExportModule.export(type, fileName, allowDownload, orientation));
+                resolve(_this.pdfExportModule.export(_this, type, fileName, allowDownload, orientation));
             });
         }
         return null;
@@ -9891,14 +9940,13 @@ var Bubble = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the bubble.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    Bubble.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Bubble.prototype.destroy = function () {
+        this.bubbleCollection = [];
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
     };
     return Bubble;
 }());
@@ -10096,7 +10144,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
             var eventargs_1 = {
                 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_1, function (labelArgs) {
                 if (eventargs_1.cancel) {
@@ -10146,8 +10194,8 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                         datasrcObj : shapeData['properties'], _this.maps, eventargs_1.template, _this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                     templateElement.innerHTML = !templateFn ? eventargs_1.template : '';
                     labelElement = convertElementFromLabel(templateElement, labelId, !isNullOrUndefined(datasrcObj) ? datasrcObj : shapeData['properties'], index, _this.maps);
-                    labelElement.style.left = ((Math.abs(_this.maps.baseMapRectBounds['min']['x'] - location['x'])) * scale) + '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 {
@@ -10235,26 +10283,26 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                                 y = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
                             }
                             border_1.opacity = isNullOrUndefined(border_1.opacity) ? opacity : border_1.opacity;
-                            var rectOptions = new RectOption(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border_1, opacity, new Rect(x, y, textSize['width'], textSize['height']), rx, ry);
+                            var rectOptions = new RectOption(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border_1, opacity, new Rect((x + labelArgs.offsetX), (y + labelArgs.offsetY), textSize['width'], textSize['height']), rx, ry);
                             var 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,
@@ -10297,16 +10345,14 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         return 'DataLabel';
     };
     /**
-     * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    DataLabel.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    DataLabel.prototype.destroy = function () {
+        this.dataLabelCollections = [];
+        this.value = null;
+        this.maps = null;
     };
     return DataLabel;
 }());
@@ -10376,8 +10422,8 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
             for (var j = 0; j < point['length'] - 1; j++) {
                 angle = (-1 > angle) ? -1 : angle;
                 angle = (1 < angle) ? 1 : angle;
-                var arcId_1 = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
-                var radius_1 = this.convertRadius(point[j], point[j + 1]);
+                var arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
+                var radius = this.convertRadius(point[j], point[j + 1]);
                 if (angle <= 1 && angle > 0) {
                     direction = 0;
                     if (point[j]['x'] > point[j + 1]['x']) {
@@ -10422,10 +10468,10 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
                     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_1 / 2 + (1 - angle) * radius_1 / (angle * 10)) +
-                            ' ' + (radius_1 / 2 + (1 - angle) * radius_1 / (angle * 10)) + ' ' + 0 + ',' + 0 + ','
+                        '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_1, 'none', width, color, 1, 1, dashArray, d);
+                    pathOption = new PathOption(arcId, 'none', width, color, 1, 1, dashArray, d);
                     navigationEle = this.maps.renderer.drawPath(pathOption);
                     if (!isNullOrUndefined(arrowPosition)) {
                         var position = (arrowPosition === 'Start') ? navigationEle.setAttribute('marker-start', startArrow)
@@ -10458,14 +10504,11 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the map
      * @returns {void}
      * @private
      */
-    NavigationLine.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    NavigationLine.prototype.destroy = function () {
+        this.maps = null;
     };
     return NavigationLine;
 }());
@@ -12240,6 +12283,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 '_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) {
@@ -12381,6 +12427,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 '_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) {
@@ -12603,15 +12652,30 @@ var Legend = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the legend.
      *
-     * @param {Maps} maps - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    Legend.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Legend.prototype.destroy = function () {
+        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;
     };
     return Legend;
 }());
@@ -12830,15 +12894,13 @@ var Highlight = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the highlight.
      *
-     * @param {Maps} maps - Specifies the maps instance
      * @returns {void}
      * @private
      */
-    Highlight.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Highlight.prototype.destroy = function () {
+        this.highlightSettings = null;
         this.removeEventListener();
+        this.maps = null;
     };
     return Highlight;
 }());
@@ -13136,15 +13198,13 @@ var Selection = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the selection.
      *
-     * @param {Maps} maps - Specifies the maps instance.
      * @returns {void}
      * @private
      */
-    Selection.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Selection.prototype.destroy = function () {
+        this.selectionsettings = null;
         this.removeEventListener();
+        this.maps = null;
     };
     return Selection;
 }());
@@ -13521,12 +13581,17 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the tooltip.
      *
-     * @param {Maps} maps Specifies the maps instance
      * @returns {void}
      * @private
      */
-    MapsTooltip.prototype.destroy = function (maps) {
+    MapsTooltip.prototype.destroy = function () {
+        if (!isNullOrUndefined(this.svgTooltip)) {
+            this.svgTooltip.destroy();
+        }
+        this.svgTooltip = null;
         this.removeEventListener();
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
     };
     return MapsTooltip;
 }());
@@ -13540,7 +13605,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         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;
@@ -13564,7 +13628,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.selectionColor = this.maps.zoomSettings.selectionColor;
         this.fillColor = this.maps.zoomSettings.color;
         this.addEventListener();
-        this.groupElements = [];
     }
     /**
      * To perform zooming for maps
@@ -13605,6 +13668,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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 {
@@ -13622,7 +13686,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 map.scale = map.mapScaleValue = map.previousScale;
             }
             else {
-                this.applyTransform();
+                this.applyTransform(map);
             }
         }
         else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
@@ -13666,7 +13730,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     //         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';
                     }
@@ -13768,7 +13832,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
             if (!isZoomCancelled) {
                 map.mapScaleValue = zoomCalculationFactor;
-                this.applyTransform(true);
+                this.applyTransform(map, true);
                 this.maps.zoomNotApplied = false;
                 this.zoomingRect = null;
             }
@@ -13817,6 +13881,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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 {
@@ -13855,7 +13920,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
         if (!isZoomCancelled) {
-            this.applyTransform();
+            this.applyTransform(map);
         }
     };
     Zoom.prototype.drawZoomRectangle = function () {
@@ -13902,17 +13967,17 @@ var Zoom = /** @__PURE__ @class */ (function () {
             zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
         }
     };
-    Zoom.prototype.applyTransform = function (animate$$1) {
+    Zoom.prototype.applyTransform = function (maps, animate$$1) {
         var layerIndex;
         this.templateCount = 0;
         var markerStyle;
-        var scale = this.maps.scale;
-        var x = this.maps.translatePoint.x;
-        var y = this.maps.translatePoint.y;
+        var scale = maps.scale;
+        var x = maps.translatePoint.x;
+        var 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 (var i_1 = 0; i_1 < this.layerCollectionEle.childElementCount; i_1++) {
@@ -13920,29 +13985,29 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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];
-                    var factor = this.maps.mapLayerPanel.calculateFactor(this.currentLayer);
+                    this.currentLayer = maps.layersCollection[this.index];
+                    var factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
                     for (var j = 0; j < layerElement.childElementCount; j++) {
                         var 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];
@@ -13961,11 +14026,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                             markerSelectionValues['latitude'] ||
                                             this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['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) {
                                             var groupElement = document.querySelector('.GroupElement');
                                             if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
                                                 groupElement.style.display = 'none';
@@ -13977,29 +14042,29 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         }
                                     }
                                 }
-                                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) {
-                                    var mapsTooltip = this.maps.mapsTooltipModule;
+                                    var mapsTooltip = maps.mapsTooltipModule;
                                     var 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 {
                                             var x_2 = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[1]);
                                             var y_1 = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[2]);
-                                            if (this.maps.isTileMap) {
-                                                x_2 += +getElement(this.maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
-                                                y_1 += +getElement(this.maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
+                                            if (maps.isTileMap) {
+                                                x_2 += +getElement(maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
+                                                y_1 += +getElement(maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
                                             }
                                             mapsTooltip.svgTooltip.location.x = x_2;
                                             mapsTooltip.svgTooltip.location.y = y_1;
@@ -14017,9 +14082,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                 layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                                 var bubleIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
                                 var dataIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
-                                for (var l = 0; l < this.maps.bubbleModule.bubbleCollection.length; l++) {
+                                for (var l = 0; l < maps.bubbleModule.bubbleCollection.length; l++) {
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                    var bubbleCollection = this.maps.bubbleModule.bubbleCollection[l];
+                                    var bubbleCollection = maps.bubbleModule.bubbleCollection[l];
                                     if (bubbleCollection['LayerIndex'] === layerIndex && bubbleCollection['BubbleIndex'] === bubleIndex &&
                                         bubbleCollection['DataIndex'] === dataIndex) {
                                         var centerX = bubbleCollection['center']['x'];
@@ -14038,25 +14103,25 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                 }
                             }
                         }
-                        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;
-                            var labelAnimate = !this.maps.isTileMap && animate$$1;
+                            maps.zoomLabelPositions = [];
+                            maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
+                            var labelAnimate = !maps.isTileMap && animate$$1;
                             for (var k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var 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);
-                                    var dataLabel = this.maps.layers[this.index].dataLabelSettings;
+                                    var dataLabel = maps.layers[this.index].dataLabelSettings;
                                     var border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
-                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1) {
-                                            var labelX = ((this.maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
-                                            var labelY = ((this.maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
+                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !isNullOrUndefined(maps.zoomLabelPositions[labelIndex])) {
+                                            var labelX = ((maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
+                                            var labelY = ((maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
                                             var zoomtext = currentEle.childNodes[k]['innerHTML'];
-                                            var style = this.maps.layers[this.index].dataLabelSettings.textStyle;
+                                            var style = maps.layers[this.index].dataLabelSettings.textStyle;
                                             var zoomtextSize = measureText(zoomtext, style);
                                             var padding = 5;
                                             var rectElement = currentEle.childNodes[k - 1];
@@ -14071,11 +14136,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         }
                     }
                 }
-                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);
                 }
             }
         }
@@ -14479,15 +14544,15 @@ var Zoom = /** @__PURE__ @class */ (function () {
             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;
@@ -14515,7 +14580,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             };
             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;
@@ -14527,7 +14592,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             (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);
     };
     Zoom.prototype.toolBarZooming = function (zoomFactor, type) {
         var _this = this;
@@ -14565,6 +14630,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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 {
@@ -14584,7 +14650,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 map.scale = map.previousScale;
             }
             else {
-                this.applyTransform(true);
+                this.applyTransform(map, true);
             }
         }
         else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
@@ -14622,7 +14688,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     var element1 = document.getElementById(this.maps.element.id + '_tiles');
                     var animationDuration = this.maps.layersCollection[0].animationDuration;
                     setTimeout(function () {
-                        _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';
                         }
@@ -14635,6 +14701,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
     };
     Zoom.prototype.createZoomingToolbars = function () {
         var map = this.maps;
+        var zoomInElements;
+        var zoomOutElements;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
             opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
@@ -14652,7 +14720,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var toolBarLength = map.zoomSettings.toolbars.length;
         var toolWidth = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (toolBarLength * kitWidth) + (toolBarLength * padding) : (kitWidth * 2);
         var 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)));
         var defElement = map.renderer.createDefs();
         defElement.innerHTML = shadowElement;
         this.toolBarGroup.appendChild(defElement);
@@ -14701,13 +14768,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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_1 + '_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_1, 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': {
@@ -15204,15 +15271,30 @@ var Zoom = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the zoom.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    Zoom.prototype.destroy = function (maps) {
+    Zoom.prototype.destroy = function () {
+        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;
     };
     return Zoom;
 }());
@@ -15230,7 +15312,6 @@ var Print = /** @__PURE__ @class */ (function () {
      * @param {Maps} control - Specifies the instance of the map
      */
     function Print(control) {
-        this.control = control;
     }
     /**
      * To print the Maps
@@ -15239,17 +15320,16 @@ var Print = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @private
      */
-    Print.prototype.print = function (elements) {
-        var _this = this;
-        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.prototype.print = function (maps, elements) {
+        var printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+        printWindow.moveTo(0, 0);
+        printWindow.resizeTo(screen.availWidth, screen.availHeight);
         var argsData = {
-            cancel: false, htmlContent: this.getHTMLContent(elements), name: beforePrint
+            cancel: false, htmlContent: this.getHTMLContent(maps, elements), name: beforePrint
         };
-        this.control.trigger('beforePrint', argsData, function (beforePrintArgs) {
+        maps.trigger('beforePrint', argsData, function (beforePrintArgs) {
             if (!argsData.cancel) {
-                print(argsData.htmlContent, _this.printWindow);
+                print(argsData.htmlContent, printWindow);
             }
         });
     };
@@ -15260,20 +15340,19 @@ var Print = /** @__PURE__ @class */ (function () {
      * @returns {Element} - Returns the div element
      * @private
      */
-    Print.prototype.getHTMLContent = function (elements) {
-        var elementRect = getClientElement(this.control.element.id);
+    Print.prototype.getHTMLContent = function (maps, elements) {
         var div = createElement('div');
-        var divElement = this.control.element.cloneNode(true);
-        if (this.control.isTileMap) {
+        var divElement = maps.element.cloneNode(true);
+        if (maps.isTileMap) {
             for (var 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');
-                    var svgElement = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
+                    var 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;
@@ -15313,15 +15392,10 @@ var Print = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the print.
      *
-     * @param {Maps} maps - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    Print.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
-    };
+    Print.prototype.destroy = function () { };
     return Print;
 }());
 
@@ -15338,7 +15412,6 @@ var ImageExport = /** @__PURE__ @class */ (function () {
      * @param {Maps} control - Specifies the instance of the map
      */
     function ImageExport(control) {
-        this.control = control;
     }
     /**
      * To export the file as image/svg format
@@ -15349,29 +15422,28 @@ var ImageExport = /** @__PURE__ @class */ (function () {
      * @returns {Promise<string>} - Returns the promise string.
      * @private
      */
-    ImageExport.prototype.export = function (type, fileName, allowDownload) {
-        var _this = this;
+    ImageExport.prototype.export = function (maps, type, fileName, allowDownload) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var promise = new Promise(function (resolve, reject) {
             var 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()
                 }
             });
             var isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
-            var toolbarEle = document.getElementById(_this.control.element.id + '_ToolBar');
-            var svgParent = document.getElementById(_this.control.element.id + '_Tile_SVG_Parent');
+            var toolbarEle = document.getElementById(maps.element.id + '_ToolBar');
+            var svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             var svgDataElement;
             var tileSvg;
-            var svgObject = getElementByID(_this.control.element.id + '_svg').cloneNode(true);
-            if (!_this.control.isTileMap) {
+            var 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>';
             }
@@ -15388,7 +15460,7 @@ var ImageExport = /** @__PURE__ @class */ (function () {
             else {
                 var image_1 = new Image();
                 var ctxt_1 = imageCanvasElement.getContext('2d');
-                if (!_this.control.isTileMap) {
+                if (!maps.isTileMap) {
                     image_1.onload = (function () {
                         ctxt_1.drawImage(image_1, 0, 0);
                         window.URL.revokeObjectURL(url);
@@ -15407,22 +15479,22 @@ var ImageExport = /** @__PURE__ @class */ (function () {
                     image_1.src = url;
                 }
                 else {
-                    var svgParentElement = document.getElementById(_this.control.element.id + '_MapAreaBorder');
+                    var svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
                     var top_1 = parseFloat(svgParentElement.getAttribute('y'));
                     var left_1 = parseFloat(svgParentElement.getAttribute('x'));
                     var imgxHttp = new XMLHttpRequest();
-                    var imgTileLength_1 = _this.control.mapLayerPanel.tiles.length;
+                    var imgTileLength_1 = maps.mapLayerPanel.tiles.length;
                     var _loop_1 = function (i) {
-                        var tile = document.getElementById(_this.control.element.id + '_tile_' + (i - 1));
+                        var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                         var exportTileImg = new Image();
                         exportTileImg.crossOrigin = 'Anonymous';
-                        ctxt_1.fillStyle = _this.control.background ? _this.control.background : '#FFFFFF';
-                        ctxt_1.fillRect(0, 0, _this.control.availableSize.width, _this.control.availableSize.height);
-                        ctxt_1.font = _this.control.titleSettings.textStyle.size + ' Arial';
-                        var titleElement = document.getElementById(_this.control.element.id + '_Map_title');
+                        ctxt_1.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                        ctxt_1.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
+                        ctxt_1.font = maps.titleSettings.textStyle.size + ' Arial';
+                        var titleElement = document.getElementById(maps.element.id + '_Map_title');
                         if (!isNullOrUndefined(titleElement)) {
                             ctxt_1.fillStyle = titleElement.getAttribute('fill');
-                            ctxt_1.fillText(_this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                            ctxt_1.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
                         }
                         exportTileImg.onload = (function () {
                             if (i === 0 || i === imgTileLength_1 + 1) {
@@ -15436,7 +15508,6 @@ var ImageExport = /** @__PURE__ @class */ (function () {
                                 }
                             }
                             else {
-                                var tileParent = document.getElementById(_this.control.element.id + '_tile_parent');
                                 ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) +
                                     top_1);
                             }
@@ -15493,15 +15564,10 @@ var ImageExport = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the ImageExport.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    ImageExport.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
-    };
+    ImageExport.prototype.destroy = function () { };
     return ImageExport;
 }());
 
@@ -15517,8 +15583,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
      *
      * @param {Maps} control Specifies the instance of the map
      */
-    function PdfExport(control) {
-        this.control = control;
+    function PdfExport() {
     }
     /**
      * To export the file as image/svg format
@@ -15530,25 +15595,24 @@ var PdfExport = /** @__PURE__ @class */ (function () {
      * @returns {Promise<string>} - Returns the promise string
      * @private
      */
-    PdfExport.prototype.export = function (type, fileName, allowDownload, orientation) {
-        var _this = this;
+    PdfExport.prototype.export = function (maps, type, fileName, allowDownload, orientation) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var promise = new Promise(function (resolve, reject) {
             var 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;
-            var svgParent = document.getElementById(_this.control.element.id + '_Tile_SVG_Parent');
+            var svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             var svgData;
-            var exportElement = _this.control.svgObject.cloneNode(true);
+            var exportElement = maps.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
             var 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)');
             }
             var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
@@ -15556,7 +15620,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
             var pdfDocument = new PdfDocument();
             var image = new Image();
             var ctx = canvasElement.getContext('2d');
-            if (!_this.control.isTileMap) {
+            if (!maps.isTileMap) {
                 image.onload = (function () {
                     ctx.drawImage(image, 0, 0);
                     window.URL.revokeObjectURL(url);
@@ -15564,7 +15628,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                         var 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();
@@ -15577,22 +15641,22 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                 image.src = url;
             }
             else {
-                var svgParentElement = document.getElementById(_this.control.element.id + '_MapAreaBorder');
+                var svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
                 var top_1 = parseFloat(svgParentElement.getAttribute('y'));
                 var left_1 = parseFloat(svgParentElement.getAttribute('x'));
                 var xHttp = new XMLHttpRequest();
-                var tileLength_1 = _this.control.mapLayerPanel.tiles.length;
+                var tileLength_1 = maps.mapLayerPanel.tiles.length;
                 var _loop_1 = function (i) {
-                    var tile = document.getElementById(_this.control.element.id + '_tile_' + (i - 1));
+                    var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                     var 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';
-                    var 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';
+                    var 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 = (function () {
                         if (i === 0 || i === tileLength_1 + 1) {
@@ -15606,7 +15670,6 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                             }
                         }
                         else {
-                            var tileParent = document.getElementById(_this.control.element.id + '_tile_parent');
                             ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) + top_1);
                         }
                         ctx.drawImage(tileImg, 0, 0);
@@ -15616,7 +15679,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                                 var 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();
@@ -15633,7 +15696,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                         }
                         else {
                             setTimeout(function () {
-                                var tileSvg = document.getElementById(_this.control.element.id + '_Tile_SVG');
+                                var tileSvg = document.getElementById(maps.element.id + '_Tile_SVG');
                                 tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                             }, 300);
                         }
@@ -15660,17 +15723,12 @@ var PdfExport = /** @__PURE__ @class */ (function () {
         return 'PdfExport';
     };
     /**
-     * To destroy the PdfExports.
+     * To destroy the PdfExport.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    PdfExport.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
-    };
+    PdfExport.prototype.destroy = function () { };
     return PdfExport;
 }());