@syncfusion/ej2-maps 23.2.7 → 24.1.47

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

@@ -1,7 +1,7 @@
 import { Point, getElementByID, PathOption, Rect, convertGeoToPoint, CircleOption, convertTileLatLongToPoint } from '../utils/helper';
 import { RectOption, createTooltip, calculateScale, getTouchCenter, getTouches, targetTouches } from '../utils/helper';
 import { MapLocation, zoomAnimate, smoothTranslate, measureText, textTrim, clusterTemplate, marker } from '../utils/helper';
-import { markerTemplate, removeElement, getElement, clusterSeparate, markerColorChoose } from '../utils/helper';
+import { markerTemplate, removeElement, getElement, clusterSeparate, markerColorChoose, calculatePolygonPath } from '../utils/helper';
 import { markerShapeChoose } from '../utils/helper';
 import { isNullOrUndefined, EventHandler, Browser, remove, createElement, animationMode } from '@syncfusion/ej2-base';
 import { changeBorderWidth, markerRendering } from '../index';
@@ -64,10 +64,10 @@ var Zoom = /** @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;
@@ -115,6 +115,7 @@ var Zoom = /** @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;
@@ -136,6 +137,7 @@ var Zoom = /** @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)) {
@@ -189,18 +191,28 @@ var Zoom = /** @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);
@@ -249,6 +261,7 @@ var Zoom = /** @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;
@@ -304,6 +317,7 @@ var Zoom = /** @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;
@@ -420,7 +434,9 @@ var Zoom = /** @class */ (function () {
     Zoom.prototype.animateTransform = function (element, animate, x, y, scale) {
         var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
         if (!animate || 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) {
@@ -431,6 +447,7 @@ var Zoom = /** @class */ (function () {
      * @private
      */
     Zoom.prototype.applyTransform = function (maps, animate) {
+        var _this = this;
         var layerIndex;
         this.templateCount = 0;
         var layer;
@@ -448,60 +465,73 @@ var Zoom = /** @class */ (function () {
             removeElement(maps.element.id + '_mapsTooltip');
         }
         if (this.layerCollectionEle) {
-            for (var i_1 = 0; i_1 < this.layerCollectionEle.childElementCount; i_1++) {
-                var layerElement = this.layerCollectionEle.childNodes[i_1];
+            var _loop_1 = function (i_1) {
+                var layerElement = this_1.layerCollectionEle.childNodes[i_1];
                 if (layerElement.tagName === 'g') {
-                    this.templateCount++;
-                    this.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
-                    this.currentLayer = maps.layersCollection[this.index];
-                    var factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
+                    this_1.templateCount++;
+                    this_1.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
+                    this_1.currentLayer = maps.layersCollection[this_1.index];
+                    var factor_1 = maps.mapLayerPanel.calculateFactor(this_1.currentLayer);
                     var elementCount = layerElement.childElementCount;
-                    for (var j = 0; j < elementCount; j++) {
+                    var _loop_2 = function (j) {
                         var currentEle = layerElement.childNodes[j];
                         if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
                             && (!(currentEle.id.indexOf('_dataLableIndex_Group') > -1))) {
                             if (maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
                                 currentEle.remove();
                                 if (layerElement.children.length > 0 && layerElement.children[0]) {
-                                    layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index), layerElement.children[1]);
+                                    layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this_1.currentLayer, maps.tileZoomLevel, this_1.index), layerElement.children[1]);
                                 }
                                 else {
-                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index));
+                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this_1.currentLayer, maps.tileZoomLevel, this_1.index));
+                                }
+                            }
+                            else if (maps.isTileMap && (currentEle.id.indexOf('_Polygons_Group') > -1)) {
+                                if (this_1.currentLayer.polygonSettings.polygons.length > 0) {
+                                    this_1.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_1.index + '_Polygons_Group').style.visibility = '';
                                 }
                             }
                             else if (currentEle.id.indexOf('Legend') === -1) {
-                                changeBorderWidth(currentEle, this.index, scale, maps);
+                                changeBorderWidth(currentEle, this_1.index, scale, maps);
                                 maps.zoomTranslatePoint = maps.translatePoint;
-                                this.animateTransform(currentEle, animate, x, y, scale);
+                                this_1.animateTransform(currentEle, animate, x, y, scale);
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if (!this.isPanning && !isNullOrUndefined(currentEle.childNodes[0])) {
-                                this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate);
+                            if ((!this_1.isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
+                                this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement, animate);
                             }
                             currentEle = layerElement.childNodes[j];
-                            var markerAnimation = void 0;
+                            var markerAnimation_1;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
-                                for (var k = 0; k < currentEle.childElementCount; k++) {
-                                    this.markerTranslate(currentEle.childNodes[k], factor, x, y, scale, 'Marker', animate);
-                                    var layerIndex_1 = parseInt(currentEle.childNodes[k]['id'].split('_LayerIndex_')[1].split('_')[0], 10);
-                                    var dataIndex = parseInt(currentEle.childNodes[k]['id'].split('_dataIndex_')[1].split('_')[0], 10);
-                                    var markerIndex = parseInt(currentEle.childNodes[k]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
-                                    markerAnimation = this.currentLayer.markerSettings[markerIndex].animationDuration > 0 || animationMode === 'Enable';
-                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                    var markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
-                                    for (var x_1 = 0; x_1 < this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x_1++) {
-                                        if (this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['latitude'] ===
-                                            markerSelectionValues['latitude'] ||
-                                            this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['longitude'] ===
-                                                markerSelectionValues['longitude']) {
-                                            maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
+                                Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
+                                    _this.markerTranslate(childNode, factor_1, x, y, scale, 'Marker', animate);
+                                    var layerIndex = parseInt(childNode['id'].split('_LayerIndex_')[1].split('_')[0], 10);
+                                    var dataIndex = parseInt(childNode['id'].split('_dataIndex_')[1].split('_')[0], 10);
+                                    var markerIndex = parseInt(childNode['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                                    markerAnimation_1 = _this.currentLayer.markerSettings[markerIndex].animationDuration > 0 || animationMode === 'Enable';
+                                    if (_this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length > 0) {
+                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                        var markerSelectionValues = _this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
+                                        for (var x_1 = 0; x_1 < _this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x_1++) {
+                                            if (_this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['latitude'] ===
+                                                markerSelectionValues['latitude'] ||
+                                                _this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['longitude'] ===
+                                                    markerSelectionValues['longitude']) {
+                                                maps.markerSelection(_this.currentLayer.markerSettings[markerIndex].selectionSettings, maps, currentEle.children[k], _this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
+                                            }
                                         }
                                     }
-                                    if (((this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
+                                    if (((_this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && _this.currentLayer.type === 'SubLayer')) && !_this.isPanning) {
                                         if (maps.isTileMap) {
                                             var groupElement = document.querySelector('.GroupElement');
-                                            if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
+                                            if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation_1) {
                                                 groupElement.style.display = 'none';
                                             }
                                         }
@@ -510,8 +540,8 @@ var Zoom = /** @class */ (function () {
                                             currentEle.style.cssText = markerStyle;
                                         }
                                     }
-                                }
-                                if (this.isPanning && maps.markerModule.sameMarkerData.length > 0) {
+                                });
+                                if (this_1.isPanning && maps.markerModule.sameMarkerData.length > 0) {
                                     clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
                                 }
                                 else if (maps.markerModule.sameMarkerData.length > 0) {
@@ -521,7 +551,7 @@ var Zoom = /** @class */ (function () {
                                     }
                                 }
                                 if (document.getElementById(maps.element.id + '_mapsTooltip') && maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
-                                    && !this.isPanning) {
+                                    && !this_1.isPanning) {
                                     var mapsTooltip = maps.mapsTooltipModule;
                                     var tooltipElement = currentEle.querySelector('#' + mapsTooltip.tooltipTargetID);
                                     if (!isNullOrUndefined(tooltipElement)) {
@@ -559,7 +589,7 @@ var Zoom = /** @class */ (function () {
                                         var centerY = bubbleCollection['center']['y'];
                                         var currentX = ((centerX + x) * scale);
                                         var currentY = ((centerY + y) * scale);
-                                        var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
+                                        var duration = this_1.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this_1.currentLayer.animationDuration;
                                         if (!animate || duration === 0) {
                                             childElement.setAttribute('transform', 'translate( ' + currentX + ' ' + currentY + ' )');
                                         }
@@ -571,25 +601,25 @@ var Zoom = /** @class */ (function () {
                                 }
                             }
                         }
-                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this.index])) {
-                            this.intersect = [];
+                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this_1.index])) {
+                            this_1.intersect = [];
                             maps.zoomLabelPositions = [];
                             maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
                             var labelAnimate = !maps.isTileMap && animate;
                             for (var k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
-                                    this.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
-                                    maps.zoomShapeCollection.push(this.zoomshapewidth);
-                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate);
-                                    var dataLabel = maps.layers[this.index].dataLabelSettings;
+                                    this_1.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
+                                    maps.zoomShapeCollection.push(this_1.zoomshapewidth);
+                                    this_1.dataLabelTranslate(currentEle.childNodes[k], factor_1, x, y, scale, 'DataLabel', labelAnimate);
+                                    var dataLabel = maps.layers[this_1.index].dataLabelSettings;
                                     var border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
                                         if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !isNullOrUndefined(maps.zoomLabelPositions[labelIndex])) {
                                             var labelX = ((maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
                                             var labelY = ((maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
                                             var zoomtext = currentEle.childNodes[k]['textContent'];
-                                            var style = maps.layers[this.index].dataLabelSettings.textStyle;
+                                            var style = maps.layers[this_1.index].dataLabelSettings.textStyle;
                                             var zoomtextSize = measureText(zoomtext, style);
                                             var padding = 5;
                                             var rectElement = currentEle.childNodes[k - 1];
@@ -602,9 +632,16 @@ var Zoom = /** @class */ (function () {
                                 }
                             }
                         }
+                    };
+                    for (var j = 0; j < elementCount; j++) {
+                        _loop_2(j);
                     }
                 }
                 maps.arrangeTemplate();
+            };
+            var this_1 = this;
+            for (var i_1 = 0; i_1 < this.layerCollectionEle.childElementCount; i_1++) {
+                _loop_1(i_1);
             }
             if (!isNullOrUndefined(this.currentLayer)) {
                 if (!animate || this.currentLayer.animationDuration === 0 || maps.isTileMap) {
@@ -644,7 +681,7 @@ var Zoom = /** @class */ (function () {
             removeElement(markerTemplateElements.id);
         }
         var currentLayers = this.maps.layersCollection[layerIndex];
-        currentLayers.markerSettings.map(function (markerSettings, markerIndex) {
+        Array.prototype.forEach.call(currentLayers.markerSettings, function (markerSettings, markerIndex) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerDatas = markerSettings.dataSource;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -693,9 +730,22 @@ var Zoom = /** @class */ (function () {
                     _this.maps.markerNullCount = (isNullOrUndefined(lati) || isNullOrUndefined(long))
                         ? _this.maps.markerNullCount + 1 : _this.maps.markerNullCount;
                     var markerDataLength = markerDatas.length - _this.maps.markerNullCount;
+                    var isMarkersClustered = false;
                     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);
@@ -703,13 +753,13 @@ var Zoom = /** @class */ (function () {
                         if (currentLayers.markerClusterSettings.allowClustering) {
                             _this.maps.svgObject.appendChild(markerSVGObject);
                             _this.maps.element.appendChild(_this.maps.svgObject);
-                            clusterTemplate(currentLayers, markerSVGObject, _this.maps, layerIndex, markerSVGObject, layerElement, true, true);
+                            isMarkersClustered = clusterTemplate(currentLayers, markerSVGObject, _this.maps, layerIndex, markerSVGObject, layerElement, true, true);
                         }
                     }
                     if (markerTemplateElements.childElementCount === (markerDataLength - markerCounts - nullCount) && getElementByID(_this.maps.element.id + '_Secondary_Element')) {
                         getElementByID(_this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateElements);
                         if (scale >= 1) {
-                            if (currentLayers.markerClusterSettings.allowClustering) {
+                            if (currentLayers.markerClusterSettings.allowClustering && !isMarkersClustered) {
                                 clusterTemplate(currentLayers, markerTemplateElements, _this.maps, layerIndex, markerSVGObject, layerElement, false, true);
                             }
                         }
@@ -735,6 +785,8 @@ var Zoom = /** @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++) {
@@ -746,6 +798,12 @@ var Zoom = /** @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) {
@@ -800,7 +858,6 @@ var Zoom = /** @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
@@ -973,12 +1030,16 @@ var Zoom = /** @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';
+                }
             }
         }
     };
@@ -1020,10 +1081,13 @@ var Zoom = /** @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) {
@@ -1057,11 +1121,14 @@ var Zoom = /** @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');
@@ -1084,7 +1151,7 @@ var Zoom = /** @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;
@@ -1097,7 +1164,7 @@ var Zoom = /** @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;
@@ -1362,7 +1429,10 @@ var Zoom = /** @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;
@@ -1796,8 +1866,9 @@ var Zoom = /** @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;
@@ -1973,8 +2044,9 @@ var Zoom = /** @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

package/src/maps/utils/helper.d.ts

@@ -79,6 +79,10 @@ export declare function radiansToDegrees(radian: number): number;
  * @private
  */
 export declare function convertGeoToPoint(latitude: number, longitude: number, factor: number, layer: LayerSettings, mapModel: Maps): Point;
+/**
+ * @private
+ */
+export declare function calculatePolygonPath(maps: Maps, factor: number, currentLayer: LayerSettings, markerData: Coordinate[]): string;
 /**
  * Converting tile latitude and longitude to point
  *
@@ -175,6 +179,20 @@ export declare class Point {
     y: number;
     constructor(x: number, y: number);
 }
+/**
+ * Defines the latitude and longitude values that define a map location.
+ */
+export declare class Coordinate {
+    /**
+     * Gets or sets the latitude of a coordinate on a map.
+     */
+    latitude: number;
+    /**
+     * Gets or sets the longitude of a coordinate on a map.
+     */
+    longitude: number;
+    constructor(latitude: number, longitude: number);
+}
 /**
  * Map internal class for min and max
  *
@@ -465,7 +483,7 @@ export declare function markerShapeChoose(eventArgs: IMarkerRenderingEventArgs,
  * @returns {void}
  * @private
  */
-export declare function clusterTemplate(currentLayer: LayerSettings, markerTemplate: HTMLElement | Element, maps: Maps, layerIndex: number, markerCollection: Element, layerElement: Element, check: boolean, zoomCheck: boolean): void;
+export declare function clusterTemplate(currentLayer: LayerSettings, markerTemplate: HTMLElement | Element, maps: Maps, layerIndex: number, markerCollection: Element, layerElement: Element, check: boolean, zoomCheck: boolean): boolean;
 /**
  *
  * @param {MarkerClusterData[]} sameMarkerData - Specifies the marker data