@syncfusion/ej2-maps 24.1.41 → 24.1.47

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

@@ -976,46 +976,50 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
         width: clusters.width, imageUrl: clusters.imageUrl, shape: clusters.shape,
         data: data, maps: maps, cluster: clusters, border: clusters.border
     };
+    var containerRect = maps.element.getBoundingClientRect();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var translatePoint = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
+    var factor;
+    if (!maps.isTileMap) {
+        factor = maps.mapLayerPanel.calculateFactor(currentLayer);
+    }
+    var isClusteringCompleted = false;
     maps.trigger('markerClusterRendering', eventArg, function (clusterargs) {
-        for (var o = 0; o < markerTemplate.childElementCount; o++) {
+        Array.prototype.forEach.call(markerTemplate.childNodes, function (markerElement, o) {
             indexCollection = [];
-            if (markerTemplate.childNodes[o]['style']['visibility'] !== 'hidden') {
-                tempElement = markerTemplate.childNodes[o];
+            if (markerElement['style']['visibility'] !== 'hidden') {
+                tempElement = markerElement;
                 bounds1 = tempElement.getBoundingClientRect();
                 indexCollection.push(o);
                 if (!isNullOrUndefined(bounds1)) {
-                    for (var p = o + 1; p < markerTemplate.childElementCount; p++) {
-                        if (markerTemplate.childNodes[p]['style']['visibility'] !== 'hidden') {
-                            tempElement = markerTemplate.childNodes[p];
+                    Array.prototype.forEach.call(markerTemplate.childNodes, function (otherMarkerElement, p) {
+                        if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
+                            tempElement = otherMarkerElement;
                             bounds2 = tempElement.getBoundingClientRect();
                             if (!isNullOrUndefined(bounds2)) {
                                 if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
                                     || bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
                                     colloideBounds.push(bounds2);
-                                    markerTemplate.childNodes[p]['style']['visibility'] = 'hidden';
+                                    otherMarkerElement['style']['visibility'] = 'hidden';
                                     indexCollection.push(p);
                                 }
                             }
                         }
-                    }
+                    });
                     tempX = bounds1.left + bounds1.width / 2;
                     tempY = bounds1.top + bounds1.height;
                     if (colloideBounds.length > 0) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         indexCollection = indexCollection.filter(function (item, index, value) { return value.indexOf(item) === index; });
-                        var container = maps.element.getBoundingClientRect();
-                        tempX = tempX - container['left'];
-                        tempY = (tempY - ((maps.availableSize.height <= container['height']) ?
-                            container['top'] : (container['bottom'] - container['top'])));
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var translate = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
-                        var dataIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_dataIndex_')[1].split('_')[0], 10);
-                        var markerIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                        tempX = tempX - containerRect['left'];
+                        tempY = (tempY - ((maps.availableSize.height <= containerRect['height']) ?
+                            containerRect['top'] : (containerRect['bottom'] - containerRect['top'])));
+                        var dataIndex = parseInt(markerElement['id'].split('_dataIndex_')[1].split('_')[0], 10);
+                        var markerIndex = parseInt(markerElement['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
                         var markerSetting = currentLayer.markerSettings[markerIndex];
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var markerData = markerSetting.dataSource[dataIndex];
-                        var factor = void 0;
-                        var location_1 = void 0;
+                        var location_1;
                         var longitude = (!isNullOrUndefined(markerSetting.longitudeValuePath)) ?
                             Number(getValueFromObject(markerData, markerSetting.longitudeValuePath)) :
                             !isNullOrUndefined(markerData['longitude']) ? parseFloat(markerData['longitude']) :
@@ -1025,45 +1029,30 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                             !isNullOrUndefined(markerData['latitude']) ? parseFloat(markerData['latitude']) :
                                 !isNullOrUndefined(markerData['Latitude']) ? parseFloat(markerData['Latitude']) : 0;
                         if (!maps.isTileMap) {
-                            factor = maps.mapLayerPanel.calculateFactor(currentLayer);
                             location_1 = convertGeoToPoint(latitude, longitude, factor, currentLayer, maps);
                         }
                         else if (maps.isTileMap && !maps.zoomSettings.enable) {
                             location_1 = convertTileLatLongToPoint(new Point(longitude, latitude), maps.tileZoomLevel, maps.tileTranslatePoint, true);
                         }
-                        markerTemplate.childNodes[o]['style']['visibility'] = 'hidden';
-                        var clusters_1 = currentLayer.markerClusterSettings;
+                        markerElement['style']['visibility'] = 'hidden';
                         if (eventArg.cancel) {
                             shapeCustom = {
-                                size: new Size(clusters_1.width, clusters_1.height),
-                                fill: clusters_1.fill, borderColor: clusters_1.border.color,
-                                borderWidth: clusters_1.border.width, opacity: clusters_1.opacity,
-                                dashArray: clusters_1.dashArray
+                                size: new Size(clusters.width, clusters.height),
+                                fill: clusters.fill, borderColor: clusters.border.color,
+                                borderWidth: clusters.border.width, opacity: clusters.opacity,
+                                dashArray: clusters.dashArray, imageUrl: clusters.imageUrl, shape: clusters.shape
                             };
-                            shapeCustom['fill'] = clusters_1.fill;
-                            shapeCustom['size']['width'] = clusters_1.width;
-                            shapeCustom['size']['height'] = clusters_1.height;
-                            shapeCustom['imageUrl'] = clusters_1.imageUrl;
-                            shapeCustom['shape'] = clusters_1.shape;
-                            shapeCustom['borderColor'] = clusters_1.border.color;
-                            shapeCustom['borderWidth'] = clusters_1.border.width;
-                            shapeCustom['borderOpacity'] = isNullOrUndefined(clusters_1.border.opacity) ? clusters_1.opacity : clusters_1.border.opacity;
+                            shapeCustom['borderOpacity'] = isNullOrUndefined(clusters.border.opacity) ? clusters.opacity : clusters.border.opacity;
                         }
                         else {
                             shapeCustom = {
-                                size: new Size(clusters_1.width, clusters_1.height),
-                                fill: clusters_1.fill, borderColor: clusters_1.border.color,
-                                borderWidth: clusters_1.border.width, opacity: clusters_1.opacity,
-                                dashArray: clusters_1.dashArray
+                                size: new Size(eventArg.width, eventArg.height),
+                                fill: eventArg.fill, borderColor: eventArg.border.color,
+                                borderWidth: eventArg.border.width, opacity: clusters.opacity,
+                                dashArray: clusters.dashArray, imageUrl: eventArg.imageUrl,
+                                shape: eventArg.shape
                             };
-                            shapeCustom['fill'] = eventArg.fill;
-                            shapeCustom['size']['width'] = eventArg.width;
-                            shapeCustom['size']['height'] = eventArg.height;
-                            shapeCustom['imageUrl'] = eventArg.imageUrl;
-                            shapeCustom['shape'] = eventArg.shape;
-                            shapeCustom['borderColor'] = eventArg.border.color;
-                            shapeCustom['borderWidth'] = eventArg.border.width;
-                            shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters_1.opacity : eventArg.border.opacity;
+                            shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters.opacity : eventArg.border.opacity;
                         }
                         tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : tempX + postionY - (eventArg.width / 2);
                         tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : tempY - (eventArg.height / 2);
@@ -1091,48 +1080,51 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                 }
                 colloideBounds = [];
             }
-        }
+            isClusteringCompleted = true;
+        });
         layerElement.appendChild(clusterGroup);
         maps.svgObject.appendChild(layerElement);
         maps.element.appendChild(maps.svgObject);
-        for (var o = 0; o < clusterGroup.childElementCount; o++) {
-            if (clusterGroup.childNodes[o]['style']['visibility'] !== 'hidden') {
-                tempElement = clusterGroup.childNodes[o];
-                bounds1 = tempElement.getBoundingClientRect();
-                if (!isNullOrUndefined(bounds1) && !(tempElement.id.indexOf('_datalabel_') > -1)) {
-                    for (var p = o + 1; p < clusterGroup.childElementCount; p++) {
-                        if (clusterGroup.childNodes[p]['style']['visibility'] !== 'hidden') {
-                            tempElement1 = clusterGroup.childNodes[p];
-                            bounds2 = tempElement1.getBoundingClientRect();
-                            if (!isNullOrUndefined(bounds2) && !(tempElement1.id.indexOf('_datalabel_') > -1)) {
-                                if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
-                                    || bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
-                                    clusterColloideBounds.push(tempElement1);
-                                    clusterColloideBounds.push(clusterGroup.childNodes[p - 1]);
-                                    clusterGroup.childNodes[p]['style']['visibility'] = 'hidden';
-                                    clusterGroup.childNodes[p - 1]['style']['visibility'] = 'hidden';
-                                    indexCollection.push(p);
+        if (clusters.allowDeepClustering) {
+            Array.prototype.forEach.call(clusterGroup.childNodes, function (clusterElement, o) {
+                if (clusterElement['style']['visibility'] !== 'hidden') {
+                    tempElement = clusterElement;
+                    bounds1 = tempElement.getBoundingClientRect();
+                    if (!isNullOrUndefined(bounds1) && !(tempElement.id.indexOf('_datalabel_') > -1)) {
+                        for (var p = o + 1; p < clusterGroup.childElementCount; p++) {
+                            if (clusterGroup.childNodes[p]['style']['visibility'] !== 'hidden') {
+                                tempElement1 = clusterGroup.childNodes[p];
+                                bounds2 = tempElement1.getBoundingClientRect();
+                                if (!isNullOrUndefined(bounds2) && !(tempElement1.id.indexOf('_datalabel_') > -1)) {
+                                    if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
+                                        || bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
+                                        clusterColloideBounds.push(tempElement1);
+                                        clusterColloideBounds.push(clusterGroup.childNodes[p - 1]);
+                                        clusterGroup.childNodes[p]['style']['visibility'] = 'hidden';
+                                        clusterGroup.childNodes[p - 1]['style']['visibility'] = 'hidden';
+                                        indexCollection.push(p);
+                                    }
                                 }
                             }
                         }
-                    }
-                    if (clusterColloideBounds.length > 0) {
-                        tempElement = clusterGroup.childNodes[o];
-                        for (var i = 0; i < clusterColloideBounds.length; i++) {
-                            if (tempElement.tagName === 'g') {
-                                tempElement.childNodes[0].textContent = tempElement.childNodes[0].textContent + ',' +
-                                    clusterColloideBounds[i].textContent;
-                            }
-                            else {
-                                tempElement.textContent = tempElement.textContent + ',' + clusterColloideBounds[i].textContent;
+                        if (clusterColloideBounds.length > 0) {
+                            tempElement = clusterElement;
+                            for (var i = 0; i < clusterColloideBounds.length; i++) {
+                                if (tempElement.tagName === 'g') {
+                                    tempElement.childNodes[0].textContent = tempElement.childNodes[0].textContent + ',' +
+                                        clusterColloideBounds[i].textContent;
+                                }
+                                else {
+                                    tempElement.textContent = tempElement.textContent + ',' + clusterColloideBounds[i].textContent;
+                                }
+                                clusterGroup.childNodes[o - 1].textContent = ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
+                                i++;
                             }
-                            clusterGroup.childNodes[o - 1].textContent = ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
-                            i++;
                         }
+                        clusterColloideBounds = [];
                     }
-                    clusterColloideBounds = [];
                 }
-            }
+            });
         }
         while (0 < clusterGroup.childNodes.length) {
             markerCollection.insertBefore(clusterGroup.childNodes[0], markerCollection.firstChild);
@@ -1174,6 +1166,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             }
         }
     });
+    return isClusteringCompleted;
 }
 /**
  *
@@ -4460,6 +4453,9 @@ var MarkerClusterSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Property(false)
     ], MarkerClusterSettings.prototype, "allowClustering", void 0);
+    __decorate$1([
+        Property(true)
+    ], MarkerClusterSettings.prototype, "allowDeepClustering", void 0);
     __decorate$1([
         Complex({ color: 'transparent', width: 1 }, Border)
     ], MarkerClusterSettings.prototype, "border", void 0);
@@ -10442,11 +10438,20 @@ var Marker = /** @__PURE__ @class */ (function () {
             'left:' + maps.mapAreaRect.x + 'px;' +
             'height:' + maps.mapAreaRect.height + 'px;' +
             'width:' + maps.mapAreaRect.width + 'px;';
-        currentLayer.markerSettings.map(function (markerSettings, markerIndex) {
+        var allowAnimation = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var translatePoint;
+        if (!maps.isTileMap) {
+            translatePoint = !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
+                getZoomTranslate(maps, currentLayer, allowAnimation) :
+                getTranslate(maps, currentLayer, allowAnimation);
+        }
+        var _loop_1 = function (markerIndex) {
+            var markerSettings = currentLayer.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) {
+            var _loop_2 = function (dataIndex) {
+                var data = markerData[dataIndex];
                 maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                 var eventArgs = {
                     cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
@@ -10469,14 +10474,11 @@ var Marker = /** @__PURE__ @class */ (function () {
                         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 (maps.isTileMap) {
+                            translatePoint = (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object();
+                        }
+                        var scale = type === 'AddMarker' ? maps.scale : translatePoint['scale'];
+                        var transPoint = type === 'AddMarker' ? maps.translatePoint : translatePoint['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);
@@ -10494,6 +10496,7 @@ var Marker = /** @__PURE__ @class */ (function () {
                     maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ?
                         maps.markerNullCount + 1 : maps.markerNullCount;
                     var markerDataLength = markerData.length - maps.markerNullCount;
+                    var isMarkersClustered = false;
                     if (_this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(_this.markerSVGObject);
                         if (currentLayer.markerClusterSettings.allowClustering) {
@@ -10501,11 +10504,11 @@ var Marker = /** @__PURE__ @class */ (function () {
                             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);
+                                isMarkersClustered = 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);
+                                isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
                             }
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             maps.renderReactTemplates();
@@ -10514,7 +10517,7 @@ var Marker = /** @__PURE__ @class */ (function () {
                     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) {
+                            if (currentLayer.markerClusterSettings.allowClustering && !isMarkersClustered) {
                                 clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, _this.markerSVGObject, layerElement, false, false);
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 maps.renderReactTemplates();
@@ -10522,8 +10525,15 @@ var Marker = /** @__PURE__ @class */ (function () {
                         }
                     }
                 });
-            });
-        });
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            for (var dataIndex = 0; dataIndex < markerData.length; dataIndex++) {
+                _loop_2(dataIndex);
+            }
+        };
+        for (var markerIndex = 0; markerIndex < currentLayer.markerSettings.length; markerIndex++) {
+            _loop_1(markerIndex);
+        }
     };
     /**
      * To find zoom level for individual layers like India, USA.
@@ -15242,71 +15252,73 @@ var Zoom = /** @__PURE__ @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.currentLayer.polygonSettings.polygons.length > 0) {
-                                    this.currentLayer.polygonSettings.polygons.map(function (polygonSettings, polygonIndex) {
+                                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.index + '_Polygons_Group').style.visibility = '';
+                                    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$$1, x, y, scale);
+                                this_1.animateTransform(currentEle, animate$$1, 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$$1);
+                            if ((!this_1.isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
+                                this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement, animate$$1);
                             }
                             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$$1);
-                                    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$$1);
+                                    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';
                                             }
                                         }
@@ -15315,8 +15327,8 @@ var Zoom = /** @__PURE__ @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) {
@@ -15326,7 +15338,7 @@ var Zoom = /** @__PURE__ @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)) {
@@ -15364,7 +15376,7 @@ var Zoom = /** @__PURE__ @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$$1 || duration === 0) {
                                             childElement.setAttribute('transform', 'translate( ' + currentX + ' ' + currentY + ' )');
                                         }
@@ -15376,25 +15388,25 @@ var Zoom = /** @__PURE__ @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$$1;
                             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];
@@ -15407,9 +15419,16 @@ var Zoom = /** @__PURE__ @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$$1 || this.currentLayer.animationDuration === 0 || maps.isTileMap) {
@@ -15449,7 +15468,7 @@ var Zoom = /** @__PURE__ @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
@@ -15498,6 +15517,7 @@ var Zoom = /** @__PURE__ @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) {
                             var polygonsElement = document.getElementById(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
@@ -15520,13 +15540,13 @@ var Zoom = /** @__PURE__ @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);
                             }
                         }