@syncfusion/ej2-maps 20.2.43 → 20.3.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.43
+*  version : 20.3.47
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-maps@*",
-  "_id": "@syncfusion/ej2-maps@20.2.38",
+  "_id": "@syncfusion/ej2-maps@16.39.2",
   "_inBundle": false,
-  "_integrity": "sha512-UOiAGl0YecIdQ6KMk4w6Snl5FbAew3Sh5xIc4USb02ifGE0COIbTJRiVX3f6SwX5nN46OjfTrXdoKRsaP7ghCw==",
+  "_integrity": "sha512-wd2+ymrFzw6zBd2nH3Zl4MtTYFgp0nzEDl427hMvgwzYVOghAc/GW4NG1LpTGHtUDswjvAaYBFbY3057/sRhmA==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-20.2.38.tgz",
-  "_shasum": "1dc693b859a8fa576e66143e1a9bc74162d316e2",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-maps/-/ej2-maps-16.39.2.tgz",
+  "_shasum": "3a372223d810b5637078aa09e45b00a5298c344d",
   "_spec": "@syncfusion/ej2-maps@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -35,18 +35,18 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.43",
-    "@syncfusion/ej2-buttons": "~20.2.43",
-    "@syncfusion/ej2-compression": "~20.2.43",
-    "@syncfusion/ej2-data": "~20.2.43",
-    "@syncfusion/ej2-file-utils": "~20.2.43",
-    "@syncfusion/ej2-pdf-export": "~20.2.43",
-    "@syncfusion/ej2-svg-base": "~20.2.43"
+    "@syncfusion/ej2-base": "~20.3.47",
+    "@syncfusion/ej2-buttons": "~20.3.47",
+    "@syncfusion/ej2-compression": "~20.3.47",
+    "@syncfusion/ej2-data": "~20.3.47",
+    "@syncfusion/ej2-file-utils": "~20.3.47",
+    "@syncfusion/ej2-pdf-export": "~20.3.47",
+    "@syncfusion/ej2-svg-base": "~20.3.47"
   },
   "deprecated": false,
   "description": "The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-maps.es2015.js",
+  "es2015": "./dist/es6/ej2-maps.es5.js",
   "homepage": "https://github.com/syncfusion/ej2-javascript-ui-controls#readme",
   "keywords": [
     "ej2",
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.2.43",
+  "version": "20.3.47",
   "sideEffects": false
 }

package/src/maps/layers/bing-map.d.ts

@@ -13,4 +13,8 @@ export declare class BingMap {
     maxZoom: string;
     constructor(maps: Maps);
     getBingMap(tile: Tile, key: string, type: BingMapType, language: string, imageUrl: string, subDomains: string[]): string;
+    /**
+     * @private
+     */
+    destroy(): void;
 }

package/src/maps/layers/bing-map.js

@@ -29,6 +29,13 @@ var BingMap = /** @class */ (function () {
             return '';
         }
     };
+    /**
+     * @private
+     */
+    BingMap.prototype.destroy = function () {
+        this.maps = null;
+        this.subDomains = [];
+    };
     return BingMap;
 }());
 export { BingMap };

package/src/maps/layers/bubble.d.ts

@@ -50,9 +50,8 @@ export declare class Bubble {
     /**
      * To destroy the bubble.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps: Maps): void;
+    destroy(): void;
 }

package/src/maps/layers/bubble.js

@@ -267,14 +267,13 @@ var Bubble = /** @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;
 }());

package/src/maps/layers/data-label.d.ts

@@ -5,7 +5,6 @@ import { LayerSettings } from '../index';
  */
 export declare class DataLabel {
     private maps;
-    private dataLabelObject;
     /**
      * Datalabel collections
      *
@@ -37,11 +36,9 @@ export declare class DataLabel {
      */
     protected getModuleName(): string;
     /**
-     * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps: Maps): void;
+    destroy(): void;
 }

package/src/maps/layers/data-label.js

@@ -198,7 +198,7 @@ var DataLabel = /** @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) {
@@ -249,8 +249,8 @@ var DataLabel = /** @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 {
@@ -338,26 +338,26 @@ var DataLabel = /** @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,
@@ -400,16 +400,14 @@ var DataLabel = /** @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;
 }());

package/src/maps/layers/layer-panel.d.ts

@@ -143,4 +143,9 @@ export declare class LayerPanel {
      * @returns {Point} - Returns point values
      */
     private panTileMap;
+    /**
+     * @returns {void}
+     * @private
+     */
+    destroy(): void;
 }

package/src/maps/layers/layer-panel.js

@@ -202,7 +202,7 @@ var LayerPanel = /** @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);
@@ -281,7 +281,7 @@ var LayerPanel = /** @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();
@@ -325,7 +325,7 @@ var LayerPanel = /** @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) {
@@ -624,6 +624,7 @@ var LayerPanel = /** @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');
         }
@@ -703,7 +704,7 @@ var LayerPanel = /** @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);
@@ -1260,6 +1261,7 @@ var LayerPanel = /** @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') {
@@ -1371,7 +1373,7 @@ var LayerPanel = /** @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
@@ -1429,6 +1431,27 @@ var LayerPanel = /** @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;
 }());
 export { LayerPanel };

package/src/maps/layers/legend.d.ts

@@ -153,9 +153,8 @@ export declare class Legend {
     /**
      * To destroy the legend.
      *
-     * @param {Maps} maps - Specifies the instance of the maps
      * @returns {void}
      * @private
      */
-    destroy(maps: Maps): void;
+    destroy(): void;
 }

package/src/maps/layers/legend.js

@@ -1785,6 +1785,9 @@ var Legend = /** @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) {
@@ -1926,6 +1929,9 @@ var Legend = /** @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) {
@@ -2148,15 +2154,30 @@ var Legend = /** @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;
 }());

package/src/maps/layers/marker.d.ts

@@ -8,13 +8,12 @@ export declare class Marker {
     private isMarkerExplode;
     private trackElements;
     private markerSVGObject;
-    private previousExplodeId;
     /**
      * @private
      */
     sameMarkerData: MarkerClusterData[];
     constructor(maps: Maps);
-    markerRender(layerElement: Element, layerIndex: number, factor: number, type: string): void;
+    markerRender(maps: Maps, layerElement: Element, layerIndex: number, factor: number, type: string): void;
     /**
      * To find zoom level for individual layers like India, USA.
      *
@@ -60,9 +59,8 @@ export declare class Marker {
     /**
      * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the map
      * @returns {void}
      * @private
      */
-    destroy(maps: Maps): void;
+    destroy(): void;
 }

package/src/maps/layers/marker.js

@@ -12,43 +12,43 @@ var Marker = /** @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)) ?
@@ -59,56 +59,56 @@ var Marker = /** @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 = 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 = 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) :
-                                getTranslate(_this.maps, currentLayer, animate);
-                        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) :
+                                getTranslate(maps, currentLayer, animate);
+                        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();
                             }
                         }
                     }
@@ -354,7 +354,7 @@ var Marker = /** @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++) {
@@ -424,14 +424,14 @@ var Marker = /** @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;
 }());

package/src/maps/layers/navigation-selected-line.d.ts

@@ -20,9 +20,8 @@ export declare class NavigationLine {
     /**
      * To destroy the layers.
      *
-     * @param {Maps} maps - Specifies the instance of the map
      * @returns {void}
      * @private
      */
-    destroy(maps: Maps): void;
+    destroy(): void;
 }