@syncfusion/ej2-maps 23.2.4 → 24.1.41

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

@@ -199,6 +199,25 @@ function convertGeoToPoint(latitude, longitude, factor, layer, mapModel) {
     }
     return new Point(x, y);
 }
+/**
+ * @private
+ */
+function calculatePolygonPath(maps, factor, currentLayer, markerData) {
+    let path = '';
+    Array.prototype.forEach.call(markerData, (data, dataIndex) => {
+        let lat = data.latitude;
+        let lng = data.longitude;
+        let location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+        if (dataIndex === 0) {
+            path += 'M ' + location.x + ' ' + location.y;
+        }
+        else {
+            path += ' L ' + location.x + ' ' + location.y;
+        }
+    });
+    path += ' z ';
+    return path;
+}
 /**
  * Converting tile latitude and longitude to point
  *
@@ -340,6 +359,15 @@ class Point {
         this.y = y;
     }
 }
+/**
+ * Defines the latitude and longitude values that define a map location.
+ */
+class Coordinate {
+    constructor(latitude, longitude) {
+        this.latitude = latitude;
+        this.longitude = longitude;
+    }
+}
 /**
  * Map internal class for min and max
  *
@@ -1059,12 +1087,24 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
         }
         const element = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
-        if (isNullOrUndefined(element)) {
+        const polygonElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
+        if (isNullOrUndefined(element) && !maps.isTileMap) {
             layerElement.insertBefore(markerCollection, layerElement.firstChild);
         }
-        else {
+        else if (!maps.isTileMap) {
             layerElement.appendChild(markerCollection);
         }
+        else {
+            if (!isNullOrUndefined(polygonElement)) {
+                polygonElement.insertAdjacentElement('afterend', markerCollection);
+            }
+            else if (!isNullOrUndefined(element)) {
+                element.insertAdjacentElement('afterend', markerCollection);
+            }
+            else {
+                layerElement.insertBefore(markerCollection, layerElement.firstChild);
+            }
+        }
         const markerCluster = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster');
         if (!isNullOrUndefined(markerCluster)) {
             markerCluster.remove();
@@ -1596,7 +1636,7 @@ function drawBalloon(maps, options, size, location, type, element) {
     const height = size.height;
     let pathElement;
     location.x -= width / 2;
-    location.y -= height / 2;
+    location.y -= ((options.id.indexOf('cluster') > -1) ? (height / 2) : options.id.indexOf('Legend') > -1 ? height / 1.25 : height);
     options.d = 'M15,0C8.8,0,3.8,5,3.8,11.2C3.8,17.5,9.4,24.4,15,30c5.6-5.6,11.2-12.5,11.2-18.8C26.2,5,21.2,0,15,0z M15,16' +
         'c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S17.8,16,15,16z';
     const balloon = maps.renderer.drawPath(options);
@@ -2002,7 +2042,8 @@ function getTranslate(mapObject, layer, animate) {
             const topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
             const point = checkMethodeZoom ? calculateCenterFromPixel(mapObject, layer) :
                 convertGeoToPoint(centerLatitude, centerLongitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
+            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType
+                || mapObject.isMarkerZoomCompleted) {
                 x = -point.x + leftPosition;
                 y = -point.y + topPosition;
                 scaleFactor = zoomFactor;
@@ -2970,6 +3011,13 @@ function changeBorderWidth(element, index, scale, maps) {
         if (childNode.id.indexOf('_NavigationGroup') > -1) {
             changeNavaigationLineWidth(childNode, index, scale, maps);
         }
+        else if (childNode.id.indexOf('_Polygons_Group') > -1) {
+            for (var i = 0; i < childNode.childElementCount; i++) {
+                // eslint-disable-next-line
+                const width = maps.layersCollection[index].polygonSettings.polygons[parseInt(childNode.children[i].id.split('_PolygonIndex_')[1])].borderWidth;
+                childNode.children[i].setAttribute('stroke-width', (width / scale).toString());
+            }
+        }
         else {
             let currentStroke;
             let value = 0;
@@ -4412,6 +4460,44 @@ __decorate$1([
 __decorate$1([
     Complex({ color: 'transparent', width: 0 }, Border)
 ], HighlightSettings.prototype, "border", void 0);
+/**
+ * Defines the properties for a single polygon shape to render over the Maps, such as coordinates, fill, border, and opacity.
+ */
+class PolygonSetting extends ChildProperty {
+}
+__decorate$1([
+    Property(1)
+], PolygonSetting.prototype, "borderWidth", void 0);
+__decorate$1([
+    Property(1)
+], PolygonSetting.prototype, "borderOpacity", void 0);
+__decorate$1([
+    Property(1)
+], PolygonSetting.prototype, "opacity", void 0);
+__decorate$1([
+    Property('#FF471A')
+], PolygonSetting.prototype, "borderColor", void 0);
+__decorate$1([
+    Property('#FF471A')
+], PolygonSetting.prototype, "fill", void 0);
+__decorate$1([
+    Property([])
+], PolygonSetting.prototype, "points", 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.
+ */
+class PolygonSettings extends ChildProperty {
+}
+__decorate$1([
+    Collection([], PolygonSetting)
+], PolygonSettings.prototype, "polygons", void 0);
+__decorate$1([
+    Complex({}, SelectionSettings)
+], PolygonSettings.prototype, "selectionSettings", void 0);
+__decorate$1([
+    Complex({}, HighlightSettings)
+], PolygonSettings.prototype, "highlightSettings", void 0);
 /**
  * Gets or sets the options to customize the navigation lines in maps which is used to connect different locations.
  */
@@ -4965,6 +5051,9 @@ __decorate$1([
 __decorate$1([
     Collection([], NavigationLineSettings)
 ], LayerSettings.prototype, "navigationLineSettings", void 0);
+__decorate$1([
+    Complex({}, PolygonSettings)
+], LayerSettings.prototype, "polygonSettings", void 0);
 __decorate$1([
     Complex({}, TooltipSettings)
 ], LayerSettings.prototype, "tooltipSettings", void 0);
@@ -5007,498 +5096,7 @@ __decorate$1([
 ], MapsAreaSettings.prototype, "border", void 0);
 
 /**
- * Marker class
- */
-class Marker {
-    constructor(maps) {
-        this.maps = maps;
-        this.trackElements = [];
-        this.sameMarkerData = [];
-    }
-    markerRender(maps, layerElement, layerIndex, factor, type) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let templateFn;
-        let markerCount = 0;
-        let nullCount = 0;
-        let markerTemplateCount = 0;
-        maps.translateType = 'marker';
-        const currentLayer = maps.layersCollection[layerIndex];
-        this.markerSVGObject = maps.renderer.createGroup({
-            id: maps.element.id + '_Markers_Group',
-            class: 'GroupElement'
-        });
-        this.markerSVGObject.style.pointerEvents = 'auto';
-        const markerTemplateEle = createElement('div', {
-            id: maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
-            className: maps.element.id + '_template'
-        });
-        markerTemplateEle.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
-            'top:' + maps.mapAreaRect.y + 'px;' +
-            'left:' + maps.mapAreaRect.x + 'px;' +
-            'height:' + maps.mapAreaRect.height + 'px;' +
-            'width:' + maps.mapAreaRect.width + 'px;';
-        currentLayer.markerSettings.map((markerSettings, markerIndex) => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const markerData = markerSettings.dataSource;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            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,
-                    width: markerSettings.width, imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
-                    template: markerSettings.template, data: data, maps: maps, marker: markerSettings,
-                    border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
-                    shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
-                };
-                maps.trigger('markerRendering', eventArgs, (MarkerArgs) => {
-                    eventArgs = markerColorChoose(eventArgs, data);
-                    eventArgs = markerShapeChoose(eventArgs, data);
-                    const lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                    const lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                    const offset = markerSettings.offset;
-                    if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
-                        const markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
-                            + markerIndex + '_dataIndex_' + dataIndex;
-                        let location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
-                        const animate$$1 = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object() :
-                            !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
-                                getZoomTranslate(maps, currentLayer, animate$$1) :
-                                getTranslate(maps, currentLayer, animate$$1);
-                        const scale = type === 'AddMarker' ? maps.scale : translate['scale'];
-                        const transPoint = type === 'AddMarker' ? maps.translatePoint : translate['location'];
-                        if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
-                            markerTemplateCount++;
-                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location, transPoint, scale, offset, maps);
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            maps.renderReactTemplates();
-                        }
-                        else if (!eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
-                            markerCount++;
-                            marker(eventArgs, markerSettings, markerData, dataIndex, location, transPoint, markerID, offset, scale, maps, this.markerSVGObject);
-                        }
-                    }
-                    nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
-                    markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
-                    markerCount += (eventArgs.cancel) ? 1 : 0;
-                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ?
-                        maps.markerNullCount + 1 : maps.markerNullCount;
-                    const markerDataLength = markerData.length - maps.markerNullCount;
-                    if (this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
-                        layerElement.appendChild(this.markerSVGObject);
-                        if (currentLayer.markerClusterSettings.allowClustering) {
-                            maps.svgObject.appendChild(this.markerSVGObject);
-                            maps.element.appendChild(maps.svgObject);
-                            if ((currentLayer.layerType === 'OSM' || (currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData)))
-                                && maps.zoomSettings.enable) {
-                                clusterTemplate(currentLayer, this.markerSVGObject, maps, layerIndex, this.markerSVGObject, layerElement, true, false);
-                                layerElement.appendChild(this.markerSVGObject);
-                            }
-                            else {
-                                clusterTemplate(currentLayer, this.markerSVGObject, maps, layerIndex, this.markerSVGObject, layerElement, true, false);
-                            }
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            maps.renderReactTemplates();
-                        }
-                    }
-                    if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
-                        getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
-                        if (maps.checkInitialRender) {
-                            if (currentLayer.markerClusterSettings.allowClustering) {
-                                clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, this.markerSVGObject, layerElement, false, false);
-                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                maps.renderReactTemplates();
-                            }
-                        }
-                    }
-                });
-            });
-        });
-    }
-    /**
-     * To find zoom level for individual layers like India, USA.
-     *
-     * @param {number} mapWidth - Specifies the width of the maps
-     * @param {number} mapHeight - Specifies the height of the maps
-     * @param {number} maxZoomFact - Specifies the maximum zoom factor
-     * @returns {number} - Returns the scale factor
-     */
-    calculateIndividualLayerMarkerZoomLevel(mapWidth, mapHeight, maxZoomFact) {
-        let latZoom;
-        let lngZoom;
-        const height = Math.abs(this.maps.baseMapBounds.latitude.max - this.maps.baseMapBounds.latitude.min);
-        const width = Math.abs(this.maps.baseMapBounds.longitude.max - this.maps.baseMapBounds.longitude.min);
-        latZoom = Math.floor(Math.log(mapHeight / height));
-        latZoom = (latZoom > maxZoomFact) ? maxZoomFact : latZoom;
-        lngZoom = Math.floor(Math.log(mapWidth / width));
-        lngZoom = (lngZoom > maxZoomFact) ? maxZoomFact : lngZoom;
-        const result = Math.min(latZoom, lngZoom);
-        const scaleFactor = Math.min(result, maxZoomFact - 1);
-        if (!this.maps.isTileMap) {
-            compareZoomFactor(scaleFactor, this.maps);
-        }
-        return scaleFactor;
-    }
-    /**
-     * To calculate center position and factor value dynamically
-     *
-     * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
-     * @returns {void}
-     * @private
-     */
-    calculateZoomCenterPositionAndFactor(layersCollection) {
-        if (!isNullOrUndefined(this.maps)) {
-            if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
-                let minLong;
-                let maxLat;
-                let minLat;
-                let maxLong;
-                let zoomLevel;
-                let centerLat;
-                let centerLong;
-                const maxZoomFact = this.maps.zoomSettings.maxZoom;
-                const mapWidth = this.maps.mapAreaRect.width;
-                const mapHeight = this.maps.mapAreaRect.height;
-                this.maps.markerZoomedState = this.maps.markerZoomedState ? this.maps.markerZoomedState :
-                    isNullOrUndefined(this.maps.markerZoomFactor) ? !this.maps.markerZoomedState :
-                        this.maps.markerZoomFactor > 1 ? this.maps.markerZoomedState : !this.maps.markerZoomedState;
-                this.maps.defaultState = this.maps.markerZoomedState ? !this.maps.markerZoomedState : this.maps.defaultState;
-                Array.prototype.forEach.call(layersCollection, (currentLayer) => {
-                    const isMarker = currentLayer.markerSettings.length !== 0;
-                    if (isMarker) {
-                        Array.prototype.forEach.call(currentLayer.markerSettings, (markerSetting) => {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            const markerData = markerSetting.dataSource;
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            Array.prototype.forEach.call(markerData, (data, dataIndex) => {
-                                const latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
-                                    !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                                const longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
-                                    !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                                minLong = isNullOrUndefined(minLong) && dataIndex === 0 ?
-                                    longitude : minLong;
-                                maxLat = isNullOrUndefined(maxLat) && dataIndex === 0 ?
-                                    latitude : maxLat;
-                                minLat = isNullOrUndefined(minLat) && dataIndex === 0 ?
-                                    latitude : minLat;
-                                maxLong = isNullOrUndefined(maxLong) && dataIndex === 0 ?
-                                    longitude : maxLong;
-                                if (minLong > longitude) {
-                                    minLong = longitude;
-                                }
-                                if (minLat > latitude) {
-                                    minLat = latitude;
-                                }
-                                if (maxLong < longitude) {
-                                    maxLong = longitude;
-                                }
-                                if (maxLat < latitude) {
-                                    maxLat = latitude;
-                                }
-                            });
-                        });
-                    }
-                });
-                if (!isNullOrUndefined(minLat) && !isNullOrUndefined(minLong) &&
-                    !isNullOrUndefined(maxLong) && !isNullOrUndefined(maxLat)) {
-                    // To find the center position
-                    centerLat = (minLat + maxLat) / 2;
-                    centerLong = (minLong + maxLong) / 2;
-                    this.maps.markerCenterLatitude = centerLat;
-                    this.maps.markerCenterLongitude = centerLong;
-                    if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
-                        this.maps.markerZoomCenterPoint = {
-                            latitude: centerLat,
-                            longitude: centerLong
-                        };
-                    }
-                    let markerFactor;
-                    if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
-                        zoomLevel = calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, this.maps, false);
-                        if (this.maps.isTileMap) {
-                            markerFactor = isNullOrUndefined(this.maps.markerZoomFactor) ?
-                                zoomLevel : isNullOrUndefined(this.maps.mapScaleValue) ?
-                                zoomLevel : this.maps.mapScaleValue > 1 && this.maps.markerZoomFactor !== 1 ?
-                                this.maps.mapScaleValue : zoomLevel;
-                        }
-                        else {
-                            markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
-                                (Math.floor(this.maps.scale) !== 1 &&
-                                    this.maps.mapScaleValue !== zoomLevel)
-                                    &&
-                                        (isNullOrUndefined(this.maps.shouldZoomCurrentFactor))
-                                    ? this.maps.mapScaleValue : zoomLevel;
-                            if (((markerFactor === this.maps.mapScaleValue &&
-                                (this.maps.markerZoomFactor === 1 || this.maps.mapScaleValue === 1))
-                                && (!this.maps.enablePersistence))) {
-                                markerFactor = zoomLevel;
-                            }
-                        }
-                    }
-                    else {
-                        zoomLevel = this.calculateIndividualLayerMarkerZoomLevel(mapWidth, mapHeight, maxZoomFact);
-                        markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
-                            (this.maps.mapScaleValue !== zoomLevel)
-                                ? this.maps.mapScaleValue : zoomLevel;
-                    }
-                    this.maps.markerZoomFactor = markerFactor;
-                }
-            }
-            else {
-                this.maps.markerZoomedState = false;
-                if (this.maps.markerZoomFactor > 1) {
-                    this.maps.markerCenterLatitude = null;
-                    this.maps.markerCenterLongitude = null;
-                    this.maps.markerZoomFactor = 1;
-                    if (!this.maps.enablePersistence) {
-                        this.maps.mapScaleValue = 1;
-                    }
-                }
-                if (this.maps.isTileMap && !this.maps.enablePersistence
-                    && this.maps.mapScaleValue <= 1) {
-                    this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? (this.maps.isZoomByPosition ? this.maps.tileZoomLevel : 1)
-                        : this.maps.mapScaleValue;
-                    if (this.maps.mapScaleValue === 1 && this.maps.markerZoomFactor === 1) {
-                        this.maps.tileTranslatePoint.x = 0;
-                        this.maps.tileTranslatePoint.y = 0;
-                    }
-                }
-            }
-        }
-    }
-    /**
-     * To check and trigger marker click event
-     * @param {PointerEvent} e - Specifies the pointer event argument.
-     * @returns {void}
-     * @private
-     */
-    markerClick(e) {
-        let target = e.target.id;
-        if (target.indexOf(this.maps.element.id) === -1) {
-            const ancestor = e.target.closest('.' + this.maps.element.id + '_marker_template_element');
-            if (!isNullOrUndefined(ancestor) && ancestor.id.indexOf('_MarkerIndex_') > -1) {
-                target = ancestor.id;
-            }
-        }
-        if (target.indexOf('_LayerIndex_') === -1 || target.indexOf('_cluster_') > 0) {
-            return;
-        }
-        const options = this.getMarker(target);
-        if (isNullOrUndefined(options)) {
-            return;
-        }
-        if (options.marker.enableDrag) {
-            document.getElementById(this.maps.element.id + "_svg").style.cursor = 'grabbing';
-        }
-        const eventArgs = {
-            cancel: false, name: markerClick, data: options.data, maps: this.maps,
-            marker: options.marker, target: target, x: e.clientX, y: e.clientY,
-            latitude: options.data['latitude'] || options.data['Latitude'],
-            longitude: options.data['longitude'] || options.data['Longitude'],
-            value: options.data['name']
-        };
-        this.maps.trigger(markerClick, eventArgs);
-        if (options.marker.enableDrag) {
-            let isCluster = false;
-            const layerIndex = parseInt(target.split('_LayerIndex_')[1].split('_')[0], 10);
-            const markerIndex = parseInt(target.split('_MarkerIndex_')[1].split('_')[0], 10);
-            const dataIndex = parseInt(target.split('_dataIndex_')[1].split('_')[0], 10);
-            const marker$$1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
-            if (this.sameMarkerData.length > 0) {
-                isCluster = (this.sameMarkerData[0].data.filter((el) => { return (el['index'] == dataIndex); })).length > 0 &&
-                    this.sameMarkerData[0].layerIndex === layerIndex && this.sameMarkerData[0].markerIndex === markerIndex;
-            }
-            if (!isCluster) {
-                const dragEventArgs = {
-                    name: markerDragStart, x: e.clientX, y: e.clientY,
-                    latitude: options.data['latitude'] || options.data['Latitude'],
-                    longitude: options.data['longitude'] || options.data['Longitude'],
-                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex
-                };
-                this.maps.trigger(markerDragStart, dragEventArgs);
-                this.maps.markerDragArgument = {
-                    targetId: target, x: e.clientX, y: e.clientY,
-                    latitude: options.data['latitude'] || options.data['Latitude'],
-                    longitude: options.data['longitude'] || options.data['Longitude'],
-                    shape: isNullOrUndefined(marker$$1.shapeValuePath) ? marker$$1.shape : marker$$1.dataSource[dataIndex][marker$$1.shapeValuePath],
-                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex
-                };
-            }
-        }
-    }
-    /**
-     * To check and trigger Cluster click event
-     * @param {PointerEvent} e - Specifies the pointer event argument.
-     * @returns {void}
-     * @private
-     */
-    markerClusterClick(e) {
-        const target = e.target.id;
-        if (target.indexOf('_LayerIndex_') === -1 || target.indexOf('_cluster_') === -1) {
-            return;
-        }
-        const options = this.getMarker(target);
-        if (isNullOrUndefined(options)) {
-            return;
-        }
-        if ((options.clusterCollection.length > 0 && this.maps.markerClusterExpand)) {
-            if (getElement(this.maps.element.id + '_mapsTooltip') &&
-                this.maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_') > -1) {
-                removeElement(this.maps.element.id + '_mapsTooltip');
-            }
-            if (this.sameMarkerData.length > 0 && !this.maps.markerClusterExpandCheck) {
-                this.maps.markerClusterExpandCheck = true;
-                mergeSeparateCluster(this.sameMarkerData, this.maps, this.markerSVGObject);
-            }
-            else {
-                this.sameMarkerData = options.clusterCollection;
-                this.maps.markerClusterExpandCheck = false;
-                clusterSeparate(this.sameMarkerData, this.maps, this.markerSVGObject, true);
-            }
-        }
-        const eventArgs = {
-            cancel: false, name: markerClusterClick, data: options, maps: this.maps,
-            target: target, x: e.clientX, y: e.clientY,
-            latitude: options.data['latitude'] || options.data['Latitude'], longitude: options.data['longitude'] || options.data['Longitude'],
-            markerClusterCollection: options['markCollection']
-        };
-        this.maps.trigger(markerClusterClick, eventArgs);
-    }
-    /**
-     * To get marker from target id
-     *
-     * @param {string} target - Specifies the target
-     * @returns {string} - Returns the string
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    getMarker(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;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const markCollection = [];
-        const clusterCollection = [];
-        let marker$$1;
-        this.maps.markerClusterExpand = layer.markerClusterSettings.allowClusterExpand;
-        if (target.indexOf('_MarkerIndex_') > -1) {
-            const markerIndex = parseInt(id[1].split('_MarkerIndex_')[1].split('_')[0], 10);
-            const dataIndex = parseInt(id[1].split('_dataIndex_')[1].split('_')[0], 10);
-            marker$$1 = layer.markerSettings[markerIndex];
-            if (!isNaN(markerIndex)) {
-                data = marker$$1.dataSource[dataIndex];
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                let collection = [];
-                if (!marker$$1.template && (target.indexOf('_cluster_') > -1) && (this.maps.layers[index].markerClusterSettings.allowClusterExpand)) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    Array.prototype.forEach.call(marker$$1.dataSource, (location, index) => {
-                        if (location['latitude'] === data['latitude'] && location['longitude'] === data['longitude']) {
-                            collection.push({ data: data, index: index });
-                        }
-                    });
-                }
-                if ((target.indexOf('_cluster_') > -1)) {
-                    let isClusterSame = false;
-                    const clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? layer.markerClusterSettings.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : layer.markerClusterSettings.shape === 'Balloon' ? target + '_Group' : target);
-                    const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
-                    collection = [];
-                    for (const i of indexes) {
-                        collection.push({ data: marker$$1.dataSource[i], index: i });
-                        markCollection.push(marker$$1.dataSource[i]);
-                    }
-                    isClusterSame = false;
-                    clusterCollection.push({
-                        data: collection, layerIndex: index, markerIndex: markerIndex, dataIndex: dataIndex,
-                        targetClusterIndex: +(target.split('_cluster_')[1].indexOf('_datalabel_') > -1 ? target.split('_cluster_')[1].split('_datalabel_')[0] : target.split('_cluster_')[1]),
-                        isClusterSame: isClusterSame
-                    });
-                }
-                return { marker: marker$$1, data: data, clusterCollection: clusterCollection, markCollection: markCollection };
-            }
-        }
-        return null;
-    }
-    /**
-     * To check and trigger marker move event
-     *
-     * @param {PointerEvent} e - Specifies the pointer event argument.
-     * @returns {void}
-     * @private
-     */
-    markerMove(e) {
-        const targetId = e.target.id;
-        if (targetId.indexOf('_LayerIndex_') === -1 || targetId.indexOf('_cluster_') > 0) {
-            return;
-        }
-        const options = this.getMarker(targetId);
-        if (isNullOrUndefined(options)) {
-            return;
-        }
-        if (options.marker.enableDrag) {
-            document.getElementById(this.maps.element.id + "_svg").style.cursor = isNullOrUndefined(this.maps.markerDragArgument) ?
-                'pointer' : 'grabbing';
-        }
-        const eventArgs = {
-            cancel: false, name: markerMouseMove, data: options.data,
-            maps: this.maps, target: targetId, x: e.clientX, y: e.clientY
-        };
-        this.maps.trigger(markerMouseMove, eventArgs);
-    }
-    /**
-     * To check and trigger cluster move event
-     *
-     * @param {PointerEvent} e - Specifies the pointer event argument.
-     * @returns {void}
-     * @private
-     */
-    markerClusterMouseMove(e) {
-        const targetId = e.target.id;
-        if (targetId.indexOf('_LayerIndex_') === -1 || targetId.indexOf('_cluster_') === -1) {
-            return;
-        }
-        const options = this.getMarker(targetId);
-        if (this.maps.markerClusterExpand) {
-            e.target.style.cursor = 'pointer';
-        }
-        if (isNullOrUndefined(options)) {
-            return;
-        }
-        const eventArgs = {
-            cancel: false, name: markerClusterMouseMove, data: options.data, maps: this.maps,
-            target: targetId, x: e.clientX, y: e.clientY
-        };
-        this.maps.trigger(markerClusterMouseMove, eventArgs);
-    }
-    /**
-     * Get module name.
-     *
-     * @returns {string} - Returns the module name
-     */
-    getModuleName() {
-        return 'Marker';
-    }
-    /**
-     * To destroy the layers.
-     *
-     * @returns {void}
-     * @private
-     */
-    destroy() {
-        this.maps = null;
-        this.trackElements = [];
-        this.markerSVGObject = null;
-        this.sameMarkerData = [];
-    }
-}
-
-/**
- * Maps constants doc
+ * Maps constants doc
  */
 /**
  * Specifies the maps load event name.
@@ -6160,6 +5758,12 @@ class LayerPanel {
             && panel.mapObject.previousZoomFactor !== panel.mapObject.zoomSettings.zoomFactor) {
             panel.mapObject.previousZoomFactor = panel.mapObject.zoomSettings.zoomFactor;
         }
+        if (panel.mapObject.polygonModule) {
+            const polygonElement = panel.mapObject.polygonModule.polygonRender(this.mapObject, layerIndex, panel.mapObject.tileZoomLevel);
+            if (!isNullOrUndefined(polygonElement)) {
+                panel.layerObject.appendChild(polygonElement);
+            }
+        }
         if (panel.mapObject.navigationLineModule) {
             const navigationLineElement = panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex);
             if (!isNullOrUndefined(navigationLineElement)) {
@@ -6618,6 +6222,9 @@ class LayerPanel {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     layerIndex, colors, renderData, labelTemplateEle) {
         let bubbleG;
+        if (this.mapObject.polygonModule) {
+            this.groupElements.push(this.mapObject.polygonModule.polygonRender(this.mapObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor) : this.currentFactor)));
+        }
         if (this.currentLayer.bubbleSettings.length && this.mapObject.bubbleModule) {
             const length = this.currentLayer.bubbleSettings.length;
             let bubble;
@@ -6968,9 +6575,11 @@ class LayerPanel {
                     (!(childNode.id.indexOf('_bubble_Group') > -1)) &&
                     (!(childNode.id.indexOf('_dataLableIndex_Group') > -1)) &&
                     (!(childNode.id.indexOf('_line_Group') > -1))) {
-                    const transform = 'scale( ' + this.mapObject.scale + ' ) ' + 'translate( ' + this.mapObject.translatePoint.x
-                        + ' ' + this.mapObject.translatePoint.y + ' ) ';
-                    childNode.setAttribute('transform', transform);
+                    if (childNode.id.indexOf('_Polygons_Group') === -1) {
+                        const transform = 'scale( ' + this.mapObject.scale + ' ) ' + 'translate( ' + this.mapObject.translatePoint.x
+                            + ' ' + this.mapObject.translatePoint.y + ' ) ';
+                        childNode.setAttribute('transform', transform);
+                    }
                 }
             }
         }
@@ -7663,6 +7272,8 @@ let Maps = class Maps extends Component {
         /** @private */
         this.selectedNavigationElementId = [];
         /** @private */
+        this.selectedPolygonElementId = [];
+        /** @private */
         this.selectedLegendElementId = [];
         /** @private */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7680,6 +7291,8 @@ let Maps = class Maps extends Component {
         /** @private */
         this.initialTileTranslate = new Point(0, 0);
         /** @private */
+        this.isMarkerZoomCompleted = false;
+        /** @private */
         this.markerDragId = '';
         /** @private */
         this.initialCheck = true;
@@ -7870,8 +7483,8 @@ let Maps = class Maps extends Component {
         const fetchApiModule = new Fetch(localAjax.dataOptions, localAjax.type, localAjax.contentType);
         fetchApiModule.onSuccess = (args) => {
             if (!isNullOrUndefined(args.type) && args.type === 'application/octet-stream') {
-                let reader = new FileReader();
-                let map = this;
+                const reader = new FileReader();
+                const map = this;
                 reader.onload = function (data) {
                     args = JSON.parse(reader.result.toString());
                     map.processResponseJsonData('Fetch', args, layer, type);
@@ -8032,10 +7645,20 @@ let Maps = class Maps extends Component {
             this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.mapScaleValue, this.element.id + '_Zooming_');
         }
         if (!this.isZoomByPosition && !this.zoomNotApplied) {
-            this.trigger(loaded, { maps: this, isResized: this.isResize });
+            this.triggerZoomEvent();
         }
         this.isResize = false;
     }
+    triggerZoomEvent() {
+        let loadedArgs;
+        const minMaxLatitudeLongitude = this.getMinMaxLatitudeLongitude();
+        loadedArgs = {
+            maps: this, isResized: this.isResize, minLatitude: minMaxLatitudeLongitude.minLatitude,
+            maxLatitude: minMaxLatitudeLongitude.maxLatitude, minLongitude: minMaxLatitudeLongitude.minLongitude,
+            maxLongitude: minMaxLatitudeLongitude.maxLongitude, cancel: false, name: 'Loaded'
+        };
+        this.trigger('loaded', loadedArgs);
+    }
     /**
      * To apply color to the initial selected marker
      *
@@ -8207,6 +7830,20 @@ let Maps = class Maps extends Component {
             this.element.appendChild(secondaryElement);
         }
     }
+    /**
+     * @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;
+    }
     /**
      * @returns {void}
      * @private
@@ -9121,7 +8758,7 @@ let Maps = class Maps extends Component {
      */
     zoomByPosition(centerPosition, zoomFactor) {
         if (!this.isDestroyed) {
-            this.zoomNotApplied = false;
+            this.zoomNotApplied = this.isMarkerZoomCompleted = false;
             let isRefresh = this.zoomSettings.zoomFactor === zoomFactor;
             this.previousProjection = null;
             if (!this.isTileMap && this.zoomModule) {
@@ -9218,14 +8855,13 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     addMarker(layerIndex, markerCollection) {
-        if (!this.isDestroyed) {
+        if (!this.isDestroyed && !isNullOrUndefined(this.markerModule)) {
             const layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
             if (markerCollection.length > 0 && layerEle) {
                 for (const newMarker of markerCollection) {
                     this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
                 }
-                const markerModule = new Marker(this);
-                markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+                this.markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
                 this.arrangeTemplate();
             }
         }
@@ -9350,6 +8986,7 @@ let Maps = class Maps extends Component {
      */
     zoomToCoordinates(minLatitude, minLongitude, maxLatitude, maxLongitude) {
         if (!this.isDestroyed) {
+            this.isMarkerZoomCompleted = false;
             let centerLatitude;
             let centerLongtitude;
             let isTwoCoordinates = false;
@@ -9388,12 +9025,15 @@ let Maps = class Maps extends Component {
             this.maxLongOfGivenLocation = maxLongitude;
             this.zoomNotApplied = true;
             this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this, true);
+            const minMaxLatitudeLongitude = this.getMinMaxLatitudeLongitude();
             const zoomArgs = {
                 cancel: false, name: 'zoom', type: zoomIn, maps: this,
                 tileTranslatePoint: {}, translatePoint: {},
                 tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
                 scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
-                    { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation }
+                    { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation },
+                minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
             };
             this.trigger('zoom', zoomArgs);
             this.refresh();
@@ -9563,6 +9203,9 @@ let Maps = class Maps extends Component {
                             }
                             else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
                                 this.zoomSettings.zoomFactor = 1;
+                                this.previousProjection = null;
+                                this.scale = this.isMarkerZoomCompleted ? null : this.scale;
+                                this.isMarkerZoomCompleted = !newProp.zoomSettings.shouldZoomInitially;
                                 render = true;
                             }
                             else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
@@ -9661,6 +9304,12 @@ let Maps = class Maps extends Component {
                 args: [this]
             });
         }
+        if (this.isPolygonVisible()) {
+            modules.push({
+                member: 'Polygon',
+                args: [this]
+            });
+        }
         if (isVisible.tooltip) {
             modules.push({
                 member: 'MapsTooltip',
@@ -9742,6 +9391,23 @@ let Maps = class Maps extends Component {
         });
         return isVisible;
     }
+    /**
+     * To find navigation line visibility
+     *
+     * @returns {boolean} - Returns whether the navigation lines are visible or not.
+     */
+    isPolygonVisible() {
+        let isVisible = false;
+        Array.prototype.forEach.call(this.layers, (layer) => {
+            for (let i = 0; i < layer.polygonSettings.polygons.length; i++) {
+                if (layer.polygonSettings.polygons.length > 0) {
+                    isVisible = true;
+                    break;
+                }
+            }
+        });
+        return isVisible;
+    }
     /**
      * To find marker visibility
      */
@@ -9847,17 +9513,24 @@ let Maps = class Maps extends Component {
     findVisibleLayers(layers, isLayerVisible = false, isBubblevisible = false, istooltipVisible = false, isSelection = false, isHighlight = false) {
         let bubbles;
         let markers;
-        let navigationLine;
+        let polygonSetting;
         for (const layer of layers) {
             isLayerVisible = layer.visible || isLayerVisible;
             if (layer.visible) {
                 bubbles = layer.bubbleSettings;
                 markers = layer.markerSettings;
-                navigationLine = layer.navigationLineSettings;
+                polygonSetting = layer.polygonSettings;
+                let navigationLine = layer.navigationLineSettings;
                 for (const navigation of navigationLine) {
                     if (navigation.visible) {
-                        isSelection = navigation.highlightSettings.enable || isSelection;
-                        isHighlight = navigation.selectionSettings.enable || isHighlight;
+                        isSelection = (!isNullOrUndefined(navigation.highlightSettings) && navigation.highlightSettings.enable) || isSelection;
+                        isHighlight = (!isNullOrUndefined(navigation.selectionSettings) && navigation.selectionSettings.enable) || isHighlight;
+                    }
+                }
+                for (const polygon of polygonSetting.polygons) {
+                    if (polygon.points.length > 0) {
+                        isSelection = layer.polygonSettings.highlightSettings.enable || isSelection;
+                        isHighlight = layer.polygonSettings.selectionSettings.enable || isHighlight;
                     }
                 }
                 for (const marker$$1 of markers) {
@@ -9954,7 +9627,7 @@ let Maps = class Maps extends Component {
     pointToLatLong(pageX, pageY) {
         let latitude = 0;
         let longitude = 0;
-        if (!this.isDestroyed) {
+        if (!this.isDestroyed && !isNullOrUndefined(this.translatePoint)) {
             const padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
             pageY = pageY + padding;
             const mapSize = 256 * Math.pow(2, this.tileZoomLevel);
@@ -10139,280 +9812,828 @@ Maps = __decorate([
 ], Maps);
 
 /**
- * Bubble module class
+ * Bubble module class
+ */
+class Bubble {
+    constructor(maps) {
+        /**
+         * Bubble Id for current layer
+         * @private
+         */
+        this.id = '';
+        this.maps = maps;
+        this.bubbleCollection = [];
+    }
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * To render bubble
+     *
+     * @private
+     */
+    renderBubble(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    bubbleSettings, shapeData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, bubbleID) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const layerData = layer.layerData;
+        const colorValuePath = bubbleSettings.colorValuePath;
+        const equalValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
+            (getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : shapeData[colorValuePath]) :
+            shapeData[colorValuePath];
+        const colorValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
+            Number(getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : Number(shapeData[colorValuePath])) :
+            Number(shapeData[colorValuePath]);
+        const bubbleValue = (!isNullOrUndefined(bubbleSettings.valuePath)) ? ((bubbleSettings.valuePath.indexOf('.') > -1) ?
+            Number(getValueFromObject(shapeData, bubbleSettings.valuePath)) : Number(shapeData[bubbleSettings.valuePath])) :
+            Number(shapeData[bubbleSettings.valuePath]);
+        let opacity;
+        let bubbleColor;
+        if (isNaN(bubbleValue) && isNaN(colorValue) && isNullOrUndefined(equalValue)) {
+            return null;
+        }
+        let radius = getRatioOfBubble(bubbleSettings.minRadius, bubbleSettings.maxRadius, bubbleValue, range.min, range.max);
+        const colorMapping = new ColorMapping(this.maps);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const shapeColor = colorMapping.getColorByValue(bubbleSettings.colorMapping, colorValue, equalValue);
+        // eslint-disable-next-line prefer-const
+        bubbleColor = (Object.prototype.toString.call(shapeColor) === '[object Object]' &&
+            !isNullOrUndefined(shapeColor['fill'])) ? shapeColor['fill'] : color;
+        // eslint-disable-next-line prefer-const
+        opacity = (Object.prototype.toString.call(shapeColor) === '[object Object]' &&
+            !isNullOrUndefined(shapeColor['opacity'])) ? shapeColor['opacity'] : bubbleSettings.opacity;
+        const shapePoints = [[]];
+        this.maps.translateType = 'bubble';
+        let midIndex = 0;
+        let pointsLength = 0;
+        let currentLength = 0;
+        for (let i = 0, len = layerData.length; i < len; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let shape = layerData[i];
+            shape = shape['property'];
+            const shapePath = checkPropertyPath(shapeData[layer.shapeDataPath], layer.shapePropertyPath, shape);
+            const shapeDataLayerPathValue = !isNullOrUndefined(shapeData[layer.shapeDataPath]) &&
+                isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
+            const shapePathValue = !isNullOrUndefined(shape[shapePath]) && isNaN(shape[shapePath])
+                ? shape[shapePath].toLowerCase() : shape[shapePath];
+            if (shapeDataLayerPathValue === shapePathValue && (layerData[i].type !== 'LineString' && layerData[i].type !== 'MultiLineString' && layerData[i]['type'] !== 'Point' && layerData[i]['type'] !== 'MultiPoint')) {
+                if (!layerData[i]['_isMultiPolygon']) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    shapePoints.push(this.getPoints(layerData[i], []));
+                    currentLength = shapePoints[shapePoints.length - 1].length;
+                    if (pointsLength < currentLength) {
+                        pointsLength = currentLength;
+                        midIndex = shapePoints.length - 1;
+                    }
+                }
+                else {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const layer = layerData[i];
+                    for (let j = 0; j < layer.length; j++) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        shapePoints.push(this.getPoints(layer[j], []));
+                        currentLength = shapePoints[shapePoints.length - 1].length;
+                        if (pointsLength < currentLength) {
+                            pointsLength = currentLength;
+                            midIndex = shapePoints.length - 1;
+                        }
+                    }
+                }
+            }
+        }
+        const projectionType = this.maps.projectionType;
+        let centerY;
+        let eventArgs;
+        const bubbleBorder = {
+            color: bubbleSettings.border.color, opacity: bubbleSettings.border.opacity,
+            width: bubbleSettings.border.width
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const center = findMidPointOfPolygon(shapePoints[midIndex], projectionType, layer.geometryType);
+        if (bubbleSettings.visible) {
+            if (!isNullOrUndefined(center)) {
+                centerY = this.maps.projectionType === 'Mercator' ? center['y'] : (-center['y']);
+                eventArgs = {
+                    cancel: false, name: bubbleRendering, border: bubbleBorder,
+                    cx: center['x'], cy: centerY, data: shapeData, fill: bubbleColor,
+                    maps: this.maps, radius: radius
+                };
+            }
+            else {
+                const shapePointsLength = shapePoints.length - 1;
+                if (shapePoints[shapePointsLength]['x'] && shapePoints[shapePointsLength]['y']) {
+                    eventArgs = {
+                        cancel: false, name: bubbleRendering, border: bubbleBorder,
+                        cx: shapePoints[shapePointsLength]['x'], cy: shapePoints[shapePointsLength]['y'],
+                        data: shapeData, fill: bubbleColor, maps: this.maps,
+                        radius: radius
+                    };
+                }
+                else {
+                    return;
+                }
+            }
+            this.maps.trigger('bubbleRendering', eventArgs, (bubbleArgs) => {
+                if (eventArgs.cancel) {
+                    return;
+                }
+                let bubbleElement;
+                eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? opacity : eventArgs.border.opacity;
+                if (bubbleSettings.bubbleType === 'Circle') {
+                    const circle = new CircleOption(bubbleID, eventArgs.fill, eventArgs.border, opacity, 0, 0, eventArgs.radius, null);
+                    bubbleElement = drawCircle(this.maps, circle, group);
+                }
+                else {
+                    const y = this.maps.projectionType === 'Mercator' ? (eventArgs.cy - radius) : (eventArgs.cy + radius);
+                    const rectangle = new RectOption(bubbleID, eventArgs.fill, eventArgs.border, opacity, new Rect(0, 0, radius * 2, radius * 2), 2, 2);
+                    eventArgs.cx -= radius;
+                    eventArgs.cy = y;
+                    bubbleElement = drawRectangle(this.maps, rectangle, group);
+                }
+                maintainSelection(this.maps.selectedBubbleElementId, this.maps.bubbleSelectionClass, bubbleElement, 'BubbleselectionMapStyle');
+                this.bubbleCollection.push({
+                    LayerIndex: layerIndex,
+                    BubbleIndex: bubbleIndex,
+                    DataIndex: dataIndex,
+                    element: bubbleElement,
+                    center: { x: eventArgs.cx, y: eventArgs.cy }
+                });
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                let translate;
+                const animate$$1 = (layer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(this.maps.zoomModule);
+                if (this.maps.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(this.maps.zoomModule) && !this.maps.isTileMap) {
+                    translate = getZoomTranslate(this.maps, layer, animate$$1);
+                }
+                else {
+                    translate = getTranslate(this.maps, layer, animate$$1);
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const bubbleDataSource = bubbleSettings.dataSource;
+                const scale = translate['scale'];
+                const transPoint = translate['location'];
+                const position = new MapLocation((this.maps.isTileMap ? ((eventArgs.cx + this.maps.translatePoint.x) * this.maps.tileZoomLevel) : ((eventArgs.cx + transPoint.x) * scale)), (this.maps.isTileMap ? ((eventArgs.cy + this.maps.translatePoint.y) * this.maps.tileZoomLevel) : ((eventArgs.cy + transPoint.y) * scale)));
+                bubbleElement.setAttribute('transform', 'translate( ' + (position.x) + ' ' + (position.y) + ' )');
+                const bubble = (bubbleDataSource.length - 1) === dataIndex ? 'bubble' : null;
+                if (bubbleSettings.bubbleType === 'Square') {
+                    position.x += radius;
+                    position.y += radius * (this.maps.projectionType === 'Mercator' ? 1 : -1);
+                }
+                else {
+                    radius = 0;
+                }
+                if (bubbleSettings.animationDuration > 0 || animationMode === 'Enable') {
+                    elementAnimate(bubbleElement, bubbleSettings.animationDelay, bubbleSettings.animationDuration, position, this.maps, bubble, radius);
+                }
+            });
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getPoints(shape, points) {
+        if (isNullOrUndefined(shape.map)) {
+            points = shape['point'];
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            shape.map((current) => {
+                points.push(new Point(current['point']['x'], current['point']['y']));
+            });
+        }
+        return points;
+    }
+    /**
+     * To check and trigger bubble click event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
+     * @private
+     */
+    bubbleClick(e) {
+        const target = e.target.id;
+        if (target.indexOf('_LayerIndex_') === -1) {
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const data = this.getbubble(target);
+        if (isNullOrUndefined(data)) {
+            return;
+        }
+        const eventArgs = {
+            cancel: false, name: bubbleClick, data: data, maps: this.maps,
+            target: target, x: e.clientX, y: e.clientY
+        };
+        this.maps.trigger(bubbleClick, eventArgs);
+    }
+    /**
+     * To get bubble from target id
+     *
+     * @param {string} target - Specifies the target
+     * @returns {object} - Returns the object
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    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 bubbleIndex = parseInt(id[1].split('_BubbleIndex_')[1], 10);
+            const dataIndex = parseInt(id[1].split('_BubbleIndex_')[1].split('_dataIndex_')[1], 10);
+            if (!isNaN(bubbleIndex)) {
+                data = layer.bubbleSettings[bubbleIndex].dataSource[dataIndex];
+                return data;
+            }
+        }
+        return null;
+    }
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * To check and trigger bubble move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @retruns {void}
+     * @private
+     */
+    bubbleMove(e) {
+        const target = e.target.id;
+        if (target.indexOf('_LayerIndex_') === -1) {
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const data = this.getbubble(target);
+        if (isNullOrUndefined(data)) {
+            return;
+        }
+        const eventArgs = {
+            cancel: false, name: bubbleMouseMove, data: data, maps: this.maps,
+            target: target, x: e.clientX, y: e.clientY
+        };
+        this.maps.trigger(bubbleMouseMove, eventArgs);
+    }
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name.
+     */
+    getModuleName() {
+        return 'Bubble';
+    }
+    /**
+     * To destroy the bubble.
+     *
+     * @returns {void}
+     * @private
+     */
+    destroy() {
+        this.bubbleCollection = [];
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
+    }
+}
+
+/**
+ * Marker class
  */
-class Bubble {
+class Marker {
     constructor(maps) {
-        /**
-         * Bubble Id for current layer
-         * @private
-         */
-        this.id = '';
         this.maps = maps;
-        this.bubbleCollection = [];
+        this.trackElements = [];
+        this.sameMarkerData = [];
+    }
+    markerRender(maps, layerElement, layerIndex, factor, type) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let templateFn;
+        let markerCount = 0;
+        let nullCount = 0;
+        let markerTemplateCount = 0;
+        maps.translateType = 'marker';
+        const currentLayer = maps.layersCollection[layerIndex];
+        this.markerSVGObject = maps.renderer.createGroup({
+            id: maps.element.id + '_Markers_Group',
+            class: 'GroupElement'
+        });
+        this.markerSVGObject.style.pointerEvents = 'auto';
+        const markerTemplateEle = createElement('div', {
+            id: maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
+            className: maps.element.id + '_template'
+        });
+        markerTemplateEle.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
+            'top:' + maps.mapAreaRect.y + 'px;' +
+            'left:' + maps.mapAreaRect.x + 'px;' +
+            'height:' + maps.mapAreaRect.height + 'px;' +
+            'width:' + maps.mapAreaRect.width + 'px;';
+        currentLayer.markerSettings.map((markerSettings, markerIndex) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const markerData = markerSettings.dataSource;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            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,
+                    width: markerSettings.width, imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
+                    template: markerSettings.template, data: data, maps: maps, marker: markerSettings,
+                    border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
+                    shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
+                };
+                maps.trigger('markerRendering', eventArgs, (MarkerArgs) => {
+                    eventArgs = markerColorChoose(eventArgs, data);
+                    eventArgs = markerShapeChoose(eventArgs, data);
+                    const lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
+                        Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
+                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                    const lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
+                        Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
+                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                    const offset = markerSettings.offset;
+                    if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
+                        const markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                            + markerIndex + '_dataIndex_' + dataIndex;
+                        let location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+                        const animate$$1 = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object() :
+                            !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
+                                getZoomTranslate(maps, currentLayer, animate$$1) :
+                                getTranslate(maps, currentLayer, animate$$1);
+                        const scale = type === 'AddMarker' ? maps.scale : translate['scale'];
+                        const transPoint = type === 'AddMarker' ? maps.translatePoint : translate['location'];
+                        if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
+                            markerTemplateCount++;
+                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location, transPoint, scale, offset, maps);
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            maps.renderReactTemplates();
+                        }
+                        else if (!eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
+                            markerCount++;
+                            marker(eventArgs, markerSettings, markerData, dataIndex, location, transPoint, markerID, offset, scale, maps, this.markerSVGObject);
+                        }
+                    }
+                    nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
+                    markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
+                    markerCount += (eventArgs.cancel) ? 1 : 0;
+                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ?
+                        maps.markerNullCount + 1 : maps.markerNullCount;
+                    const markerDataLength = markerData.length - maps.markerNullCount;
+                    if (this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
+                        layerElement.appendChild(this.markerSVGObject);
+                        if (currentLayer.markerClusterSettings.allowClustering) {
+                            maps.svgObject.appendChild(this.markerSVGObject);
+                            maps.element.appendChild(maps.svgObject);
+                            if ((currentLayer.layerType === 'OSM' || (currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData)))
+                                && maps.zoomSettings.enable) {
+                                clusterTemplate(currentLayer, this.markerSVGObject, maps, layerIndex, this.markerSVGObject, layerElement, true, false);
+                                layerElement.appendChild(this.markerSVGObject);
+                            }
+                            else {
+                                clusterTemplate(currentLayer, this.markerSVGObject, maps, layerIndex, this.markerSVGObject, layerElement, true, false);
+                            }
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            maps.renderReactTemplates();
+                        }
+                    }
+                    if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
+                        getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
+                        if (maps.checkInitialRender) {
+                            if (currentLayer.markerClusterSettings.allowClustering) {
+                                clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, this.markerSVGObject, layerElement, false, false);
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                maps.renderReactTemplates();
+                            }
+                        }
+                    }
+                });
+            });
+        });
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
-     * To render bubble
+     * To find zoom level for individual layers like India, USA.
      *
-     * @private
+     * @param {number} mapWidth - Specifies the width of the maps
+     * @param {number} mapHeight - Specifies the height of the maps
+     * @param {number} maxZoomFact - Specifies the maximum zoom factor
+     * @returns {number} - Returns the scale factor
      */
-    renderBubble(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    bubbleSettings, shapeData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, bubbleID) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const layerData = layer.layerData;
-        const colorValuePath = bubbleSettings.colorValuePath;
-        const equalValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
-            (getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : shapeData[colorValuePath]) :
-            shapeData[colorValuePath];
-        const colorValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
-            Number(getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : Number(shapeData[colorValuePath])) :
-            Number(shapeData[colorValuePath]);
-        const bubbleValue = (!isNullOrUndefined(bubbleSettings.valuePath)) ? ((bubbleSettings.valuePath.indexOf('.') > -1) ?
-            Number(getValueFromObject(shapeData, bubbleSettings.valuePath)) : Number(shapeData[bubbleSettings.valuePath])) :
-            Number(shapeData[bubbleSettings.valuePath]);
-        let opacity;
-        let bubbleColor;
-        if (isNaN(bubbleValue) && isNaN(colorValue) && isNullOrUndefined(equalValue)) {
-            return null;
+    calculateIndividualLayerMarkerZoomLevel(mapWidth, mapHeight, maxZoomFact) {
+        let latZoom;
+        let lngZoom;
+        const height = Math.abs(this.maps.baseMapBounds.latitude.max - this.maps.baseMapBounds.latitude.min);
+        const width = Math.abs(this.maps.baseMapBounds.longitude.max - this.maps.baseMapBounds.longitude.min);
+        latZoom = Math.floor(Math.log(mapHeight / height));
+        latZoom = (latZoom > maxZoomFact) ? maxZoomFact : latZoom;
+        lngZoom = Math.floor(Math.log(mapWidth / width));
+        lngZoom = (lngZoom > maxZoomFact) ? maxZoomFact : lngZoom;
+        const result = Math.min(latZoom, lngZoom);
+        const scaleFactor = Math.min(result, maxZoomFact - 1);
+        if (!this.maps.isTileMap) {
+            compareZoomFactor(scaleFactor, this.maps);
         }
-        let radius = getRatioOfBubble(bubbleSettings.minRadius, bubbleSettings.maxRadius, bubbleValue, range.min, range.max);
-        const colorMapping = new ColorMapping(this.maps);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const shapeColor = colorMapping.getColorByValue(bubbleSettings.colorMapping, colorValue, equalValue);
-        // eslint-disable-next-line prefer-const
-        bubbleColor = (Object.prototype.toString.call(shapeColor) === '[object Object]' &&
-            !isNullOrUndefined(shapeColor['fill'])) ? shapeColor['fill'] : color;
-        // eslint-disable-next-line prefer-const
-        opacity = (Object.prototype.toString.call(shapeColor) === '[object Object]' &&
-            !isNullOrUndefined(shapeColor['opacity'])) ? shapeColor['opacity'] : bubbleSettings.opacity;
-        const shapePoints = [[]];
-        this.maps.translateType = 'bubble';
-        let midIndex = 0;
-        let pointsLength = 0;
-        let currentLength = 0;
-        for (let i = 0, len = layerData.length; i < len; i++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            let shape = layerData[i];
-            shape = shape['property'];
-            const shapePath = checkPropertyPath(shapeData[layer.shapeDataPath], layer.shapePropertyPath, shape);
-            const shapeDataLayerPathValue = !isNullOrUndefined(shapeData[layer.shapeDataPath]) &&
-                isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
-            const shapePathValue = !isNullOrUndefined(shape[shapePath]) && isNaN(shape[shapePath])
-                ? shape[shapePath].toLowerCase() : shape[shapePath];
-            if (shapeDataLayerPathValue === shapePathValue && (layerData[i].type !== 'LineString' && layerData[i].type !== 'MultiLineString' && layerData[i]['type'] !== 'Point' && layerData[i]['type'] !== 'MultiPoint')) {
-                if (!layerData[i]['_isMultiPolygon']) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    shapePoints.push(this.getPoints(layerData[i], []));
-                    currentLength = shapePoints[shapePoints.length - 1].length;
-                    if (pointsLength < currentLength) {
-                        pointsLength = currentLength;
-                        midIndex = shapePoints.length - 1;
+        return scaleFactor;
+    }
+    /**
+     * To calculate center position and factor value dynamically
+     *
+     * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
+     * @returns {void}
+     * @private
+     */
+    calculateZoomCenterPositionAndFactor(layersCollection) {
+        if (!isNullOrUndefined(this.maps)) {
+            if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
+                let minLong;
+                let maxLat;
+                let minLat;
+                let maxLong;
+                let zoomLevel;
+                let centerLat;
+                let centerLong;
+                const maxZoomFact = this.maps.zoomSettings.maxZoom;
+                const mapWidth = this.maps.mapAreaRect.width;
+                const mapHeight = this.maps.mapAreaRect.height;
+                this.maps.markerZoomedState = this.maps.markerZoomedState ? this.maps.markerZoomedState :
+                    isNullOrUndefined(this.maps.markerZoomFactor) ? !this.maps.markerZoomedState :
+                        this.maps.markerZoomFactor > 1 ? this.maps.markerZoomedState : !this.maps.markerZoomedState;
+                this.maps.defaultState = this.maps.markerZoomedState ? !this.maps.markerZoomedState : this.maps.defaultState;
+                Array.prototype.forEach.call(layersCollection, (currentLayer) => {
+                    const isMarker = currentLayer.markerSettings.length !== 0;
+                    if (isMarker) {
+                        Array.prototype.forEach.call(currentLayer.markerSettings, (markerSetting) => {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            const markerData = markerSetting.dataSource;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            Array.prototype.forEach.call(markerData, (data, dataIndex) => {
+                                const latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
+                                    !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                                const longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
+                                    !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                                if (!isNullOrUndefined(latitude) && !isNullOrUndefined(longitude)) {
+                                    minLong = isNullOrUndefined(minLong) && dataIndex === 0 ?
+                                        longitude : minLong;
+                                    maxLat = isNullOrUndefined(maxLat) && dataIndex === 0 ?
+                                        latitude : maxLat;
+                                    minLat = isNullOrUndefined(minLat) && dataIndex === 0 ?
+                                        latitude : minLat;
+                                    maxLong = isNullOrUndefined(maxLong) && dataIndex === 0 ?
+                                        longitude : maxLong;
+                                    if (minLong > longitude) {
+                                        minLong = longitude;
+                                    }
+                                    if (minLat > latitude) {
+                                        minLat = latitude;
+                                    }
+                                    if (maxLong < longitude) {
+                                        maxLong = longitude;
+                                    }
+                                    if (maxLat < latitude) {
+                                        maxLat = latitude;
+                                    }
+                                }
+                            });
+                        });
                     }
-                }
-                else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const layer = layerData[i];
-                    for (let j = 0; j < layer.length; j++) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        shapePoints.push(this.getPoints(layer[j], []));
-                        currentLength = shapePoints[shapePoints.length - 1].length;
-                        if (pointsLength < currentLength) {
-                            pointsLength = currentLength;
-                            midIndex = shapePoints.length - 1;
+                });
+                if (!isNullOrUndefined(minLat) && !isNullOrUndefined(minLong) &&
+                    !isNullOrUndefined(maxLong) && !isNullOrUndefined(maxLat)) {
+                    // To find the center position
+                    centerLat = (minLat + maxLat) / 2;
+                    centerLong = (minLong + maxLong) / 2;
+                    this.maps.markerCenterLatitude = centerLat;
+                    this.maps.markerCenterLongitude = centerLong;
+                    if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
+                        this.maps.markerZoomCenterPoint = {
+                            latitude: centerLat,
+                            longitude: centerLong
+                        };
+                    }
+                    let markerFactor;
+                    if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
+                        zoomLevel = calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, this.maps, false);
+                        if (this.maps.isTileMap) {
+                            markerFactor = isNullOrUndefined(this.maps.markerZoomFactor) ?
+                                zoomLevel : isNullOrUndefined(this.maps.mapScaleValue) ?
+                                zoomLevel : this.maps.mapScaleValue > 1 && this.maps.markerZoomFactor !== 1 ?
+                                this.maps.mapScaleValue : zoomLevel;
+                        }
+                        else {
+                            markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
+                                (Math.floor(this.maps.scale) !== 1 &&
+                                    this.maps.mapScaleValue !== zoomLevel)
+                                    &&
+                                        (isNullOrUndefined(this.maps.shouldZoomCurrentFactor))
+                                    ? this.maps.mapScaleValue : zoomLevel;
+                            if (((markerFactor === this.maps.mapScaleValue &&
+                                (this.maps.markerZoomFactor === 1 || this.maps.mapScaleValue === 1))
+                                && (!this.maps.enablePersistence))) {
+                                markerFactor = zoomLevel;
+                            }
                         }
                     }
+                    else {
+                        zoomLevel = this.calculateIndividualLayerMarkerZoomLevel(mapWidth, mapHeight, maxZoomFact);
+                        markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
+                            (this.maps.mapScaleValue !== zoomLevel)
+                                ? this.maps.mapScaleValue : zoomLevel;
+                    }
+                    this.maps.markerZoomFactor = markerFactor;
                 }
             }
-        }
-        const projectionType = this.maps.projectionType;
-        let centerY;
-        let eventArgs;
-        const bubbleBorder = {
-            color: bubbleSettings.border.color, opacity: bubbleSettings.border.opacity,
-            width: bubbleSettings.border.width
-        };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const center = findMidPointOfPolygon(shapePoints[midIndex], projectionType, layer.geometryType);
-        if (bubbleSettings.visible) {
-            if (!isNullOrUndefined(center)) {
-                centerY = this.maps.projectionType === 'Mercator' ? center['y'] : (-center['y']);
-                eventArgs = {
-                    cancel: false, name: bubbleRendering, border: bubbleBorder,
-                    cx: center['x'], cy: centerY, data: shapeData, fill: bubbleColor,
-                    maps: this.maps, radius: radius
-                };
-            }
             else {
-                const shapePointsLength = shapePoints.length - 1;
-                if (shapePoints[shapePointsLength]['x'] && shapePoints[shapePointsLength]['y']) {
-                    eventArgs = {
-                        cancel: false, name: bubbleRendering, border: bubbleBorder,
-                        cx: shapePoints[shapePointsLength]['x'], cy: shapePoints[shapePointsLength]['y'],
-                        data: shapeData, fill: bubbleColor, maps: this.maps,
-                        radius: radius
-                    };
+                this.maps.markerZoomedState = false;
+                if (this.maps.markerZoomFactor > 1) {
+                    this.maps.markerCenterLatitude = null;
+                    this.maps.markerCenterLongitude = null;
+                    this.maps.markerZoomFactor = 1;
+                    if (!this.maps.enablePersistence) {
+                        this.maps.mapScaleValue = 1;
+                    }
                 }
-                else {
-                    return;
+                if (this.maps.isTileMap && !this.maps.enablePersistence
+                    && this.maps.mapScaleValue <= 1) {
+                    this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? (this.maps.isZoomByPosition ? this.maps.tileZoomLevel : 1)
+                        : this.maps.mapScaleValue;
+                    if (this.maps.mapScaleValue === 1 && this.maps.markerZoomFactor === 1) {
+                        this.maps.tileTranslatePoint.x = 0;
+                        this.maps.tileTranslatePoint.y = 0;
+                    }
                 }
             }
-            this.maps.trigger('bubbleRendering', eventArgs, (bubbleArgs) => {
-                if (eventArgs.cancel) {
-                    return;
-                }
-                let bubbleElement;
-                eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? opacity : eventArgs.border.opacity;
-                if (bubbleSettings.bubbleType === 'Circle') {
-                    const circle = new CircleOption(bubbleID, eventArgs.fill, eventArgs.border, opacity, 0, 0, eventArgs.radius, null);
-                    bubbleElement = drawCircle(this.maps, circle, group);
-                }
-                else {
-                    const y = this.maps.projectionType === 'Mercator' ? (eventArgs.cy - radius) : (eventArgs.cy + radius);
-                    const rectangle = new RectOption(bubbleID, eventArgs.fill, eventArgs.border, opacity, new Rect(0, 0, radius * 2, radius * 2), 2, 2);
-                    eventArgs.cx -= radius;
-                    eventArgs.cy = y;
-                    bubbleElement = drawRectangle(this.maps, rectangle, group);
-                }
-                maintainSelection(this.maps.selectedBubbleElementId, this.maps.bubbleSelectionClass, bubbleElement, 'BubbleselectionMapStyle');
-                this.bubbleCollection.push({
-                    LayerIndex: layerIndex,
-                    BubbleIndex: bubbleIndex,
-                    DataIndex: dataIndex,
-                    element: bubbleElement,
-                    center: { x: eventArgs.cx, y: eventArgs.cy }
-                });
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                let translate;
-                const animate$$1 = (layer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(this.maps.zoomModule);
-                if (this.maps.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(this.maps.zoomModule) && !this.maps.isTileMap) {
-                    translate = getZoomTranslate(this.maps, layer, animate$$1);
-                }
-                else {
-                    translate = getTranslate(this.maps, layer, animate$$1);
-                }
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const bubbleDataSource = bubbleSettings.dataSource;
-                const scale = translate['scale'];
-                const transPoint = translate['location'];
-                const position = new MapLocation((this.maps.isTileMap ? ((eventArgs.cx + this.maps.translatePoint.x) * this.maps.tileZoomLevel) : ((eventArgs.cx + transPoint.x) * scale)), (this.maps.isTileMap ? ((eventArgs.cy + this.maps.translatePoint.y) * this.maps.tileZoomLevel) : ((eventArgs.cy + transPoint.y) * scale)));
-                bubbleElement.setAttribute('transform', 'translate( ' + (position.x) + ' ' + (position.y) + ' )');
-                const bubble = (bubbleDataSource.length - 1) === dataIndex ? 'bubble' : null;
-                if (bubbleSettings.bubbleType === 'Square') {
-                    position.x += radius;
-                    position.y += radius * (this.maps.projectionType === 'Mercator' ? 1 : -1);
-                }
-                else {
-                    radius = 0;
-                }
-                if (bubbleSettings.animationDuration > 0 || animationMode === 'Enable') {
-                    elementAnimate(bubbleElement, bubbleSettings.animationDelay, bubbleSettings.animationDuration, position, this.maps, bubble, radius);
-                }
-            });
         }
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    getPoints(shape, points) {
-        if (isNullOrUndefined(shape.map)) {
-            points = shape['point'];
+    /**
+     * To check and trigger marker click event
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
+     * @private
+     */
+    markerClick(e) {
+        let target = e.target.id;
+        if (target.indexOf(this.maps.element.id) === -1) {
+            const ancestor = e.target.closest('.' + this.maps.element.id + '_marker_template_element');
+            if (!isNullOrUndefined(ancestor) && ancestor.id.indexOf('_MarkerIndex_') > -1) {
+                target = ancestor.id;
+            }
+        }
+        if (target.indexOf('_LayerIndex_') === -1 || target.indexOf('_cluster_') > 0) {
+            return;
+        }
+        const options = this.getMarker(target);
+        if (isNullOrUndefined(options)) {
+            return;
         }
-        else {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shape.map((current) => {
-                points.push(new Point(current['point']['x'], current['point']['y']));
-            });
+        if (options.marker.enableDrag) {
+            document.getElementById(this.maps.element.id + "_svg").style.cursor = 'grabbing';
+        }
+        const eventArgs = {
+            cancel: false, name: markerClick, data: options.data, maps: this.maps,
+            marker: options.marker, target: target, x: e.clientX, y: e.clientY,
+            latitude: options.data['latitude'] || options.data['Latitude'],
+            longitude: options.data['longitude'] || options.data['Longitude'],
+            value: options.data['name']
+        };
+        this.maps.trigger(markerClick, eventArgs);
+        if (options.marker.enableDrag) {
+            let isCluster = false;
+            const layerIndex = parseInt(target.split('_LayerIndex_')[1].split('_')[0], 10);
+            const markerIndex = parseInt(target.split('_MarkerIndex_')[1].split('_')[0], 10);
+            const dataIndex = parseInt(target.split('_dataIndex_')[1].split('_')[0], 10);
+            const marker$$1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
+            if (this.sameMarkerData.length > 0) {
+                isCluster = (this.sameMarkerData[0].data.filter((el) => { return (el['index'] == dataIndex); })).length > 0 &&
+                    this.sameMarkerData[0].layerIndex === layerIndex && this.sameMarkerData[0].markerIndex === markerIndex;
+            }
+            if (!isCluster) {
+                const dragEventArgs = {
+                    name: markerDragStart, x: e.clientX, y: e.clientY,
+                    latitude: options.data['latitude'] || options.data['Latitude'],
+                    longitude: options.data['longitude'] || options.data['Longitude'],
+                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex
+                };
+                this.maps.trigger(markerDragStart, dragEventArgs);
+                this.maps.markerDragArgument = {
+                    targetId: target, x: e.clientX, y: e.clientY,
+                    latitude: options.data['latitude'] || options.data['Latitude'],
+                    longitude: options.data['longitude'] || options.data['Longitude'],
+                    shape: isNullOrUndefined(marker$$1.shapeValuePath) ? marker$$1.shape : marker$$1.dataSource[dataIndex][marker$$1.shapeValuePath],
+                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex
+                };
+            }
         }
-        return points;
     }
     /**
-     * To check and trigger bubble click event
-     *
+     * To check and trigger Cluster click event
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
      * @private
      */
-    bubbleClick(e) {
+    markerClusterClick(e) {
         const target = e.target.id;
-        if (target.indexOf('_LayerIndex_') === -1) {
+        if (target.indexOf('_LayerIndex_') === -1 || target.indexOf('_cluster_') === -1) {
             return;
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const data = this.getbubble(target);
-        if (isNullOrUndefined(data)) {
+        const options = this.getMarker(target);
+        if (isNullOrUndefined(options)) {
             return;
         }
+        if ((options.clusterCollection.length > 0 && this.maps.markerClusterExpand)) {
+            if (getElement(this.maps.element.id + '_mapsTooltip') &&
+                this.maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_') > -1) {
+                removeElement(this.maps.element.id + '_mapsTooltip');
+            }
+            if (this.sameMarkerData.length > 0 && !this.maps.markerClusterExpandCheck) {
+                this.maps.markerClusterExpandCheck = true;
+                mergeSeparateCluster(this.sameMarkerData, this.maps, this.markerSVGObject);
+            }
+            else {
+                this.sameMarkerData = options.clusterCollection;
+                this.maps.markerClusterExpandCheck = false;
+                clusterSeparate(this.sameMarkerData, this.maps, this.markerSVGObject, true);
+            }
+        }
         const eventArgs = {
-            cancel: false, name: bubbleClick, data: data, maps: this.maps,
-            target: target, x: e.clientX, y: e.clientY
+            cancel: false, name: markerClusterClick, data: options, maps: this.maps,
+            target: target, x: e.clientX, y: e.clientY,
+            latitude: options.data['latitude'] || options.data['Latitude'], longitude: options.data['longitude'] || options.data['Longitude'],
+            markerClusterCollection: options['markCollection']
         };
-        this.maps.trigger(bubbleClick, eventArgs);
+        this.maps.trigger(markerClusterClick, eventArgs);
     }
     /**
-     * To get bubble from target id
+     * To get marker from target id
      *
      * @param {string} target - Specifies the target
-     * @returns {object} - Returns the object
+     * @returns {string} - Returns the string
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    getbubble(target) {
+    getMarker(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 bubbleIndex = parseInt(id[1].split('_BubbleIndex_')[1], 10);
-            const dataIndex = parseInt(id[1].split('_BubbleIndex_')[1].split('_dataIndex_')[1], 10);
-            if (!isNaN(bubbleIndex)) {
-                data = layer.bubbleSettings[bubbleIndex].dataSource[dataIndex];
-                return data;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const markCollection = [];
+        const clusterCollection = [];
+        let marker$$1;
+        this.maps.markerClusterExpand = layer.markerClusterSettings.allowClusterExpand;
+        if (target.indexOf('_MarkerIndex_') > -1) {
+            const markerIndex = parseInt(id[1].split('_MarkerIndex_')[1].split('_')[0], 10);
+            const dataIndex = parseInt(id[1].split('_dataIndex_')[1].split('_')[0], 10);
+            marker$$1 = layer.markerSettings[markerIndex];
+            if (!isNaN(markerIndex)) {
+                data = marker$$1.dataSource[dataIndex];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                let collection = [];
+                if (!marker$$1.template && (target.indexOf('_cluster_') > -1) && (this.maps.layers[index].markerClusterSettings.allowClusterExpand)) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    Array.prototype.forEach.call(marker$$1.dataSource, (location, index) => {
+                        if (location['latitude'] === data['latitude'] && location['longitude'] === data['longitude']) {
+                            collection.push({ data: data, index: index });
+                        }
+                    });
+                }
+                if ((target.indexOf('_cluster_') > -1)) {
+                    let isClusterSame = false;
+                    const clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? layer.markerClusterSettings.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : layer.markerClusterSettings.shape === 'Balloon' ? target + '_Group' : target);
+                    const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
+                    collection = [];
+                    for (const i of indexes) {
+                        collection.push({ data: marker$$1.dataSource[i], index: i });
+                        markCollection.push(marker$$1.dataSource[i]);
+                    }
+                    isClusterSame = false;
+                    clusterCollection.push({
+                        data: collection, layerIndex: index, markerIndex: markerIndex, dataIndex: dataIndex,
+                        targetClusterIndex: +(target.split('_cluster_')[1].indexOf('_datalabel_') > -1 ? target.split('_cluster_')[1].split('_datalabel_')[0] : target.split('_cluster_')[1]),
+                        isClusterSame: isClusterSame
+                    });
+                }
+                return { marker: marker$$1, data: data, clusterCollection: clusterCollection, markCollection: markCollection };
             }
         }
         return null;
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
-     * To check and trigger bubble move event
+     * To check and trigger marker move event
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
-     * @retruns {void}
+     * @returns {void}
      * @private
      */
-    bubbleMove(e) {
-        const target = e.target.id;
-        if (target.indexOf('_LayerIndex_') === -1) {
+    markerMove(e) {
+        const targetId = e.target.id;
+        if (targetId.indexOf('_LayerIndex_') === -1 || targetId.indexOf('_cluster_') > 0) {
             return;
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const data = this.getbubble(target);
-        if (isNullOrUndefined(data)) {
+        const options = this.getMarker(targetId);
+        if (isNullOrUndefined(options)) {
             return;
         }
+        if (options.marker.enableDrag) {
+            document.getElementById(this.maps.element.id + "_svg").style.cursor = isNullOrUndefined(this.maps.markerDragArgument) ?
+                'pointer' : 'grabbing';
+        }
         const eventArgs = {
-            cancel: false, name: bubbleMouseMove, data: data, maps: this.maps,
-            target: target, x: e.clientX, y: e.clientY
+            cancel: false, name: markerMouseMove, data: options.data,
+            maps: this.maps, target: targetId, x: e.clientX, y: e.clientY
         };
-        this.maps.trigger(bubbleMouseMove, eventArgs);
+        this.maps.trigger(markerMouseMove, eventArgs);
+    }
+    /**
+     * To check and trigger cluster move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
+     * @private
+     */
+    markerClusterMouseMove(e) {
+        const targetId = e.target.id;
+        if (targetId.indexOf('_LayerIndex_') === -1 || targetId.indexOf('_cluster_') === -1) {
+            return;
+        }
+        const options = this.getMarker(targetId);
+        if (this.maps.markerClusterExpand) {
+            e.target.style.cursor = 'pointer';
+        }
+        if (isNullOrUndefined(options)) {
+            return;
+        }
+        const eventArgs = {
+            cancel: false, name: markerClusterMouseMove, data: options.data, maps: this.maps,
+            target: targetId, x: e.clientX, y: e.clientY
+        };
+        this.maps.trigger(markerClusterMouseMove, eventArgs);
     }
     /**
      * Get module name.
      *
-     * @returns {string} - Returns the module name.
+     * @returns {string} - Returns the module name
      */
     getModuleName() {
-        return 'Bubble';
+        return 'Marker';
     }
     /**
-     * To destroy the bubble.
+     * To destroy the layers.
      *
      * @returns {void}
      * @private
      */
     destroy() {
-        this.bubbleCollection = [];
-        //TODO: Calling the below code throws spec issue.
-        //this.maps = null;
+        this.maps = null;
+        this.trackElements = [];
+        this.markerSVGObject = null;
+        this.sameMarkerData = [];
+    }
+}
+
+/**
+ * When injected, this module will be used to render polygon shapes over the Maps.
+ */
+class Polygon {
+    constructor(maps) {
+        this.maps = maps;
+    }
+    /**
+     * To render polygon for maps
+     *
+     * @param {Maps} maps - Specifies the layer instance to which the polygon is to be rendered.
+     * @param {number} layerIndex -Specifies the index of current layer.
+     * @param {number} factor - Specifies the current zoom factor of the Maps.
+     * @returns {Element} - Returns the polygon element.
+     * @private
+     */
+    polygonRender(maps, layerIndex, factor) {
+        const currentLayer = maps.layersCollection[layerIndex];
+        const polygonsSVGObject = maps.renderer.createGroup({
+            id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group'
+        });
+        currentLayer.polygonSettings.polygons.map((polygonSetting, polygonIndex) => {
+            const polygonSVGObject = maps.renderer.createGroup({
+                id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group_' + polygonIndex
+            });
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const polygonData = polygonSetting.points;
+            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');
+            polygonSVGObject.appendChild(polygonEle);
+            polygonsSVGObject.appendChild(polygonSVGObject);
+        });
+        return polygonsSVGObject;
+    }
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name
+     */
+    getModuleName() {
+        return 'Polygon';
+    }
+    /**
+     * To destroy the layers.
+     *
+     * @returns {void}
+     * @private
+     */
+    destroy() {
+        this.maps = null;
     }
 }
 
@@ -10910,17 +11131,17 @@ class NavigationLine {
                 id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
             }));
             for (let i = 0; i < navigation.length; i++) {
-                latitude = navigation[i]['properties']['latitude'];
-                longitude = navigation[i]['properties']['longitude'];
-                visible = navigation[i]['properties']['visible'];
-                angle = navigation[i]['angle'];
-                width = navigation[i]['width'] || 1;
-                color = navigation[i]['color'];
-                dashArray = navigation[i]['properties']['dashArray'];
-                arrowSettings = navigation[i]['properties']['arrowSettings'];
-                showArrow = (isNullOrUndefined(arrowSettings)) ? false : arrowSettings['properties']['showArrow'];
-                if (longitude['length'] === latitude['length'] && visible) {
-                    for (let i = 0; i < longitude['length']; i++) {
+                latitude = navigation[i].latitude;
+                longitude = navigation[i].longitude;
+                visible = !isNullOrUndefined(navigation[i].visible) ? navigation[i].visible : false;
+                angle = !isNullOrUndefined(navigation[i].angle) ? navigation[i].angle : 0;
+                width = navigation[i].width || 1;
+                color = navigation[i].color;
+                dashArray = navigation[i].dashArray;
+                arrowSettings = navigation[i].arrowSettings;
+                showArrow = !isNullOrUndefined(arrowSettings) ? arrowSettings.showArrow : false;
+                if (longitude.length === latitude.length && visible) {
+                    for (let i = 0; i < longitude.length; i++) {
                         const location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i], latitude[i]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i], longitude[i], factor, layer, this.maps);
                         point.push(location);
                     }
@@ -10928,7 +11149,7 @@ class NavigationLine {
                 navigationGroup = (this.maps.renderer.createGroup({
                     id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
                 }));
-                for (let j = 0; j < point['length'] - 1; j++) {
+                for (let j = 0; j < point.length - 1; j++) {
                     angle = (-1 > angle) ? -1 : angle;
                     angle = (1 < angle) ? 1 : angle;
                     const arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
@@ -10946,11 +11167,11 @@ class NavigationLine {
                         }
                     }
                     if (showArrow) {
-                        arrowColor = arrowSettings['properties']['color'];
-                        arrowSize = arrowSettings['properties']['size'];
-                        offSetValue = (arrowSettings['properties']['offSet'] === undefined) ? 0 : arrowSettings['properties']['offSet'];
+                        arrowColor = arrowSettings.color;
+                        arrowSize = arrowSettings.size;
+                        offSetValue = !isNullOrUndefined(arrowSettings.offSet) ? arrowSettings.offSet : 0;
                         const divide = (Math.round(arrowSize / 2));
-                        arrowPosition = arrowSettings['properties']['position'];
+                        arrowPosition = arrowSettings.position;
                         startArrow = (arrowPosition === 'Start') ? 'url(#triangle' + i + ')' : null;
                         endArrow = (arrowPosition === 'End') ? 'url(#triangle' + i + ')' : null;
                         if (offSet !== 0 && angle === 0) {
@@ -12789,7 +13010,7 @@ class Legend {
         const legendToggleBorderWidth = this.maps.legendSettings.toggleLegendSettings.border.width;
         const legendToggleBorderOpacity = isNullOrUndefined(this.maps.legendSettings.toggleLegendSettings.border.opacity) ?
             this.maps.legendSettings.toggleLegendSettings.opacity : this.maps.legendSettings.toggleLegendSettings.border.opacity;
-        if (targetEle.parentNode['id'].indexOf(this.maps.element.id + '_Legend_Index_') > -1) {
+        if (!isNullOrUndefined(targetEle.parentNode) && targetEle.parentNode['id'].indexOf(this.maps.element.id + '_Legend_Index_') > -1) {
             let mapElement;
             const legendIndex = parseFloat(targetEle.parentElement.id.substr((this.maps.element.id + '_Legend_Index_').length));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13284,6 +13505,7 @@ class Highlight {
             targetEle.getAttribute('class') !== 'MarkerselectionMapStyle' &&
             targetEle.getAttribute('class') !== 'BubbleselectionMapStyle' &&
             targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle' &&
+            targetEle.getAttribute('class') !== 'PolygonselectionMapStyle' &&
             targetEle.getAttribute('class') !== 'LineselectionMapStyle') {
             layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13313,6 +13535,11 @@ class Highlight {
                 data = this.maps.layers[layerIndex].markerSettings[marker$$1].dataSource[dataIndex];
                 this.highlightSettings = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings;
             }
+            else if (targetEle.id.indexOf('_PolygonIndex_') > -1) {
+                dataIndex = parseInt(targetEle.id.split('_PolygonIndex_')[1].split('_')[0], 10);
+                data = this.maps.layers[layerIndex].polygonSettings.polygons[dataIndex].points;
+                this.highlightSettings = this.maps.layers[layerIndex].polygonSettings.highlightSettings;
+            }
             else {
                 const index = parseInt(targetEle.id.split('_NavigationIndex_')[1].split('_')[0], 10);
                 layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
@@ -13549,6 +13776,12 @@ class Selection {
                 this.selectionsettings = this.maps.layers[layerIndex].markerSettings[markerIndex].selectionSettings;
                 this.selectionType = 'Marker';
             }
+            else if (targetElement.id.indexOf('_PolygonIndex_') > -1) {
+                dataIndex = parseInt(targetElement.id.split('_PolygonIndex_')[1].split('_')[0], 10);
+                data = this.maps.layers[layerIndex].polygonSettings.polygons[dataIndex].points;
+                this.selectionsettings = this.maps.layers[layerIndex].polygonSettings.selectionSettings;
+                this.selectionType = 'Polygon';
+            }
             else if (targetElement.id.indexOf('NavigationIndex') > -1) {
                 const index = parseInt(targetElement.id.split('_NavigationIndex_')[1].split('_')[0], 10);
                 shapeData = null;
@@ -13723,6 +13956,10 @@ class Selection {
                         this.maps.navigationSelectionClass = getElement(this.selectionType + 'selectionMap');
                         this.maps.selectedNavigationElementId.push(targetElement.getAttribute('id'));
                     }
+                    if (targetElement.getAttribute('class') === 'PolygonselectionMapStyle') {
+                        this.maps.polygonSelectionClass = getElement(this.selectionType + 'selectionMap');
+                        this.maps.selectedPolygonElementId.push(targetElement.getAttribute('id'));
+                    }
                 }
             }
         });
@@ -13762,6 +13999,9 @@ class Selection {
         if (this.selectionType === 'navigationline') {
             this.maps.selectedBubbleElementId.splice(this.maps.selectedBubbleElementId.indexOf(targetElement.getAttribute('id')), 1);
         }
+        if (this.selectionType === 'Polygon') {
+            this.maps.selectedPolygonElementId.splice(this.maps.selectedPolygonElementId.indexOf(targetElement.getAttribute('id')), 1);
+        }
     }
     /**
      * Get module name.
@@ -13802,7 +14042,6 @@ class MapsTooltip {
         let target;
         let touchArg;
         let tooltipArgs;
-        let tooltipTemplateElement;
         if (e.type.indexOf('touch') !== -1) {
             this.isTouch = true;
             touchArg = e;
@@ -13953,7 +14192,12 @@ class MapsTooltip {
                     id: this.maps.element.id + '_mapsTooltip',
                     className: 'EJ2-maps-Tooltip'
                 });
-                tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
+                if (isNullOrUndefined(option.template) || option.template === '' || this.maps.tooltipDisplayMode === 'MouseMove') {
+                    tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
+                }
+                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) {
@@ -13997,8 +14241,8 @@ class MapsTooltip {
                             header: '',
                             data: option['data'],
                             template: option['template'],
-                            content: tooltipArgs.content.toString() !== currentData.toString() ? [SanitizeHtmlHelper.sanitize(tooltipArgs.content.toString())] :
-                                [SanitizeHtmlHelper.sanitize(currentData.toString())],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                [currentData.toString()],
                             shapes: [],
                             location: option['location'],
                             palette: [markerFill],
@@ -14015,8 +14259,8 @@ class MapsTooltip {
                             header: '',
                             data: tooltipArgs.options['data'],
                             template: tooltipArgs.options['template'],
-                            content: tooltipArgs.content.toString() !== currentData.toString() ? [SanitizeHtmlHelper.sanitize(tooltipArgs.content.toString())] :
-                                [SanitizeHtmlHelper.sanitize(currentData.toString())],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                [currentData.toString()],
                             shapes: [],
                             location: tooltipArgs.options['location'],
                             palette: [markerFill],
@@ -14035,13 +14279,6 @@ class MapsTooltip {
                     this.svgTooltip.appendTo(tooltipEle);
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this.maps.renderReactTemplates();
-                    tooltipTemplateElement = document.getElementById(this.maps.element.id + '_mapsTooltip');
-                    if (tooltipTemplateElement !== null && tooltipTemplateElement.innerHTML.indexOf('href') !== -1
-                        && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
-                        let templateStyle = tooltipTemplateElement.getAttribute('style');
-                        templateStyle = templateStyle.replace('pointer-events: none;', 'position-events:all;');
-                        tooltipTemplateElement.style.cssText = templateStyle;
-                    }
                 }
                 else {
                     this.clearTooltip(e.target);
@@ -14063,12 +14300,8 @@ class MapsTooltip {
             }
         }
         else {
-            tooltipTemplateElement = document.getElementById(this.maps.element.id + '_mapsTooltip');
-            if (tooltipTemplateElement !== null && tooltipTemplateElement.innerHTML.indexOf('href') !== -1
-                && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
-                this.maps.notify(click, this);
-            }
-            else {
+            let tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
+            if (isNullOrUndefined(tooltipElement)) {
                 this.clearTooltip(e.target);
             }
         }
@@ -14258,10 +14491,10 @@ class Zoom {
      */
     performZooming(position, newZoomFactor, type) {
         const map = this.maps;
-        map.previousProjection = map.projectionType;
+        map.previousProjection = newZoomFactor <= 1.5 ? undefined : map.projectionType;
         map.defaultState = false;
         map.initialCheck = false;
-        map.markerZoomedState = false;
+        map.markerZoomedState = map.isMarkerZoomCompleted = false;
         map.zoomPersistence = map.enablePersistence;
         const prevLevel = map.tileZoomLevel;
         const scale = map.previousScale = map.scale;
@@ -14309,6 +14542,7 @@ class Zoom {
                     map.translatePoint = new Point(translatePointX, translatePointY);
                 }
                 map.scale = newZoomFactor;
+                map.zoomTranslatePoint = map.translatePoint;
                 if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
                     map.translatePoint = map.previousPoint;
                     map.scale = map.mapScaleValue = map.previousScale;
@@ -14330,6 +14564,7 @@ class Zoom {
                     newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
                     map.scale = Math.pow(2, newZoomFactor - 1);
                 }
+                map.mapScaleValue = isNaN(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;
                 if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
@@ -14383,18 +14618,28 @@ class Zoom {
     triggerZoomEvent(prevTilePoint, prevLevel, type) {
         const map = this.maps;
         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: 'zoom', type: type, maps: map,
                 tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
-                tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale }
+                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: 'zoom', type: type, maps: map,
                 tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
-                tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale }
+                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
             };
         }
         map.trigger('zoom', zoomArgs);
@@ -14443,6 +14688,7 @@ 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;
@@ -14498,6 +14744,7 @@ class Zoom {
         const map = this.maps;
         const prevLevel = map.tileZoomLevel;
         const availSize = map.mapAreaRect;
+        map.isMarkerZoomCompleted = false;
         map.previousScale = map.scale;
         map.previousPoint = map.translatePoint;
         map.previousProjection = map.projectionType;
@@ -14613,7 +14860,9 @@ class Zoom {
     animateTransform(element, animate$$1, x, y, scale) {
         const duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
         if (!animate$$1 || duration === 0 || this.maps.isTileMap) {
-            element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
+            if (!(this.maps.isTileMap && element.id.indexOf('_Polygons_Group') > -1)) {
+                element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
+            }
             return;
         }
         if (!this.maps.isTileMap) {
@@ -14657,6 +14906,17 @@ class Zoom {
                                     layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index));
                                 }
                             }
+                            else if (maps.isTileMap && (currentEle.id.indexOf('_Polygons_Group') > -1)) {
+                                if (this.currentLayer.polygonSettings.polygons.length > 0) {
+                                    this.currentLayer.polygonSettings.polygons.map((polygonSettings, polygonIndex) => {
+                                        const markerData = polygonSettings.points;
+                                        const path = calculatePolygonPath(maps, maps.tileZoomLevel, this.currentLayer, markerData);
+                                        let element = document.getElementById(maps.element.id + '_LayerIndex_' + this.index + '_PolygonIndex_' + polygonIndex);
+                                        element.setAttribute('d', path);
+                                    });
+                                    document.getElementById(maps.element.id + '_LayerIndex_' + this.index + '_Polygons_Group').style.visibility = '';
+                                }
+                            }
                             else if (currentEle.id.indexOf('Legend') === -1) {
                                 changeBorderWidth(currentEle, this.index, scale, maps);
                                 maps.zoomTranslatePoint = maps.translatePoint;
@@ -14664,7 +14924,7 @@ class Zoom {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if (!this.isPanning && !isNullOrUndefined(currentEle.childNodes[0])) {
+                            if ((!this.isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate$$1);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -14881,7 +15141,19 @@ class Zoom {
                     const markerDataLength = markerDatas.length - this.maps.markerNullCount;
                     if (markerSVGObject.childElementCount === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
                         if (this.maps.isTileMap) {
-                            layerElement.insertBefore(markerSVGObject, layerElement.firstElementChild);
+                            const polygonsElement = document.getElementById(this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
+                            const polygonElement = document.getElementById(this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
+                            if (!isNullOrUndefined(polygonsElement)) {
+                                polygonsElement.insertAdjacentElement('afterend', markerSVGObject);
+                            }
+                            else {
+                                if (!isNullOrUndefined(polygonElement)) {
+                                    polygonElement.insertAdjacentElement('afterend', markerSVGObject);
+                                }
+                                else {
+                                    layerElement.insertBefore(markerSVGObject, layerElement.firstElementChild);
+                                }
+                            }
                         }
                         else {
                             layerElement.appendChild(markerSVGObject);
@@ -14921,6 +15193,8 @@ class Zoom {
                 i + '_Markers_Template_Group');
             const datalabelTemplateElemement = getElementByID(maps.element.id + '_LayerIndex_'
                 + i + '_Label_Template_Group');
+            const polygonElement = getElementByID(maps.element.id + '_LayerIndex_'
+                + i + '_Polygons_Group');
             if ((!isNullOrUndefined(markerTemplateElement)) && markerTemplateElement.childElementCount > 0) {
                 markerTemplateElement.style.visibility = 'visible';
                 for (let k = 0; k < markerTemplateElement.childElementCount; k++) {
@@ -14932,6 +15206,12 @@ class Zoom {
                     this.dataLabelTranslate(datalabelTemplateElemement.childNodes[k], factor, x, y, scale, 'Template');
                 }
             }
+            if (!isNullOrUndefined(polygonElement)) {
+                for (let k = 0; k < polygonElement.childElementCount; k++) {
+                    let width = maps.layersCollection[i].polygonSettings.polygons[k].borderWidth;
+                    polygonElement.childNodes[k].childNodes[0].setAttribute('stroke-width', (width / scale).toString());
+                }
+            }
         }
     }
     dataLabelTranslate(element, factor, x, y, scale, type, animate$$1 = false) {
@@ -14985,7 +15265,6 @@ class Zoom {
                     zoomtextSize = measureText(zoomtext, style);
                     const start = labelY - zoomtextSize['height'] / 4;
                     const end = labelY + zoomtextSize['height'] / 4;
-                    labelY = end;
                     const xpositionEnds = labelX + zoomtextSize['width'] / 2;
                     const xpositionStart = labelX - zoomtextSize['width'] / 2;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15157,12 +15436,16 @@ class Zoom {
             for (let i = 0; i < map.layersCollection.length; i++) {
                 const markerTemplateElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
                 const lineElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_line_Group');
+                const polygonElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Polygons_Group');
                 if (!isNullOrUndefined(markerTemplateElement)) {
                     markerTemplateElement.style.visibility = 'hidden';
                 }
                 if (!isNullOrUndefined(lineElement)) {
                     lineElement.style.visibility = 'hidden';
                 }
+                if (!isNullOrUndefined(polygonElement)) {
+                    polygonElement.style.visibility = 'hidden';
+                }
             }
         }
     }
@@ -15204,10 +15487,13 @@ class Zoom {
                 ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const location = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, mouseLocation['layerX'], mouseLocation['layerY']);
+            const minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
             panArgs = {
                 cancel: false, name: pan, maps: map,
                 tileTranslatePoint: {}, translatePoint: { previous: translatePoint, current: new Point(x, y) },
-                scale: map.scale, tileZoomLevel: map.tileZoomLevel, latitude: location['latitude'], longitude: location['longitude']
+                scale: map.scale, tileZoomLevel: map.tileZoomLevel, latitude: location['latitude'], longitude: location['longitude'],
+                minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
             };
             map.trigger(pan, panArgs);
             if (!panArgs.cancel) {
@@ -15241,11 +15527,14 @@ class Zoom {
             map.translatePoint.y = (map.tileTranslatePoint.y - yDifference) / map.scale;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const location = this.maps.getTileGeoLocation(mouseLocation['layerX'], mouseLocation['layerY']);
+            const minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
             panArgs = {
                 cancel: false, name: pan, maps: map,
                 tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint },
                 translatePoint: { previous: translatePoint, current: map.translatePoint }, scale: map.scale,
-                tileZoomLevel: map.tileZoomLevel, latitude: location['latitude'], longitude: location['longitude']
+                tileZoomLevel: map.tileZoomLevel, latitude: location['latitude'], longitude: location['longitude'],
+                minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
             };
             map.trigger(pan, panArgs);
             map.mapLayerPanel.generateTiles(map.tileZoomLevel, map.tileTranslatePoint, 'Pan');
@@ -15267,7 +15556,7 @@ class Zoom {
      */
     toolBarZooming(zoomFactor, type) {
         const map = this.maps;
-        map.initialCheck = false;
+        map.initialCheck = map.isMarkerZoomCompleted = false;
         map.defaultState = ((type === 'Reset' && zoomFactor === 1 && !(map.zoomSettings.resetToInitial && map.applyZoomReset))
             || (type === 'ZoomOut' && zoomFactor === 1));
         const prevLevel = map.tileZoomLevel;
@@ -15280,7 +15569,7 @@ class Zoom {
         const size = map.mapAreaRect;
         const translatePoint = map.previousPoint = map.translatePoint;
         const prevTilePoint = map.tileTranslatePoint;
-        map.previousProjection = (type !== 'Reset') ? map.projectionType : null;
+        map.previousProjection = type === 'Reset' ? undefined : map.projectionType;
         zoomFactor = (type === 'ZoomOut') ? (Math.round(zoomFactor) === 1 ? 1 : zoomFactor) : zoomFactor;
         zoomFactor = (type === 'Reset') ? minZoom : (Math.round(zoomFactor) === 0) ? 1 : zoomFactor;
         zoomFactor = (minZoom > zoomFactor && type === 'ZoomIn') ? minZoom + 1 : zoomFactor;
@@ -15538,7 +15827,10 @@ class Zoom {
                 isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) + 1 <= this.maps.zoomSettings.maxZoom;
                 break;
             case 'zoomout':
-                isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) - 1 >= this.maps.zoomSettings.minZoom;
+                const scaleValue = this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale;
+                isToolbarPerform = (this.maps.projectionType === 'Miller' || this.maps.projectionType === 'Winkel3' ||
+                    this.maps.projectionType === 'AitOff') ? Math.round(scaleValue) - 1 >= this.maps.zoomSettings.minZoom :
+                    (scaleValue) - 1 >= this.maps.zoomSettings.minZoom;
                 break;
             case 'reset':
                 isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) != this.maps.zoomSettings.minZoom;
@@ -15972,8 +16264,9 @@ class Zoom {
         const pageX = e.pageX;
         const pageY = e.pageY;
         const target = e.target;
+        let tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
         if (this.maps.zoomSettings.enable && this.maps.zoomSettings.doubleClickZoom
-            && !(e.target['id'].indexOf('_Zooming_') > -1)) {
+            && !(e.target['id'].indexOf('_Zooming_') > -1) && isNullOrUndefined(tooltipElement)) {
             const position = this.getMousePosition(pageX, pageY);
             const map = this.maps;
             const size = map.availableSize;
@@ -16146,8 +16439,9 @@ class Zoom {
      */
     click(e) {
         const map = this.maps;
+        let tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
         if ((map.markerModule && map.markerModule.sameMarkerData.length > 0) ||
-            (e.target['id'].indexOf('MarkerIndex') > -1 && e.target['id'].indexOf('cluster') === -1)) {
+            (e.target['id'].indexOf('MarkerIndex') > -1 && e.target['id'].indexOf('cluster') === -1) || !isNullOrUndefined(tooltipElement)) {
             return null;
         }
         if (this.isSingleClick && map.zoomSettings.zoomOnClick && !(e.target['id'].indexOf('_Zooming_') > -1) && !map.zoomSettings.doubleClickZoom
@@ -16716,5 +17010,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, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, 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, 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, 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 };
 //# sourceMappingURL=ej2-maps.es2015.js.map