@syncfusion/ej2-maps 20.3.49 → 20.4.38

package/src/maps/maps.js

@@ -17,11 +17,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable radix */
-/* eslint-disable max-len */
-/* eslint-disable valid-jsdoc */
 /**
  * Maps Component file
  */
@@ -37,10 +32,9 @@ import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotat
 import { Marker } from './layers/marker';
 import { load, click, onclick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
 import { getThemeStyle, Theme } from './model/theme';
-import { BingMap } from './layers/bing-map';
 import { LayerPanel } from './layers/layer-panel';
 import { Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';
-import { findPosition, textTrim, TextOption, renderTextElement, convertGeoToPoint, calculateZoomLevel } from '../maps/utils/helper';
+import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel } from '../maps/utils/helper';
 import { Annotations } from '../maps/user-interaction/annotation';
 import { MarkerSettings } from './index';
 import { changeBorderWidth } from './index';
@@ -225,18 +219,20 @@ var Maps = /** @class */ (function (_super) {
         this.setCulture();
     };
     Maps.prototype.renderElements = function () {
-        this.trigger(load, { maps: this });
-        this.createSVG();
-        this.findBaseAndSubLayers();
-        this.createSecondaryElement();
-        this.addTabIndex();
-        this.themeStyle = getThemeStyle(this.theme);
-        this.renderBorder();
-        this.renderTitle(this.titleSettings, 'title', null, null);
-        this.renderArea();
-        this.processRequestJsonData();
-        this.renderComplete();
-        this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
+        if (!this.isDestroyed) {
+            this.trigger(load, { maps: this });
+            this.createSVG();
+            this.findBaseAndSubLayers();
+            this.createSecondaryElement();
+            this.addTabIndex();
+            this.themeStyle = getThemeStyle(this.theme);
+            this.renderBorder();
+            this.renderTitle(this.titleSettings, 'title', null, null);
+            this.renderArea();
+            this.processRequestJsonData();
+            this.renderComplete();
+            this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
+        }
     };
     /**
      * To Initialize the control rendering.
@@ -251,8 +247,6 @@ var Maps = /** @class */ (function (_super) {
         var length = this.layersCollection.length - 1;
         this.serverProcess = { request: 0, response: 0 };
         var queryModule;
-        var localAjax;
-        var ajaxModule;
         var dataModule;
         Array.prototype.forEach.call(this.layersCollection, function (layer, layerIndex) {
             if (layer.shapeData instanceof DataManager) {
@@ -288,7 +282,8 @@ var Maps = /** @class */ (function (_super) {
                     if (layer.markerSettings[i].dataSource instanceof DataManager) {
                         _this.serverProcess['request']++;
                         dataModule = layer.markerSettings[i].dataSource;
-                        queryModule = layer.markerSettings[i].query instanceof Query ? layer.markerSettings[i].query : new Query();
+                        queryModule = layer.markerSettings[i].query instanceof Query ?
+                            layer.markerSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -307,7 +302,8 @@ var Maps = /** @class */ (function (_super) {
                     if (layer.bubbleSettings[i].dataSource instanceof DataManager) {
                         _this.serverProcess['request']++;
                         dataModule = layer.bubbleSettings[i].dataSource;
-                        queryModule = layer.bubbleSettings[i].query instanceof Query ? layer.bubbleSettings[i].query : new Query();
+                        queryModule = layer.bubbleSettings[i].query instanceof Query ?
+                            layer.bubbleSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -417,6 +413,7 @@ var Maps = /** @class */ (function (_super) {
             }
             if (!this.isResize) {
                 for (var k = 0; k < this.layers[i].markerSettings.length; k++) {
+                    // eslint-disable-next-line max-len
                     if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
                         && this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
                         var markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
@@ -488,7 +485,9 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.zoomingChange();
-        this.trigger(loaded, { maps: this, isResized: this.isResize });
+        if (!this.isZoomByPosition && !this.zoomNotApplied) {
+            this.trigger(loaded, { maps: this, isResized: this.isResize });
+        }
         this.isResize = false;
     };
     /**
@@ -582,7 +581,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.addTabIndex = function () {
         this.element.setAttribute('aria-label', this.description || 'Maps Element');
         this.element.setAttribute('role', '');
-        this.element.setAttribute('tabindex', this.tabIndex.toString());
+        this.element.tabIndex = this.tabIndex;
     };
     // private setSecondaryElementPosition(): void {
     //     if (!this.isTileMap) {
@@ -610,8 +609,10 @@ var Maps = /** @class */ (function (_super) {
             tileSvgParentElement.style.left = left + 'px';
             tileSvgParentElement.style.top = top + 'px';
             if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
-                tileElement.style.width = tileSvgElement.style.width = this.legendModule.legendTotalRect.width.toString();
-                tileElement.style.height = tileSvgElement.style.height = this.legendModule.legendTotalRect.height.toString();
+                tileElement.style.width = tileSvgElement.style.width =
+                    this.legendModule.legendTotalRect.width.toString();
+                tileElement.style.height = tileSvgElement.style.height =
+                    this.legendModule.legendTotalRect.height.toString();
                 tileSvgParentElement.style.width = this.legendModule.legendTotalRect.width + 'px';
                 tileSvgParentElement.style.height = this.legendModule.legendTotalRect.height + 'px';
             }
@@ -632,7 +633,7 @@ var Maps = /** @class */ (function (_super) {
             if (!isNullOrUndefined(elements) && elements.childElementCount > 0) {
                 for (var i = 0; i < elements.childNodes.length; i++) {
                     var childElement = elements.childNodes[i];
-                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') == -1) {
+                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') === -1) {
                         var layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                         for (var j = 0; j < childElement.childNodes.length; j++) {
                             var childNode = childElement.childNodes[j];
@@ -645,7 +646,7 @@ var Maps = /** @class */ (function (_super) {
                     }
                 }
             }
-            if (this.zoomModule && (this.previousScale !== this.scale)) {
+            if (this.zoomModule && ((this.previousScale !== this.scale) || this.zoomNotApplied || this.isZoomByPosition)) {
                 this.zoomModule.applyTransform(this, true);
             }
         }
@@ -653,9 +654,9 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.createSecondaryElement = function () {
         if (isNullOrUndefined(document.getElementById(this.element.id + '_Secondary_Element'))) {
             var secondaryElement = createElement('div', {
-                id: this.element.id + '_Secondary_Element',
-                styles: 'position: absolute;z-index:2;'
+                id: this.element.id + '_Secondary_Element'
             });
+            secondaryElement.style.cssText = 'position: absolute;z-index:2;';
             this.element.appendChild(secondaryElement);
         }
     };
@@ -709,18 +710,20 @@ var Maps = /** @class */ (function (_super) {
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
             var ele = createElement('div', {
-                id: this.element.id + '_tile_parent', styles: 'position: absolute; left: ' +
-                    (this.mapAreaRect.x) + 'px; right: ' + (this.margin.right) + 'px; top: '
-                    + (this.mapAreaRect.y + padding) + 'px; height: ' +
-                    (this.mapAreaRect.height) + 'px; width: '
-                    + (this.mapAreaRect.width) + 'px; overflow: hidden;'
+                id: this.element.id + '_tile_parent'
             });
+            ele.style.cssText = 'position: absolute; left: ' +
+                (this.mapAreaRect.x) + 'px; right: ' + (this.margin.right) + 'px; top: '
+                + (this.mapAreaRect.y + padding) + 'px; height: ' +
+                (this.mapAreaRect.height) + 'px; width: '
+                + (this.mapAreaRect.width) + 'px; overflow: hidden;';
             var ele1 = createElement('div', {
-                id: this.element.id + '_tiles', styles: 'position: absolute; left: ' +
-                    (this.mapAreaRect.x) + 'px;  right: ' + (this.margin.right) + 'px; top: '
-                    + (this.mapAreaRect.y + padding) + 'px; height: ' + (this.mapAreaRect.height) + 'px; width: '
-                    + (this.mapAreaRect.width) + 'px; overflow: hidden;'
+                id: this.element.id + '_tiles'
             });
+            ele1.style.cssText = 'position: absolute; left: ' +
+                (this.mapAreaRect.x) + 'px;  right: ' + (this.margin.right) + 'px; top: '
+                + (this.mapAreaRect.y + padding) + 'px; height: ' + (this.mapAreaRect.height) + 'px; width: '
+                + (this.mapAreaRect.width) + 'px; overflow: hidden;';
             this.element.appendChild(ele);
             this.element.appendChild(ele1);
         }
@@ -761,7 +764,7 @@ var Maps = /** @class */ (function (_super) {
                 break;
             }
         }
-        subLayers.map(function (subLayer, subLayerIndex) {
+        subLayers.map(function (subLayer) {
             if (subLayer.visible) {
                 _this.layersCollection.push(subLayer);
             }
@@ -921,6 +924,9 @@ var Maps = /** @class */ (function (_super) {
     };
     Maps.prototype.keyUpHandler = function (event) {
         var id = event.target['id'];
+        if (this.isTileMap) {
+            this.removeTileMap();
+        }
         if (event.code === 'Tab' && id.indexOf('_LayerIndex_') > -1 && id.indexOf('shapeIndex') > -1) {
             this.keyboardHighlightSelection(id, event.type);
         }
@@ -954,6 +960,13 @@ var Maps = /** @class */ (function (_super) {
     };
     Maps.prototype.keyDownHandler = function (event) {
         var zoom = this.zoomModule;
+        if ((event.code === 'ArrowUp' || event.code === 'ArrowDown' || event.code === 'ArrowLeft'
+            || event.code === 'ArrowRight') && zoom) {
+            var animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
+            if (this.isTileMap && !isNullOrUndefined(animatedTiles)) {
+                this.currentTiles = animatedTiles.cloneNode(true);
+            }
+        }
         if ((event.key === '+' || event.code === 'Equal') && zoom) {
             zoom.performZoomingByToolBar('zoomin');
         }
@@ -1028,6 +1041,7 @@ var Maps = /** @class */ (function (_super) {
      * This method is used to perform the operations when a click operation is performed on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
+     * @returns {void}
      */
     Maps.prototype.mapsOnClick = function (e) {
         var _this = this;
@@ -1093,8 +1107,9 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.getClickLocation = function (targetId, pageX, pageY, targetElement, x, y) {
         var layerIndex = 0;
         var latLongValue;
-        if (targetId.indexOf('_LayerIndex_') !== -1 && !this.isTileMap && (parseInt(this.mouseDownEvent['x']) === parseInt(this.mouseClickEvent['x']))
-            && (parseInt(this.mouseDownEvent['y']) === parseInt(this.mouseClickEvent['y']))) {
+        if (targetId.indexOf('_LayerIndex_') !== -1 && !this.isTileMap &&
+            (parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
+            (parseInt(this.mouseDownEvent['y'], 10) === parseInt(this.mouseClickEvent['y'], 10))) {
             layerIndex = parseFloat(targetId.split('_LayerIndex_')[1].split('_')[0]);
             if (this.layers[layerIndex].geometryType === 'Normal') {
                 if (targetId.indexOf('_shapeIndex_') > -1) {
@@ -1131,12 +1146,21 @@ var Maps = /** @class */ (function (_super) {
                 latLongValue = this.getGeoLocation(layerIndex, x, y);
             }
         }
-        else if (this.isTileMap && (parseInt(this.mouseDownEvent['x']) === parseInt(this.mouseClickEvent['x']))
-            && (parseInt(this.mouseDownEvent['y']) === parseInt(this.mouseClickEvent['y']))) {
+        else if (this.isTileMap && (parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
+            (parseInt(this.mouseDownEvent['y'], 10) === parseInt(this.mouseClickEvent['y'], 10))) {
             latLongValue = this.getTileGeoLocation(x, y);
         }
         return latLongValue;
     };
+    Maps.prototype.removeTileMap = function () {
+        var animateElement = document.getElementById(this.element.id + '_animated_tiles');
+        if (!isNullOrUndefined(this.currentTiles) && animateElement.childElementCount !== this.currentTiles.childElementCount) {
+            for (var l = animateElement.childElementCount - 1; l >= this.currentTiles.childElementCount; l--) {
+                animateElement.removeChild(animateElement.children[l]);
+            }
+        }
+        this.currentTiles = null;
+    };
     /**
      * This method is used to perform operations when mouse click on maps.
      *
@@ -1168,6 +1192,9 @@ var Maps = /** @class */ (function (_super) {
             pageY = e.pageY;
             target = e.target;
         }
+        if (this.isTileMap) {
+            this.removeTileMap();
+        }
         if (this.isTouch) {
             if (targetEle.id.indexOf('_ToolBar') === -1) {
                 var latLongValue = this.getClickLocation(targetId, pageX, pageY, targetEle, pageX, pageY);
@@ -1204,13 +1231,14 @@ var Maps = /** @class */ (function (_super) {
         }
         var rect = this.element.getBoundingClientRect();
         var element = e.target;
+        var animatedTiles = document.getElementById(this.element.id + '_animated_tiles');
+        if (this.isTileMap && !isNullOrUndefined(animatedTiles)) {
+            this.currentTiles = animatedTiles.cloneNode(true);
+        }
         if (element.id.indexOf('_ToolBar') === -1) {
             var markerModule = this.markerModule;
             if (element.id.indexOf('shapeIndex') > -1 || element.id.indexOf('Tile') > -1) {
                 this.mergeCluster();
-                if (element.id.indexOf('shapeIndex') > -1) {
-                    this.triggerShapeSelection(element);
-                }
             }
             if (markerModule) {
                 markerModule.markerClick(e);
@@ -1239,6 +1267,7 @@ var Maps = /** @class */ (function (_super) {
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
+     * @returns {void}
      */
     Maps.prototype.mapsOnDoubleClick = function (e) {
         this.notify('dblclick', e);
@@ -1262,8 +1291,10 @@ var Maps = /** @class */ (function (_super) {
                 latitude = latLongValue['latitude'];
                 longitude = latLongValue['longitude'];
             }
-            var doubleClickArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
-                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
+            var doubleClickArgs = {
+                cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
+                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null
+            };
             this.trigger('doubleClick', doubleClickArgs);
         }
     };
@@ -1363,28 +1394,30 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.mapsOnResize = function (e) {
         var _this = this;
-        this.isResize = this.isReset = true;
-        var args = {
-            cancel: false,
-            name: resize,
-            previousSize: this.availableSize,
-            currentSize: calculateSize(this),
-            maps: this
-        };
-        this.trigger(resize, args);
-        if (!args.cancel) {
-            if (this.resizeTo) {
-                clearTimeout(this.resizeTo);
-            }
-            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
-                this.resizeTo = setTimeout(function () {
-                    _this.unWireEVents();
-                    _this.createSVG();
-                    _this.refreshing = true;
-                    _this.wireEVents();
-                    _this.render();
-                    _this.refreshing = false;
-                }, 500);
+        if (!this.isDestroyed) {
+            this.isResize = this.isReset = true;
+            var args = {
+                cancel: false,
+                name: resize,
+                previousSize: this.availableSize,
+                currentSize: calculateSize(this),
+                maps: this
+            };
+            this.trigger(resize, args);
+            if (!args.cancel) {
+                if (this.resizeTo) {
+                    clearTimeout(this.resizeTo);
+                }
+                if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
+                    this.resizeTo = setTimeout(function () {
+                        _this.unWireEVents();
+                        _this.createSVG();
+                        _this.refreshing = true;
+                        _this.wireEVents();
+                        _this.render();
+                        _this.refreshing = false;
+                    }, 500);
+                }
             }
         }
         return false;
@@ -1399,32 +1432,34 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.zoomByPosition = function (centerPosition, zoomFactor) {
-        var factor = this.mapLayerPanel.calculateFactor(this.layersCollection[0]);
-        var position;
-        var size = this.mapAreaRect;
-        if (!this.isTileMap && this.zoomModule) {
-            if (!isNullOrUndefined(centerPosition)) {
-                position = convertGeoToPoint(centerPosition.latitude, centerPosition.longitude, factor, this.layersCollection[0], this);
-                var mapRect = document.getElementById(this.element.id + '_Layer_Collections').getBoundingClientRect();
-                var svgRect = this.svgObject.getBoundingClientRect();
-                var xDiff = Math.abs(mapRect.left - svgRect.left) / this.scale;
-                var yDiff = Math.abs(mapRect.top - svgRect.top) / this.scale;
-                var x = this.translatePoint.x + xDiff;
-                var y = this.translatePoint.y + yDiff;
-                this.scale = zoomFactor;
-                this.translatePoint.x = ((mapRect.left < svgRect.left ? x : 0) + (size.width / 2) - (position.x * zoomFactor)) / zoomFactor;
-                this.translatePoint.y = ((mapRect.top < svgRect.top ? y : 0) + (size.height / 2) - (position.y * zoomFactor)) / zoomFactor;
-                this.zoomModule.applyTransform(this);
+        if (!this.isDestroyed) {
+            this.zoomNotApplied = false;
+            var isRefresh = this.zoomSettings.zoomFactor === zoomFactor;
+            if (!this.isTileMap && this.zoomModule) {
+                if (!isNullOrUndefined(centerPosition)) {
+                    this.zoomSettings.zoomFactor = zoomFactor;
+                    isRefresh = this.centerPosition.latitude === centerPosition.latitude &&
+                        this.centerPosition.longitude === centerPosition.longitude ? true : isRefresh;
+                    this.centerPosition = centerPosition;
+                    this.isZoomByPosition = true;
+                    this.mapScaleValue = null;
+                }
+                else {
+                    this.zoomSettings.zoomFactor = zoomFactor;
+                    this.isZoomByPosition = true;
+                    this.mapScaleValue = null;
+                }
             }
-            else {
-                position = { x: size.width / 2, y: size.height / 2 };
-                this.zoomModule.performZooming(position, zoomFactor, zoomFactor > this.scale ? 'ZoomIn' : 'ZoomOut');
+            else if (this.zoomModule) {
+                this.tileZoomLevel = this.zoomSettings.zoomFactor = zoomFactor;
+                isRefresh = this.centerPosition.latitude === centerPosition.latitude &&
+                    this.centerPosition.longitude === centerPosition.longitude ? true : isRefresh;
+                this.centerPosition = centerPosition;
+                this.isZoomByPosition = true;
+            }
+            if (isRefresh) {
+                this.refresh();
             }
-        }
-        else if (this.zoomModule) {
-            this.tileZoomLevel = zoomFactor;
-            this.tileTranslatePoint = this.mapLayerPanel['panTileMap'](this.availableSize.width, this.availableSize.height, { x: centerPosition.longitude, y: centerPosition.latitude });
-            this.mapLayerPanel.generateTiles(zoomFactor, this.tileTranslatePoint, null, new BingMap(this));
         }
     };
     /**
@@ -1432,38 +1467,44 @@ var Maps = /** @class */ (function (_super) {
      *
      * @param {PanDirection} direction - Specifies the direction in which the panning is performed.
      * @param {PointerEvent | TouchEvent} mouseLocation - Specifies the location of the mouse pointer in maps.
+     * @returns {void}
      */
     Maps.prototype.panByDirection = function (direction, mouseLocation) {
-        var xDiff = 0;
-        var yDiff = 0;
-        switch (direction) {
-            case 'Left':
-                xDiff = -(this.mapAreaRect.width / 7);
-                break;
-            case 'Right':
-                xDiff = (this.mapAreaRect.width / 7);
-                break;
-            case 'Top':
-                yDiff = -(this.mapAreaRect.height / 7);
-                break;
-            case 'Bottom':
-                yDiff = (this.mapAreaRect.height / 7);
-                break;
-        }
-        if (this.zoomModule) {
-            this.zoomModule.panning(direction, xDiff, yDiff, mouseLocation);
+        if (!this.isDestroyed) {
+            var xDiff = 0;
+            var yDiff = 0;
+            switch (direction) {
+                case 'Left':
+                    xDiff = -(this.mapAreaRect.width / 7);
+                    break;
+                case 'Right':
+                    xDiff = (this.mapAreaRect.width / 7);
+                    break;
+                case 'Top':
+                    yDiff = -(this.mapAreaRect.height / 7);
+                    break;
+                case 'Bottom':
+                    yDiff = (this.mapAreaRect.height / 7);
+                    break;
+            }
+            if (this.zoomModule) {
+                this.zoomModule.panning(direction, xDiff, yDiff, mouseLocation);
+            }
         }
     };
     /**
      * This method is used to add the layers dynamically to the maps.
      *
      * @param {Object} layer - Specifies the layer for the maps.
+     * @returns {void}
      */
     Maps.prototype.addLayer = function (layer) {
-        var mapsLayer = this.layers;
-        mapsLayer.push(layer);
-        this.isAddLayer = true;
-        this.layers = mapsLayer;
+        if (!this.isDestroyed) {
+            var mapsLayer = this.layers;
+            mapsLayer.push(layer);
+            this.isAddLayer = true;
+            this.layers = mapsLayer;
+        }
     };
     /**
      * This method is used to remove a layer from map.
@@ -1472,9 +1513,11 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.removeLayer = function (index) {
-        var mapsLayer = this.layers;
-        mapsLayer.splice(index, 1);
-        this.layers = mapsLayer;
+        if (!this.isDestroyed) {
+            var mapsLayer = this.layers;
+            mapsLayer.splice(index, 1);
+            this.layers = mapsLayer;
+        }
     };
     /**
      * This method is used to add markers dynamically in the maps.
@@ -1486,15 +1529,17 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.addMarker = function (layerIndex, markerCollection) {
-        var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
-        if (markerCollection.length > 0 && layerEle) {
-            for (var _i = 0, markerCollection_1 = markerCollection; _i < markerCollection_1.length; _i++) {
-                var newMarker = markerCollection_1[_i];
-                this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+        if (!this.isDestroyed) {
+            var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
+            if (markerCollection.length > 0 && layerEle) {
+                for (var _i = 0, markerCollection_1 = markerCollection; _i < markerCollection_1.length; _i++) {
+                    var newMarker = markerCollection_1[_i];
+                    this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+                }
+                var markerModule = new Marker(this);
+                markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+                this.arrangeTemplate();
             }
-            var markerModule = new Marker(this);
-            markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
-            this.arrangeTemplate();
         }
     };
     /**
@@ -1507,93 +1552,96 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.shapeSelection = function (layerIndex, propertyName, name, enable) {
-        var targetEle;
-        var subLayerIndex;
-        var popertyNameArray = Array.isArray(propertyName) ? propertyName : Array(propertyName);
-        if (isNullOrUndefined(enable)) {
-            enable = true;
-        }
-        var selectionsettings = this.layers[layerIndex].selectionSettings;
-        if (!selectionsettings.enableMultiSelect && this.legendSelection && enable) {
-            this.removeShapeSelection();
-        }
-        if (this.layers[layerIndex].type === 'SubLayer') {
-            for (var i = 0; i < this.layersCollection.length; i++) {
-                if ((this.layersCollection[i].shapeData === this.layers[layerIndex].shapeData)) {
-                    subLayerIndex = i;
-                    break;
+        if (!this.isDestroyed) {
+            var targetEle = void 0;
+            var subLayerIndex = void 0;
+            var popertyNameArray = Array.isArray(propertyName) ? propertyName : Array(propertyName);
+            if (isNullOrUndefined(enable)) {
+                enable = true;
+            }
+            var selectionsettings = this.layers[layerIndex].selectionSettings;
+            if (!selectionsettings.enableMultiSelect && this.legendSelection && enable) {
+                this.removeShapeSelection();
+            }
+            if (this.layers[layerIndex].type === 'SubLayer') {
+                for (var i = 0; i < this.layersCollection.length; i++) {
+                    if ((this.layersCollection[i].shapeData === this.layers[layerIndex].shapeData)) {
+                        subLayerIndex = i;
+                        break;
+                    }
                 }
             }
-        }
-        if (selectionsettings.enable) {
-            var targetId = void 0;
-            var dataIndex = void 0;
-            var shapeIndex = void 0;
-            var indexValue = void 0;
-            var shapeDataValue = void 0;
-            var data = void 0;
-            var shapeData = this.layers[layerIndex].shapeData['features'];
-            for (var i = 0; i < shapeData.length; i++) {
-                for (var j = 0; j < popertyNameArray.length; j++) {
-                    var propertyName_1 = !isNullOrUndefined(shapeData[i]['properties'][popertyNameArray[j]])
-                        && isNaN(shapeData[i]['properties'][popertyNameArray[j]]) ?
-                        shapeData[i]['properties'][popertyNameArray[j]].toLowerCase() : shapeData[i]['properties'][popertyNameArray[j]];
-                    var shapeName = !isNullOrUndefined(name) && typeof name === 'string' ? name.toLowerCase() : name;
-                    var k = void 0;
-                    if (propertyName_1 === shapeName) {
-                        if (!isNullOrUndefined(this.layers[layerIndex].shapeSettings.colorValuePath)) {
-                            k = checkShapeDataFields(this.layers[layerIndex].dataSource, shapeData[i]['properties'], this.layers[layerIndex].shapeDataPath, this.layers[layerIndex].shapePropertyPath, this.layers[layerIndex]);
-                        }
-                        var baseLayer = this.layers[layerIndex];
-                        if (this.baseLayerIndex >= 0 && baseLayer.isBaseLayer) {
-                            indexValue = 0;
-                        }
-                        else if (this.layers[layerIndex].type === 'SubLayer') {
-                            indexValue = subLayerIndex;
-                        }
-                        targetId = this.element.id + '_' + 'LayerIndex_' + indexValue + '_shapeIndex_' + i + '_dataIndex_' + k;
-                        targetEle = getElement(targetId);
-                        if (isNullOrUndefined(k) && isNullOrUndefined(targetEle)) {
-                            targetId = this.element.id + '_' + 'LayerIndex_' + layerIndex + '_shapeIndex_' + i + '_dataIndex_null';
+            if (selectionsettings.enable) {
+                var targetId = void 0;
+                var dataIndex = void 0;
+                var shapeIndex = void 0;
+                var indexValue = void 0;
+                var shapeDataValue = void 0;
+                var data = void 0;
+                var shapeData = this.layers[layerIndex].shapeData['features'];
+                for (var i = 0; i < shapeData.length; i++) {
+                    for (var j = 0; j < popertyNameArray.length; j++) {
+                        var propertyName_1 = !isNullOrUndefined(shapeData[i]['properties'][popertyNameArray[j]])
+                            && isNaN(shapeData[i]['properties'][popertyNameArray[j]]) ?
+                            shapeData[i]['properties'][popertyNameArray[j]].toLowerCase() : shapeData[i]['properties'][popertyNameArray[j]];
+                        var shapeName = !isNullOrUndefined(name) && typeof name === 'string' ? name.toLowerCase() : name;
+                        var k = void 0;
+                        if (propertyName_1 === shapeName) {
+                            if (!isNullOrUndefined(this.layers[layerIndex].shapeSettings.colorValuePath)) {
+                                k = checkShapeDataFields(this.layers[layerIndex].dataSource, shapeData[i]['properties'], this.layers[layerIndex].shapeDataPath, this.layers[layerIndex].shapePropertyPath, this.layers[layerIndex]);
+                            }
+                            var baseLayer = this.layers[layerIndex];
+                            if (this.baseLayerIndex >= 0 && baseLayer.isBaseLayer) {
+                                indexValue = 0;
+                            }
+                            else if (this.layers[layerIndex].type === 'SubLayer') {
+                                indexValue = subLayerIndex;
+                            }
+                            targetId = this.element.id + '_' + 'LayerIndex_' + indexValue + '_shapeIndex_' + i + '_dataIndex_' + k;
                             targetEle = getElement(targetId);
-                        }
-                        shapeIndex = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                        shapeDataValue = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
-                            this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
-                        dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
-                        data = isNullOrUndefined(dataIndex) ? null : this.layers[layerIndex].dataSource[dataIndex];
-                        if (enable) {
-                            triggerItemSelectionEvent(selectionsettings, this, targetEle, shapeDataValue, data);
-                            this.shapeSelectionClass = getElement('ShapeselectionMap');
-                            if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1) {
-                                this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
+                            if (isNullOrUndefined(k) && isNullOrUndefined(targetEle)) {
+                                targetId = this.element.id + '_' + 'LayerIndex_' + layerIndex + '_shapeIndex_' + i + '_dataIndex_null';
+                                targetEle = getElement(targetId);
                             }
-                            var shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
-                            if (shapeToggled) {
-                                targetEle.setAttribute('class', 'ShapeselectionMapStyle');
-                                if (this.selectedElementId.indexOf(targetEle.getAttribute('id')) === -1) {
-                                    this.selectedElementId.push(targetEle.getAttribute('id'));
+                            shapeIndex = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
+                            shapeDataValue = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
+                                this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
+                            dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
+                            data = isNullOrUndefined(dataIndex) ? null : this.layers[layerIndex].dataSource[dataIndex];
+                            if (enable) {
+                                triggerItemSelectionEvent(selectionsettings, this, targetEle, shapeDataValue, data);
+                                this.shapeSelectionClass = getElement('ShapeselectionMap');
+                                if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1) {
+                                    this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
                                 }
-                                if (!selectionsettings.enableMultiSelect) {
-                                    return;
+                                var shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
+                                if (shapeToggled) {
+                                    targetEle.setAttribute('class', 'ShapeselectionMapStyle');
+                                    if (this.selectedElementId.indexOf(targetEle.getAttribute('id')) === -1) {
+                                        this.selectedElementId.push(targetEle.getAttribute('id'));
+                                    }
+                                    if (!selectionsettings.enableMultiSelect) {
+                                        return;
+                                    }
                                 }
                             }
-                        }
-                        else {
-                            this.legendSelection = (!selectionsettings.enableMultiSelect && !this.legendSelection) ?
-                                true : this.legendSelection;
-                            if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1 &&
-                                targetEle.getAttribute('class') === 'ShapeselectionMapStyle') {
-                                this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
-                            }
-                            var shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
-                            if (shapeToggled) {
-                                removeClass(targetEle);
-                                var selectedElementIdIndex = this.selectedElementId.indexOf(targetEle.getAttribute('id'));
-                                if (selectedElementIdIndex !== -1) {
-                                    this.selectedElementId.splice(selectedElementIdIndex, 1);
-                                    if (!selectionsettings.enableMultiSelect && this.legendSelection && this.selectedElementId.length > 0) {
-                                        this.removeShapeSelection();
+                            else {
+                                this.legendSelection = (!selectionsettings.enableMultiSelect && !this.legendSelection) ?
+                                    true : this.legendSelection;
+                                if (this.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1 &&
+                                    targetEle.getAttribute('class') === 'ShapeselectionMapStyle') {
+                                    this.legendModule.shapeHighLightAndSelection(targetEle, data, selectionsettings, 'selection', layerIndex);
+                                }
+                                var shapeToggled = this.legendSettings.visible ? this.legendModule.shapeToggled : true;
+                                if (shapeToggled) {
+                                    removeClass(targetEle);
+                                    var selectedElementIdIndex = this.selectedElementId.indexOf(targetEle.getAttribute('id'));
+                                    if (selectedElementIdIndex !== -1) {
+                                        this.selectedElementId.splice(selectedElementIdIndex, 1);
+                                        if (!selectionsettings.enableMultiSelect && this.legendSelection
+                                            && this.selectedElementId.length > 0) {
+                                            this.removeShapeSelection();
+                                        }
                                     }
                                 }
                             }
@@ -1614,48 +1662,55 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.zoomToCoordinates = function (minLatitude, minLongitude, maxLatitude, maxLongitude) {
         var _a, _b;
-        var centerLatitude;
-        var centerLongtitude;
-        var isTwoCoordinates = false;
-        if (isNullOrUndefined(maxLatitude) && isNullOrUndefined(maxLongitude)
-            || isNullOrUndefined(minLatitude) && isNullOrUndefined(minLongitude)) {
-            minLatitude = isNullOrUndefined(minLatitude) ? 0 : minLatitude;
-            minLongitude = isNullOrUndefined(minLatitude) ? 0 : minLongitude;
-            maxLatitude = isNullOrUndefined(maxLatitude) ? minLatitude : maxLatitude;
-            maxLongitude = isNullOrUndefined(maxLongitude) ? minLongitude : maxLongitude;
-            isTwoCoordinates = true;
-        }
-        if (minLatitude > maxLatitude) {
-            _a = [maxLatitude, minLatitude], minLatitude = _a[0], maxLatitude = _a[1];
-        }
-        if (minLongitude > maxLongitude) {
-            _b = [maxLongitude, minLongitude], minLongitude = _b[0], maxLongitude = _b[1];
-        }
-        if (!isTwoCoordinates) {
-            centerLatitude = (minLatitude + maxLatitude) / 2;
-            centerLongtitude = (minLongitude + maxLongitude) / 2;
+        if (!this.isDestroyed) {
+            var centerLatitude = void 0;
+            var centerLongtitude = void 0;
+            var isTwoCoordinates = false;
+            this.centerPosition = {
+                latitude: null,
+                longitude: null
+            };
+            this.isZoomByPosition = false;
+            if (isNullOrUndefined(maxLatitude) && isNullOrUndefined(maxLongitude)
+                || isNullOrUndefined(minLatitude) && isNullOrUndefined(minLongitude)) {
+                minLatitude = isNullOrUndefined(minLatitude) ? 0 : minLatitude;
+                minLongitude = isNullOrUndefined(minLatitude) ? 0 : minLongitude;
+                maxLatitude = isNullOrUndefined(maxLatitude) ? minLatitude : maxLatitude;
+                maxLongitude = isNullOrUndefined(maxLongitude) ? minLongitude : maxLongitude;
+                isTwoCoordinates = true;
+            }
+            if (minLatitude > maxLatitude) {
+                _a = [maxLatitude, minLatitude], minLatitude = _a[0], maxLatitude = _a[1];
+            }
+            if (minLongitude > maxLongitude) {
+                _b = [maxLongitude, minLongitude], minLongitude = _b[0], maxLongitude = _b[1];
+            }
+            if (!isTwoCoordinates) {
+                centerLatitude = (minLatitude + maxLatitude) / 2;
+                centerLongtitude = (minLongitude + maxLongitude) / 2;
+            }
+            else {
+                centerLatitude = (minLatitude + maxLatitude);
+                centerLongtitude = (minLongitude + maxLongitude);
+            }
+            this.centerLatOfGivenLocation = centerLatitude;
+            this.centerLongOfGivenLocation = centerLongtitude;
+            this.minLatOfGivenLocation = minLatitude;
+            this.minLongOfGivenLocation = minLongitude;
+            this.maxLatOfGivenLocation = maxLatitude;
+            this.maxLongOfGivenLocation = maxLongitude;
+            this.zoomNotApplied = true;
+            this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
+            var zoomArgs = {
+                cancel: false, name: 'zoom', type: zoomIn, maps: this,
+                tileTranslatePoint: {}, translatePoint: {},
+                tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
+                scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
+                    { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation }
+            };
+            this.trigger('zoom', zoomArgs);
+            this.refresh();
         }
-        else {
-            centerLatitude = (minLatitude + maxLatitude);
-            centerLongtitude = (minLongitude + maxLongitude);
-        }
-        this.centerLatOfGivenLocation = centerLatitude;
-        this.centerLongOfGivenLocation = centerLongtitude;
-        this.minLatOfGivenLocation = minLatitude;
-        this.minLongOfGivenLocation = minLongitude;
-        this.maxLatOfGivenLocation = maxLatitude;
-        this.maxLongOfGivenLocation = maxLongitude;
-        this.zoomNotApplied = true;
-        this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
-        var zoomArgs = {
-            cancel: false, name: 'zoom', type: zoomIn, maps: this,
-            tileTranslatePoint: {}, translatePoint: {},
-            tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
-            scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
-                { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation }
-        };
-        this.trigger('zoom', zoomArgs);
-        this.refresh();
     };
     /**
      * This method is used to remove multiple selected shapes in the maps.
@@ -1706,6 +1761,8 @@ var Maps = /** @class */ (function (_super) {
     };
     /**
      * This method disposes the maps component.
+     *
+     * @returns {void}
      */
     Maps.prototype.destroy = function () {
         this.unWireEVents();
@@ -1762,93 +1819,96 @@ var Maps = /** @class */ (function (_super) {
      * @private
      */
     Maps.prototype.onPropertyChanged = function (newProp, oldProp) {
-        var render = false;
-        var isMarker = false;
-        var isLayer = false;
-        var isStaticMapType = false;
-        var layerEle;
-        if (newProp['layers']) {
-            var newLayerLength = Object.keys(newProp['layers']).length;
-            layerEle = document.getElementById(this.element.id + '_LayerIndex_' + (newLayerLength - 1));
-        }
-        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-            var prop = _a[_i];
-            switch (prop) {
-                case 'background':
-                    this.renderBorder();
-                    break;
-                case 'height':
-                case 'width':
-                case 'layers':
-                case 'projectionType':
-                case 'centerPosition':
-                case 'legendSettings':
-                case 'baseLayerIndex':
-                    if (prop === 'layers') {
-                        isLayer = true;
-                        var layerPropLength = Object.keys(newProp.layers).length;
-                        for (var x = 0; x < layerPropLength; x++) {
-                            if (!isNullOrUndefined(newProp.layers[x])) {
-                                var collection = Object.keys(newProp.layers[x]);
-                                for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
-                                    var collectionProp = collection_1[_b];
-                                    if ((collectionProp === 'layerType' && newProp.layers[x].layerType !== 'Geometry') || (isNullOrUndefined(this.layers[x].shapeData)
-                                        && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
-                                        this.isReset = true;
-                                    }
-                                    else if (collectionProp === 'markerSettings') {
-                                        isMarker = true;
-                                    }
-                                    else if (collectionProp === 'staticMapType') {
-                                        isStaticMapType = true;
+        if (!this.isDestroyed) {
+            var render = false;
+            var isMarker = false;
+            var isLayer = false;
+            var isStaticMapType = false;
+            var layerEle = void 0;
+            if (newProp['layers']) {
+                var newLayerLength = Object.keys(newProp['layers']).length;
+                layerEle = document.getElementById(this.element.id + '_LayerIndex_' + (newLayerLength - 1));
+            }
+            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+                var prop = _a[_i];
+                switch (prop) {
+                    case 'background':
+                        this.renderBorder();
+                        break;
+                    case 'height':
+                    case 'width':
+                    case 'layers':
+                    case 'projectionType':
+                    case 'centerPosition':
+                    case 'legendSettings':
+                    case 'baseLayerIndex':
+                        if (prop === 'layers') {
+                            isLayer = true;
+                            var layerPropLength = Object.keys(newProp.layers).length;
+                            for (var x = 0; x < layerPropLength; x++) {
+                                if (!isNullOrUndefined(newProp.layers[x])) {
+                                    var collection = Object.keys(newProp.layers[x]);
+                                    for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
+                                        var collectionProp = collection_1[_b];
+                                        if ((collectionProp === 'layerType' && newProp.layers[x].layerType !== 'Geometry') ||
+                                            (isNullOrUndefined(this.layers[x].shapeData)
+                                                && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
+                                            this.isReset = true;
+                                        }
+                                        else if (collectionProp === 'markerSettings') {
+                                            isMarker = true;
+                                        }
+                                        else if (collectionProp === 'staticMapType') {
+                                            isStaticMapType = true;
+                                        }
                                     }
                                 }
                             }
                         }
-                    }
-                    render = true;
-                    break;
-                case 'zoomSettings':
-                    if (!isNullOrUndefined(oldProp.zoomSettings)) {
-                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor && !isLayer) {
-                            render = false;
-                        }
-                        else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
-                            this.zoomSettings.zoomFactor = 1;
-                            render = true;
-                        }
-                        else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
-                            this.zoomSettings.zoomFactor = 1;
-                            render = true;
-                        }
-                        else {
-                            render = true;
+                        render = true;
+                        break;
+                    case 'zoomSettings':
+                        if (!isNullOrUndefined(oldProp.zoomSettings)) {
+                            if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor && !isLayer) {
+                                render = false;
+                            }
+                            else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
+                                this.zoomSettings.zoomFactor = 1;
+                                render = true;
+                            }
+                            else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
+                                this.zoomSettings.zoomFactor = 1;
+                                render = true;
+                            }
+                            else {
+                                render = true;
+                            }
                         }
-                    }
-                    break;
-                case 'locale':
-                case 'currencyCode':
-                    _super.prototype.refresh.call(this);
-                    break;
+                        break;
+                    case 'locale':
+                    case 'currencyCode':
+                        _super.prototype.refresh.call(this);
+                        break;
+                }
             }
-        }
-        if (render) {
-            if (newProp.layers && isMarker) {
-                removeElement(this.element.id + '_Markers_Group');
-                if (this.isTileMap) {
-                    this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
+            if (render) {
+                if (newProp.layers && isMarker) {
+                    removeElement(this.element.id + '_Markers_Group');
+                    if (this.isTileMap) {
+                        this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
+                    }
+                    else {
+                        this.render();
+                    }
+                }
+                else if (newProp.layers && isStaticMapType) {
+                    this.mapLayerPanel.renderGoogleMap(this.layers[this.layers.length - 1].key, this.staticMapZoom);
                 }
                 else {
-                    this.render();
+                    this.createSVG();
+                    this.renderElements();
                 }
             }
-            else if (newProp.layers && isStaticMapType) {
-                this.mapLayerPanel.renderGoogleMap(this.layers[this.layers.length - 1].key, this.staticMapZoom);
-            }
-            else {
-                this.createSVG();
-                this.renderElements();
-            }
         }
     };
     /**
@@ -1861,7 +1921,7 @@ var Maps = /** @class */ (function (_super) {
         var modules = [];
         var isVisible = this.findVisibleLayers(this.layers);
         var annotationEnable = false;
-        this.annotations.map(function (annotation, index) {
+        this.annotations.map(function (annotation) {
             annotationEnable = annotation.content != null;
         });
         if (this.isBubbleVisible()) {
@@ -1946,10 +2006,12 @@ var Maps = /** @class */ (function (_super) {
     };
     /**
      * To find marker visibility
+     *
+     * @returns {boolean} - Returns whether the markers are visible or not.
      */
     Maps.prototype.isMarkersVisible = function () {
         var isVisible = false;
-        Array.prototype.forEach.call(this.layers, function (layer, layerIndex) {
+        Array.prototype.forEach.call(this.layers, function (layer) {
             for (var i = 0; i < layer.markerSettings.length; i++) {
                 if (layer.markerSettings[i].visible) {
                     isVisible = true;
@@ -1961,6 +2023,8 @@ var Maps = /** @class */ (function (_super) {
     };
     /**
      * To find DataLabel visibility
+     *
+     * @returns {boolean} - Returns whether the data labels are visible or not.
      */
     Maps.prototype.isDataLabelVisible = function () {
         var isVisible = false;
@@ -1974,10 +2038,12 @@ var Maps = /** @class */ (function (_super) {
     };
     /**
      * To find navigation line visibility
+     *
+     * @returns {boolean} - Returns whether the navigation lines are visible or not.
      */
     Maps.prototype.isNavigationVisible = function () {
         var isVisible = false;
-        Array.prototype.forEach.call(this.layers, function (layer, layerIndex) {
+        Array.prototype.forEach.call(this.layers, function (layer) {
             for (var i = 0; i < layer.navigationLineSettings.length; i++) {
                 if (layer.navigationLineSettings[i].visible) {
                     isVisible = true;
@@ -1989,6 +2055,8 @@ var Maps = /** @class */ (function (_super) {
     };
     /**
      * To find space between the secondary element and svg element.
+     *
+     * @returns {Point} - Returns the left and top value of the secondary element of Maps.
      * @private
      */
     Maps.prototype.getExtraPosition = function () {
@@ -2046,7 +2114,7 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.print = function (id) {
-        if ((this.allowPrint) && (this.printModule)) {
+        if ((this.allowPrint) && (this.printModule) && !this.isDestroyed) {
             this.printModule.print(this, id);
         }
     };
@@ -2061,18 +2129,20 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.export = function (type, fileName, orientation, allowDownload) {
         var _this = this;
-        if (isNullOrUndefined(allowDownload)) {
-            allowDownload = true;
-        }
-        if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
-            return new Promise(function (resolve, reject) {
-                resolve(_this.imageExportModule.export(_this, type, fileName, allowDownload));
-            });
-        }
-        else if ((this.allowPdfExport) && (this.pdfExportModule)) {
-            return new Promise(function (resolve, reject) {
-                resolve(_this.pdfExportModule.export(_this, type, fileName, allowDownload, orientation));
-            });
+        if (!this.isDestroyed) {
+            if (isNullOrUndefined(allowDownload)) {
+                allowDownload = true;
+            }
+            if ((type !== 'PDF') && (this.allowImageExport) && (this.imageExportModule)) {
+                return new Promise(function (resolve, reject) {
+                    resolve(_this.imageExportModule.export(_this, type, fileName, allowDownload));
+                });
+            }
+            else if ((this.allowPdfExport) && (this.pdfExportModule)) {
+                return new Promise(function (resolve, reject) {
+                    resolve(_this.pdfExportModule.export(_this, type, fileName, allowDownload, orientation));
+                });
+            }
         }
         return null;
     };
@@ -2083,19 +2153,22 @@ var Maps = /** @class */ (function (_super) {
      * @returns {Promise<string>} - Returns the processed Bing URL as Promise.
      */
     Maps.prototype.getBingUrlTemplate = function (url) {
-        var promise = new Promise(function (resolve, reject) {
-            var ajax = new Ajax({
-                url: url
+        var promise;
+        if (!this.isDestroyed) {
+            promise = new Promise(function (resolve, reject) {
+                var ajax = new Ajax({
+                    url: url
+                });
+                ajax.onSuccess = function (json) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var jsonObject = JSON.parse(json);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var resource = jsonObject['resourceSets'][0]['resources'][0];
+                    resolve(resource['imageUrl']);
+                };
+                ajax.send();
             });
-            ajax.onSuccess = function (json) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var jsonObject = JSON.parse(json);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var resource = jsonObject['resourceSets'][0]['resources'][0];
-                resolve(resource['imageUrl']);
-            };
-            ajax.send();
-        });
+        }
         return promise;
     };
     /**
@@ -2176,21 +2249,25 @@ var Maps = /** @class */ (function (_super) {
      * @returns {GeoPosition}- Returns the geo position
      */
     Maps.prototype.getGeoLocation = function (layerIndex, x, y) {
-        var container = document.getElementById(this.element.id);
-        var pageX = x - container.offsetLeft;
-        var pageY = y - container.offsetTop;
-        var currentLayer = this.layersCollection[layerIndex];
-        var translate = getTranslate(this, currentLayer, false);
-        var translatePoint = translate['location'];
-        var translatePointX = translatePoint.x * this.scale;
-        var translatePointY = translatePoint.y * this.scale;
-        var mapSize = (Math.min(this.mapAreaRect.height, this.mapAreaRect.width)
-            * this.mapLayerPanel['currentFactor']) * this.scale;
-        var xx = (this.clip(pageX - translatePointX, 0, mapSize - 1) / mapSize) - 0.5;
-        var yy = 0.5 - (this.clip(pageY - translatePointY, 0, mapSize - 1) / mapSize);
-        var lat = 90 - 360 * Math.atan(Math.exp(-yy * 2 * Math.PI)) / Math.PI;
-        var long = 360 * xx;
-        return { latitude: lat, longitude: long };
+        var latitude = 0;
+        var longitude = 0;
+        if (!this.isDestroyed) {
+            var container = document.getElementById(this.element.id);
+            var pageX = x - container.offsetLeft;
+            var pageY = y - container.offsetTop;
+            var currentLayer = this.layersCollection[layerIndex];
+            var translate = getTranslate(this, currentLayer, false);
+            var translatePoint = translate['location'];
+            var translatePointX = translatePoint.x * this.scale;
+            var translatePointY = translatePoint.y * this.scale;
+            var mapSize = (Math.min(this.mapAreaRect.height, this.mapAreaRect.width)
+                * this.mapLayerPanel['currentFactor']) * this.scale;
+            var xx = (this.clip(pageX - translatePointX, 0, mapSize - 1) / mapSize) - 0.5;
+            var yy = 0.5 - (this.clip(pageY - translatePointY, 0, mapSize - 1) / mapSize);
+            latitude = 90 - 360 * Math.atan(Math.exp(-yy * 2 * Math.PI)) / Math.PI;
+            longitude = 360 * xx;
+        }
+        return { latitude: latitude, longitude: longitude };
     };
     Maps.prototype.clip = function (value, minVal, maxVal) {
         return Math.min(Math.max(value, minVal), maxVal);
@@ -2203,10 +2280,16 @@ var Maps = /** @class */ (function (_super) {
      * @returns {GeoPosition} - Returns the position
      */
     Maps.prototype.getTileGeoLocation = function (x, y) {
-        var container = document.getElementById(this.element.id);
-        var ele = document.getElementById(this.element.id + '_tile_parent');
-        var latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - container.offsetLeft), y + this.mapAreaRect.y - (ele.offsetTop - container.offsetTop));
-        return { latitude: latLong['latitude'], longitude: latLong['longitude'] };
+        var latitude = 0;
+        var longitude = 0;
+        if (!this.isDestroyed) {
+            var container = document.getElementById(this.element.id);
+            var ele = document.getElementById(this.element.id + '_tile_parent');
+            var latLong = this.pointToLatLong(x + this.mapAreaRect.x - (ele.offsetLeft - container.offsetLeft), y + this.mapAreaRect.y - (ele.offsetTop - container.offsetTop));
+            latitude = latLong['latitude'];
+            longitude = latLong['longitude'];
+        }
+        return { latitude: latitude, longitude: longitude };
     };
     /**
      * This method is used to convert the point to latitude and longitude in maps.
@@ -2216,14 +2299,18 @@ var Maps = /** @class */ (function (_super) {
      * @returns {Object} - Returns the object.
      */
     Maps.prototype.pointToLatLong = function (pageX, pageY) {
-        var padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
-        pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
-        var mapSize = 256 * Math.pow(2, this.tileZoomLevel);
-        var x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
-        var y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
-        var lat = 90 - 360 * Math.atan(Math.exp(-y1 * 2 * Math.PI)) / Math.PI;
-        var long = 360 * x1;
-        return { latitude: lat, longitude: long };
+        var latitude = 0;
+        var longitude = 0;
+        if (!this.isDestroyed) {
+            var padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
+            pageY = (this.zoomSettings.enable) ? pageY + padding : pageY;
+            var mapSize = 256 * Math.pow(2, this.tileZoomLevel);
+            var x1 = (this.clip(pageX - (this.translatePoint.x * this.scale), 0, mapSize - 1) / mapSize) - 0.5;
+            var y1 = 0.5 - (this.clip(pageY - (this.translatePoint.y * this.scale), 0, mapSize - 1) / mapSize);
+            latitude = 90 - 360 * Math.atan(Math.exp(-y1 * 2 * Math.PI)) / Math.PI;
+            longitude = 360 * x1;
+        }
+        return { latitude: latitude, longitude: longitude };
     };
     __decorate([
         Property(null)