@syncfusion/ej2-maps 20.2.43 → 20.3.47

package/src/maps/user-interaction/highlight.js

@@ -217,15 +217,13 @@ var Highlight = /** @class */ (function () {
     /**
      * To destroy the highlight.
      *
-     * @param {Maps} maps - Specifies the maps instance
      * @returns {void}
      * @private
      */
-    Highlight.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Highlight.prototype.destroy = function () {
+        this.highlightSettings = null;
         this.removeEventListener();
+        this.maps = null;
     };
     return Highlight;
 }());

package/src/maps/user-interaction/selection.d.ts

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

package/src/maps/user-interaction/selection.js

@@ -297,15 +297,13 @@ var Selection = /** @class */ (function () {
     /**
      * To destroy the selection.
      *
-     * @param {Maps} maps - Specifies the maps instance.
      * @returns {void}
      * @private
      */
-    Selection.prototype.destroy = function (maps) {
-        /**
-         * Destroy method performed here
-         */
+    Selection.prototype.destroy = function () {
+        this.selectionsettings = null;
         this.removeEventListener();
+        this.maps = null;
     };
     return Selection;
 }());

package/src/maps/user-interaction/tooltip.d.ts

@@ -5,14 +5,12 @@ import { Tooltip } from '@syncfusion/ej2-svg-base';
  */
 export declare class MapsTooltip {
     private maps;
-    private tooltipSettings;
     /**
      * @private
      */
     svgTooltip: Tooltip;
     private isTouch;
     private tooltipId;
-    private currentTime;
     private clearTimeout;
     tooltipTargetID: string;
     constructor(maps: Maps);
@@ -43,9 +41,8 @@ export declare class MapsTooltip {
     /**
      * To destroy the tooltip.
      *
-     * @param {Maps} maps Specifies the maps instance
      * @returns {void}
      * @private
      */
-    destroy(maps: Maps): void;
+    destroy(): void;
 }

package/src/maps/user-interaction/tooltip.js

@@ -376,12 +376,17 @@ var MapsTooltip = /** @class */ (function () {
     /**
      * To destroy the tooltip.
      *
-     * @param {Maps} maps Specifies the maps instance
      * @returns {void}
      * @private
      */
-    MapsTooltip.prototype.destroy = function (maps) {
+    MapsTooltip.prototype.destroy = function () {
+        if (!isNullOrUndefined(this.svgTooltip)) {
+            this.svgTooltip.destroy();
+        }
+        this.svgTooltip = null;
         this.removeEventListener();
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
     };
     return MapsTooltip;
 }());

package/src/maps/user-interaction/zoom.d.ts

@@ -8,13 +8,10 @@ import { PanDirection } from '../utils/enum';
 export declare class Zoom {
     private maps;
     toolBarGroup: Element;
-    private groupElements;
     private currentToolbarEle;
     zoomingRect: Rect;
     selectionColor: string;
     private fillColor;
-    private zoomInElements;
-    private zoomOutElements;
     private zoomElements;
     private panElements;
     isPanning: boolean;
@@ -28,7 +25,6 @@ export declare class Zoom {
     touchStartList: ITouches[] | TouchList;
     touchMoveList: ITouches[] | TouchList;
     previousTouchMoveList: ITouches[] | TouchList;
-    private pinchRect;
     mouseDownPoints: Point;
     mouseMovePoints: Point;
     isDragZoom: boolean;
@@ -87,7 +83,7 @@ export declare class Zoom {
      * @returns {void}
      */
     private animateTransform;
-    applyTransform(animate?: boolean): void;
+    applyTransform(maps: Maps, animate?: boolean): void;
     private markerTranslates;
     /**
      * To translate the layer template elements
@@ -156,9 +152,8 @@ export declare class Zoom {
     /**
      * To destroy the zoom.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    destroy(maps: Maps): void;
+    destroy(): void;
 }

package/src/maps/user-interaction/zoom.js

@@ -16,7 +16,6 @@ var Zoom = /** @class */ (function () {
         this.mouseEnter = false;
         this.isTouch = false;
         this.rectZoomingStart = false;
-        this.pinchRect = new Rect(0, 0, 0, 0);
         this.browserName = Browser.info.name;
         // eslint-disable-next-line @typescript-eslint/ban-types
         this.isPointer = Browser.isPointer;
@@ -40,7 +39,6 @@ var Zoom = /** @class */ (function () {
         this.selectionColor = this.maps.zoomSettings.selectionColor;
         this.fillColor = this.maps.zoomSettings.color;
         this.addEventListener();
-        this.groupElements = [];
     }
     /**
      * To perform zooming for maps
@@ -81,6 +79,7 @@ var Zoom = /** @class */ (function () {
                     mapTotalHeight = availSize.height;
                 }
                 newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
                 map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
             }
             else {
@@ -98,7 +97,7 @@ var Zoom = /** @class */ (function () {
                 map.scale = map.mapScaleValue = map.previousScale;
             }
             else {
-                this.applyTransform();
+                this.applyTransform(map);
             }
         }
         else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
@@ -142,7 +141,7 @@ var Zoom = /** @class */ (function () {
                     //         element1 = element1;
                     //     }
                     // }
-                    _this.applyTransform();
+                    _this.applyTransform(_this.maps);
                     if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
                         document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                     }
@@ -244,7 +243,7 @@ var Zoom = /** @class */ (function () {
             }
             if (!isZoomCancelled) {
                 map.mapScaleValue = zoomCalculationFactor;
-                this.applyTransform(true);
+                this.applyTransform(map, true);
                 this.maps.zoomNotApplied = false;
                 this.zoomingRect = null;
             }
@@ -294,6 +293,7 @@ var Zoom = /** @class */ (function () {
                     mapTotalHeight = availSize.height;
                 }
                 zoomCalculationFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                zoomCalculationFactor = zoomCalculationFactor > 1.05 ? 1 : zoomCalculationFactor;
                 map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomCalculationFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
             }
             else {
@@ -332,7 +332,7 @@ var Zoom = /** @class */ (function () {
             }
         }
         if (!isZoomCancelled) {
-            this.applyTransform();
+            this.applyTransform(map);
         }
     };
     Zoom.prototype.drawZoomRectangle = function () {
@@ -379,7 +379,7 @@ var Zoom = /** @class */ (function () {
             zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
         }
     };
-    Zoom.prototype.applyTransform = function (animate) {
+    Zoom.prototype.applyTransform = function (maps, animate) {
         var layerIndex;
         this.templateCount = 0;
         var layer;
@@ -387,14 +387,14 @@ var Zoom = /** @class */ (function () {
         var zoomshapelocation;
         var i;
         var markerStyle;
-        var scale = this.maps.scale;
-        var x = this.maps.translatePoint.x;
-        var y = this.maps.translatePoint.y;
+        var scale = maps.scale;
+        var x = maps.translatePoint.x;
+        var y = maps.translatePoint.y;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var collection = [];
-        this.maps.zoomShapeCollection = [];
-        if (document.getElementById(this.maps.element.id + '_mapsTooltip')) {
-            removeElement(this.maps.element.id + '_mapsTooltip');
+        maps.zoomShapeCollection = [];
+        if (document.getElementById(maps.element.id + '_mapsTooltip')) {
+            removeElement(maps.element.id + '_mapsTooltip');
         }
         if (this.layerCollectionEle) {
             for (var i_1 = 0; i_1 < this.layerCollectionEle.childElementCount; i_1++) {
@@ -402,29 +402,29 @@ var Zoom = /** @class */ (function () {
                 if (layerElement.tagName === 'g') {
                     this.templateCount++;
                     this.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
-                    this.currentLayer = this.maps.layersCollection[this.index];
-                    var factor = this.maps.mapLayerPanel.calculateFactor(this.currentLayer);
+                    this.currentLayer = maps.layersCollection[this.index];
+                    var factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
                     for (var j = 0; j < layerElement.childElementCount; j++) {
                         var currentEle = layerElement.childNodes[j];
                         if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
                             && (!(currentEle.id.indexOf('_dataLableIndex_Group') > -1))) {
-                            if (this.maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
+                            if (maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
                                 currentEle.remove();
                                 if (layerElement.children.length > 0 && layerElement.children[0]) {
-                                    layerElement.insertBefore(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index), layerElement.children[1]);
+                                    layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index), layerElement.children[1]);
                                 }
                                 else {
-                                    layerElement.appendChild(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index));
+                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index));
                                 }
                             }
                             else if (currentEle.id.indexOf('Legend') == -1) {
-                                changeBorderWidth(currentEle, this.index, scale, this.maps);
-                                this.maps.zoomTranslatePoint = this.maps.translatePoint;
+                                changeBorderWidth(currentEle, this.index, scale, maps);
+                                maps.zoomTranslatePoint = maps.translatePoint;
                                 this.animateTransform(currentEle, animate, x, y, scale);
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if (!this.isPanning) {
+                            if (!this.isPanning && !isNullOrUndefined(currentEle.childNodes[0])) {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -443,11 +443,11 @@ var Zoom = /** @class */ (function () {
                                             markerSelectionValues['latitude'] ||
                                             this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['longitude'] ===
                                                 markerSelectionValues['longitude']) {
-                                            this.maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, this.maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
+                                            maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
                                         }
                                     }
-                                    if ((this.currentLayer.animationDuration > 0 || (this.maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
-                                        if (this.maps.isTileMap) {
+                                    if ((this.currentLayer.animationDuration > 0 || (maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
+                                        if (maps.isTileMap) {
                                             var groupElement = document.querySelector('.GroupElement');
                                             if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
                                                 groupElement.style.display = 'none';
@@ -459,29 +459,29 @@ var Zoom = /** @class */ (function () {
                                         }
                                     }
                                 }
-                                if (this.isPanning && this.maps.markerModule.sameMarkerData.length > 0) {
-                                    clusterSeparate(this.maps.markerModule.sameMarkerData, this.maps, currentEle, true);
+                                if (this.isPanning && maps.markerModule.sameMarkerData.length > 0) {
+                                    clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
                                 }
-                                else if (this.maps.markerModule.sameMarkerData.length > 0) {
-                                    this.maps.markerModule.sameMarkerData = [];
-                                    if (document.getElementById(this.maps.element.id + '_mapsTooltip')) {
-                                        removeElement(this.maps.element.id + '_mapsTooltip');
+                                else if (maps.markerModule.sameMarkerData.length > 0) {
+                                    maps.markerModule.sameMarkerData = [];
+                                    if (document.getElementById(maps.element.id + '_mapsTooltip')) {
+                                        removeElement(maps.element.id + '_mapsTooltip');
                                     }
                                 }
-                                if (document.getElementById(this.maps.element.id + '_mapsTooltip') && this.maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
+                                if (document.getElementById(maps.element.id + '_mapsTooltip') && maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
                                     && !this.isPanning) {
-                                    var mapsTooltip = this.maps.mapsTooltipModule;
+                                    var mapsTooltip = maps.mapsTooltipModule;
                                     var tooltipElement = currentEle.querySelector('#' + mapsTooltip.tooltipTargetID);
                                     if (!isNullOrUndefined(tooltipElement)) {
                                         if (tooltipElement['style']['visibility'] === 'hidden') {
-                                            removeElement(this.maps.element.id + '_mapsTooltip');
+                                            removeElement(maps.element.id + '_mapsTooltip');
                                         }
                                         else {
                                             var x_2 = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[1]);
                                             var y_1 = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[2]);
-                                            if (this.maps.isTileMap) {
-                                                x_2 += +getElement(this.maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
-                                                y_1 += +getElement(this.maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
+                                            if (maps.isTileMap) {
+                                                x_2 += +getElement(maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
+                                                y_1 += +getElement(maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
                                             }
                                             mapsTooltip.svgTooltip.location.x = x_2;
                                             mapsTooltip.svgTooltip.location.y = y_1;
@@ -499,9 +499,9 @@ var Zoom = /** @class */ (function () {
                                 layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                                 var bubleIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
                                 var dataIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
-                                for (var l = 0; l < this.maps.bubbleModule.bubbleCollection.length; l++) {
+                                for (var l = 0; l < maps.bubbleModule.bubbleCollection.length; l++) {
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                    var bubbleCollection = this.maps.bubbleModule.bubbleCollection[l];
+                                    var bubbleCollection = maps.bubbleModule.bubbleCollection[l];
                                     if (bubbleCollection['LayerIndex'] === layerIndex && bubbleCollection['BubbleIndex'] === bubleIndex &&
                                         bubbleCollection['DataIndex'] === dataIndex) {
                                         var centerX = bubbleCollection['center']['x'];
@@ -520,25 +520,25 @@ var Zoom = /** @class */ (function () {
                                 }
                             }
                         }
-                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(this.maps.layers[this.index])) {
+                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this.index])) {
                             this.intersect = [];
-                            this.maps.zoomLabelPositions = [];
-                            this.maps.zoomLabelPositions = this.maps.dataLabelModule.dataLabelCollections;
-                            var labelAnimate = !this.maps.isTileMap && animate;
+                            maps.zoomLabelPositions = [];
+                            maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
+                            var labelAnimate = !maps.isTileMap && animate;
                             for (var k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
                                     this.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
-                                    this.maps.zoomShapeCollection.push(this.zoomshapewidth);
+                                    maps.zoomShapeCollection.push(this.zoomshapewidth);
                                     this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate);
-                                    var dataLabel = this.maps.layers[this.index].dataLabelSettings;
+                                    var dataLabel = maps.layers[this.index].dataLabelSettings;
                                     var border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
-                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1) {
-                                            var labelX = ((this.maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
-                                            var labelY = ((this.maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
+                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !isNullOrUndefined(maps.zoomLabelPositions[labelIndex])) {
+                                            var labelX = ((maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
+                                            var labelY = ((maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
                                             var zoomtext = currentEle.childNodes[k]['innerHTML'];
-                                            var style = this.maps.layers[this.index].dataLabelSettings.textStyle;
+                                            var style = maps.layers[this.index].dataLabelSettings.textStyle;
                                             var zoomtextSize = measureText(zoomtext, style);
                                             var padding = 5;
                                             var rectElement = currentEle.childNodes[k - 1];
@@ -553,11 +553,11 @@ var Zoom = /** @class */ (function () {
                         }
                     }
                 }
-                this.maps.arrangeTemplate();
+                maps.arrangeTemplate();
             }
             if (!isNullOrUndefined(this.currentLayer)) {
-                if (!animate || this.currentLayer.animationDuration === 0 || this.maps.isTileMap) {
-                    this.processTemplate(x, y, scale, this.maps);
+                if (!animate || this.currentLayer.animationDuration === 0 || maps.isTileMap) {
+                    this.processTemplate(x, y, scale, maps);
                 }
             }
         }
@@ -961,15 +961,15 @@ var Zoom = /** @class */ (function () {
             if (!panArgs.cancel) {
                 if (panningXDirection && panningYDirection) {
                     map.translatePoint = new Point(x, y);
-                    this.applyTransform();
+                    this.applyTransform(map);
                 }
                 else if (panningXDirection) {
                     map.translatePoint = new Point(x, map.translatePoint.y);
-                    this.applyTransform();
+                    this.applyTransform(map);
                 }
                 else if (panningYDirection) {
                     map.translatePoint = new Point(map.translatePoint.x, y);
-                    this.applyTransform();
+                    this.applyTransform(map);
                 }
             }
             this.maps.zoomNotApplied = false;
@@ -997,7 +997,7 @@ var Zoom = /** @class */ (function () {
             };
             map.trigger(pan, panArgs);
             map.mapLayerPanel.generateTiles(map.tileZoomLevel, map.tileTranslatePoint, 'Pan');
-            this.applyTransform();
+            this.applyTransform(map);
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
@@ -1009,7 +1009,7 @@ var Zoom = /** @class */ (function () {
             (this.distanceX / this.maps.scale)) : this.maps.translatePoint.x;
         this.maps.translatePoint.y = !isNullOrUndefined(this.distanceY) ? this.maps.translatePoint.y -
             (this.distanceY / this.maps.scale) : this.maps.translatePoint.y;
-        this.applyTransform(false);
+        this.applyTransform(this.maps, false);
     };
     Zoom.prototype.toolBarZooming = function (zoomFactor, type) {
         var _this = this;
@@ -1048,6 +1048,7 @@ var Zoom = /** @class */ (function () {
                     mapHeight = size.height;
                 }
                 zoomFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                zoomFactor = zoomFactor > 1.05 ? 1 : zoomFactor;
                 map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomFactor, mapWidth, mapHeight, size, min, map);
             }
             else {
@@ -1067,7 +1068,7 @@ var Zoom = /** @class */ (function () {
                 map.scale = map.previousScale;
             }
             else {
-                this.applyTransform(true);
+                this.applyTransform(map, true);
             }
         }
         else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
@@ -1109,7 +1110,7 @@ var Zoom = /** @class */ (function () {
                             // element1.removeChild(element1.children[element1.childElementCount - 1]);
                             // element1.childElementCount ? element1.removeChild(element1.children[element1.childElementCount - 1]) : element1;
                         }
-                        _this.applyTransform(true);
+                        _this.applyTransform(_this.maps, true);
                         if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
                             document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                         }
@@ -1122,6 +1123,8 @@ var Zoom = /** @class */ (function () {
     };
     Zoom.prototype.createZoomingToolbars = function () {
         var map = this.maps;
+        var zoomInElements;
+        var zoomOutElements;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
             opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
@@ -1139,7 +1142,6 @@ var Zoom = /** @class */ (function () {
         var toolBarLength = map.zoomSettings.toolbars.length;
         var toolWidth = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (toolBarLength * kitWidth) + (toolBarLength * padding) : (kitWidth * 2);
         var toolHeight = (map.zoomSettings.toolBarOrientation === 'Horizontal') ? (kitHeight * 2) : (toolBarLength * kitHeight) + (toolBarLength * padding);
-        this.toolBarGroup.appendChild(map.renderer.drawRectangle(new RectOption(map.element.id + '_Zooming_Rect', 'transparent', { color: 'transparent', width: 1 }, 1, new Rect(0, 0, toolWidth, toolHeight), 0, 0)));
         var defElement = map.renderer.createDefs();
         defElement.innerHTML = shadowElement;
         this.toolBarGroup.appendChild(defElement);
@@ -1193,13 +1195,13 @@ var Zoom = /** @class */ (function () {
                 case 'zoomin':
                     direction = 'M 8, 0 L 8, 16 M 0, 8 L 16, 8';
                     this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1 + '_Path', fill, 3, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction)));
-                    this.zoomInElements = this.currentToolbarEle;
+                    zoomInElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 case 'zoomout':
                     direction = 'M 0, 8 L 16, 8';
                     this.currentToolbarEle.appendChild(map.renderer.drawPath(new PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, fill, 3, this.maps.themeStyle.zoomFillColor, 1, 1, null, direction)));
-                    this.zoomOutElements = this.currentToolbarEle;
+                    zoomOutElements = this.currentToolbarEle;
                     this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                     break;
                 case 'pan': {
@@ -1699,15 +1701,30 @@ var Zoom = /** @class */ (function () {
     /**
      * To destroy the zoom.
      *
-     * @param {Maps} maps - Specifies the instance of the maps.
      * @returns {void}
      * @private
      */
-    Zoom.prototype.destroy = function (maps) {
+    Zoom.prototype.destroy = function () {
+        this.toolBarGroup = null;
+        this.currentToolbarEle = null;
+        this.zoomingRect = null;
+        this.zoomElements = null;
+        this.panElements = null;
+        this.baseTranslatePoint = null;
+        this.touchStartList = null;
+        this.touchMoveList = null;
+        this.previousTouchMoveList = null;
+        this.mouseDownPoints = null;
+        this.mouseMovePoints = null;
+        this.startTouches = [];
+        this.zoomshapewidth = null;
+        this.intersect = [];
+        this.mouseDownLatLong = null;
+        this.mouseMoveLatLong = null;
         this.removeEventListener();
-        /**
-         * Destroy method performed here
-         */
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
+        this.currentLayer = null;
     };
     return Zoom;
 }());

package/src/maps/utils/helper.js

@@ -1111,7 +1111,10 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
             markerCluster.remove();
         }
         if (zoomCheck) {
-            document.getElementById(maps.element.id + '_Layer_Collections').appendChild(layerElement);
+            var layerGroupElement = document.getElementById(maps.element.id + '_Layer_Collections');
+            if (!isNullOrUndefined(layerGroupElement)) {
+                layerGroupElement.appendChild(layerElement);
+            }
         }
     });
 }
@@ -1128,15 +1131,16 @@ export function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
     var markerIndex = sameMarkerData[0].markerIndex;
     var dataIndex = sameMarkerData[0].dataIndex;
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    var clusterEle = getElement(clusterId);
+    var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElement(clusterId + '_Group') : getElement(clusterId);
     var clusterEleLabel = getElement(clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'visible');
     clusterEleLabel.setAttribute('visibility', 'visible');
     var markerEle;
     var markerDataLength = sameMarkerData[0].data.length;
     for (var i = 0; i < markerDataLength; i++) {
-        markerEle = getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+        markerEle = marker.shape === 'Balloon' ? getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         markerEle['style']['visibility'] = 'hidden';
     }
     removeElement(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine');
@@ -1158,13 +1162,13 @@ export function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     var getElementFunction = isDom ? getElement : markerElement.querySelector.bind(markerElement);
     var getQueryConnect = isDom ? '' : '#';
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    var clusterEle = getElementFunction(getQueryConnect + '' + clusterId);
+    var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
     var clusterEleLabel = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'hidden');
     clusterEleLabel.setAttribute('visibility', 'hidden');
-    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
-    var markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
+    var markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
     var height = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().height : marker.height;
     var width = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
     var centerX = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[0];
@@ -1200,7 +1204,7 @@ export function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
         var x1 = centerX + radius * Math.sin((Math.PI * 2 * newAngle) / 360);
         var y1 = centerY + radius * Math.cos((Math.PI * 2 * newAngle) / 360);
         path += start + 'L ' + (x1) + ' ' + y1 + ' ';
-        markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+        markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         if (markerEle.parentElement.id.indexOf('Template_Group') > -1) {
             markerEle['style']['transform'] = '';
             markerEle['style']['left'] = maps.isTileMap ? x1 - (width / 2) + 'px' : (x1 - (width / 2) - 10) + 'px';
@@ -1221,7 +1225,12 @@ export function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     markerElement = isDom ? getElementFunction(maps.element.id + '_Markers_Group') : markerElement;
     var groupEle = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine' });
     groupEle.appendChild(maps.renderer.drawPath(options));
-    markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0'));
+    if (marker.shape === 'Balloon') {
+        markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0_Group'));
+    }
+    else {
+        markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0'));
+    }
 }
 /**
  *
@@ -1248,6 +1257,7 @@ export function marker(eventArgs, markerSettings, markerData, dataIndex, locatio
         dashArray: markerSettings.dashArray, borderOpacity: isNullOrUndefined(eventArgs.border.opacity) ? markerSettings.opacity :
             eventArgs.border.opacity
     };
+    removeElement(markerID);
     var ele = drawSymbols(eventArgs.shape, eventArgs.imageUrl, { x: 0, y: 0 }, markerID, shapeCustom, markerCollection, maps);
     var x = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x;
     var y = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y;
@@ -1625,7 +1635,7 @@ export function drawBalloon(maps, options, size, location, type, element) {
     var y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
     if (type === 'Marker') {
-        var g = maps.renderer.createGroup({ id: options.id });
+        var g = maps.renderer.createGroup({ id: options.id + '_Group' });
         appendShape(balloon, g);
         pathElement = appendShape(g, element);
     }
@@ -2049,6 +2059,7 @@ export function getTranslate(mapObject, layer, animate) {
                     mapHeight = size.height;
                 }
                 scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
                 mapWidth *= scaleFactor;
                 mapHeight *= scaleFactor;
                 var widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
@@ -2099,6 +2110,7 @@ export function getTranslate(mapObject, layer, animate) {
                     else {
                         if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1 || mapObject.mapScaleValue <= 1.05) && !mapObject.zoomModule.isDragZoom) {
                             scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                            scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
                             mapWidth *= scaleFactor;
                             x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
                             mapHeight *= scaleFactor;
@@ -3143,8 +3155,7 @@ export function animate(element, delay, duration, process, end) {
             window.cancelAnimationFrame(clearAnimation);
             end.call(_this, { element: element });
             if (element.id.indexOf('Marker') > -1) {
-                console.log(element);
-                var markerElement = getElementByID(element.id.split('_')[0] + '_Markers_Group');
+                var markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
                 markerElement.setAttribute('style', markerStyle);
             }
         }