@syncfusion/ej2-maps 24.2.4 → 25.1.35

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

@@ -398,28 +398,26 @@ class GeoLocation {
 function measureText(text, font) {
     let 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) {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    context.font = `${font.fontStyle} ${font.fontWeight} ${typeof font.size === 'number' ? font.size + 'px' : font.size} ${font.fontFamily}`;
+    const metrics = context.measureText(text);
+    const width = metrics.width;
+    const height = parseFloat(font.size) || 16;
+    return new Size(width, height);
+}
 /**
  * Internal use of text options
  *
@@ -930,6 +928,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
         factor = maps.mapLayerPanel.calculateFactor(currentLayer);
     }
     let isClusteringCompleted = false;
+    const currentZoomFactor = !maps.isTileMap ? maps.mapScaleValue : maps.tileZoomLevel;
     maps.trigger('markerClusterRendering', eventArg, (clusterargs) => {
         Array.prototype.forEach.call(markerTemplate.childNodes, (markerElement, o) => {
             indexCollection = [];
@@ -938,20 +937,28 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                 bounds1 = tempElement.getBoundingClientRect();
                 indexCollection.push(o);
                 if (!isNullOrUndefined(bounds1)) {
-                    Array.prototype.forEach.call(markerTemplate.childNodes, (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);
+                    const 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, (currentIndex, p) => {
+                            if (o !== currentIndex) {
+                                let 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, (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) {
@@ -1026,6 +1033,9 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                 }
                 colloideBounds = [];
             }
+            else {
+                markerClusterListHandler(maps, currentZoomFactor, layerIndex, o, indexCollection);
+            }
             isClusteringCompleted = true;
         });
         layerElement.appendChild(clusterGroup);
@@ -1114,6 +1124,30 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
     });
     return isClusteringCompleted;
 }
+/** @private */
+function markerClusterListHandler(maps, currentZoomFactor, layerIndex, index, indexCollection) {
+    if (currentZoomFactor == 1) {
+        const initialMarkerClusterList = isNullOrUndefined(maps.markerModule.initialMarkerCluster[layerIndex][index]) ? [] : indexCollection.length > 1 ? indexCollection : [];
+        maps.markerModule.initialMarkerCluster[layerIndex][index] = initialMarkerClusterList;
+        const 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) {
+    let 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
@@ -1905,22 +1939,40 @@ function isCustomPath(layerData) {
  * @returns {string} - Returns the string
  * @private
  */
-function textTrim(maxWidth, text, font) {
+function textTrim(maxWidth, text, font, width, isCanvasMeasure, widthList) {
     let label = text;
-    let 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) {
         const textLength = text.length;
         for (let 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;
 }
 /**
@@ -1998,11 +2050,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;
         }
@@ -4283,6 +4335,23 @@ __decorate$1([
 __decorate$1([
     Property(null)
 ], TooltipSettings.prototype, "valuePath", void 0);
+/**
+ * Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
+ */
+class PolygonTooltipSettings extends ChildProperty {
+}
+__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);
 /**
  * Gets or sets the options to customize the margin of the maps.
  */
@@ -4479,6 +4548,12 @@ __decorate$1([
 __decorate$1([
     Property([])
 ], PolygonSetting.prototype, "points", void 0);
+__decorate$1([
+    Property('')
+], PolygonSetting.prototype, "tooltipText", void 0);
+__decorate$1([
+    Property('')
+], PolygonSetting.prototype, "tooltipTemplate", void 0);
 /**
  * Defines the properties of the polygon shapes that will be rendered on a map layer.
  * The selection and highlight settings for polygon shapes can also be defined.
@@ -4494,6 +4569,9 @@ __decorate$1([
 __decorate$1([
     Complex({}, HighlightSettings)
 ], PolygonSettings.prototype, "highlightSettings", void 0);
+__decorate$1([
+    Complex({}, PolygonTooltipSettings)
+], PolygonSettings.prototype, "tooltipSettings", void 0);
 /**
  * Gets or sets the options to customize the navigation lines in maps which is used to connect different locations.
  */
@@ -5277,6 +5355,18 @@ const annotationRendering = 'annotationRendering';
  * @private
  */
 const itemSelection = 'itemSelection';
+/**
+ * Specifies the maps pan complete event name.
+ *
+ * @private
+ */
+const panComplete = 'panComplete';
+/**
+ * Specifies the maps zoom complete event name.
+ *
+ * @private
+ */
+const zoomComplete = 'zoomComplete';
 /**
  * Specifies the maps item highlight event name.
  *
@@ -5348,7 +5438,6 @@ class BingMap {
  */
 class ColorMapping {
     constructor(maps) {
-        this.maps = maps;
     }
     /**
      * To get color based on shape settings.
@@ -5725,8 +5814,10 @@ class LayerPanel {
         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) {
@@ -5734,8 +5825,10 @@ class LayerPanel {
         }
         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);
@@ -5746,8 +5839,10 @@ class LayerPanel {
             const padding = this.mapObject.layers[this.mapObject.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
                 20 : 0;
             const 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)
@@ -6252,7 +6347,7 @@ class LayerPanel {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const intersect = [];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            renderData.map((currentShapeData, i) => {
+            Array.prototype.forEach.call(renderData, (currentShapeData, i) => {
                 this.renderLabel(this.currentLayer, layerIndex, currentShapeData, group, i, labelTemplateEle, intersect);
             });
             this.groupElements.push(group);
@@ -7378,6 +7473,9 @@ let Maps = class Maps extends Component {
             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);
@@ -7830,15 +7928,22 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     getMinMaxLatitudeLongitude() {
-        const element = document.getElementById(this.element.id).getBoundingClientRect();
-        let 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);
-        let 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));
-        const MinMaxLatitudeLongitude = {
-            minLatitude: minPosition.latitude, maxLatitude: maxPosition.latitude, minLongitude: minPosition.longitude,
-            maxLongitude: maxPosition.longitude
-        };
-        return MinMaxLatitudeLongitude;
+        const mapsElement = document.getElementById(this.element.id);
+        if (!isNullOrUndefined(mapsElement)) {
+            const element = mapsElement.getBoundingClientRect();
+            let 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);
+            let 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));
+            const 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}
@@ -7851,10 +7956,9 @@ let Maps = class Maps extends Component {
         const templateElements = document.getElementsByClassName(this.element.id + '_template');
         if (!isNullOrUndefined(templateElements) && templateElements.length > 0 &&
             getElementByID(this.element.id + '_Layer_Collections') && !this.isTileMap) {
-            for (let i = 0; i < templateElements.length; i++) {
+            Array.prototype.forEach.call(templateElements, (templateGroupEle, i) => {
                 let offSetLetValue = 0;
                 let offSetTopValue = 0;
-                const templateGroupEle = templateElements[i];
                 if (!isNullOrUndefined(templateGroupEle) && templateGroupEle.childElementCount > 0) {
                     const layerOffset = getElementByID(this.element.id + '_Layer_Collections').getBoundingClientRect();
                     const elementOffset = getElementByID(templateGroupEle.id).getBoundingClientRect();
@@ -7864,21 +7968,22 @@ let Maps = class Maps extends Component {
                         offSetTopValue = this.isTileMap ? 0 : (layerOffset.top < elementOffset.top) ?
                             -(Math.abs(elementOffset.top - layerOffset.top)) : Math.abs(elementOffset.top - layerOffset.top);
                     }
-                    for (let j = 0; j < templateGroupEle.childElementCount; j++) {
-                        const currentTemplate = templateGroupEle.childNodes[j];
+                    Array.prototype.forEach.call(templateGroupEle.childNodes, (currentTemplate, j) => {
                         if (currentTemplate.id.indexOf('Marker') !== -1) {
-                            const elementOffset = getElementByID(currentTemplate.id).getBoundingClientRect();
-                            currentTemplate.style.left = parseFloat(currentTemplate.style.left) - (this.isTileMap ? 0 : elementOffset.width / 2) + 'px';
-                            currentTemplate.style.top = parseFloat(currentTemplate.style.top) - (this.isTileMap ? 0 : elementOffset.height / 2) + 'px';
+                            if (currentTemplate.style.visibility != "hidden") {
+                                const elementOffset = getElementByID(currentTemplate.id).getBoundingClientRect();
+                                currentTemplate.style.left = parseFloat(currentTemplate.style.left) - (this.isTileMap ? 0 : elementOffset.width / 2) + 'px';
+                                currentTemplate.style.top = parseFloat(currentTemplate.style.top) - (this.isTileMap ? 0 : elementOffset.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%)';
                         }
-                    }
+                    });
                 }
-            }
+            });
         }
     }
     createTile() {
@@ -8005,7 +8110,8 @@ let Maps = class Maps extends Component {
             const options = new TextOption(this.element.id + '_Map_' + type, location.x, location.y, 'start', trimmedTitle);
             const titleBounds = new Rect(location.x, location.y, elementSize.width, elementSize.height);
             const 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);
@@ -8156,7 +8262,7 @@ let Maps = class Maps extends Component {
         }
         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')) {
@@ -8319,12 +8425,12 @@ let Maps = class Maps extends Component {
         return latLongValue;
     }
     /** @private */
-    getClickLocation(targetId, pageX, pageY, targetElement, x, y) {
+    getClickLocation(targetId, pageX, pageY, targetElement, x, y, type) {
         let layerIndex = 0;
         let 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) {
@@ -8383,8 +8489,9 @@ let Maps = class Maps extends Component {
                 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;
@@ -9114,13 +9221,51 @@ let Maps = class Maps extends Component {
         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
@@ -9261,85 +9406,99 @@ let Maps = class Maps extends Component {
         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;
@@ -9533,6 +9692,7 @@ let Maps = class Maps extends Component {
                     if (polygon.points.length > 0) {
                         isSelection = layer.polygonSettings.highlightSettings.enable || isSelection;
                         isHighlight = layer.polygonSettings.selectionSettings.enable || isHighlight;
+                        istooltipVisible = layer.polygonSettings.tooltipSettings.visible || istooltipVisible;
                     }
                 }
                 for (const marker$$1 of markers) {
@@ -9809,6 +9969,12 @@ __decorate([
 __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);
@@ -10033,10 +10199,10 @@ class Bubble {
     getbubble(target) {
         const id = target.split('_LayerIndex_');
         const index = parseInt(id[1].split('_')[0], 10);
-        const layer = this.maps.layers[index];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let data;
         if (target.indexOf('_BubbleIndex_') > -1) {
+            const layer = this.maps.layers[index];
             const bubbleIndex = parseInt(id[1].split('_BubbleIndex_')[1], 10);
             const dataIndex = parseInt(id[1].split('_BubbleIndex_')[1].split('_dataIndex_')[1], 10);
             if (!isNaN(bubbleIndex)) {
@@ -10086,8 +10252,7 @@ class Bubble {
      */
     destroy() {
         this.bubbleCollection = [];
-        //TODO: Calling the below code throws spec issue.
-        //this.maps = null;
+        this.maps = null;
     }
 }
 
@@ -10099,6 +10264,8 @@ class Marker {
         this.maps = maps;
         this.trackElements = [];
         this.sameMarkerData = [];
+        this.initialMarkerCluster = [];
+        this.zoomedMarkerCluster = [];
     }
     markerRender(maps, layerElement, layerIndex, factor, type) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10130,13 +10297,11 @@ class Marker {
                 getZoomTranslate(maps, currentLayer, allowAnimation) :
                 getTranslate(maps, currentLayer, allowAnimation);
         }
-        for (let markerIndex = 0; markerIndex < currentLayer.markerSettings.length; markerIndex++) {
-            let markerSettings = currentLayer.markerSettings[markerIndex];
+        Array.prototype.forEach.call(currentLayer.markerSettings, (markerSettings, markerIndex) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerData = markerSettings.dataSource;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            for (let dataIndex = 0; dataIndex < markerData.length; dataIndex++) {
-                let data = markerData[dataIndex];
+            Array.prototype.forEach.call(markerData, (data, dataIndex) => {
                 maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                 let eventArgs = {
                     cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
@@ -10210,8 +10375,8 @@ class Marker {
                         }
                     }
                 });
-            }
-        }
+            });
+        });
     }
     /**
      * To find zoom level for individual layers like India, USA.
@@ -10570,6 +10735,13 @@ class Marker {
         };
         this.maps.trigger(markerClusterMouseMove, eventArgs);
     }
+    /** @private */
+    initializeMarkerClusterList() {
+        for (let i = 0; i < this.maps.layers.length; i++) {
+            this.initialMarkerCluster[i] = [];
+            this.zoomedMarkerCluster[i] = [];
+        }
+    }
     /**
      * Get module name.
      *
@@ -10589,6 +10761,8 @@ class Marker {
         this.trackElements = [];
         this.markerSVGObject = null;
         this.sameMarkerData = [];
+        this.initialMarkerCluster = [];
+        this.zoomedMarkerCluster = [];
     }
 }
 
@@ -10597,7 +10771,6 @@ class Marker {
  */
 class Polygon {
     constructor(maps) {
-        this.maps = maps;
     }
     /**
      * To render polygon for maps
@@ -10622,7 +10795,7 @@ class Polygon {
             const path = calculatePolygonPath(maps, factor, currentLayer, polygonData);
             const pathOptions = new PathOption(maps.element.id + '_LayerIndex_' + layerIndex + '_PolygonIndex_' + polygonIndex, polygonSetting.fill, (polygonSetting.borderWidth / factor), polygonSetting.borderColor, polygonSetting.opacity, polygonSetting.borderOpacity, '', path);
             const 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);
         });
@@ -10643,7 +10816,6 @@ class Polygon {
      * @private
      */
     destroy() {
-        this.maps = null;
     }
 }
 
@@ -10727,7 +10899,7 @@ class DataLabel {
         let 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;
         const properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?
             layer.shapePropertyPath : [layer.shapePropertyPath]);
         let propertyPath;
@@ -10759,7 +10931,7 @@ class DataLabel {
         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
@@ -10862,13 +11034,13 @@ class DataLabel {
                 if (eventargs.text !== text && !eventargs.cancel) {
                     text = eventargs.text;
                 }
-                const textSize = measureText(text, style);
+                const textSize = measureTextElement(text, style);
                 let trimmedLable = text;
                 let elementSize = textSize;
-                const startY = location['y'] - textSize['height'] / 4;
-                const endY = location['y'] + textSize['height'] / 4;
-                const start = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 4;
-                const end = ((location['y'] + transPoint['y']) * scale) + textSize['height'] / 4;
+                const startY = location['y'] - textSize['height'] / 2;
+                const endY = location['y'] + textSize['height'] / 2;
+                const start = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
+                const 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')) {
@@ -10909,8 +11081,8 @@ class DataLabel {
                     if (dataLabelSettings.smartLabelMode === 'Trim') {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const 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') {
@@ -10951,19 +11123,19 @@ class DataLabel {
                                     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, '', '');
                     }
@@ -10997,6 +11169,8 @@ class DataLabel {
                         }
                     }
                     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)) + ' '
@@ -11006,7 +11180,7 @@ class DataLabel {
                     }
                     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);
                 }
@@ -11056,16 +11230,16 @@ class DataLabel {
     getPoint(shapes, points) {
         if (shapes['type'] === 'MultiLineString') {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shapes.map((current) => {
+            Array.prototype.forEach.call(shapes, (current) => {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                current.map((shape) => {
+                Array.prototype.forEach.call(current, (shape) => {
                     points.push(new Point(shape['point']['x'], shape['point']['y']));
                 });
             });
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shapes.map((current) => {
+            Array.prototype.forEach.call(shapes, (current) => {
                 points.push(new Point(current['point']['x'], current['point']['y']));
             });
         }
@@ -11685,7 +11859,9 @@ class Legend {
                 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);
+                const 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();
             }
@@ -11762,7 +11938,9 @@ class Legend {
                     legendText = trimmedText;
                 }
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
-                renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
+                const 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)) {
@@ -11838,6 +12016,8 @@ class Legend {
                         };
                         const 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);
                     }
@@ -12533,7 +12713,9 @@ class Legend {
             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);
+            const element = renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
+            element.setAttribute('aria-label', legendTitle);
+            element.setAttribute('role', 'region');
         }
     }
     changeNextPage(e) {
@@ -14076,6 +14258,7 @@ class MapsTooltip {
             }
         }
         let option;
+        let polygonTooltipOption;
         let currentData = '';
         const targetId = target.id;
         let tooltipEle;
@@ -14088,10 +14271,30 @@ class MapsTooltip {
         let markerFill;
         const location = getMousePosition(pageX, pageY, this.maps.svgObject);
         this.tooltipTargetID = targetId;
+        let polygonTextStyle;
+        let polygonFill;
+        let polygon;
+        let latitude = null;
+        let longitude = null;
+        const latLongValue = this.maps.getClickLocation(targetId, e.pageX, e.pageY, target, e['layerX'], e['layerY'], 'tooltip');
+        if (!isNullOrUndefined(latLongValue)) {
+            latitude = latLongValue.latitude;
+            longitude = latLongValue.longitude;
+        }
+        const isPolygon = targetId.indexOf('_PolygonIndex_') > -1;
         const 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) {
+                const 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;
                 const shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
                 if (isNullOrUndefined(layer.layerData) || isNullOrUndefined(layer.layerData[shape])) {
@@ -14194,116 +14397,135 @@ class MapsTooltip {
                 }
                 //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);
-            const 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
-            };
-            const 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, (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]];
+                    }
+                    else {
+                        option.template = option.template[Object.keys(option.template)[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();
+                }
+                templateData = this.setTooltipContent(option, templateData);
+                const 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
+                };
+                const 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, (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);
+                }
+                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);
@@ -14352,10 +14574,12 @@ class MapsTooltip {
      * @private
      */
     mouseUpHandler(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);
+            }
         }
     }
     /**
@@ -14409,7 +14633,7 @@ class MapsTooltip {
                 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);
@@ -14440,8 +14664,7 @@ class MapsTooltip {
             this.svgTooltip.destroy();
         }
         this.svgTooltip = null;
-        //TODO: Calling the below code throws spec issue.
-        //this.maps = null;
+        this.maps = null;
     }
 }
 
@@ -14451,7 +14674,7 @@ class MapsTooltip {
 class Zoom {
     constructor(maps) {
         /** @private */
-        this.isPanning = false;
+        this.isPanModeEnabled = false;
         /** @private */
         this.mouseEnter = false;
         /** @private */
@@ -14472,9 +14695,6 @@ class Zoom {
         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 */
@@ -14610,6 +14830,7 @@ class Zoom {
                     }, animationDuration);
                 }
             }
+            this.triggerZoomComplete(map, prevLevel, type);
         }
         this.maps.zoomNotApplied = false;
         if (this.maps.isDevice) {
@@ -14698,12 +14919,12 @@ class Zoom {
                     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)));
@@ -14733,6 +14954,7 @@ class Zoom {
             }
         }
         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_');
     }
     setInteraction(newInteraction) {
@@ -14825,10 +15047,41 @@ class Zoom {
         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_');
         }
     }
+    triggerZoomComplete(map, prevLevel, type) {
+        if (map.zoomSettings.enable) {
+            let zoomArgs;
+            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;
+            }
+            const 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
      */
@@ -14882,13 +15135,14 @@ class Zoom {
     /**
      * @private
      */
-    applyTransform(maps, animate$$1) {
+    applyTransform(maps, animate$$1, isPanning) {
         let layerIndex;
         this.templateCount = 0;
         let markerStyle;
         const scale = maps.scale;
         const x = maps.translatePoint.x;
         const y = maps.translatePoint.y;
+        let currentLabelIndex = 0;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         maps.zoomShapeCollection = [];
         if (document.getElementById(maps.element.id + '_mapsTooltip')) {
@@ -14934,7 +15188,7 @@ class Zoom {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if ((!this.isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
+                            if ((!this.isPanModeEnabled) && !isNullOrUndefined(currentEle.childNodes[0])) {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate$$1);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -14958,7 +15212,7 @@ class Zoom {
                                             }
                                         }
                                     }
-                                    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) {
                                             const groupElement = document.querySelector('.GroupElement');
                                             if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
@@ -14971,7 +15225,7 @@ class Zoom {
                                         }
                                     }
                                 });
-                                if (this.isPanning && maps.markerModule.sameMarkerData.length > 0) {
+                                if (this.isPanModeEnabled && maps.markerModule.sameMarkerData.length > 0) {
                                     clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
                                 }
                                 else if (maps.markerModule.sameMarkerData.length > 0) {
@@ -14981,7 +15235,7 @@ class Zoom {
                                     }
                                 }
                                 if (document.getElementById(maps.element.id + '_mapsTooltip') && maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
-                                    && !this.isPanning) {
+                                    && !this.isPanModeEnabled) {
                                     const mapsTooltip = maps.mapsTooltipModule;
                                     const tooltipElement = currentEle.querySelector('#' + mapsTooltip.tooltipTargetID);
                                     if (!isNullOrUndefined(tooltipElement)) {
@@ -15032,16 +15286,17 @@ class Zoom {
                             }
                         }
                         else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this.index])) {
-                            this.intersect = [];
                             maps.zoomLabelPositions = [];
                             maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
                             const labelAnimate = !maps.isTileMap && animate$$1;
-                            for (let k = 0; k < currentEle.childElementCount; k++) {
+                            const intersect = [];
+                            Array.prototype.forEach.call(currentEle.childNodes, (childNode, k) => {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     const labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
-                                    this.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
-                                    maps.zoomShapeCollection.push(this.zoomshapewidth);
-                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate);
+                                    var zoomShapeWidth = currentEle.childNodes[k].id;
+                                    maps.zoomShapeCollection.push(zoomShapeWidth);
+                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate, currentLabelIndex, isPanning, intersect);
+                                    currentLabelIndex++;
                                     const dataLabel = maps.layers[this.index].dataLabelSettings;
                                     const border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
@@ -15060,7 +15315,7 @@ class Zoom {
                                         }
                                     }
                                 }
-                            }
+                            });
                         }
                     }
                 }
@@ -15200,6 +15455,7 @@ class Zoom {
      * @private
      */
     processTemplate(x, y, scale, maps) {
+        let currentLabelIndex = 0;
         for (let i = 0; i < this.templateCount; i++) {
             const factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
             const markerTemplateElement = getElementByID(maps.element.id + '_LayerIndex_' +
@@ -15216,7 +15472,8 @@ class Zoom {
             }
             if ((!isNullOrUndefined(datalabelTemplateElemement)) && datalabelTemplateElemement.childElementCount > 0) {
                 for (let 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)) {
@@ -15227,7 +15484,7 @@ class Zoom {
             }
         }
     }
-    dataLabelTranslate(element, factor, x, y, scale, type, animate$$1 = false) {
+    dataLabelTranslate(element, factor, x, y, scale, type, animate$$1 = false, currentLabelIndex, isPanning, intersect) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const labelCollection = this.maps.dataLabelModule.dataLabelCollections;
         let text;
@@ -15243,77 +15500,80 @@ class Zoom {
             labelIndex = parseFloat(element.id.split('_LabelIndex_')[1].split('_')[0]);
         }
         const duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
-        for (let l = 0; l < labelCollection.length; l++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const label = labelCollection[l];
-            if (label['layerIndex'] === layerIndex && label['shapeIndex'] === shapeIndex
-                && label['labelIndex'] === labelIndex) {
-                let labelX = label['location']['x'];
-                let labelY = label['location']['y'];
-                if (type === 'Template') {
-                    let locationX = 0;
-                    let 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 {
-                        const 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);
-                        const layerOffset = layerEle.getBoundingClientRect();
-                        const 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
+        let label = labelCollection[currentLabelIndex];
+        let index = currentLabelIndex;
+        if (label['layerIndex'] === layerIndex && label['shapeIndex'] === shapeIndex
+            && label['labelIndex'] === labelIndex) {
+            let labelX = label['location']['x'];
+            let labelY = label['location']['y'];
+            if (type === 'Template') {
+                let locationX = 0;
+                let locationY = 0;
+                if (this.maps.isTileMap) {
                     zoomtext = label['dataLabelText'];
                     zoomtextSize = measureText(zoomtext, style);
-                    const start = labelY - zoomtextSize['height'] / 4;
-                    const end = labelY + zoomtextSize['height'] / 4;
+                    locationX = ((labelX + x) * scale) - (zoomtextSize['width'] / 2);
+                    locationY = ((labelY + y) * scale) - (zoomtextSize['height']);
+                }
+                else {
+                    const 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);
+                    const layerOffset = layerEle.getBoundingClientRect();
+                    const 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);
+                    const start = labelY - zoomtextSize['height'] / 2;
+                    const end = labelY + zoomtextSize['height'] / 2;
                     const xpositionEnds = labelX + zoomtextSize['width'] / 2;
                     const xpositionStart = labelX - zoomtextSize['width'] / 2;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const 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;
                         }
                     }
+                    let 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 (let 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 (let 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;
                                 }
@@ -15324,50 +15584,53 @@ class Zoom {
                                 }
                             }
                         }
-                        this.intersect.push(textLocations);
+                        intersect.push(textLocations);
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.intersectionAction === 'Trim') {
-                        for (let 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 (let 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);
+                                        let 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']) {
-                                        const width = this.intersect[j]['rightWidth'] - textLocations['leftWidth'];
+                                    if (textLocations['leftWidth'] > intersect[j]['leftWidth']) {
+                                        const width = intersect[j]['rightWidth'] - textLocations['leftWidth'];
                                         const difference = width - (textLocations['rightWidth'] - textLocations['leftWidth']);
                                         text = !isNullOrUndefined(text) ? text : zoomtext;
-                                        trimmedLable = textTrim(difference, text, style);
+                                        let 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']) {
-                                        const width = textLocations['rightWidth'] - this.intersect[j]['leftWidth'];
+                                    if (textLocations['leftWidth'] < intersect[j]['leftWidth']) {
+                                        const width = textLocations['rightWidth'] - intersect[j]['leftWidth'];
                                         const difference = Math.abs(width - (textLocations['rightWidth'] - textLocations['leftWidth']));
                                         text = !isNullOrUndefined(text) ? text : zoomtext;
-                                        trimmedLable = textTrim(difference, text, style);
+                                        let 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));
                 }
             }
         }
@@ -15512,15 +15775,15 @@ class Zoom {
             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;
@@ -15551,7 +15814,7 @@ class Zoom {
             };
             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;
@@ -15670,6 +15933,7 @@ class Zoom {
             }
             this.maps.zoomNotApplied = false;
         }
+        this.triggerZoomComplete(map, prevLevel, type);
     }
     /**
      * @private
@@ -15959,7 +16223,7 @@ class Zoom {
     }
     panningStyle(toolbar) {
         const 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 {
@@ -16306,8 +16570,8 @@ class Zoom {
             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;
@@ -16315,11 +16579,11 @@ class Zoom {
             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 };
         let scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
@@ -16346,8 +16610,8 @@ class Zoom {
             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;
@@ -16381,7 +16645,7 @@ class Zoom {
         this.mouseMovePoints = this.getMousePosition(pageX, pageY);
         const targetId = e.target['id'];
         const 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 };
@@ -16411,13 +16675,66 @@ class Zoom {
     mouseUpHandler(e) {
         const 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)) {
+            let pageX;
+            let pageY;
+            let layerX = 0;
+            let layerY = 0;
+            let target;
+            const rect = this.maps.element.getBoundingClientRect();
+            const element = e.target;
+            if (e.type.indexOf('touch') !== -1) {
+                let 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;
+            }
+            let panCompleteEventArgs;
+            const minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
+            if (!this.maps.isTileMap) {
+                this.maps.mouseClickEvent['x'] = this.maps.mouseDownEvent['x'];
+                this.maps.mouseClickEvent['y'] = this.maps.mouseDownEvent['y'];
+                const location = 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) ?
+                        location.latitude : 0, longitude: !isNullOrUndefined(location) ? location.longitude : 0,
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            else {
+                const location = 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.latitude, longitude: location.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;
@@ -16434,7 +16751,7 @@ class Zoom {
      * @private
      */
     mouseCancelHandler(e) {
-        this.isPanning = false;
+        this.isPanModeEnabled = false;
         this.isTouch = false;
         this.rectZoomingStart = false;
         const zoomRectElement = getElementByID(this.maps.element.id + '_Selection_Rect_Zooming');
@@ -16514,7 +16831,7 @@ class Zoom {
         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.
@@ -16543,14 +16860,12 @@ class Zoom {
         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;
     }
 }
 
@@ -17023,5 +17338,5 @@ class PdfExport {
  * 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.es2015.js.map