@syncfusion/ej2-maps 24.2.4 → 25.1.35

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

@@ -416,28 +416,26 @@ var GeoLocation = /** @__PURE__ @class */ (function () {
 function measureText(text, font) {
     var measureObject = document.getElementById('mapsmeasuretext');
     if (measureObject === null) {
-        measureObject = createElement('text', { id: 'mapsmeasuretext' });
+        measureObject = document.createElement('text');
+        measureObject.id = 'mapsmeasuretext';
         document.body.appendChild(measureObject);
     }
     measureObject.innerText = text;
-    measureObject.style.position = 'absolute';
-    if (typeof (font.size) === 'number') {
-        measureObject.style.fontSize = (font.size) + 'px';
-    }
-    else {
-        measureObject.style.fontSize = font.size;
-    }
-    measureObject.style.fontWeight = font.fontWeight;
-    measureObject.style.fontStyle = font.fontStyle;
-    measureObject.style.fontFamily = font.fontFamily;
-    measureObject.style.visibility = 'hidden';
-    measureObject.style.top = '-100';
-    measureObject.style.left = '0';
-    measureObject.style.whiteSpace = 'nowrap';
-    // For bootstrap line height issue
-    measureObject.style.lineHeight = 'normal';
+    measureObject.style.cssText = 'position: absolute; font-size: ' + (typeof (font.size) === 'number' ? (font.size + 'px') : font.size) +
+        '; font-weight: ' + font.fontWeight + '; font-style: ' + font.fontStyle + '; font-family: ' + font.fontFamily +
+        '; visibility: hidden; top: -100; left: 0; whiteSpace: nowrap; lineHeight: normal';
     return new Size(measureObject.clientWidth, measureObject.clientHeight);
 }
+/** @private */
+function measureTextElement(text, font) {
+    var canvas = document.createElement('canvas');
+    var context = canvas.getContext('2d');
+    context.font = font.fontStyle + " " + font.fontWeight + " " + (typeof font.size === 'number' ? font.size + 'px' : font.size) + " " + font.fontFamily;
+    var metrics = context.measureText(text);
+    var width = metrics.width;
+    var height = parseFloat(font.size) || 16;
+    return new Size(width, height);
+}
 /**
  * Internal use of text options
  *
@@ -984,6 +982,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
         factor = maps.mapLayerPanel.calculateFactor(currentLayer);
     }
     var isClusteringCompleted = false;
+    var currentZoomFactor = !maps.isTileMap ? maps.mapScaleValue : maps.tileZoomLevel;
     maps.trigger('markerClusterRendering', eventArg, function (clusterargs) {
         Array.prototype.forEach.call(markerTemplate.childNodes, function (markerElement, o) {
             indexCollection = [];
@@ -992,20 +991,28 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                 bounds1 = tempElement.getBoundingClientRect();
                 indexCollection.push(o);
                 if (!isNullOrUndefined(bounds1)) {
-                    Array.prototype.forEach.call(markerTemplate.childNodes, function (otherMarkerElement, p) {
-                        if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
-                            tempElement = otherMarkerElement;
-                            bounds2 = tempElement.getBoundingClientRect();
-                            if (!isNullOrUndefined(bounds2)) {
-                                if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
-                                    || bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
-                                    colloideBounds.push(bounds2);
-                                    otherMarkerElement['style']['visibility'] = 'hidden';
-                                    indexCollection.push(p);
+                    var list = (maps.markerModule.zoomedMarkerCluster.length > 0 && maps.markerModule.zoomedMarkerCluster[layerIndex] && maps.markerModule.zoomedMarkerCluster[layerIndex][o] && maps.markerModule.zoomedMarkerCluster[layerIndex][o].length > 0)
+                        || (maps.markerModule.initialMarkerCluster.length > 0 && maps.markerModule.initialMarkerCluster[layerIndex] && maps.markerModule.initialMarkerCluster[layerIndex][o] && maps.markerModule.initialMarkerCluster[layerIndex][o].length > 0) ?
+                        (maps.previousScale < currentZoomFactor ? maps.markerModule.zoomedMarkerCluster[layerIndex][o] : maps.markerModule.initialMarkerCluster[layerIndex][o]) : null;
+                    if (!isNullOrUndefined(list) && list.length !== 0) {
+                        Array.prototype.forEach.call(list, function (currentIndex, p) {
+                            if (o !== currentIndex) {
+                                var otherMarkerElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                                    + 0 + '_dataIndex_' + currentIndex);
+                                if (otherMarkerElement['style']['visibility'] !== 'hidden') {
+                                    markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, currentIndex);
                                 }
                             }
-                        }
-                    });
+                        });
+                    }
+                    else {
+                        Array.prototype.forEach.call(markerTemplate.childNodes, function (otherMarkerElement, p) {
+                            if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
+                                markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, p);
+                            }
+                        });
+                    }
+                    markerClusterListHandler(maps, currentZoomFactor, layerIndex, o, indexCollection);
                     tempX = bounds1.left + bounds1.width / 2;
                     tempY = bounds1.top + bounds1.height;
                     if (colloideBounds.length > 0) {
@@ -1080,6 +1087,9 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                 }
                 colloideBounds = [];
             }
+            else {
+                markerClusterListHandler(maps, currentZoomFactor, layerIndex, o, indexCollection);
+            }
             isClusteringCompleted = true;
         });
         layerElement.appendChild(clusterGroup);
@@ -1168,6 +1178,30 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
     });
     return isClusteringCompleted;
 }
+/** @private */
+function markerClusterListHandler(maps, currentZoomFactor, layerIndex, index, indexCollection) {
+    if (currentZoomFactor == 1) {
+        var initialMarkerClusterList = isNullOrUndefined(maps.markerModule.initialMarkerCluster[layerIndex][index]) ? [] : indexCollection.length > 1 ? indexCollection : [];
+        maps.markerModule.initialMarkerCluster[layerIndex][index] = initialMarkerClusterList;
+        var zoomedMarkerClusterList = isNullOrUndefined(maps.markerModule.zoomedMarkerCluster[layerIndex][index]) ? [] : indexCollection.length > 1 ? indexCollection : [];
+        maps.markerModule.zoomedMarkerCluster[layerIndex][index] = zoomedMarkerClusterList;
+    }
+    else if (currentZoomFactor > 1) {
+        maps.markerModule.zoomedMarkerCluster[layerIndex][index] = indexCollection.length > 1 ? indexCollection : [];
+    }
+}
+/** @private */
+function markerBoundsComparer(tempElement, markerBounds, colloideBounds, indexCollection, p) {
+    var currentMarkerBound = tempElement.getBoundingClientRect();
+    if (!isNullOrUndefined(currentMarkerBound)) {
+        if (!(markerBounds.left > currentMarkerBound.right || markerBounds.right < currentMarkerBound.left
+            || markerBounds.top > currentMarkerBound.bottom || markerBounds.bottom < currentMarkerBound.top)) {
+            colloideBounds.push(currentMarkerBound);
+            tempElement['style']['visibility'] = 'hidden';
+            indexCollection.push(p);
+        }
+    }
+}
 /**
  *
  * @param {MarkerClusterData[]} sameMarkerData - Specifies the marker data
@@ -1962,22 +1996,40 @@ function isCustomPath(layerData) {
  * @returns {string} - Returns the string
  * @private
  */
-function textTrim(maxWidth, text, font) {
+function textTrim(maxWidth, text, font, width, isCanvasMeasure, widthList) {
     var label = text;
-    var size = measureText(text, font).width;
-    if (size > maxWidth) {
+    if (isNullOrUndefined(width)) {
+        if (!isCanvasMeasure) {
+            width = measureText(text, font).width;
+        }
+        else {
+            width = measureTextElement(text, font).width;
+        }
+    }
+    if (width > maxWidth) {
         var textLength = text.length;
         for (var i = textLength - 1; i >= 0; --i) {
             label = text.substring(0, i) + '...';
-            size = measureText(label, font).width;
-            if (size <= maxWidth || label.length < 4) {
+            if (!isCanvasMeasure) {
+                width = measureText(label, font).width;
+            }
+            else {
+                width = measureTextElement(label, font).width;
+            }
+            if (width <= maxWidth || label.length < 4) {
                 if (label.length < 4) {
                     label = ' ';
                 }
+                if (!isNullOrUndefined(widthList)) {
+                    widthList.push(width);
+                }
                 return label;
             }
         }
     }
+    if (!isNullOrUndefined(widthList)) {
+        widthList.push(width);
+    }
     return label;
 }
 /**
@@ -2055,11 +2107,11 @@ function getTranslate(mapObject, layer, animate) {
     }
     if (mapObject.zoomSettings.shouldZoomInitially && mapObject.zoomSettings.enable) {
         mapObject.mapScaleValue = scaleFactor = zoomFactorValue = ((mapObject.zoomSettings.shouldZoomInitially || mapObject.enablePersistence) && mapObject.scale === 1)
-            ? mapObject.scale : (isNullOrUndefined(mapObject.markerZoomFactor)) ? 1 : mapObject.markerZoomFactor;
-        if (mapObject.mapScaleValue !== mapObject.markerZoomFactor && !mapObject.enablePersistence) {
+            ? mapObject.scale : (isNullOrUndefined(mapObject.markerZoomFactor)) ? 1 : (mapObject.markerZoomedState ? mapObject.markerZoomFactor : parseInt(mapObject.scale.toString()));
+        if (mapObject.markerZoomedState && mapObject.mapScaleValue !== mapObject.markerZoomFactor && !mapObject.enablePersistence) {
             mapObject.mapScaleValue = zoomFactorValue = mapObject.markerZoomFactor;
         }
-        if (!isNullOrUndefined(mapObject.markerCenterLatitude) && !isNullOrUndefined(mapObject.markerCenterLongitude)) {
+        if (mapObject.markerZoomedState && !isNullOrUndefined(mapObject.markerCenterLatitude) && !isNullOrUndefined(mapObject.markerCenterLongitude)) {
             centerLatitude = mapObject.markerCenterLatitude;
             centerLongitude = mapObject.markerCenterLongitude;
         }
@@ -4401,6 +4453,28 @@ var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
     ], TooltipSettings.prototype, "valuePath", void 0);
     return TooltipSettings;
 }(ChildProperty));
+/**
+ * Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
+ */
+var PolygonTooltipSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$2(PolygonTooltipSettings, _super);
+    function PolygonTooltipSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$1([
+        Property(false)
+    ], PolygonTooltipSettings.prototype, "visible", void 0);
+    __decorate$1([
+        Property('')
+    ], PolygonTooltipSettings.prototype, "fill", void 0);
+    __decorate$1([
+        Complex({ color: 'transparent', width: 1 }, Border)
+    ], PolygonTooltipSettings.prototype, "border", void 0);
+    __decorate$1([
+        Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
+    ], PolygonTooltipSettings.prototype, "textStyle", void 0);
+    return PolygonTooltipSettings;
+}(ChildProperty));
 /**
  * Gets or sets the options to customize the margin of the maps.
  */
@@ -4645,6 +4719,12 @@ var PolygonSetting = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Property([])
     ], PolygonSetting.prototype, "points", void 0);
+    __decorate$1([
+        Property('')
+    ], PolygonSetting.prototype, "tooltipText", void 0);
+    __decorate$1([
+        Property('')
+    ], PolygonSetting.prototype, "tooltipTemplate", void 0);
     return PolygonSetting;
 }(ChildProperty));
 /**
@@ -4665,6 +4745,9 @@ var PolygonSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Complex({}, HighlightSettings)
     ], PolygonSettings.prototype, "highlightSettings", void 0);
+    __decorate$1([
+        Complex({}, PolygonTooltipSettings)
+    ], PolygonSettings.prototype, "tooltipSettings", void 0);
     return PolygonSettings;
 }(ChildProperty));
 /**
@@ -5521,6 +5604,18 @@ var annotationRendering = 'annotationRendering';
  * @private
  */
 var itemSelection = 'itemSelection';
+/**
+ * Specifies the maps pan complete event name.
+ *
+ * @private
+ */
+var panComplete = 'panComplete';
+/**
+ * Specifies the maps zoom complete event name.
+ *
+ * @private
+ */
+var zoomComplete = 'zoomComplete';
 /**
  * Specifies the maps item highlight event name.
  *
@@ -5593,7 +5688,6 @@ var BingMap = /** @__PURE__ @class */ (function () {
  */
 var ColorMapping = /** @__PURE__ @class */ (function () {
     function ColorMapping(maps) {
-        this.maps = maps;
     }
     /**
      * To get color based on shape settings.
@@ -5973,8 +6067,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         else if (panel.mapObject.defaultState) {
             panel.mapObject.previousZoomFactor = panel.mapObject.tileZoomLevel;
             panel.mapObject.tileZoomLevel = zoomFactorValue;
-            panel.mapObject.tileTranslatePoint.x = 0;
-            panel.mapObject.tileTranslatePoint.y = 0;
+            if (!isNullOrUndefined(panel.mapObject.tileTranslatePoint)) {
+                panel.mapObject.tileTranslatePoint.x = 0;
+                panel.mapObject.tileTranslatePoint.y = 0;
+            }
         }
         if (zoomFactorValue <= 1 && !isNullOrUndefined(panel.mapObject.height) && !panel.mapObject.zoomSettings.shouldZoomInitially
             && (panel.mapObject.tileZoomLevel === panel.mapObject.tileZoomScale) && this.mapObject.initialCheck) {
@@ -5982,8 +6078,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         }
         if (!isNullOrUndefined(panel.mapObject.centerLatOfGivenLocation) && !isNullOrUndefined(panel.mapObject.centerLongOfGivenLocation) &&
             panel.mapObject.zoomNotApplied) {
-            centerTileMap.y = panel.mapObject.centerLatOfGivenLocation;
-            centerTileMap.x = panel.mapObject.centerLongOfGivenLocation;
+            if (!isNullOrUndefined(centerTileMap)) {
+                centerTileMap.y = panel.mapObject.centerLatOfGivenLocation;
+                centerTileMap.x = panel.mapObject.centerLongOfGivenLocation;
+            }
             panel.mapObject.tileZoomLevel = panel.mapObject.mapScaleValue = panel.mapObject.scaleOfGivenLocation;
         }
         panel.mapObject.tileTranslatePoint = panel.panTileMap(panel.mapObject.availableSize.width, panel.mapObject.availableSize.height, centerTileMap);
@@ -5994,8 +6092,10 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             var padding = this.mapObject.layers[this.mapObject.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
                 20 : 0;
             var totalSize = Math.pow(2, this.mapObject.initialZoomLevel) * 256;
-            this.mapObject.initialTileTranslate.x = (this.mapObject.availableSize.width / 2) - (totalSize / 2);
-            this.mapObject.initialTileTranslate.y = (this.mapObject.availableSize.height / 2) - (totalSize / 2) + padding;
+            if (!isNullOrUndefined(this.mapObject.initialTileTranslate)) {
+                this.mapObject.initialTileTranslate.x = (this.mapObject.availableSize.width / 2) - (totalSize / 2);
+                this.mapObject.initialTileTranslate.y = (this.mapObject.availableSize.height / 2) - (totalSize / 2) + padding;
+            }
         }
         panel.generateTiles(panel.mapObject.tileZoomLevel, panel.mapObject.tileTranslatePoint, null, bing);
         if (!isNullOrUndefined(panel.mapObject.previousZoomFactor)
@@ -6511,7 +6611,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var intersect_1 = [];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            renderData.map(function (currentShapeData, i) {
+            Array.prototype.forEach.call(renderData, function (currentShapeData, i) {
                 _this.renderLabel(_this.currentLayer, layerIndex, currentShapeData, group, i, labelTemplateEle, intersect_1);
             });
             this.groupElements.push(group);
@@ -7668,6 +7768,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             this.trigger(load, { maps: this });
             this.createSVG();
             this.findBaseAndSubLayers();
+            if (!isNullOrUndefined(this.markerModule)) {
+                this.markerModule.initializeMarkerClusterList();
+            }
             this.createSecondaryElement();
             this.addTabIndex();
             this.themeStyle = getThemeStyle(this.theme);
@@ -8128,55 +8231,63 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.getMinMaxLatitudeLongitude = function () {
-        var element = document.getElementById(this.element.id).getBoundingClientRect();
-        var minPosition = this.isTileMap ? this.pointToLatLong((this.mapAreaRect.x - this.margin.left), -this.mapAreaRect.y) : this.getGeoLocation(0, (this.mapAreaRect.x + element.left), this.mapAreaRect.y);
-        var maxPosition = this.isTileMap ? this.pointToLatLong(this.mapAreaRect.width, (this.mapAreaRect.height - this.mapAreaRect.y)) :
-            this.getGeoLocation(0, (this.mapAreaRect.x + element.left + this.mapAreaRect.width), (this.mapAreaRect.y + this.mapAreaRect.height));
-        var MinMaxLatitudeLongitude = {
-            minLatitude: minPosition.latitude, maxLatitude: maxPosition.latitude, minLongitude: minPosition.longitude,
-            maxLongitude: maxPosition.longitude
-        };
-        return MinMaxLatitudeLongitude;
+        var mapsElement = document.getElementById(this.element.id);
+        if (!isNullOrUndefined(mapsElement)) {
+            var element = mapsElement.getBoundingClientRect();
+            var minPosition = this.isTileMap ? this.pointToLatLong((this.mapAreaRect.x - this.margin.left), -this.mapAreaRect.y) : this.getGeoLocation(0, (this.mapAreaRect.x + element.left), this.mapAreaRect.y);
+            var maxPosition = this.isTileMap ? this.pointToLatLong(this.mapAreaRect.width, (this.mapAreaRect.height - this.mapAreaRect.y)) :
+                this.getGeoLocation(0, (this.mapAreaRect.x + element.left + this.mapAreaRect.width), (this.mapAreaRect.y + this.mapAreaRect.height));
+            var MinMaxLatitudeLongitude = {
+                minLatitude: minPosition.latitude, maxLatitude: maxPosition.latitude, minLongitude: minPosition.longitude,
+                maxLongitude: maxPosition.longitude
+            };
+            return MinMaxLatitudeLongitude;
+        }
+        else {
+            return { minLatitude: 0, maxLatitude: 0, minLongitude: 0,
+                maxLongitude: 0 };
+        }
     };
     /**
      * @returns {void}
      * @private
      */
     Maps.prototype.arrangeTemplate = function () {
+        var _this = this;
         if (document.getElementById(this.element.id + '_Legend_Border')) {
             document.getElementById(this.element.id + '_Legend_Border').style.pointerEvents = 'none';
         }
         var templateElements = document.getElementsByClassName(this.element.id + '_template');
         if (!isNullOrUndefined(templateElements) && templateElements.length > 0 &&
             getElementByID(this.element.id + '_Layer_Collections') && !this.isTileMap) {
-            for (var i = 0; i < templateElements.length; i++) {
+            Array.prototype.forEach.call(templateElements, function (templateGroupEle, i) {
                 var offSetLetValue = 0;
                 var offSetTopValue = 0;
-                var templateGroupEle = templateElements[i];
                 if (!isNullOrUndefined(templateGroupEle) && templateGroupEle.childElementCount > 0) {
-                    var layerOffset = getElementByID(this.element.id + '_Layer_Collections').getBoundingClientRect();
+                    var layerOffset = getElementByID(_this.element.id + '_Layer_Collections').getBoundingClientRect();
                     var elementOffset = getElementByID(templateGroupEle.id).getBoundingClientRect();
                     if (templateGroupEle.id.indexOf('Marker') === -1) {
-                        offSetLetValue = this.isTileMap ? 0 : (layerOffset.left < elementOffset.left) ?
+                        offSetLetValue = _this.isTileMap ? 0 : (layerOffset.left < elementOffset.left) ?
                             -(Math.abs(elementOffset.left - layerOffset.left)) : (Math.abs(elementOffset.left - layerOffset.left));
-                        offSetTopValue = this.isTileMap ? 0 : (layerOffset.top < elementOffset.top) ?
+                        offSetTopValue = _this.isTileMap ? 0 : (layerOffset.top < elementOffset.top) ?
                             -(Math.abs(elementOffset.top - layerOffset.top)) : Math.abs(elementOffset.top - layerOffset.top);
                     }
-                    for (var j = 0; j < templateGroupEle.childElementCount; j++) {
-                        var currentTemplate = templateGroupEle.childNodes[j];
+                    Array.prototype.forEach.call(templateGroupEle.childNodes, function (currentTemplate, j) {
                         if (currentTemplate.id.indexOf('Marker') !== -1) {
-                            var elementOffset_1 = getElementByID(currentTemplate.id).getBoundingClientRect();
-                            currentTemplate.style.left = parseFloat(currentTemplate.style.left) - (this.isTileMap ? 0 : elementOffset_1.width / 2) + 'px';
-                            currentTemplate.style.top = parseFloat(currentTemplate.style.top) - (this.isTileMap ? 0 : elementOffset_1.height / 2) + 'px';
+                            if (currentTemplate.style.visibility != "hidden") {
+                                var elementOffset_1 = getElementByID(currentTemplate.id).getBoundingClientRect();
+                                currentTemplate.style.left = parseFloat(currentTemplate.style.left) - (_this.isTileMap ? 0 : elementOffset_1.width / 2) + 'px';
+                                currentTemplate.style.top = parseFloat(currentTemplate.style.top) - (_this.isTileMap ? 0 : elementOffset_1.height / 2) + 'px';
+                            }
                         }
                         else {
                             currentTemplate.style.left = parseFloat(currentTemplate.style.left) + offSetLetValue + 'px';
                             currentTemplate.style.top = parseFloat(currentTemplate.style.top) + offSetTopValue + 'px';
                             currentTemplate.style.transform = 'translate(-50%, -50%)';
                         }
-                    }
+                    });
                 }
-            }
+            });
         }
     };
     Maps.prototype.createTile = function () {
@@ -8304,7 +8415,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             var options = new TextOption(this.element.id + '_Map_' + type, location_1.x, location_1.y, 'start', trimmedTitle);
             var titleBounds = new Rect(location_1.x, location_1.y, elementSize.width, elementSize.height);
             var element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
-            element.setAttribute('aria-label', this.description || title.text);
+            element.setAttribute('aria-label', title.text);
+            element.setAttribute('role', 'region');
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
                 height = Math.abs((titleBounds.y + this.margin.bottom) - this.availableSize.height);
                 this.mapAreaRect = new Rect(this.margin.left, titleBounds.y + 10, width, height - 10);
@@ -8455,7 +8567,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         }
         else if (this.zoomSettings.enable && zoom && event['keyCode'] === 82) {
             zoom.performZoomingByToolBar('reset');
-            zoom.isPanning = false;
+            zoom.isPanModeEnabled = false;
         }
         else if (this.zoomSettings.enable && this.zoomSettings.enablePanning && zoom
             && (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
@@ -8619,12 +8731,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         return latLongValue;
     };
     /** @private */
-    Maps.prototype.getClickLocation = function (targetId, pageX, pageY, targetElement, x, y) {
+    Maps.prototype.getClickLocation = function (targetId, pageX, pageY, targetElement, x, y, type) {
         var layerIndex = 0;
         var latLongValue;
-        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))) {
+        if (targetId.indexOf('_LayerIndex_') !== -1 && !this.isTileMap && (!isNullOrUndefined(type) ||
+            ((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) {
@@ -8683,8 +8795,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 latLongValue = this.getGeoLocation(layerIndex, x, 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))) {
+        else if (this.isTileMap && (!isNullOrUndefined(type) ||
+            ((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;
@@ -9417,13 +9530,51 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.mouseDownEvent = { x: null, y: null };
         this.mouseClickEvent = { x: null, y: null };
         this.formatFunction = null;
-        //TODO: Calling the below code throws spec issue.
-        //this.renderer = null;
-        this.availableSize = new Size(0, 0);
+        this.localeObject = null;
+        this.defaultLocalConstants = null;
+        this.intl = null;
+        this.mapAreaRect = null;
+        this.layersCollection = null;
+        this.themeStyle = null;
+        this.totalRect = null;
+        this.baseSize = null;
+        this.baseMapBounds = null;
+        this.baseMapRectBounds = null;
+        this.baseTranslatePoint = null;
+        this.baseTileTranslatePoint = null;
+        this.markerZoomCenterPoint = null;
+        this.currentTiles = null;
+        this.serverProcess = null;
+        this.toolbarProperties = null;
+        this.zoomLabelPositions = null;
+        this.resizeEvent = null;
+        this.availableSize = null;
         if (document.getElementById('mapsmeasuretext')) {
             document.getElementById('mapsmeasuretext').remove();
         }
         this.removeSvg();
+        this.svgObject = null;
+        this.mapLayerPanel = null;
+        this.renderer = null;
+        this.translatePoint = null;
+        this.tileTranslatePoint = null;
+        this.previousPoint = null;
+        this.dataLabelShape = [];
+        this.zoomShapeCollection = [];
+        this.selectedElementId = [];
+        this.selectedMarkerElementId = [];
+        this.selectedBubbleElementId = [];
+        this.shapeSelectionClass = null;
+        this.markerSelectionClass = null;
+        this.bubbleSelectionClass = null;
+        this.navigationSelectionClass = null;
+        this.selectedNavigationElementId = [];
+        this.polygonSelectionClass = null;
+        this.selectedPolygonElementId = [];
+        this.legendSelectionClass = null;
+        this.previousTranslate = null;
+        this.initialTileTranslate = null;
+        this.markerDragArgument = null;
     };
     /**
      * Gets component name
@@ -9566,85 +9717,99 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         if (this.isBubbleVisible()) {
             modules.push({
                 member: 'Bubble',
-                args: [this]
+                args: [this],
+                name: 'Bubble'
             });
         }
         if (isVisible.highlight) {
             modules.push({
                 member: 'Highlight',
-                args: [this]
+                args: [this],
+                name: 'Highlight'
             });
         }
         if (isVisible.selection) {
             modules.push({
                 member: 'Selection',
-                args: [this]
+                args: [this],
+                name: 'Selection'
             });
         }
         if (this.legendSettings.visible) {
             modules.push({
                 member: 'Legend',
-                args: [this]
+                args: [this],
+                name: 'Legend'
             });
         }
         if (this.zoomSettings.enable || this.zoomSettings.zoomFactor > this.zoomSettings.minZoom) {
             modules.push({
                 member: 'Zoom',
-                args: [this]
+                args: [this],
+                name: 'Zoom'
             });
         }
         if (this.isMarkersVisible()) {
             modules.push({
                 member: 'Marker',
-                args: [this]
+                args: [this],
+                name: 'Marker'
             });
         }
         if (this.isDataLabelVisible()) {
             modules.push({
                 member: 'DataLabel',
-                args: [this]
+                args: [this],
+                name: 'DataLabel'
             });
         }
         if (this.isNavigationVisible()) {
             modules.push({
                 member: 'NavigationLine',
-                args: [this]
+                args: [this],
+                name: 'NavigationLine'
             });
         }
         if (this.isPolygonVisible()) {
             modules.push({
                 member: 'Polygon',
-                args: [this]
+                args: [this],
+                name: 'Polygon'
             });
         }
         if (isVisible.tooltip) {
             modules.push({
                 member: 'MapsTooltip',
-                args: [this]
+                args: [this],
+                name: 'MapsTooltip'
             });
         }
         if (annotationEnable) {
             modules.push({
                 member: 'Annotations',
-                args: [this, Annotations]
+                args: [this, Annotations],
+                name: 'Annotations'
             });
         }
         if (this.allowPrint) {
             modules.push({
                 member: 'Print',
-                args: [this]
+                args: [this],
+                name: 'Print'
             });
         }
         if (this.allowImageExport) {
             modules.push({
                 member: 'ImageExport',
-                args: [this]
+                args: [this],
+                name: 'ImageExport'
             });
         }
         if (this.allowPdfExport) {
             modules.push({
                 member: 'PdfExport',
-                args: [this]
+                args: [this],
+                name: 'PdfExport'
             });
         }
         return modules;
@@ -9849,6 +10014,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     if (polygon.points.length > 0) {
                         isSelection = layer.polygonSettings.highlightSettings.enable || isSelection;
                         isHighlight = layer.polygonSettings.selectionSettings.enable || isHighlight;
+                        istooltipVisible = layer.polygonSettings.tooltipSettings.visible || istooltipVisible;
                     }
                 }
                 for (var _d = 0, markers_1 = markers; _d < markers_1.length; _d++) {
@@ -10126,6 +10292,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Event()
     ], Maps.prototype, "pan", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "panComplete", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "zoomComplete", void 0);
     Maps = __decorate([
         NotifyPropertyChanges
     ], Maps);
@@ -10353,10 +10525,10 @@ var Bubble = /** @__PURE__ @class */ (function () {
     Bubble.prototype.getbubble = function (target) {
         var id = target.split('_LayerIndex_');
         var index = parseInt(id[1].split('_')[0], 10);
-        var layer = this.maps.layers[index];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var data;
         if (target.indexOf('_BubbleIndex_') > -1) {
+            var layer = this.maps.layers[index];
             var bubbleIndex = parseInt(id[1].split('_BubbleIndex_')[1], 10);
             var dataIndex = parseInt(id[1].split('_BubbleIndex_')[1].split('_dataIndex_')[1], 10);
             if (!isNaN(bubbleIndex)) {
@@ -10406,8 +10578,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
      */
     Bubble.prototype.destroy = function () {
         this.bubbleCollection = [];
-        //TODO: Calling the below code throws spec issue.
-        //this.maps = null;
+        this.maps = null;
     };
     return Bubble;
 }());
@@ -10420,6 +10591,8 @@ var Marker = /** @__PURE__ @class */ (function () {
         this.maps = maps;
         this.trackElements = [];
         this.sameMarkerData = [];
+        this.initialMarkerCluster = [];
+        this.zoomedMarkerCluster = [];
     }
     Marker.prototype.markerRender = function (maps, layerElement, layerIndex, factor, type) {
         var _this = this;
@@ -10452,12 +10625,11 @@ var Marker = /** @__PURE__ @class */ (function () {
                 getZoomTranslate(maps, currentLayer, allowAnimation) :
                 getTranslate(maps, currentLayer, allowAnimation);
         }
-        var _loop_1 = function (markerIndex) {
-            var markerSettings = currentLayer.markerSettings[markerIndex];
+        Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSettings, markerIndex) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
-            var _loop_2 = function (dataIndex) {
-                var data = markerData[dataIndex];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
                 maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                 var eventArgs = {
                     cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
@@ -10531,15 +10703,8 @@ var Marker = /** @__PURE__ @class */ (function () {
                         }
                     }
                 });
-            };
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            for (var dataIndex = 0; dataIndex < markerData.length; dataIndex++) {
-                _loop_2(dataIndex);
-            }
-        };
-        for (var markerIndex = 0; markerIndex < currentLayer.markerSettings.length; markerIndex++) {
-            _loop_1(markerIndex);
-        }
+            });
+        });
     };
     /**
      * To find zoom level for individual layers like India, USA.
@@ -10899,6 +11064,13 @@ var Marker = /** @__PURE__ @class */ (function () {
         };
         this.maps.trigger(markerClusterMouseMove, eventArgs);
     };
+    /** @private */
+    Marker.prototype.initializeMarkerClusterList = function () {
+        for (var i = 0; i < this.maps.layers.length; i++) {
+            this.initialMarkerCluster[i] = [];
+            this.zoomedMarkerCluster[i] = [];
+        }
+    };
     /**
      * Get module name.
      *
@@ -10918,6 +11090,8 @@ var Marker = /** @__PURE__ @class */ (function () {
         this.trackElements = [];
         this.markerSVGObject = null;
         this.sameMarkerData = [];
+        this.initialMarkerCluster = [];
+        this.zoomedMarkerCluster = [];
     };
     return Marker;
 }());
@@ -10927,7 +11101,6 @@ var Marker = /** @__PURE__ @class */ (function () {
  */
 var Polygon = /** @__PURE__ @class */ (function () {
     function Polygon(maps) {
-        this.maps = maps;
     }
     /**
      * To render polygon for maps
@@ -10939,7 +11112,6 @@ var Polygon = /** @__PURE__ @class */ (function () {
      * @private
      */
     Polygon.prototype.polygonRender = function (maps, layerIndex, factor) {
-        var _this = this;
         var currentLayer = maps.layersCollection[layerIndex];
         var polygonsSVGObject = maps.renderer.createGroup({
             id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group'
@@ -10953,7 +11125,7 @@ var Polygon = /** @__PURE__ @class */ (function () {
             var path = calculatePolygonPath(maps, factor, currentLayer, polygonData);
             var pathOptions = new PathOption(maps.element.id + '_LayerIndex_' + layerIndex + '_PolygonIndex_' + polygonIndex, polygonSetting.fill, (polygonSetting.borderWidth / factor), polygonSetting.borderColor, polygonSetting.opacity, polygonSetting.borderOpacity, '', path);
             var polygonEle = maps.renderer.drawPath(pathOptions);
-            maintainSelection(_this.maps.selectedPolygonElementId, _this.maps.polygonSelectionClass, polygonEle, 'PolygonselectionMapStyle');
+            maintainSelection(maps.selectedPolygonElementId, maps.polygonSelectionClass, polygonEle, 'PolygonselectionMapStyle');
             polygonSVGObject.appendChild(polygonEle);
             polygonsSVGObject.appendChild(polygonSVGObject);
         });
@@ -10974,7 +11146,6 @@ var Polygon = /** @__PURE__ @class */ (function () {
      * @private
      */
     Polygon.prototype.destroy = function () {
-        this.maps = null;
     };
     return Polygon;
 }());
@@ -11060,7 +11231,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         var locationY;
         style.fontFamily = this.maps.theme.toLowerCase() !== 'material' ? this.maps.themeStyle.labelFontFamily : style.fontFamily;
         style.fontWeight = style.fontWeight || this.maps.themeStyle.fontWeight || Theme.dataLabelFont.fontWeight;
-        shape = shapes['property'];
+        shape = !isNullOrUndefined(shapes) ? shapes['property'] : null;
         var properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?
             layer.shapePropertyPath : [layer.shapePropertyPath]);
         var propertyPath;
@@ -11092,7 +11263,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         datasrcObj = this.getDataLabel(
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         layer.dataSource, layer.shapeDataPath, shapeData['properties'][propertyPath], layer.shapeDataPath);
-        if (!isNullOrUndefined(shapes['property'])) {
+        if (!isNullOrUndefined(shapes) && !isNullOrUndefined(shapes['property'])) {
             shapePoint = [[]];
             if (!layerData[index]['_isMultiPolygon'] && layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11195,13 +11366,13 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                 if (eventargs_1.text !== text && !eventargs_1.cancel) {
                     text = eventargs_1.text;
                 }
-                var textSize = measureText(text, style);
+                var textSize = measureTextElement(text, style);
                 var trimmedLable = text;
                 var elementSize = textSize;
-                var startY = location['y'] - textSize['height'] / 4;
-                var endY = location['y'] + textSize['height'] / 4;
-                var start = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 4;
-                var end = ((location['y'] + transPoint['y']) * scale) + textSize['height'] / 4;
+                var startY = location['y'] - textSize['height'] / 2;
+                var endY = location['y'] + textSize['height'] / 2;
+                var start = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
+                var end = ((location['y'] + transPoint['y']) * scale) + textSize['height'] / 2;
                 position = filter(shapePoint[midIndex], startY, endY);
                 if (!isPoint && position.length > 5 && (shapeData['geometry']['type'] !== 'MultiPolygon') &&
                     (shapeData['type'] !== 'MultiPolygon')) {
@@ -11242,8 +11413,8 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                     if (dataLabelSettings.smartLabelMode === 'Trim') {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var textType = typeof text === 'number' ? text.toString() : text;
-                        trimmedLable = textTrim(width, textType, style);
-                        elementSize = measureText(trimmedLable, style);
+                        trimmedLable = textTrim(width, textType, style, null, true);
+                        elementSize = measureTextElement(trimmedLable, style);
                         options = new TextOption(labelId, textLocation.x, textLocation.y, 'middle', trimmedLable, '', '');
                     }
                     if (dataLabelSettings.smartLabelMode === 'None') {
@@ -11284,19 +11455,19 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                                     if (_this.value[index]['leftWidth'] > intersect[j]['leftWidth']) {
                                         width = intersect[j]['rightWidth'] - _this.value[index]['leftWidth'];
                                         difference = width - (_this.value[index]['rightWidth'] - _this.value[index]['leftWidth']);
-                                        trimmedLable = textTrim(difference, text, style);
+                                        trimmedLable = textTrim(difference, text, style, null, true);
                                         break;
                                     }
                                     if (_this.value[index]['leftWidth'] < intersect[j]['leftWidth']) {
                                         width = _this.value[index]['rightWidth'] - intersect[j]['leftWidth'];
                                         difference = Math.abs(width - (_this.value[index]['rightWidth'] - _this.value[index]['leftWidth']));
-                                        trimmedLable = textTrim(difference, text, style);
+                                        trimmedLable = textTrim(difference, text, style, null, true);
                                         break;
                                     }
                                 }
                             }
                         }
-                        elementSize = measureText(trimmedLable, style);
+                        elementSize = measureTextElement(trimmedLable, style);
                         intersect.push(_this.value[index]);
                         options = new TextOption(labelId, textLocation.x, (textLocation.y), 'middle', trimmedLable, '', '');
                     }
@@ -11330,6 +11501,8 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                         }
                     }
                     element = renderTextElement(options, style, style.color || _this.maps.themeStyle.dataLabelFontColor, group);
+                    element.setAttribute('aria-label', text);
+                    element.setAttribute('role', 'region');
                     element.setAttribute('visibility', layer.dataLabelSettings.animationDuration > 0 || animationMode === 'Enable' ? 'hidden' : 'visibile');
                     if (zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied) {
                         element.setAttribute('transform', 'translate( ' + ((location['x'] + labelArgs.offsetX)) + ' '
@@ -11339,7 +11512,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                     }
                     else {
                         element.setAttribute('transform', 'translate( ' + (((location['x'] + transPoint.x) * scale) + labelArgs.offsetX) + ' '
-                            + ((((location['y'] + transPoint.y) * scale) + (elementSize.height / 4)) + labelArgs.offsetY) + ' )');
+                            + ((((location['y'] + transPoint.y) * scale) + (elementSize.height / 2)) + labelArgs.offsetY) + ' )');
                     }
                     group.appendChild(element);
                 }
@@ -11389,16 +11562,16 @@ var DataLabel = /** @__PURE__ @class */ (function () {
     DataLabel.prototype.getPoint = function (shapes, points) {
         if (shapes['type'] === 'MultiLineString') {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shapes.map(function (current) {
+            Array.prototype.forEach.call(shapes, function (current) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                current.map(function (shape) {
+                Array.prototype.forEach.call(current, function (shape) {
                     points.push(new Point(shape['point']['x'], shape['point']['y']));
                 });
             });
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shapes.map(function (current) {
+            Array.prototype.forEach.call(shapes, function (current) {
                 points.push(new Point(current['point']['x'], current['point']['y']));
             });
         }
@@ -12022,7 +12195,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
                 textFont.fontFamily = !isNullOrUndefined(textFont.fontFamily) ? textFont.fontFamily : this.maps.themeStyle.fontFamily;
                 textFont.size = map.themeStyle.legendFontSize || textFont.size;
-                renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
+                var element = renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
+                element.setAttribute('aria-label', item['text']);
+                element.setAttribute('role', 'region');
                 this.legendGroup.appendChild(render.drawRectangle(rectOptions));
                 this.legendToggle();
             }
@@ -12099,7 +12274,9 @@ var Legend = /** @__PURE__ @class */ (function () {
                     legendText = trimmedText;
                 }
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
-                renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
+                var element = renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
+                element.setAttribute('aria-label', legendText);
+                element.setAttribute('role', 'region');
                 this.legendGroup.appendChild(legendElement);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (i === (this.totalPages[page]['Collection'].length - 1)) {
@@ -12175,6 +12352,8 @@ var Legend = /** @__PURE__ @class */ (function () {
                         };
                         var pagingTextElement = render.createText(pageTextOptions, pagingText);
                         pagingTextElement.style.cssText = 'user-select: none;';
+                        pagingTextElement.setAttribute('aria-label', pagingText);
+                        pagingTextElement.setAttribute('role', 'region');
                         pagingGroup.appendChild(pagingTextElement);
                         this.legendGroup.appendChild(pagingGroup);
                     }
@@ -12870,7 +13049,9 @@ var Legend = /** @__PURE__ @class */ (function () {
             textStyle.size = !isNullOrUndefined(textStyle.size) ? textStyle.size : this.maps.themeStyle.subTitleFontSize || Theme.legendTitleFont.size;
             textStyle.fontWeight = !isNullOrUndefined(textStyle.fontWeight) ? textStyle.fontWeight : this.maps.themeStyle.titleFontWeight || Theme.legendTitleFont.fontWeight;
             textOptions = new TextOption(map.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - spacing / 2, 'middle', trimTitle, '');
-            renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
+            var element = renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
+            element.setAttribute('aria-label', legendTitle);
+            element.setAttribute('role', 'region');
         }
     };
     Legend.prototype.changeNextPage = function (e) {
@@ -14434,6 +14615,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
             }
         }
         var option;
+        var polygonTooltipOption;
         var currentData = '';
         var targetId = target.id;
         var tooltipEle;
@@ -14446,10 +14628,30 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         var markerFill;
         var location = getMousePosition(pageX, pageY, this.maps.svgObject);
         this.tooltipTargetID = targetId;
+        var polygonTextStyle;
+        var polygonFill;
+        var polygon;
+        var latitude = null;
+        var longitude = null;
+        var latLongValue = this.maps.getClickLocation(targetId, e.pageX, e.pageY, target, e['layerX'], e['layerY'], 'tooltip');
+        if (!isNullOrUndefined(latLongValue)) {
+            latitude = latLongValue.latitude;
+            longitude = latLongValue.longitude;
+        }
+        var isPolygon = targetId.indexOf('_PolygonIndex_') > -1;
         var istooltipRender = (targetId.indexOf('_shapeIndex_') > -1)
-            || (targetId.indexOf('_MarkerIndex_') > -1) || (targetId.indexOf('_BubbleIndex_') > -1);
+            || (targetId.indexOf('_MarkerIndex_') > -1) || (targetId.indexOf('_BubbleIndex_') > -1)
+            || (targetId.indexOf('_PolygonIndex_') > -1);
         if (istooltipRender && this.maps.markerDragArgument === null) {
-            if (targetId.indexOf('_shapeIndex_') > -1) {
+            if (targetId.indexOf('_PolygonIndex_') > -1) {
+                var polygonIndex = parseInt(targetId.split('_PolygonIndex_')[1].split('_')[0], 10);
+                polygonTooltipOption = layer.polygonSettings.tooltipSettings;
+                polygon = layer.polygonSettings.polygons[polygonIndex];
+                polygonTextStyle = polygonTooltipOption.textStyle;
+                polygonFill = polygonTooltipOption.fill;
+                tooltipContent.push(polygon.tooltipText);
+            }
+            else if (targetId.indexOf('_shapeIndex_') > -1) {
                 option = layer.tooltipSettings;
                 var shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
                 if (isNullOrUndefined(layer.layerData) || isNullOrUndefined(layer.layerData[shape])) {
@@ -14552,116 +14754,135 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 }
                 //location.y = this.template(option, location);
             }
-            if (document.getElementById(this.tooltipId)) {
-                tooltipEle = document.getElementById(this.tooltipId);
-            }
-            else {
-                tooltipEle = createElement('div', {
-                    id: this.maps.element.id + '_mapsTooltip',
-                    className: 'EJ2-maps-Tooltip'
-                });
-                if (isNullOrUndefined(option.template) || option.template === '' || this.maps.tooltipDisplayMode === 'MouseMove') {
-                    tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
+            if (isPolygon ? polygonTooltipOption.visible : option.visible) {
+                if (document.getElementById(this.tooltipId)) {
+                    tooltipEle = document.getElementById(this.tooltipId);
                 }
                 else {
-                    tooltipEle.style.position = 'absolute';
-                }
-                document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
-            }
-            if (typeof option.template !== 'function' && option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
-                option.template = option.template[Object.keys(option.template)[0]];
-            }
-            templateData = this.setTooltipContent(option, templateData);
-            var tooltipTextStyle = {
-                color: option.textStyle.color, fontFamily: option.textStyle.fontFamily, fontStyle: option.textStyle.fontStyle,
-                fontWeight: option.textStyle.fontWeight, opacity: option.textStyle.opacity, size: option.textStyle.size
-            };
-            var tooltipOption = {
-                location: location, text: tooltipContent, data: templateData,
-                textStyle: tooltipTextStyle,
-                template: option.template
-            };
-            tooltipArgs = {
-                cancel: false, name: tooltipRender,
-                options: tooltipOption,
-                fill: option.fill,
-                maps: this.maps,
-                element: target, eventArgs: e, content: !isNullOrUndefined(currentData) ? currentData.toString() : ''
-            };
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
-                if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
-                    (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
-                    _this.maps['isProtectedOnChange'] = true;
-                    tooltipArgs.options['textStyle']['size'] = tooltipArgs.options['textStyle']['size']
-                        || _this.maps.themeStyle.fontSize;
-                    tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
-                        || _this.maps.themeStyle.tooltipFontColor;
-                    tooltipArgs.options['textStyle']['fontFamily'] = tooltipArgs.options['textStyle']['fontFamily']
-                        || _this.maps.themeStyle.fontFamily;
-                    tooltipArgs.options['textStyle']['fontWeight'] = tooltipArgs.options['textStyle']['fontWeight']
-                        || _this.maps.themeStyle.fontWeight;
-                    tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
-                        || _this.maps.themeStyle.tooltipTextOpacity;
-                    if (tooltipArgs.cancel) {
-                        _this.svgTooltip = new Tooltip({
-                            enable: true,
-                            header: '',
-                            data: option['data'],
-                            template: option['template'],
-                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
-                                [currentData.toString()],
-                            shapes: [],
-                            location: option['location'],
-                            palette: [markerFill],
-                            areaBounds: _this.maps.mapAreaRect,
-                            textStyle: option['textStyle'],
-                            availableSize: _this.maps.availableSize,
-                            fill: option.fill || _this.maps.themeStyle.tooltipFillColor,
-                            enableShadow: true
-                        });
+                    tooltipEle = createElement('div', {
+                        id: this.maps.element.id + '_mapsTooltip',
+                        className: 'EJ2-maps-Tooltip'
+                    });
+                    if (isNullOrUndefined(isPolygon ? polygon.tooltipTemplate : option.template) || (isPolygon ? polygon.tooltipTemplate === '' : option.template === '') || this.maps.tooltipDisplayMode === 'MouseMove') {
+                        tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
                     }
                     else {
-                        _this.svgTooltip = new Tooltip({
-                            enable: true,
-                            header: '',
-                            data: tooltipArgs.options['data'],
-                            template: tooltipArgs.options['template'],
-                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
-                                [currentData.toString()],
-                            shapes: [],
-                            location: tooltipArgs.options['location'],
-                            palette: [markerFill],
-                            areaBounds: _this.maps.mapAreaRect,
-                            textStyle: tooltipArgs.options['textStyle'],
-                            availableSize: _this.maps.availableSize,
-                            fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor,
-                            enableShadow: true
-                        });
+                        tooltipEle.style.position = 'absolute';
                     }
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    if (_this.maps.isVue || _this.maps.isVue3) {
-                        _this.svgTooltip.controlInstance = _this.maps;
+                    document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
+                }
+                if (typeof (isPolygon ? polygon.tooltipTemplate !== 'function' : option.template !== 'function') && (isPolygon ? polygon.tooltipTemplate !== null : option.template !== null) && Object.keys(typeof (isPolygon ? polygon.tooltipTemplate === 'object' : option.template === 'object') ? (isPolygon ? polygon.tooltipTemplate : option.template) : {}).length === 1) {
+                    if (isPolygon) {
+                        polygon.tooltipTemplate = polygon.tooltipTemplate[Object.keys(polygon.tooltipTemplate)[0]];
                     }
-                    _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
-                    _this.svgTooltip.appendTo(tooltipEle);
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    _this.maps.renderReactTemplates();
+                    else {
+                        option.template = option.template[Object.keys(option.template)[0]];
+                    }
+                }
+                templateData = this.setTooltipContent(option, templateData);
+                var tooltipTextStyle = {
+                    // eslint-disable-next-line max-len
+                    color: isPolygon ? polygonTextStyle.color : option.textStyle.color, fontFamily: isPolygon ? polygonTextStyle.fontFamily : option.textStyle.fontFamily, fontStyle: isPolygon ? polygonTextStyle.fontStyle : option.textStyle.fontStyle,
+                    // eslint-disable-next-line max-len
+                    fontWeight: isPolygon ? polygonTextStyle.fontWeight : option.textStyle.fontWeight, opacity: isPolygon ? polygonTextStyle.opacity : option.textStyle.opacity, size: isPolygon ? polygonTextStyle.size : option.textStyle.size
+                };
+                var tooltipOption = {
+                    location: location, text: tooltipContent, data: templateData,
+                    textStyle: tooltipTextStyle,
+                    template: isPolygon ? polygon.tooltipTemplate : option.template
+                };
+                tooltipArgs = {
+                    cancel: false, name: tooltipRender,
+                    options: tooltipOption,
+                    fill: isPolygon ? polygonFill : option.fill,
+                    maps: this.maps, latitude: latitude, longitude: longitude,
+                    element: target, eventArgs: e, content: isPolygon ? polygon.tooltipText : !isNullOrUndefined(currentData) ? currentData.toString() : ''
+                };
+                if (tooltipArgs.content !== '' || tooltipArgs.options['template'] !== '') {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
+                        if (!tooltipArgs.cancel && !isNullOrUndefined(currentData) &&
+                            (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
+                            _this.maps['isProtectedOnChange'] = true;
+                            tooltipArgs.options['textStyle']['size'] = tooltipArgs.options['textStyle']['size']
+                                || _this.maps.themeStyle.fontSize;
+                            tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
+                                || _this.maps.themeStyle.tooltipFontColor;
+                            tooltipArgs.options['textStyle']['fontFamily'] = tooltipArgs.options['textStyle']['fontFamily']
+                                || _this.maps.themeStyle.fontFamily;
+                            tooltipArgs.options['textStyle']['fontWeight'] = tooltipArgs.options['textStyle']['fontWeight']
+                                || _this.maps.themeStyle.fontWeight;
+                            tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
+                                || _this.maps.themeStyle.tooltipTextOpacity;
+                            if (tooltipArgs.cancel) {
+                                _this.svgTooltip = new Tooltip({
+                                    enable: true,
+                                    header: '',
+                                    data: option['data'],
+                                    template: option['template'],
+                                    content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                        [currentData.toString()],
+                                    shapes: [],
+                                    location: option['location'],
+                                    palette: [markerFill],
+                                    areaBounds: _this.maps.mapAreaRect,
+                                    textStyle: option['textStyle'],
+                                    availableSize: _this.maps.availableSize,
+                                    fill: option.fill || _this.maps.themeStyle.tooltipFillColor,
+                                    enableShadow: true,
+                                    border: isPolygon ? polygonTooltipOption.border : option.border
+                                });
+                            }
+                            else {
+                                _this.svgTooltip = new Tooltip({
+                                    enable: true,
+                                    header: '',
+                                    data: tooltipArgs.options['data'],
+                                    template: tooltipArgs.options['template'],
+                                    content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                        [currentData.toString()],
+                                    shapes: [],
+                                    location: tooltipArgs.options['location'],
+                                    palette: [markerFill],
+                                    areaBounds: _this.maps.mapAreaRect,
+                                    textStyle: tooltipArgs.options['textStyle'],
+                                    availableSize: _this.maps.availableSize,
+                                    fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor,
+                                    enableShadow: true,
+                                    border: isPolygon ? polygonTooltipOption.border : option.border
+                                });
+                            }
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            if (_this.maps.isVue || _this.maps.isVue3) {
+                                _this.svgTooltip.controlInstance = _this.maps;
+                            }
+                            _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
+                            _this.svgTooltip.appendTo(tooltipEle);
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            _this.maps.renderReactTemplates();
+                        }
+                        else {
+                            _this.clearTooltip(e.target);
+                        }
+                    });
                 }
                 else {
-                    _this.clearTooltip(e.target);
+                    this.clearTooltip(e.target);
+                }
+                if (this.svgTooltip) {
+                    this.maps.trigger('tooltipRenderComplete', {
+                        cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption,
+                        element: this.svgTooltip.element
+                    });
+                }
+                if (this.svgTooltip) {
+                    this.maps.trigger('tooltipRenderComplete', {
+                        cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption, element: this.svgTooltip.element
+                    });
+                }
+                else {
+                    this.clearTooltip(e.target);
                 }
-            });
-            if (this.svgTooltip) {
-                this.maps.trigger('tooltipRenderComplete', {
-                    cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption,
-                    element: this.svgTooltip.element
-                });
-            }
-            if (this.svgTooltip) {
-                this.maps.trigger('tooltipRenderComplete', {
-                    cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption, element: this.svgTooltip.element
-                });
             }
             else {
                 this.clearTooltip(e.target);
@@ -14712,10 +14933,12 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
      * @private
      */
     MapsTooltip.prototype.mouseUpHandler = function (e) {
-        this.renderTooltip(e);
-        if (this.maps.tooltipDisplayMode === 'MouseMove') {
-            clearTimeout(this.clearTimeout);
-            this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
+        if (!isNullOrUndefined(this.maps)) {
+            this.renderTooltip(e);
+            if (this.maps.tooltipDisplayMode === 'MouseMove') {
+                clearTimeout(this.clearTimeout);
+                this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
+            }
         }
     };
     /**
@@ -14769,7 +14992,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 return;
             }
             if (this.maps.tooltipDisplayMode === 'DoubleClick') {
-                this.maps.off('dblclick', this.removeTooltip);
+                this.maps.off('dblclick', this.renderTooltip);
             }
             else if (this.maps.tooltipDisplayMode === 'Click') {
                 this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
@@ -14800,8 +15023,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
             this.svgTooltip.destroy();
         }
         this.svgTooltip = null;
-        //TODO: Calling the below code throws spec issue.
-        //this.maps = null;
+        this.maps = null;
     };
     return MapsTooltip;
 }());
@@ -14812,7 +15034,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
 var Zoom = /** @__PURE__ @class */ (function () {
     function Zoom(maps) {
         /** @private */
-        this.isPanning = false;
+        this.isPanModeEnabled = false;
         /** @private */
         this.mouseEnter = false;
         /** @private */
@@ -14833,9 +15055,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.startTouches = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         /** @private */
-        this.intersect = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        /** @private */
         this.mouseDownLatLong = { x: 0, y: 0 };
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         /** @private */
@@ -14972,6 +15191,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     }, animationDuration);
                 }
             }
+            this.triggerZoomComplete(map, prevLevel, type);
         }
         this.maps.zoomNotApplied = false;
         if (this.maps.isDevice) {
@@ -15060,12 +15280,12 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     map.translatePoint = new Point(translatePointX, translatePointY);
                 }
                 map.scale = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
-                map.zoomTranslatePoint = map.translatePoint;
                 isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
                 if (isZoomCancelled) {
                     map.translatePoint = map.previousPoint;
                     map.scale = map.previousScale;
                 }
+                map.zoomTranslatePoint = map.translatePoint;
             }
             else {
                 zoomCalculationFactor = prevLevel + (Math.round(prevLevel + (((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2)));
@@ -15095,6 +15315,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
         this.isZoomFinal = this.isZoomSelection && Math.round(map.scale) === this.maps.zoomSettings.maxZoom;
+        this.triggerZoomComplete(map, prevLevel, '');
         this.removeToolbarOpacity(map.scale, this.maps.element.id + '_Zooming_');
     };
     Zoom.prototype.setInteraction = function (newInteraction) {
@@ -15187,10 +15408,41 @@ var Zoom = /** @__PURE__ @class */ (function () {
         if (!isZoomCancelled) {
             this.applyTransform(map);
         }
+        this.triggerZoomComplete(map, prevLevel, '');
         if (Browser.isDevice) {
             this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
         }
     };
+    Zoom.prototype.triggerZoomComplete = function (map, prevLevel, type) {
+        if (map.zoomSettings.enable) {
+            var zoomArgs = void 0;
+            if (map.isTileMap) {
+                map.mapScaleValue = isNullOrUndefined(map.mapScaleValue) ? 1 : map.mapScaleValue;
+                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
+            }
+            var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
+            if (!map.isTileMap) {
+                zoomArgs = {
+                    cancel: false, name: 'zoomComplete', type: type, maps: map,
+                    tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
+                    tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale },
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            else {
+                zoomArgs = {
+                    cancel: false, name: 'zoomComplete', type: type, maps: map,
+                    tileTranslatePoint: { previous: map.tileTranslatePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
+                    tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale },
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            this.maps.trigger('zoomComplete', zoomArgs);
+        }
+    };
     /**
      * @private
      */
@@ -15244,7 +15496,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
     /**
      * @private
      */
-    Zoom.prototype.applyTransform = function (maps, animate$$1) {
+    Zoom.prototype.applyTransform = function (maps, animate$$1, isPanning) {
         var _this = this;
         var layerIndex;
         this.templateCount = 0;
@@ -15252,6 +15504,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var scale = maps.scale;
         var x = maps.translatePoint.x;
         var y = maps.translatePoint.y;
+        var currentLabelIndex = 0;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         maps.zoomShapeCollection = [];
         if (document.getElementById(maps.element.id + '_mapsTooltip')) {
@@ -15297,7 +15550,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if ((!this_1.isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
+                            if ((!this_1.isPanModeEnabled) && !isNullOrUndefined(currentEle.childNodes[0])) {
                                 this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement, animate$$1);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -15321,7 +15574,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                             }
                                         }
                                     }
-                                    if (((_this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && _this.currentLayer.type === 'SubLayer')) && !_this.isPanning) {
+                                    if (((_this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && _this.currentLayer.type === 'SubLayer')) && !_this.isPanModeEnabled) {
                                         if (maps.isTileMap) {
                                             var groupElement = document.querySelector('.GroupElement');
                                             if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation_1) {
@@ -15334,7 +15587,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         }
                                     }
                                 });
-                                if (this_1.isPanning && maps.markerModule.sameMarkerData.length > 0) {
+                                if (this_1.isPanModeEnabled && maps.markerModule.sameMarkerData.length > 0) {
                                     clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
                                 }
                                 else if (maps.markerModule.sameMarkerData.length > 0) {
@@ -15344,7 +15597,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                     }
                                 }
                                 if (document.getElementById(maps.element.id + '_mapsTooltip') && maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
-                                    && !this_1.isPanning) {
+                                    && !this_1.isPanModeEnabled) {
                                     var mapsTooltip = maps.mapsTooltipModule;
                                     var tooltipElement = currentEle.querySelector('#' + mapsTooltip.tooltipTargetID);
                                     if (!isNullOrUndefined(tooltipElement)) {
@@ -15395,24 +15648,25 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             }
                         }
                         else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this_1.index])) {
-                            this_1.intersect = [];
                             maps.zoomLabelPositions = [];
                             maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
-                            var labelAnimate = !maps.isTileMap && animate$$1;
-                            for (var k = 0; k < currentEle.childElementCount; k++) {
+                            var labelAnimate_1 = !maps.isTileMap && animate$$1;
+                            var intersect_1 = [];
+                            Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
-                                    this_1.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
-                                    maps.zoomShapeCollection.push(this_1.zoomshapewidth);
-                                    this_1.dataLabelTranslate(currentEle.childNodes[k], factor_1, x, y, scale, 'DataLabel', labelAnimate);
-                                    var dataLabel = maps.layers[this_1.index].dataLabelSettings;
+                                    var zoomShapeWidth = currentEle.childNodes[k].id;
+                                    maps.zoomShapeCollection.push(zoomShapeWidth);
+                                    _this.dataLabelTranslate(currentEle.childNodes[k], factor_1, x, y, scale, 'DataLabel', labelAnimate_1, currentLabelIndex, isPanning, intersect_1);
+                                    currentLabelIndex++;
+                                    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 && !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]['textContent'];
-                                            var style = maps.layers[this_1.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];
@@ -15423,7 +15677,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         }
                                     }
                                 }
-                            }
+                            });
                         }
                     };
                     for (var j = 0; j < elementCount; j++) {
@@ -15572,6 +15826,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
      * @private
      */
     Zoom.prototype.processTemplate = function (x, y, scale, maps) {
+        var currentLabelIndex = 0;
         for (var i = 0; i < this.templateCount; i++) {
             var factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
             var markerTemplateElement = getElementByID(maps.element.id + '_LayerIndex_' +
@@ -15588,7 +15843,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
             if ((!isNullOrUndefined(datalabelTemplateElemement)) && datalabelTemplateElemement.childElementCount > 0) {
                 for (var k = 0; k < datalabelTemplateElemement.childElementCount; k++) {
-                    this.dataLabelTranslate(datalabelTemplateElemement.childNodes[k], factor, x, y, scale, 'Template');
+                    this.dataLabelTranslate(datalabelTemplateElemement.childNodes[k], factor, x, y, scale, 'Template', false, currentLabelIndex);
+                    currentLabelIndex++;
                 }
             }
             if (!isNullOrUndefined(polygonElement)) {
@@ -15599,7 +15855,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
     };
-    Zoom.prototype.dataLabelTranslate = function (element, factor, x, y, scale, type, animate$$1) {
+    Zoom.prototype.dataLabelTranslate = function (element, factor, x, y, scale, type, animate$$1, currentLabelIndex, isPanning, intersect) {
         if (animate$$1 === void 0) { animate$$1 = false; }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var labelCollection = this.maps.dataLabelModule.dataLabelCollections;
@@ -15616,77 +15872,80 @@ var Zoom = /** @__PURE__ @class */ (function () {
             labelIndex = parseFloat(element.id.split('_LabelIndex_')[1].split('_')[0]);
         }
         var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
-        for (var l = 0; l < labelCollection.length; l++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var label = labelCollection[l];
-            if (label['layerIndex'] === layerIndex && label['shapeIndex'] === shapeIndex
-                && label['labelIndex'] === labelIndex) {
-                var labelX = label['location']['x'];
-                var labelY = label['location']['y'];
-                if (type === 'Template') {
-                    var locationX = 0;
-                    var locationY = 0;
-                    if (this.maps.isTileMap) {
-                        zoomtext = label['dataLabelText'];
-                        zoomtextSize = measureText(zoomtext, style);
-                        locationX = ((labelX + x) * scale) - (zoomtextSize['width'] / 2);
-                        locationY = ((labelY + y) * scale) - (zoomtextSize['height']);
-                    }
-                    else {
-                        var layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
-                        labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
-                        labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
-                        var layerOffset = layerEle.getBoundingClientRect();
-                        var elementOffset = element.parentElement.getBoundingClientRect();
-                        locationX = ((labelX) + (layerOffset.left - elementOffset.left));
-                        locationY = ((labelY) + (layerOffset.top - elementOffset.top));
-                    }
-                    element.style.left = locationX + 'px';
-                    element.style.top = locationY + 'px';
-                }
-                else {
-                    labelX = ((labelX + x) * scale);
-                    labelY = ((labelY + y) * scale);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var label = labelCollection[currentLabelIndex];
+        var index = currentLabelIndex;
+        if (label['layerIndex'] === layerIndex && label['shapeIndex'] === shapeIndex
+            && label['labelIndex'] === labelIndex) {
+            var labelX = label['location']['x'];
+            var labelY = label['location']['y'];
+            if (type === 'Template') {
+                var locationX = 0;
+                var locationY = 0;
+                if (this.maps.isTileMap) {
                     zoomtext = label['dataLabelText'];
                     zoomtextSize = measureText(zoomtext, style);
-                    var start = labelY - zoomtextSize['height'] / 4;
-                    var end = labelY + zoomtextSize['height'] / 4;
+                    locationX = ((labelX + x) * scale) - (zoomtextSize['width'] / 2);
+                    locationY = ((labelY + y) * scale) - (zoomtextSize['height']);
+                }
+                else {
+                    var layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
+                    labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
+                    labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
+                    var layerOffset = layerEle.getBoundingClientRect();
+                    var elementOffset = element.parentElement.getBoundingClientRect();
+                    locationX = ((labelX) + (layerOffset.left - elementOffset.left));
+                    locationY = ((labelY) + (layerOffset.top - elementOffset.top));
+                }
+                element.style.left = locationX + 'px';
+                element.style.top = locationY + 'px';
+            }
+            else {
+                labelX = ((labelX + x) * scale);
+                labelY = ((labelY + y) * scale);
+                zoomtext = label['dataLabelText'];
+                if (!animate$$1 || duration === 0) {
+                    element.setAttribute('transform', 'translate( ' + labelX + ' ' + labelY + ' )');
+                }
+                if ((isNullOrUndefined(isPanning) || !isPanning) && (this.maps.layers[this.index].dataLabelSettings.smartLabelMode !== 'None' ||
+                    this.maps.layers[this.index].dataLabelSettings.intersectionAction !== 'None')) {
+                    zoomtextSize = measureTextElement(zoomtext, style);
+                    var start = labelY - zoomtextSize['height'] / 2;
+                    var end = labelY + zoomtextSize['height'] / 2;
                     var xpositionEnds = labelX + zoomtextSize['width'] / 2;
                     var xpositionStart = labelX - zoomtextSize['width'] / 2;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var textLocations = { rightWidth: xpositionEnds, leftWidth: xpositionStart, heightTop: start, heightBottom: end };
-                    if (!animate$$1 || duration === 0) {
-                        element.setAttribute('transform', 'translate( ' + labelX + ' ' + labelY + ' )');
-                    }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Hide') {
                         if (scale > 1) {
-                            text = ((this.maps.dataLabelShape[l] * scale) >= zoomtextSize['width']) ? zoomtext : '';
+                            text = ((this.maps.dataLabelShape[index] * scale) >= zoomtextSize['width']) ? zoomtext : '';
                             element.textContent = text;
                         }
                         else {
-                            text = (this.maps.dataLabelShape[l] >= zoomtextSize['width']) ? zoomtext : '';
+                            text = (this.maps.dataLabelShape[index] >= zoomtextSize['width']) ? zoomtext : '';
                             element.textContent = text;
                         }
                     }
+                    var widthList = [];
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
                         if (scale > 1) {
-                            zoomtrimLabel = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
+                            zoomtrimLabel = textTrim((this.maps.dataLabelShape[index] * scale), zoomtext, style, zoomtextSize.width, true, widthList);
                             text = zoomtrimLabel;
                             element.textContent = text;
                         }
                         else {
-                            zoomtrimLabel = textTrim(this.maps.dataLabelShape[l], zoomtext, style);
+                            zoomtrimLabel = textTrim(this.maps.dataLabelShape[index], zoomtext, style, zoomtextSize.width, true, widthList);
                             text = zoomtrimLabel;
                             element.textContent = text;
                         }
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.intersectionAction === 'Hide') {
-                        for (var m = 0; m < this.intersect.length; m++) {
-                            if (!isNullOrUndefined(this.intersect[m])) {
-                                if (textLocations['leftWidth'] > this.intersect[m]['rightWidth']
-                                    || textLocations['rightWidth'] < this.intersect[m]['leftWidth']
-                                    || textLocations['heightTop'] > this.intersect[m]['heightBottom']
-                                    || textLocations['heightBottom'] < this.intersect[m]['heightTop']) {
+                        for (var m = 0; m < intersect.length; m++) {
+                            if (!isNullOrUndefined(intersect[m])) {
+                                if (textLocations['leftWidth'] > intersect[m]['rightWidth']
+                                    || textLocations['rightWidth'] < intersect[m]['leftWidth']
+                                    || textLocations['heightTop'] > intersect[m]['heightBottom']
+                                    || textLocations['heightBottom'] < intersect[m]['heightTop']) {
                                     text = !isNullOrUndefined(text) ? text : zoomtext;
                                     element.textContent = text;
                                 }
@@ -15697,50 +15956,53 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                 }
                             }
                         }
-                        this.intersect.push(textLocations);
+                        intersect.push(textLocations);
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.intersectionAction === 'Trim') {
-                        for (var j = 0; j < this.intersect.length; j++) {
-                            if (!isNullOrUndefined(this.intersect[j])) {
-                                if (textLocations['rightWidth'] < this.intersect[j]['leftWidth']
-                                    || textLocations['leftWidth'] > this.intersect[j]['rightWidth']
-                                    || textLocations['heightBottom'] < this.intersect[j]['heightTop']
-                                    || textLocations['heightTop'] > this.intersect[j]['heightBottom']) {
+                        for (var j = 0; j < intersect.length; j++) {
+                            if (!isNullOrUndefined(intersect[j])) {
+                                if (textLocations['rightWidth'] < intersect[j]['leftWidth']
+                                    || textLocations['leftWidth'] > intersect[j]['rightWidth']
+                                    || textLocations['heightBottom'] < intersect[j]['heightTop']
+                                    || textLocations['heightTop'] > intersect[j]['heightBottom']) {
                                     trimmedLable = !isNullOrUndefined(text) ? text : zoomtext;
                                     if (scale > 1) {
-                                        trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), trimmedLable, style);
+                                        var trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        trimmedLable = textTrim((this.maps.dataLabelShape[index] * scale), trimmedLable, style, trimmedWidth, true);
                                     }
                                     element.textContent = trimmedLable;
                                 }
                                 else {
-                                    if (textLocations['leftWidth'] > this.intersect[j]['leftWidth']) {
-                                        var width = this.intersect[j]['rightWidth'] - textLocations['leftWidth'];
+                                    if (textLocations['leftWidth'] > intersect[j]['leftWidth']) {
+                                        var width = intersect[j]['rightWidth'] - textLocations['leftWidth'];
                                         var difference = width - (textLocations['rightWidth'] - textLocations['leftWidth']);
                                         text = !isNullOrUndefined(text) ? text : zoomtext;
-                                        trimmedLable = textTrim(difference, text, style);
+                                        var trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        trimmedLable = textTrim(difference, text, style, trimmedWidth, true);
                                         element.textContent = trimmedLable;
                                         break;
                                     }
-                                    if (textLocations['leftWidth'] < this.intersect[j]['leftWidth']) {
-                                        var width = textLocations['rightWidth'] - this.intersect[j]['leftWidth'];
+                                    if (textLocations['leftWidth'] < intersect[j]['leftWidth']) {
+                                        var width = textLocations['rightWidth'] - intersect[j]['leftWidth'];
                                         var difference = Math.abs(width - (textLocations['rightWidth'] - textLocations['leftWidth']));
                                         text = !isNullOrUndefined(text) ? text : zoomtext;
-                                        trimmedLable = textTrim(difference, text, style);
+                                        var trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        trimmedLable = textTrim(difference, text, style, trimmedWidth, true);
                                         element.textContent = trimmedLable;
                                         break;
                                     }
                                 }
                             }
                         }
-                        this.intersect.push(textLocations);
+                        intersect.push(textLocations);
                         if (isNullOrUndefined(trimmedLable)) {
-                            trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
+                            trimmedLable = textTrim((this.maps.dataLabelShape[index] * scale), zoomtext, style, zoomtextSize.width, true);
                             element.textContent = trimmedLable;
                         }
                     }
-                    if (animate$$1 || duration > 0) {
-                        smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
-                    }
+                }
+                if (animate$$1 || duration > 0) {
+                    smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
                 }
             }
         }
@@ -15886,15 +16148,15 @@ var Zoom = /** @__PURE__ @class */ (function () {
             if (!panArgs.cancel) {
                 if (panningXDirection && panningYDirection) {
                     map.translatePoint = new Point(x, y);
-                    this.applyTransform(map);
+                    this.applyTransform(map, false, true);
                 }
                 else if (panningXDirection) {
                     map.translatePoint = new Point(x, map.translatePoint.y);
-                    this.applyTransform(map);
+                    this.applyTransform(map, false, true);
                 }
                 else if (panningYDirection) {
                     map.translatePoint = new Point(map.translatePoint.x, y);
-                    this.applyTransform(map);
+                    this.applyTransform(map, false, true);
                 }
             }
             this.maps.zoomNotApplied = false;
@@ -15925,7 +16187,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             };
             map.trigger(pan, panArgs);
             map.mapLayerPanel.generateTiles(map.tileZoomLevel, map.tileTranslatePoint, 'Pan');
-            this.applyTransform(map);
+            this.applyTransform(map, false, true);
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
@@ -16045,6 +16307,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
             this.maps.zoomNotApplied = false;
         }
+        this.triggerZoomComplete(map, prevLevel, type);
     };
     /**
      * @private
@@ -16334,7 +16597,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
     };
     Zoom.prototype.panningStyle = function (toolbar) {
         var svg = getElementByID(this.maps.element.id + '_svg');
-        if (toolbar === 'pan' || (this.isPanning && toolbar !== 'reset')) {
+        if (toolbar === 'pan' || (this.isPanModeEnabled && toolbar !== 'reset')) {
             svg.setAttribute('class', 'e-maps-panning');
         }
         else {
@@ -16681,8 +16944,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
             this.isTouch = true;
             touches = e.touches;
             target = e.target;
-            pageX = touches[0].clientX;
-            pageY = touches[0].clientY;
+            pageX = touches[0].pageX;
+            pageY = touches[0].pageY;
         }
         else {
             pageX = e.pageX;
@@ -16690,11 +16953,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
             target = e.target;
         }
         if (!this.maps.zoomSettings.enablePanning) {
-            this.isPan = this.isPanning = this.panColor !== this.selectionColor ? this.maps.zoomSettings.enablePanning
+            this.isPan = this.isPanModeEnabled = this.panColor !== this.selectionColor ? this.maps.zoomSettings.enablePanning
                 : this.zoomColor === this.selectionColor;
         }
         else {
-            this.isPan = this.isPanning = !this.isZoomSelection;
+            this.isPan = this.isPanModeEnabled = !this.isZoomSelection;
         }
         this.mouseDownLatLong = { x: pageX, y: pageY };
         var scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
@@ -16721,8 +16984,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
             this.isTouch = true;
             target = e.target;
             touches = e.touches;
-            pageX = touches[0].clientX;
-            pageY = touches[0].clientY;
+            pageX = touches[0].pageX;
+            pageY = touches[0].pageY;
         }
         else {
             pageX = e.pageX;
@@ -16756,7 +17019,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.mouseMovePoints = this.getMousePosition(pageX, pageY);
         var targetId = e.target['id'];
         var targetEle = e.target;
-        if (zoom.enable && this.isPanning && this.maps.markerDragId.indexOf('_MarkerIndex_') == -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
+        if (zoom.enable && this.isPanModeEnabled && this.maps.markerDragId.indexOf('_MarkerIndex_') == -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
             e.preventDefault();
             this.maps.element.style.cursor = 'pointer';
             this.mouseMoveLatLong = { x: pageX, y: pageY };
@@ -16786,13 +17049,66 @@ var Zoom = /** @__PURE__ @class */ (function () {
     Zoom.prototype.mouseUpHandler = function (e) {
         var map = this.maps;
         this.rectZoomingStart = false;
-        this.isPanning = false;
         this.isSingleClick = this.isSingleClick ? true : false;
         this.isTouch = false;
         this.touchStartList = [];
         this.touchMoveList = [];
         this.lastScale = 1;
         this.maps.element.style.cursor = 'auto';
+        // eslint-disable-next-line max-len
+        if (this.isPanModeEnabled && this.maps.zoomSettings.enablePanning && !isNullOrUndefined(this.maps.previousPoint) &&
+            (this.maps.translatePoint.x !== this.maps.previousPoint.x && this.maps.translatePoint.y !== this.maps.previousPoint.y)) {
+            var pageX = void 0;
+            var pageY = void 0;
+            var layerX = 0;
+            var layerY = 0;
+            var target = void 0;
+            var rect = this.maps.element.getBoundingClientRect();
+            var element = e.target;
+            if (e.type.indexOf('touch') !== -1) {
+                var touchArg = e;
+                layerX = pageX = touchArg.changedTouches[0].pageX;
+                pageY = touchArg.changedTouches[0].pageY;
+                layerY = pageY - (this.maps.isTileMap ? 10 : 0);
+                target = touchArg.target;
+                this.maps.mouseClickEvent = { x: pageX, y: pageY };
+            }
+            else {
+                pageX = e.pageX;
+                pageY = e.pageY;
+                layerX = e['layerX'];
+                layerY = e['layerY'] - (this.maps.isTileMap ? 10 : 0);
+                target = e.target;
+            }
+            var panCompleteEventArgs = void 0;
+            var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
+            if (!this.maps.isTileMap) {
+                this.maps.mouseClickEvent['x'] = this.maps.mouseDownEvent['x'];
+                this.maps.mouseClickEvent['y'] = this.maps.mouseDownEvent['y'];
+                var location_5 = this.maps.getClickLocation(element.id, pageX, pageY, element, pageX, pageY);
+                panCompleteEventArgs = {
+                    cancel: false, name: 'panComplete', maps: this.maps,
+                    tileTranslatePoint: {}, translatePoint: { previous: this.maps.previousPoint, current: this.maps.translatePoint },
+                    scale: this.maps.scale, tileZoomLevel: this.maps.tileZoomLevel, latitude: !isNullOrUndefined(location_5) ?
+                        location_5.latitude : 0, longitude: !isNullOrUndefined(location_5) ? location_5.longitude : 0,
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            else {
+                var location_6 = this.maps.getTileGeoLocation(layerX, layerY);
+                panCompleteEventArgs = {
+                    cancel: false, name: 'panComplete', maps: this.maps,
+                    tileTranslatePoint: { previous: this.maps.tileTranslatePoint, current: this.maps.tileTranslatePoint },
+                    translatePoint: { previous: this.maps.previousPoint, current: this.maps.translatePoint }, scale: this.maps.scale,
+                    tileZoomLevel: this.maps.tileZoomLevel, latitude: location_6.latitude, longitude: location_6.longitude,
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            this.maps.trigger('panComplete', panCompleteEventArgs);
+        }
+        this.isPanModeEnabled = false;
         if ((!isNullOrUndefined(this.distanceX) || !isNullOrUndefined(this.distanceY)) && (!isNullOrUndefined(this.currentLayer) && this.currentLayer.type === 'SubLayer')) {
             this.toAlignSublayer();
             this.distanceX = this.distanceY = null;
@@ -16809,7 +17125,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
      * @private
      */
     Zoom.prototype.mouseCancelHandler = function (e) {
-        this.isPanning = false;
+        this.isPanModeEnabled = false;
         this.isTouch = false;
         this.rectZoomingStart = false;
         var zoomRectElement = getElementByID(this.maps.element.id + '_Selection_Rect_Zooming');
@@ -16889,7 +17205,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.maps.off(Browser.touchMoveEvent, this.mouseMoveHandler);
         this.maps.off(Browser.touchStartEvent, this.mouseDownHandler);
         this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
-        this.maps.off(this.cancelEvent, this.mouseCancelHandler);
+        EventHandler.remove(this.maps.element, this.cancelEvent, this.mouseCancelHandler);
     };
     /**
      * Get module name.
@@ -16918,14 +17234,12 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.mouseDownPoints = null;
         this.mouseMovePoints = null;
         this.startTouches = [];
-        this.zoomshapewidth = null;
-        this.intersect = [];
         this.mouseDownLatLong = null;
         this.mouseMoveLatLong = null;
         this.removeEventListener();
-        //TODO: Calling the below code throws spec issue.
-        //this.maps = null;
+        this.layerCollectionEle = null;
         this.currentLayer = null;
+        this.maps = null;
     };
     return Zoom;
 }());
@@ -17410,5 +17724,5 @@ var PdfExport = /** @__PURE__ @class */ (function () {
  * exporting all modules from maps index
  */
 
-export { Maps, load, loaded, click, onclick, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerDragStart, markerDragEnd, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, ZoomToolbarButtonSettings, ZoomToolbarTooltipSettings, ZoomToolbarSettings, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, PolygonSetting, PolygonSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, calculatePolygonPath, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, Coordinate, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, getHexColor, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, Polygon, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
+export { Maps, load, loaded, click, onclick, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerDragStart, markerDragEnd, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, panComplete, zoomComplete, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, ZoomToolbarButtonSettings, ZoomToolbarTooltipSettings, ZoomToolbarSettings, Border, CenterPosition, TooltipSettings, PolygonTooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, PolygonSetting, PolygonSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, calculatePolygonPath, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, Coordinate, MinMax, GeoLocation, measureText, measureTextElement, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, markerClusterListHandler, markerBoundsComparer, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, getHexColor, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, Polygon, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
 //# sourceMappingURL=ej2-maps.es5.js.map