@syncfusion/ej2-maps 23.2.4 → 24.1.41

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

@@ -213,6 +213,25 @@ function convertGeoToPoint(latitude, longitude, factor, layer, mapModel) {
     }
     return new Point(x, y);
 }
+/**
+ * @private
+ */
+function calculatePolygonPath(maps, factor, currentLayer, markerData) {
+    var path = '';
+    Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+        var lat = data.latitude;
+        var lng = data.longitude;
+        var 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
  *
@@ -355,6 +374,16 @@ var Point = /** @__PURE__ @class */ (function () {
     }
     return Point;
 }());
+/**
+ * Defines the latitude and longitude values that define a map location.
+ */
+var Coordinate = /** @__PURE__ @class */ (function () {
+    function Coordinate(latitude, longitude) {
+        this.latitude = latitude;
+        this.longitude = longitude;
+    }
+    return Coordinate;
+}());
 /**
  * Map internal class for min and max
  *
@@ -1112,12 +1141,24 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
         }
         var element = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
-        if (isNullOrUndefined(element)) {
+        var 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);
+            }
+        }
         var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster');
         if (!isNullOrUndefined(markerCluster)) {
             markerCluster.remove();
@@ -1649,7 +1690,7 @@ function drawBalloon(maps, options, size, location, type, element) {
     var height = size.height;
     var 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';
     var balloon = maps.renderer.drawPath(options);
@@ -2058,7 +2099,8 @@ function getTranslate(mapObject, layer, animate) {
             var topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
             var 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;
@@ -3027,6 +3069,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
+                var 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 {
             var currentStroke = void 0;
             var value = 0;
@@ -4574,6 +4623,54 @@ var HighlightSettings = /** @__PURE__ @class */ (function (_super) {
     ], HighlightSettings.prototype, "border", void 0);
     return HighlightSettings;
 }(ChildProperty));
+/**
+ * Defines the properties for a single polygon shape to render over the Maps, such as coordinates, fill, border, and opacity.
+ */
+var PolygonSetting = /** @__PURE__ @class */ (function (_super) {
+    __extends$2(PolygonSetting, _super);
+    function PolygonSetting() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __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);
+    return PolygonSetting;
+}(ChildProperty));
+/**
+ * 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.
+ */
+var PolygonSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$2(PolygonSettings, _super);
+    function PolygonSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __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);
+    return PolygonSettings;
+}(ChildProperty));
 /**
  * Gets or sets the options to customize the navigation lines in maps which is used to connect different locations.
  */
@@ -5185,6 +5282,9 @@ var LayerSettings = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -5240,501 +5340,7 @@ var MapsAreaSettings = /** @__PURE__ @class */ (function (_super) {
 }(ChildProperty));
 
 /**
- * Marker class
- */
-var Marker = /** @__PURE__ @class */ (function () {
-    function Marker(maps) {
-        this.maps = maps;
-        this.trackElements = [];
-        this.sameMarkerData = [];
-    }
-    Marker.prototype.markerRender = function (maps, layerElement, layerIndex, factor, type) {
-        var _this = this;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var templateFn;
-        var markerCount = 0;
-        var nullCount = 0;
-        var markerTemplateCount = 0;
-        maps.translateType = 'marker';
-        var currentLayer = maps.layersCollection[layerIndex];
-        this.markerSVGObject = maps.renderer.createGroup({
-            id: maps.element.id + '_Markers_Group',
-            class: 'GroupElement'
-        });
-        this.markerSVGObject.style.pointerEvents = 'auto';
-        var 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(function (markerSettings, markerIndex) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var markerData = markerSettings.dataSource;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-                maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
-                var eventArgs = {
-                    cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
-                    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, function (MarkerArgs) {
-                    eventArgs = markerColorChoose(eventArgs, data);
-                    eventArgs = markerShapeChoose(eventArgs, data);
-                    var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                    var lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                    var offset = markerSettings.offset;
-                    if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
-                        var markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
-                            + markerIndex + '_dataIndex_' + dataIndex;
-                        var location_1 = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
-                        var animate$$1 = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = 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);
-                        var scale = type === 'AddMarker' ? maps.scale : translate['scale'];
-                        var transPoint = type === 'AddMarker' ? maps.translatePoint : translate['location'];
-                        if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
-                            markerTemplateCount++;
-                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, maps);
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            maps.renderReactTemplates();
-                        }
-                        else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
-                            markerCount++;
-                            marker(eventArgs, markerSettings, markerData, dataIndex, location_1, 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;
-                    var 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
-     */
-    Marker.prototype.calculateIndividualLayerMarkerZoomLevel = function (mapWidth, mapHeight, maxZoomFact) {
-        var latZoom;
-        var lngZoom;
-        var height = Math.abs(this.maps.baseMapBounds.latitude.max - this.maps.baseMapBounds.latitude.min);
-        var 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;
-        var result = Math.min(latZoom, lngZoom);
-        var 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
-     */
-    Marker.prototype.calculateZoomCenterPositionAndFactor = function (layersCollection) {
-        if (!isNullOrUndefined(this.maps)) {
-            if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
-                var minLong_1;
-                var maxLat_1;
-                var minLat_1;
-                var maxLong_1;
-                var zoomLevel = void 0;
-                var centerLat = void 0;
-                var centerLong = void 0;
-                var maxZoomFact = this.maps.zoomSettings.maxZoom;
-                var mapWidth = this.maps.mapAreaRect.width;
-                var 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, function (currentLayer) {
-                    var isMarker = currentLayer.markerSettings.length !== 0;
-                    if (isMarker) {
-                        Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSetting) {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            var markerData = markerSetting.dataSource;
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-                                var latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
-                                    !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                                var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
-                                    !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                                minLong_1 = isNullOrUndefined(minLong_1) && dataIndex === 0 ?
-                                    longitude : minLong_1;
-                                maxLat_1 = isNullOrUndefined(maxLat_1) && dataIndex === 0 ?
-                                    latitude : maxLat_1;
-                                minLat_1 = isNullOrUndefined(minLat_1) && dataIndex === 0 ?
-                                    latitude : minLat_1;
-                                maxLong_1 = isNullOrUndefined(maxLong_1) && dataIndex === 0 ?
-                                    longitude : maxLong_1;
-                                if (minLong_1 > longitude) {
-                                    minLong_1 = longitude;
-                                }
-                                if (minLat_1 > latitude) {
-                                    minLat_1 = latitude;
-                                }
-                                if (maxLong_1 < longitude) {
-                                    maxLong_1 = longitude;
-                                }
-                                if (maxLat_1 < latitude) {
-                                    maxLat_1 = latitude;
-                                }
-                            });
-                        });
-                    }
-                });
-                if (!isNullOrUndefined(minLat_1) && !isNullOrUndefined(minLong_1) &&
-                    !isNullOrUndefined(maxLong_1) && !isNullOrUndefined(maxLat_1)) {
-                    // To find the center position
-                    centerLat = (minLat_1 + maxLat_1) / 2;
-                    centerLong = (minLong_1 + maxLong_1) / 2;
-                    this.maps.markerCenterLatitude = centerLat;
-                    this.maps.markerCenterLongitude = centerLong;
-                    if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
-                        this.maps.markerZoomCenterPoint = {
-                            latitude: centerLat,
-                            longitude: centerLong
-                        };
-                    }
-                    var markerFactor = void 0;
-                    if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
-                        zoomLevel = calculateZoomLevel(minLat_1, maxLat_1, minLong_1, maxLong_1, 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
-     */
-    Marker.prototype.markerClick = function (e) {
-        var target = e.target.id;
-        if (target.indexOf(this.maps.element.id) === -1) {
-            var 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;
-        }
-        var options = this.getMarker(target);
-        if (isNullOrUndefined(options)) {
-            return;
-        }
-        if (options.marker.enableDrag) {
-            document.getElementById(this.maps.element.id + "_svg").style.cursor = 'grabbing';
-        }
-        var 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) {
-            var isCluster = false;
-            var layerIndex = parseInt(target.split('_LayerIndex_')[1].split('_')[0], 10);
-            var markerIndex = parseInt(target.split('_MarkerIndex_')[1].split('_')[0], 10);
-            var dataIndex_1 = parseInt(target.split('_dataIndex_')[1].split('_')[0], 10);
-            var marker_1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
-            if (this.sameMarkerData.length > 0) {
-                isCluster = (this.sameMarkerData[0].data.filter(function (el) { return (el['index'] == dataIndex_1); })).length > 0 &&
-                    this.sameMarkerData[0].layerIndex === layerIndex && this.sameMarkerData[0].markerIndex === markerIndex;
-            }
-            if (!isCluster) {
-                var 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_1
-                };
-                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_1][marker_1.shapeValuePath],
-                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex_1
-                };
-            }
-        }
-    };
-    /**
-     * To check and trigger Cluster click event
-     * @param {PointerEvent} e - Specifies the pointer event argument.
-     * @returns {void}
-     * @private
-     */
-    Marker.prototype.markerClusterClick = function (e) {
-        var target = e.target.id;
-        if (target.indexOf('_LayerIndex_') === -1 || target.indexOf('_cluster_') === -1) {
-            return;
-        }
-        var 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);
-            }
-        }
-        var 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
-    Marker.prototype.getMarker = function (target) {
-        var id = target.split('_LayerIndex_');
-        var index = parseInt(id[1].split('_')[0], 10);
-        var layer = this.maps.layers[index];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var data;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var markCollection = [];
-        var clusterCollection = [];
-        var marker$$1;
-        this.maps.markerClusterExpand = layer.markerClusterSettings.allowClusterExpand;
-        if (target.indexOf('_MarkerIndex_') > -1) {
-            var markerIndex = parseInt(id[1].split('_MarkerIndex_')[1].split('_')[0], 10);
-            var 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
-                var collection_1 = [];
-                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, function (location, index) {
-                        if (location['latitude'] === data['latitude'] && location['longitude'] === data['longitude']) {
-                            collection_1.push({ data: data, index: index });
-                        }
-                    });
-                }
-                if ((target.indexOf('_cluster_') > -1)) {
-                    var isClusterSame = false;
-                    var 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);
-                    var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
-                    collection_1 = [];
-                    for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
-                        var i = indexes_1[_i];
-                        collection_1.push({ data: marker$$1.dataSource[i], index: i });
-                        markCollection.push(marker$$1.dataSource[i]);
-                    }
-                    isClusterSame = false;
-                    clusterCollection.push({
-                        data: collection_1, 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
-     */
-    Marker.prototype.markerMove = function (e) {
-        var targetId = e.target.id;
-        if (targetId.indexOf('_LayerIndex_') === -1 || targetId.indexOf('_cluster_') > 0) {
-            return;
-        }
-        var 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';
-        }
-        var 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
-     */
-    Marker.prototype.markerClusterMouseMove = function (e) {
-        var targetId = e.target.id;
-        if (targetId.indexOf('_LayerIndex_') === -1 || targetId.indexOf('_cluster_') === -1) {
-            return;
-        }
-        var options = this.getMarker(targetId);
-        if (this.maps.markerClusterExpand) {
-            e.target.style.cursor = 'pointer';
-        }
-        if (isNullOrUndefined(options)) {
-            return;
-        }
-        var 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
-     */
-    Marker.prototype.getModuleName = function () {
-        return 'Marker';
-    };
-    /**
-     * To destroy the layers.
-     *
-     * @returns {void}
-     * @private
-     */
-    Marker.prototype.destroy = function () {
-        this.maps = null;
-        this.trackElements = [];
-        this.markerSVGObject = null;
-        this.sameMarkerData = [];
-    };
-    return Marker;
-}());
-
-/**
- * Maps constants doc
+ * Maps constants doc
  */
 /**
  * Specifies the maps load event name.
@@ -6400,6 +6006,12 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             && panel.mapObject.previousZoomFactor !== panel.mapObject.zoomSettings.zoomFactor) {
             panel.mapObject.previousZoomFactor = panel.mapObject.zoomSettings.zoomFactor;
         }
+        if (panel.mapObject.polygonModule) {
+            var polygonElement = panel.mapObject.polygonModule.polygonRender(this.mapObject, layerIndex, panel.mapObject.tileZoomLevel);
+            if (!isNullOrUndefined(polygonElement)) {
+                panel.layerObject.appendChild(polygonElement);
+            }
+        }
         if (panel.mapObject.navigationLineModule) {
             var navigationLineElement = panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex);
             if (!isNullOrUndefined(navigationLineElement)) {
@@ -6865,6 +6477,9 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
     layerIndex, colors, renderData, labelTemplateEle) {
         var _this = this;
         var 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) {
             var length_1 = this.currentLayer.bubbleSettings.length;
             var bubble_1;
@@ -7220,9 +6835,11 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                     (!(childNode.id.indexOf('_bubble_Group') > -1)) &&
                     (!(childNode.id.indexOf('_dataLableIndex_Group') > -1)) &&
                     (!(childNode.id.indexOf('_line_Group') > -1))) {
-                    var 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) {
+                        var transform = 'scale( ' + this.mapObject.scale + ' ) ' + 'translate( ' + this.mapObject.translatePoint.x
+                            + ' ' + this.mapObject.translatePoint.y + ' ) ';
+                        childNode.setAttribute('transform', transform);
+                    }
                 }
             }
         }
@@ -7939,6 +7556,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         /** @private */
         _this.selectedNavigationElementId = [];
         /** @private */
+        _this.selectedPolygonElementId = [];
+        /** @private */
         _this.selectedLegendElementId = [];
         /** @private */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7956,6 +7575,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         /** @private */
         _this.initialTileTranslate = new Point(0, 0);
         /** @private */
+        _this.isMarkerZoomCompleted = false;
+        /** @private */
         _this.markerDragId = '';
         /** @private */
         _this.initialCheck = true;
@@ -8322,10 +7943,20 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             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;
     };
+    Maps.prototype.triggerZoomEvent = function () {
+        var loadedArgs;
+        var 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
      *
@@ -8497,6 +8128,20 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             this.element.appendChild(secondaryElement);
         }
     };
+    /**
+     * @returns {void}
+     */
+    Maps.prototype.getMinMaxLatitudeLongitude = function () {
+        var element = document.getElementById(this.element.id).getBoundingClientRect();
+        var minPosition = this.isTileMap ? this.pointToLatLong((this.mapAreaRect.x - this.margin.left), -this.mapAreaRect.y) : this.getGeoLocation(0, (this.mapAreaRect.x + element.left), this.mapAreaRect.y);
+        var maxPosition = this.isTileMap ? this.pointToLatLong(this.mapAreaRect.width, (this.mapAreaRect.height - this.mapAreaRect.y)) :
+            this.getGeoLocation(0, (this.mapAreaRect.x + element.left + this.mapAreaRect.width), (this.mapAreaRect.y + this.mapAreaRect.height));
+        var MinMaxLatitudeLongitude = {
+            minLatitude: minPosition.latitude, maxLatitude: maxPosition.latitude, minLongitude: minPosition.longitude,
+            maxLongitude: maxPosition.longitude
+        };
+        return MinMaxLatitudeLongitude;
+    };
     /**
      * @returns {void}
      * @private
@@ -9414,7 +9059,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.zoomByPosition = function (centerPosition, zoomFactor) {
         if (!this.isDestroyed) {
-            this.zoomNotApplied = false;
+            this.zoomNotApplied = this.isMarkerZoomCompleted = false;
             var isRefresh = this.zoomSettings.zoomFactor === zoomFactor;
             this.previousProjection = null;
             if (!this.isTileMap && this.zoomModule) {
@@ -9511,15 +9156,14 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.addMarker = function (layerIndex, markerCollection) {
-        if (!this.isDestroyed) {
+        if (!this.isDestroyed && !isNullOrUndefined(this.markerModule)) {
             var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
             if (markerCollection.length > 0 && layerEle) {
                 for (var _i = 0, markerCollection_1 = markerCollection; _i < markerCollection_1.length; _i++) {
                     var newMarker = markerCollection_1[_i];
                     this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
                 }
-                var markerModule = new Marker(this);
-                markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
+                this.markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
                 this.arrangeTemplate();
             }
         }
@@ -9645,6 +9289,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     Maps.prototype.zoomToCoordinates = function (minLatitude, minLongitude, maxLatitude, maxLongitude) {
         var _a, _b;
         if (!this.isDestroyed) {
+            this.isMarkerZoomCompleted = false;
             var centerLatitude = void 0;
             var centerLongtitude = void 0;
             var isTwoCoordinates = false;
@@ -9683,12 +9328,15 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
             this.maxLongOfGivenLocation = maxLongitude;
             this.zoomNotApplied = true;
             this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this, true);
+            var minMaxLatitudeLongitude = this.getMinMaxLatitudeLongitude();
             var zoomArgs = {
                 cancel: false, name: 'zoom', type: zoomIn, maps: this,
                 tileTranslatePoint: {}, translatePoint: {},
                 tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
                 scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
-                    { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation }
+                    { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation },
+                minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
             };
             this.trigger('zoom', zoomArgs);
             this.refresh();
@@ -9860,6 +9508,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                             }
                             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) {
@@ -9958,6 +9609,12 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 args: [this]
             });
         }
+        if (this.isPolygonVisible()) {
+            modules.push({
+                member: 'Polygon',
+                args: [this]
+            });
+        }
         if (isVisible.tooltip) {
             modules.push({
                 member: 'MapsTooltip',
@@ -10039,6 +9696,23 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         });
         return isVisible;
     };
+    /**
+     * To find navigation line visibility
+     *
+     * @returns {boolean} - Returns whether the navigation lines are visible or not.
+     */
+    Maps.prototype.isPolygonVisible = function () {
+        var isVisible = false;
+        Array.prototype.forEach.call(this.layers, function (layer) {
+            for (var i = 0; i < layer.polygonSettings.polygons.length; i++) {
+                if (layer.polygonSettings.polygons.length > 0) {
+                    isVisible = true;
+                    break;
+                }
+            }
+        });
+        return isVisible;
+    };
     /**
      * To find marker visibility
      */
@@ -10152,23 +9826,31 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         if (isHighlight === void 0) { isHighlight = false; }
         var bubbles;
         var markers;
-        var navigationLine;
+        var polygonSetting;
         for (var _i = 0, layers_1 = layers; _i < layers_1.length; _i++) {
             var layer = layers_1[_i];
             isLayerVisible = layer.visible || isLayerVisible;
             if (layer.visible) {
                 bubbles = layer.bubbleSettings;
                 markers = layer.markerSettings;
-                navigationLine = layer.navigationLineSettings;
+                polygonSetting = layer.polygonSettings;
+                var navigationLine = layer.navigationLineSettings;
                 for (var _a = 0, navigationLine_1 = navigationLine; _a < navigationLine_1.length; _a++) {
                     var navigation = navigationLine_1[_a];
                     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 (var _b = 0, _c = polygonSetting.polygons; _b < _c.length; _b++) {
+                    var polygon = _c[_b];
+                    if (polygon.points.length > 0) {
+                        isSelection = layer.polygonSettings.highlightSettings.enable || isSelection;
+                        isHighlight = layer.polygonSettings.selectionSettings.enable || isHighlight;
                     }
                 }
-                for (var _b = 0, markers_1 = markers; _b < markers_1.length; _b++) {
-                    var marker$$1 = markers_1[_b];
+                for (var _d = 0, markers_1 = markers; _d < markers_1.length; _d++) {
+                    var marker$$1 = markers_1[_d];
                     if (marker$$1.visible) {
                         istooltipVisible = marker$$1.tooltipSettings.visible || istooltipVisible;
                         isSelection = marker$$1.selectionSettings.enable || isSelection;
@@ -10178,8 +9860,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                         break;
                     }
                 }
-                for (var _c = 0, bubbles_1 = bubbles; _c < bubbles_1.length; _c++) {
-                    var bubble = bubbles_1[_c];
+                for (var _e = 0, bubbles_1 = bubbles; _e < bubbles_1.length; _e++) {
+                    var bubble = bubbles_1[_e];
                     if (bubble.visible) {
                         istooltipVisible = bubble.tooltipSettings.visible || istooltipVisible;
                         isSelection = bubble.selectionSettings.enable || isSelection;
@@ -10263,7 +9945,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     Maps.prototype.pointToLatLong = function (pageX, pageY) {
         var latitude = 0;
         var longitude = 0;
-        if (!this.isDestroyed) {
+        if (!this.isDestroyed && !isNullOrUndefined(this.translatePoint)) {
             var padding = this.layers[this.layers.length - 1].layerType === 'GoogleStaticMap' ? 0 : 10;
             pageY = pageY + padding;
             var mapSize = 256 * Math.pow(2, this.tileZoomLevel);
@@ -10449,283 +10131,836 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
 }(Component));
 
 /**
- * Bubble module class
+ * Bubble module class
+ */
+var Bubble = /** @__PURE__ @class */ (function () {
+    function Bubble(maps) {
+        /**
+         * Bubble Id for current layer
+         * @private
+         */
+        this.id = '';
+        this.maps = maps;
+        this.bubbleCollection = [];
+    }
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * To render bubble
+     *
+     * @private
+     */
+    Bubble.prototype.renderBubble = function (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    bubbleSettings, shapeData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, bubbleID) {
+        var _this = this;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var layerData = layer.layerData;
+        var colorValuePath = bubbleSettings.colorValuePath;
+        var equalValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
+            (getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : shapeData[colorValuePath]) :
+            shapeData[colorValuePath];
+        var colorValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
+            Number(getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : Number(shapeData[colorValuePath])) :
+            Number(shapeData[colorValuePath]);
+        var bubbleValue = (!isNullOrUndefined(bubbleSettings.valuePath)) ? ((bubbleSettings.valuePath.indexOf('.') > -1) ?
+            Number(getValueFromObject(shapeData, bubbleSettings.valuePath)) : Number(shapeData[bubbleSettings.valuePath])) :
+            Number(shapeData[bubbleSettings.valuePath]);
+        var opacity;
+        var bubbleColor;
+        if (isNaN(bubbleValue) && isNaN(colorValue) && isNullOrUndefined(equalValue)) {
+            return null;
+        }
+        var radius = getRatioOfBubble(bubbleSettings.minRadius, bubbleSettings.maxRadius, bubbleValue, range.min, range.max);
+        var colorMapping = new ColorMapping(this.maps);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var 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;
+        var shapePoints = [[]];
+        this.maps.translateType = 'bubble';
+        var midIndex = 0;
+        var pointsLength = 0;
+        var currentLength = 0;
+        for (var i = 0, len = layerData.length; i < len; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var shape = layerData[i];
+            shape = shape['property'];
+            var shapePath = checkPropertyPath(shapeData[layer.shapeDataPath], layer.shapePropertyPath, shape);
+            var shapeDataLayerPathValue = !isNullOrUndefined(shapeData[layer.shapeDataPath]) &&
+                isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
+            var 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
+                    var layer_1 = layerData[i];
+                    for (var j = 0; j < layer_1.length; j++) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        shapePoints.push(this.getPoints(layer_1[j], []));
+                        currentLength = shapePoints[shapePoints.length - 1].length;
+                        if (pointsLength < currentLength) {
+                            pointsLength = currentLength;
+                            midIndex = shapePoints.length - 1;
+                        }
+                    }
+                }
+            }
+        }
+        var projectionType = this.maps.projectionType;
+        var centerY;
+        var eventArgs;
+        var bubbleBorder = {
+            color: bubbleSettings.border.color, opacity: bubbleSettings.border.opacity,
+            width: bubbleSettings.border.width
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var 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 {
+                var 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, function (bubbleArgs) {
+                if (eventArgs.cancel) {
+                    return;
+                }
+                var bubbleElement;
+                eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? opacity : eventArgs.border.opacity;
+                if (bubbleSettings.bubbleType === 'Circle') {
+                    var circle = new CircleOption(bubbleID, eventArgs.fill, eventArgs.border, opacity, 0, 0, eventArgs.radius, null);
+                    bubbleElement = drawCircle(_this.maps, circle, group);
+                }
+                else {
+                    var y = _this.maps.projectionType === 'Mercator' ? (eventArgs.cy - radius) : (eventArgs.cy + radius);
+                    var 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
+                var translate;
+                var 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
+                var bubbleDataSource = bubbleSettings.dataSource;
+                var scale = translate['scale'];
+                var transPoint = translate['location'];
+                var 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) + ' )');
+                var 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
+    Bubble.prototype.getPoints = function (shape, points) {
+        if (isNullOrUndefined(shape.map)) {
+            points = shape['point'];
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            shape.map(function (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
+     */
+    Bubble.prototype.bubbleClick = function (e) {
+        var target = e.target.id;
+        if (target.indexOf('_LayerIndex_') === -1) {
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var data = this.getbubble(target);
+        if (isNullOrUndefined(data)) {
+            return;
+        }
+        var 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
+    Bubble.prototype.getbubble = function (target) {
+        var id = target.split('_LayerIndex_');
+        var index = parseInt(id[1].split('_')[0], 10);
+        var layer = this.maps.layers[index];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var data;
+        if (target.indexOf('_BubbleIndex_') > -1) {
+            var bubbleIndex = parseInt(id[1].split('_BubbleIndex_')[1], 10);
+            var 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
+     */
+    Bubble.prototype.bubbleMove = function (e) {
+        var target = e.target.id;
+        if (target.indexOf('_LayerIndex_') === -1) {
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var data = this.getbubble(target);
+        if (isNullOrUndefined(data)) {
+            return;
+        }
+        var 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.
+     */
+    Bubble.prototype.getModuleName = function () {
+        return 'Bubble';
+    };
+    /**
+     * To destroy the bubble.
+     *
+     * @returns {void}
+     * @private
+     */
+    Bubble.prototype.destroy = function () {
+        this.bubbleCollection = [];
+        //TODO: Calling the below code throws spec issue.
+        //this.maps = null;
+    };
+    return Bubble;
+}());
+
+/**
+ * Marker class
  */
-var Bubble = /** @__PURE__ @class */ (function () {
-    function Bubble(maps) {
-        /**
-         * Bubble Id for current layer
-         * @private
-         */
-        this.id = '';
+var Marker = /** @__PURE__ @class */ (function () {
+    function Marker(maps) {
         this.maps = maps;
-        this.bubbleCollection = [];
+        this.trackElements = [];
+        this.sameMarkerData = [];
     }
-    // eslint-disable-next-line valid-jsdoc
+    Marker.prototype.markerRender = function (maps, layerElement, layerIndex, factor, type) {
+        var _this = this;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var templateFn;
+        var markerCount = 0;
+        var nullCount = 0;
+        var markerTemplateCount = 0;
+        maps.translateType = 'marker';
+        var currentLayer = maps.layersCollection[layerIndex];
+        this.markerSVGObject = maps.renderer.createGroup({
+            id: maps.element.id + '_Markers_Group',
+            class: 'GroupElement'
+        });
+        this.markerSVGObject.style.pointerEvents = 'auto';
+        var 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(function (markerSettings, markerIndex) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var markerData = markerSettings.dataSource;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+                maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
+                var eventArgs = {
+                    cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
+                    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, function (MarkerArgs) {
+                    eventArgs = markerColorChoose(eventArgs, data);
+                    eventArgs = markerShapeChoose(eventArgs, data);
+                    var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
+                        Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
+                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                    var lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
+                        Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
+                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                    var offset = markerSettings.offset;
+                    if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
+                        var markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                            + markerIndex + '_dataIndex_' + dataIndex;
+                        var location_1 = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+                        var animate$$1 = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        var translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = 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);
+                        var scale = type === 'AddMarker' ? maps.scale : translate['scale'];
+                        var transPoint = type === 'AddMarker' ? maps.translatePoint : translate['location'];
+                        if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                            markerTemplateCount++;
+                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, maps);
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            maps.renderReactTemplates();
+                        }
+                        else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                            markerCount++;
+                            marker(eventArgs, markerSettings, markerData, dataIndex, location_1, 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;
+                    var 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 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
      */
-    Bubble.prototype.renderBubble = function (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    bubbleSettings, shapeData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, bubbleID) {
-        var _this = this;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var layerData = layer.layerData;
-        var colorValuePath = bubbleSettings.colorValuePath;
-        var equalValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
-            (getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : shapeData[colorValuePath]) :
-            shapeData[colorValuePath];
-        var colorValue = (!isNullOrUndefined(colorValuePath)) ? ((colorValuePath.indexOf('.') > -1) ?
-            Number(getValueFromObject(shapeData, bubbleSettings.colorValuePath)) : Number(shapeData[colorValuePath])) :
-            Number(shapeData[colorValuePath]);
-        var bubbleValue = (!isNullOrUndefined(bubbleSettings.valuePath)) ? ((bubbleSettings.valuePath.indexOf('.') > -1) ?
-            Number(getValueFromObject(shapeData, bubbleSettings.valuePath)) : Number(shapeData[bubbleSettings.valuePath])) :
-            Number(shapeData[bubbleSettings.valuePath]);
-        var opacity;
-        var bubbleColor;
-        if (isNaN(bubbleValue) && isNaN(colorValue) && isNullOrUndefined(equalValue)) {
-            return null;
+    Marker.prototype.calculateIndividualLayerMarkerZoomLevel = function (mapWidth, mapHeight, maxZoomFact) {
+        var latZoom;
+        var lngZoom;
+        var height = Math.abs(this.maps.baseMapBounds.latitude.max - this.maps.baseMapBounds.latitude.min);
+        var 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;
+        var result = Math.min(latZoom, lngZoom);
+        var scaleFactor = Math.min(result, maxZoomFact - 1);
+        if (!this.maps.isTileMap) {
+            compareZoomFactor(scaleFactor, this.maps);
         }
-        var radius = getRatioOfBubble(bubbleSettings.minRadius, bubbleSettings.maxRadius, bubbleValue, range.min, range.max);
-        var colorMapping = new ColorMapping(this.maps);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var 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;
-        var shapePoints = [[]];
-        this.maps.translateType = 'bubble';
-        var midIndex = 0;
-        var pointsLength = 0;
-        var currentLength = 0;
-        for (var i = 0, len = layerData.length; i < len; i++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var shape = layerData[i];
-            shape = shape['property'];
-            var shapePath = checkPropertyPath(shapeData[layer.shapeDataPath], layer.shapePropertyPath, shape);
-            var shapeDataLayerPathValue = !isNullOrUndefined(shapeData[layer.shapeDataPath]) &&
-                isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
-            var 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
+     */
+    Marker.prototype.calculateZoomCenterPositionAndFactor = function (layersCollection) {
+        if (!isNullOrUndefined(this.maps)) {
+            if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
+                var minLong_1;
+                var maxLat_1;
+                var minLat_1;
+                var maxLong_1;
+                var zoomLevel = void 0;
+                var centerLat = void 0;
+                var centerLong = void 0;
+                var maxZoomFact = this.maps.zoomSettings.maxZoom;
+                var mapWidth = this.maps.mapAreaRect.width;
+                var 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, function (currentLayer) {
+                    var isMarker = currentLayer.markerSettings.length !== 0;
+                    if (isMarker) {
+                        Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSetting) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            var markerData = markerSetting.dataSource;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+                                var latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
+                                    !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                                var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
+                                    !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                                if (!isNullOrUndefined(latitude) && !isNullOrUndefined(longitude)) {
+                                    minLong_1 = isNullOrUndefined(minLong_1) && dataIndex === 0 ?
+                                        longitude : minLong_1;
+                                    maxLat_1 = isNullOrUndefined(maxLat_1) && dataIndex === 0 ?
+                                        latitude : maxLat_1;
+                                    minLat_1 = isNullOrUndefined(minLat_1) && dataIndex === 0 ?
+                                        latitude : minLat_1;
+                                    maxLong_1 = isNullOrUndefined(maxLong_1) && dataIndex === 0 ?
+                                        longitude : maxLong_1;
+                                    if (minLong_1 > longitude) {
+                                        minLong_1 = longitude;
+                                    }
+                                    if (minLat_1 > latitude) {
+                                        minLat_1 = latitude;
+                                    }
+                                    if (maxLong_1 < longitude) {
+                                        maxLong_1 = longitude;
+                                    }
+                                    if (maxLat_1 < latitude) {
+                                        maxLat_1 = latitude;
+                                    }
+                                }
+                            });
+                        });
                     }
-                }
-                else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var layer_1 = layerData[i];
-                    for (var j = 0; j < layer_1.length; j++) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        shapePoints.push(this.getPoints(layer_1[j], []));
-                        currentLength = shapePoints[shapePoints.length - 1].length;
-                        if (pointsLength < currentLength) {
-                            pointsLength = currentLength;
-                            midIndex = shapePoints.length - 1;
+                });
+                if (!isNullOrUndefined(minLat_1) && !isNullOrUndefined(minLong_1) &&
+                    !isNullOrUndefined(maxLong_1) && !isNullOrUndefined(maxLat_1)) {
+                    // To find the center position
+                    centerLat = (minLat_1 + maxLat_1) / 2;
+                    centerLong = (minLong_1 + maxLong_1) / 2;
+                    this.maps.markerCenterLatitude = centerLat;
+                    this.maps.markerCenterLongitude = centerLong;
+                    if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
+                        this.maps.markerZoomCenterPoint = {
+                            latitude: centerLat,
+                            longitude: centerLong
+                        };
+                    }
+                    var markerFactor = void 0;
+                    if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
+                        zoomLevel = calculateZoomLevel(minLat_1, maxLat_1, minLong_1, maxLong_1, 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;
                 }
             }
-        }
-        var projectionType = this.maps.projectionType;
-        var centerY;
-        var eventArgs;
-        var bubbleBorder = {
-            color: bubbleSettings.border.color, opacity: bubbleSettings.border.opacity,
-            width: bubbleSettings.border.width
-        };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var 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 {
-                var 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, function (bubbleArgs) {
-                if (eventArgs.cancel) {
-                    return;
-                }
-                var bubbleElement;
-                eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? opacity : eventArgs.border.opacity;
-                if (bubbleSettings.bubbleType === 'Circle') {
-                    var circle = new CircleOption(bubbleID, eventArgs.fill, eventArgs.border, opacity, 0, 0, eventArgs.radius, null);
-                    bubbleElement = drawCircle(_this.maps, circle, group);
-                }
-                else {
-                    var y = _this.maps.projectionType === 'Mercator' ? (eventArgs.cy - radius) : (eventArgs.cy + radius);
-                    var 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
-                var translate;
-                var 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
-                var bubbleDataSource = bubbleSettings.dataSource;
-                var scale = translate['scale'];
-                var transPoint = translate['location'];
-                var 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) + ' )');
-                var 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
-    Bubble.prototype.getPoints = function (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
+     */
+    Marker.prototype.markerClick = function (e) {
+        var target = e.target.id;
+        if (target.indexOf(this.maps.element.id) === -1) {
+            var ancestor = e.target.closest('.' + this.maps.element.id + '_marker_template_element');
+            if (!isNullOrUndefined(ancestor) && ancestor.id.indexOf('_MarkerIndex_') > -1) {
+                target = ancestor.id;
+            }
         }
-        else {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            shape.map(function (current) {
-                points.push(new Point(current['point']['x'], current['point']['y']));
-            });
+        if (target.indexOf('_LayerIndex_') === -1 || target.indexOf('_cluster_') > 0) {
+            return;
+        }
+        var options = this.getMarker(target);
+        if (isNullOrUndefined(options)) {
+            return;
+        }
+        if (options.marker.enableDrag) {
+            document.getElementById(this.maps.element.id + "_svg").style.cursor = 'grabbing';
+        }
+        var 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) {
+            var isCluster = false;
+            var layerIndex = parseInt(target.split('_LayerIndex_')[1].split('_')[0], 10);
+            var markerIndex = parseInt(target.split('_MarkerIndex_')[1].split('_')[0], 10);
+            var dataIndex_1 = parseInt(target.split('_dataIndex_')[1].split('_')[0], 10);
+            var marker_1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
+            if (this.sameMarkerData.length > 0) {
+                isCluster = (this.sameMarkerData[0].data.filter(function (el) { return (el['index'] == dataIndex_1); })).length > 0 &&
+                    this.sameMarkerData[0].layerIndex === layerIndex && this.sameMarkerData[0].markerIndex === markerIndex;
+            }
+            if (!isCluster) {
+                var 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_1
+                };
+                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_1][marker_1.shapeValuePath],
+                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex_1
+                };
+            }
         }
-        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
      */
-    Bubble.prototype.bubbleClick = function (e) {
+    Marker.prototype.markerClusterClick = function (e) {
         var 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
-        var data = this.getbubble(target);
-        if (isNullOrUndefined(data)) {
+        var 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);
+            }
+        }
         var 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
-    Bubble.prototype.getbubble = function (target) {
+    Marker.prototype.getMarker = function (target) {
         var id = target.split('_LayerIndex_');
         var index = parseInt(id[1].split('_')[0], 10);
         var layer = this.maps.layers[index];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var data;
-        if (target.indexOf('_BubbleIndex_') > -1) {
-            var bubbleIndex = parseInt(id[1].split('_BubbleIndex_')[1], 10);
-            var 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
+        var markCollection = [];
+        var clusterCollection = [];
+        var marker$$1;
+        this.maps.markerClusterExpand = layer.markerClusterSettings.allowClusterExpand;
+        if (target.indexOf('_MarkerIndex_') > -1) {
+            var markerIndex = parseInt(id[1].split('_MarkerIndex_')[1].split('_')[0], 10);
+            var 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
+                var collection_1 = [];
+                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, function (location, index) {
+                        if (location['latitude'] === data['latitude'] && location['longitude'] === data['longitude']) {
+                            collection_1.push({ data: data, index: index });
+                        }
+                    });
+                }
+                if ((target.indexOf('_cluster_') > -1)) {
+                    var isClusterSame = false;
+                    var 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);
+                    var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
+                    collection_1 = [];
+                    for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
+                        var i = indexes_1[_i];
+                        collection_1.push({ data: marker$$1.dataSource[i], index: i });
+                        markCollection.push(marker$$1.dataSource[i]);
+                    }
+                    isClusterSame = false;
+                    clusterCollection.push({
+                        data: collection_1, 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
      */
-    Bubble.prototype.bubbleMove = function (e) {
-        var target = e.target.id;
-        if (target.indexOf('_LayerIndex_') === -1) {
+    Marker.prototype.markerMove = function (e) {
+        var targetId = e.target.id;
+        if (targetId.indexOf('_LayerIndex_') === -1 || targetId.indexOf('_cluster_') > 0) {
             return;
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var data = this.getbubble(target);
-        if (isNullOrUndefined(data)) {
+        var 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';
+        }
         var 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
+     */
+    Marker.prototype.markerClusterMouseMove = function (e) {
+        var targetId = e.target.id;
+        if (targetId.indexOf('_LayerIndex_') === -1 || targetId.indexOf('_cluster_') === -1) {
+            return;
+        }
+        var options = this.getMarker(targetId);
+        if (this.maps.markerClusterExpand) {
+            e.target.style.cursor = 'pointer';
+        }
+        if (isNullOrUndefined(options)) {
+            return;
+        }
+        var 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
      */
-    Bubble.prototype.getModuleName = function () {
-        return 'Bubble';
+    Marker.prototype.getModuleName = function () {
+        return 'Marker';
     };
     /**
-     * To destroy the bubble.
+     * To destroy the layers.
      *
      * @returns {void}
      * @private
      */
-    Bubble.prototype.destroy = function () {
-        this.bubbleCollection = [];
-        //TODO: Calling the below code throws spec issue.
-        //this.maps = null;
+    Marker.prototype.destroy = function () {
+        this.maps = null;
+        this.trackElements = [];
+        this.markerSVGObject = null;
+        this.sameMarkerData = [];
     };
-    return Bubble;
+    return Marker;
+}());
+
+/**
+ * When injected, this module will be used to render polygon shapes over the Maps.
+ */
+var Polygon = /** @__PURE__ @class */ (function () {
+    function Polygon(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
+     */
+    Polygon.prototype.polygonRender = function (maps, layerIndex, factor) {
+        var _this = this;
+        var currentLayer = maps.layersCollection[layerIndex];
+        var polygonsSVGObject = maps.renderer.createGroup({
+            id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group'
+        });
+        currentLayer.polygonSettings.polygons.map(function (polygonSetting, polygonIndex) {
+            var polygonSVGObject = maps.renderer.createGroup({
+                id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group_' + polygonIndex
+            });
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var polygonData = polygonSetting.points;
+            var path = calculatePolygonPath(maps, factor, currentLayer, polygonData);
+            var pathOptions = new PathOption(maps.element.id + '_LayerIndex_' + layerIndex + '_PolygonIndex_' + polygonIndex, polygonSetting.fill, (polygonSetting.borderWidth / factor), polygonSetting.borderColor, polygonSetting.opacity, polygonSetting.borderOpacity, '', path);
+            var polygonEle = maps.renderer.drawPath(pathOptions);
+            maintainSelection(_this.maps.selectedPolygonElementId, _this.maps.polygonSelectionClass, polygonEle, 'PolygonselectionMapStyle');
+            polygonSVGObject.appendChild(polygonEle);
+            polygonsSVGObject.appendChild(polygonSVGObject);
+        });
+        return polygonsSVGObject;
+    };
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name
+     */
+    Polygon.prototype.getModuleName = function () {
+        return 'Polygon';
+    };
+    /**
+     * To destroy the layers.
+     *
+     * @returns {void}
+     * @private
+     */
+    Polygon.prototype.destroy = function () {
+        this.maps = null;
+    };
+    return Polygon;
 }());
 
 /**
@@ -11224,17 +11459,17 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
                 id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
             }));
             for (var 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 (var i_1 = 0; i_1 < longitude['length']; i_1++) {
+                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 (var i_1 = 0; i_1 < longitude.length; i_1++) {
                         var location_1 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i_1], latitude[i_1]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i_1], longitude[i_1], factor, layer, this.maps);
                         point.push(location_1);
                     }
@@ -11242,7 +11477,7 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
                 navigationGroup = (this.maps.renderer.createGroup({
                     id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
                 }));
-                for (var j = 0; j < point['length'] - 1; j++) {
+                for (var j = 0; j < point.length - 1; j++) {
                     angle = (-1 > angle) ? -1 : angle;
                     angle = (1 < angle) ? 1 : angle;
                     var arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
@@ -11260,11 +11495,11 @@ var NavigationLine = /** @__PURE__ @class */ (function () {
                         }
                     }
                     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;
                         var 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) {
@@ -13121,7 +13356,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         var legendToggleBorderWidth = this.maps.legendSettings.toggleLegendSettings.border.width;
         var 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) {
             var mapElement = void 0;
             var legendIndex = parseFloat(targetEle.parentElement.id.substr((this.maps.element.id + '_Legend_Index_').length));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13617,6 +13852,7 @@ var Highlight = /** @__PURE__ @class */ (function () {
             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
@@ -13646,6 +13882,11 @@ var Highlight = /** @__PURE__ @class */ (function () {
                 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 {
                 var index = parseInt(targetEle.id.split('_NavigationIndex_')[1].split('_')[0], 10);
                 layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
@@ -13884,6 +14125,12 @@ var Selection = /** @__PURE__ @class */ (function () {
                 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) {
                 var index = parseInt(targetElement.id.split('_NavigationIndex_')[1].split('_')[0], 10);
                 shapeData = null;
@@ -14059,6 +14306,10 @@ var Selection = /** @__PURE__ @class */ (function () {
                         _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'));
+                    }
                 }
             }
         });
@@ -14098,6 +14349,9 @@ var Selection = /** @__PURE__ @class */ (function () {
         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.
@@ -14140,7 +14394,6 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
         var target;
         var touchArg;
         var tooltipArgs;
-        var tooltipTemplateElement;
         if (e.type.indexOf('touch') !== -1) {
             this.isTouch = true;
             touchArg = e;
@@ -14291,7 +14544,12 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                     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) {
@@ -14335,8 +14593,8 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             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],
@@ -14353,8 +14611,8 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             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],
@@ -14373,13 +14631,6 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                     _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) {
-                        var templateStyle = tooltipTemplateElement.getAttribute('style');
-                        templateStyle = templateStyle.replace('pointer-events: none;', 'position-events:all;');
-                        tooltipTemplateElement.style.cssText = templateStyle;
-                    }
                 }
                 else {
                     _this.clearTooltip(e.target);
@@ -14401,12 +14652,8 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
             }
         }
         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 {
+            var tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
+            if (isNullOrUndefined(tooltipElement)) {
                 this.clearTooltip(e.target);
             }
         }
@@ -14600,10 +14847,10 @@ var Zoom = /** @__PURE__ @class */ (function () {
     Zoom.prototype.performZooming = function (position, newZoomFactor, type) {
         var _this = this;
         var 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;
         var prevLevel = map.tileZoomLevel;
         var scale = map.previousScale = map.scale;
@@ -14651,6 +14898,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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;
@@ -14672,6 +14920,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     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)) {
@@ -14725,18 +14974,28 @@ var Zoom = /** @__PURE__ @class */ (function () {
     Zoom.prototype.triggerZoomEvent = function (prevTilePoint, prevLevel, type) {
         var map = this.maps;
         var 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;
+        }
+        var 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);
@@ -14785,6 +15044,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     map.translatePoint = new Point(translatePointX, translatePointY);
                 }
                 map.scale = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
+                map.zoomTranslatePoint = map.translatePoint;
                 isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
                 if (isZoomCancelled) {
                     map.translatePoint = map.previousPoint;
@@ -14840,6 +15100,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var map = this.maps;
         var prevLevel = map.tileZoomLevel;
         var availSize = map.mapAreaRect;
+        map.isMarkerZoomCompleted = false;
         map.previousScale = map.scale;
         map.previousPoint = map.translatePoint;
         map.previousProjection = map.projectionType;
@@ -14955,7 +15216,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
     Zoom.prototype.animateTransform = function (element, animate$$1, x, y, scale) {
         var 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) {
@@ -14966,6 +15229,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
      * @private
      */
     Zoom.prototype.applyTransform = function (maps, animate$$1) {
+        var _this = this;
         var layerIndex;
         this.templateCount = 0;
         var markerStyle;
@@ -14999,6 +15263,17 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                     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(function (polygonSettings, polygonIndex) {
+                                        var markerData = polygonSettings.points;
+                                        var path = calculatePolygonPath(maps, maps.tileZoomLevel, _this.currentLayer, markerData);
+                                        var 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;
@@ -15006,7 +15281,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             }
                         }
                         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];
@@ -15225,7 +15500,19 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     var markerDataLength = markerDatas.length - _this.maps.markerNullCount;
                     if (markerSVGObject.childElementCount === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
                         if (_this.maps.isTileMap) {
-                            layerElement.insertBefore(markerSVGObject, layerElement.firstElementChild);
+                            var polygonsElement = document.getElementById(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
+                            var 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);
@@ -15265,6 +15552,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 i + '_Markers_Template_Group');
             var datalabelTemplateElemement = getElementByID(maps.element.id + '_LayerIndex_'
                 + i + '_Label_Template_Group');
+            var polygonElement = getElementByID(maps.element.id + '_LayerIndex_'
+                + i + '_Polygons_Group');
             if ((!isNullOrUndefined(markerTemplateElement)) && markerTemplateElement.childElementCount > 0) {
                 markerTemplateElement.style.visibility = 'visible';
                 for (var k = 0; k < markerTemplateElement.childElementCount; k++) {
@@ -15276,6 +15565,12 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     this.dataLabelTranslate(datalabelTemplateElemement.childNodes[k], factor, x, y, scale, 'Template');
                 }
             }
+            if (!isNullOrUndefined(polygonElement)) {
+                for (var k = 0; k < polygonElement.childElementCount; k++) {
+                    var width = maps.layersCollection[i].polygonSettings.polygons[k].borderWidth;
+                    polygonElement.childNodes[k].childNodes[0].setAttribute('stroke-width', (width / scale).toString());
+                }
+            }
         }
     };
     Zoom.prototype.dataLabelTranslate = function (element, factor, x, y, scale, type, animate$$1) {
@@ -15330,7 +15625,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     zoomtextSize = measureText(zoomtext, style);
                     var start = labelY - zoomtextSize['height'] / 4;
                     var end = labelY + zoomtextSize['height'] / 4;
-                    labelY = end;
                     var xpositionEnds = labelX + zoomtextSize['width'] / 2;
                     var xpositionStart = labelX - zoomtextSize['width'] / 2;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15503,12 +15797,16 @@ var Zoom = /** @__PURE__ @class */ (function () {
             for (var i = 0; i < map.layersCollection.length; i++) {
                 var markerTemplateElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
                 var lineElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_line_Group');
+                var 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';
+                }
             }
         }
     };
@@ -15550,10 +15848,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var location_3 = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, mouseLocation['layerX'], mouseLocation['layerY']);
+            var 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_3['latitude'], longitude: location_3['longitude']
+                scale: map.scale, tileZoomLevel: map.tileZoomLevel, latitude: location_3['latitude'], longitude: location_3['longitude'],
+                minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
             };
             map.trigger(pan, panArgs);
             if (!panArgs.cancel) {
@@ -15587,11 +15888,14 @@ var Zoom = /** @__PURE__ @class */ (function () {
             map.translatePoint.y = (map.tileTranslatePoint.y - yDifference) / map.scale;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var location_4 = this.maps.getTileGeoLocation(mouseLocation['layerX'], mouseLocation['layerY']);
+            var 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_4['latitude'], longitude: location_4['longitude']
+                tileZoomLevel: map.tileZoomLevel, latitude: location_4['latitude'], longitude: location_4['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');
@@ -15614,7 +15918,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
     Zoom.prototype.toolBarZooming = function (zoomFactor, type) {
         var _this = this;
         var 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));
         var prevLevel = map.tileZoomLevel;
@@ -15627,7 +15931,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var size = map.mapAreaRect;
         var translatePoint = map.previousPoint = map.translatePoint;
         var 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;
@@ -15885,7 +16189,10 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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;
+                var 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;
@@ -16319,8 +16626,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var pageX = e.pageX;
         var pageY = e.pageY;
         var target = e.target;
+        var 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)) {
             var position = this.getMousePosition(pageX, pageY);
             var map = this.maps;
             var size = map.availableSize;
@@ -16493,8 +16801,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
      */
     Zoom.prototype.click = function (e) {
         var map = this.maps;
+        var 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
@@ -17075,5 +17384,5 @@ var PdfExport = /** @__PURE__ @class */ (function () {
  * exporting all modules from maps index
  */
 
-export { Maps, load, loaded, click, onclick, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerDragStart, markerDragEnd, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, ZoomToolbarButtonSettings, ZoomToolbarTooltipSettings, ZoomToolbarSettings, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, 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.es5.js.map