@syncfusion/ej2-maps 24.1.41 → 24.2.3

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

@@ -922,45 +922,49 @@ 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
     };
+    const containerRect = maps.element.getBoundingClientRect();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const translatePoint = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
+    let factor;
+    if (!maps.isTileMap) {
+        factor = maps.mapLayerPanel.calculateFactor(currentLayer);
+    }
+    let isClusteringCompleted = false;
     maps.trigger('markerClusterRendering', eventArg, (clusterargs) => {
-        for (let o = 0; o < markerTemplate.childElementCount; o++) {
+        Array.prototype.forEach.call(markerTemplate.childNodes, (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 (let p = o + 1; p < markerTemplate.childElementCount; p++) {
-                        if (markerTemplate.childNodes[p]['style']['visibility'] !== 'hidden') {
-                            tempElement = markerTemplate.childNodes[p];
+                    Array.prototype.forEach.call(markerTemplate.childNodes, (otherMarkerElement, p) => {
+                        if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
+                            tempElement = otherMarkerElement;
                             bounds2 = tempElement.getBoundingClientRect();
                             if (!isNullOrUndefined(bounds2)) {
                                 if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
                                     || bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
                                     colloideBounds.push(bounds2);
-                                    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((item, index, value) => value.indexOf(item) === index);
-                        const 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
-                        const translate = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
-                        const dataIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_dataIndex_')[1].split('_')[0], 10);
-                        const 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'])));
+                        const dataIndex = parseInt(markerElement['id'].split('_dataIndex_')[1].split('_')[0], 10);
+                        const markerIndex = parseInt(markerElement['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
                         const markerSetting = currentLayer.markerSettings[markerIndex];
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const markerData = markerSetting.dataSource[dataIndex];
-                        let factor;
                         let location;
                         const longitude = (!isNullOrUndefined(markerSetting.longitudeValuePath)) ?
                             Number(getValueFromObject(markerData, markerSetting.longitudeValuePath)) :
@@ -971,44 +975,29 @@ 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 = convertGeoToPoint(latitude, longitude, factor, currentLayer, maps);
                         }
                         else if (maps.isTileMap && !maps.zoomSettings.enable) {
                             location = convertTileLatLongToPoint(new Point(longitude, latitude), maps.tileZoomLevel, maps.tileTranslatePoint, true);
                         }
-                        markerTemplate.childNodes[o]['style']['visibility'] = 'hidden';
-                        const clusters = currentLayer.markerClusterSettings;
+                        markerElement['style']['visibility'] = 'hidden';
                         if (eventArg.cancel) {
                             shapeCustom = {
                                 size: new Size(clusters.width, clusters.height),
                                 fill: clusters.fill, borderColor: clusters.border.color,
                                 borderWidth: clusters.border.width, opacity: clusters.opacity,
-                                dashArray: clusters.dashArray
+                                dashArray: clusters.dashArray, imageUrl: clusters.imageUrl, shape: clusters.shape
                             };
-                            shapeCustom['fill'] = clusters.fill;
-                            shapeCustom['size']['width'] = clusters.width;
-                            shapeCustom['size']['height'] = clusters.height;
-                            shapeCustom['imageUrl'] = clusters.imageUrl;
-                            shapeCustom['shape'] = clusters.shape;
-                            shapeCustom['borderColor'] = clusters.border.color;
-                            shapeCustom['borderWidth'] = clusters.border.width;
                             shapeCustom['borderOpacity'] = isNullOrUndefined(clusters.border.opacity) ? clusters.opacity : clusters.border.opacity;
                         }
                         else {
                             shapeCustom = {
-                                size: new Size(clusters.width, clusters.height),
-                                fill: clusters.fill, borderColor: clusters.border.color,
-                                borderWidth: clusters.border.width, opacity: clusters.opacity,
-                                dashArray: clusters.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.opacity : eventArg.border.opacity;
                         }
                         tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : tempX + postionY - (eventArg.width / 2);
@@ -1037,48 +1026,51 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                 }
                 colloideBounds = [];
             }
-        }
+            isClusteringCompleted = true;
+        });
         layerElement.appendChild(clusterGroup);
         maps.svgObject.appendChild(layerElement);
         maps.element.appendChild(maps.svgObject);
-        for (let 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 (let 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, (clusterElement, o) => {
+                if (clusterElement['style']['visibility'] !== 'hidden') {
+                    tempElement = clusterElement;
+                    bounds1 = tempElement.getBoundingClientRect();
+                    if (!isNullOrUndefined(bounds1) && !(tempElement.id.indexOf('_datalabel_') > -1)) {
+                        for (let 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 (let 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 (let 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);
@@ -1120,6 +1112,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             }
         }
     });
+    return isClusteringCompleted;
 }
 /**
  *
@@ -4329,6 +4322,9 @@ class MarkerClusterSettings extends ChildProperty {
 __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);
@@ -10120,11 +10116,21 @@ class Marker {
             'left:' + maps.mapAreaRect.x + 'px;' +
             'height:' + maps.mapAreaRect.height + 'px;' +
             'width:' + maps.mapAreaRect.width + 'px;';
-        currentLayer.markerSettings.map((markerSettings, markerIndex) => {
+        const allowAnimation = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let translatePoint;
+        if (!maps.isTileMap) {
+            translatePoint = !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
+                getZoomTranslate(maps, currentLayer, allowAnimation) :
+                getTranslate(maps, currentLayer, allowAnimation);
+        }
+        for (let markerIndex = 0; markerIndex < currentLayer.markerSettings.length; markerIndex++) {
+            let markerSettings = currentLayer.markerSettings[markerIndex];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerData = markerSettings.dataSource;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            Array.prototype.forEach.call(markerData, (data, dataIndex) => {
+            for (let dataIndex = 0; dataIndex < markerData.length; dataIndex++) {
+                let data = markerData[dataIndex];
                 maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                 let eventArgs = {
                     cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
@@ -10147,14 +10153,11 @@ class Marker {
                         const markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
                         let location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
-                        const animate$$1 = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object() :
-                            !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
-                                getZoomTranslate(maps, currentLayer, animate$$1) :
-                                getTranslate(maps, currentLayer, animate$$1);
-                        const scale = type === 'AddMarker' ? maps.scale : translate['scale'];
-                        const transPoint = type === 'AddMarker' ? maps.translatePoint : translate['location'];
+                        if (maps.isTileMap) {
+                            translatePoint = (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object();
+                        }
+                        const scale = type === 'AddMarker' ? maps.scale : translatePoint['scale'];
+                        const transPoint = type === 'AddMarker' ? maps.translatePoint : translatePoint['location'];
                         if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
                             markerTemplateCount++;
                             markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location, transPoint, scale, offset, maps);
@@ -10172,6 +10175,7 @@ class Marker {
                     maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ?
                         maps.markerNullCount + 1 : maps.markerNullCount;
                     const markerDataLength = markerData.length - maps.markerNullCount;
+                    let isMarkersClustered = false;
                     if (this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(this.markerSVGObject);
                         if (currentLayer.markerClusterSettings.allowClustering) {
@@ -10179,11 +10183,11 @@ class Marker {
                             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();
@@ -10192,7 +10196,7 @@ class Marker {
                     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();
@@ -10200,8 +10204,8 @@ class Marker {
                         }
                     }
                 });
-            });
-        });
+            }
+        }
     }
     /**
      * To find zoom level for individual layers like India, USA.
@@ -14930,20 +14934,22 @@ class Zoom {
                             currentEle = layerElement.childNodes[j];
                             let markerAnimation;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
-                                for (let k = 0; k < currentEle.childElementCount; k++) {
-                                    this.markerTranslate(currentEle.childNodes[k], factor, x, y, scale, 'Marker', animate$$1);
-                                    const layerIndex = parseInt(currentEle.childNodes[k]['id'].split('_LayerIndex_')[1].split('_')[0], 10);
-                                    const dataIndex = parseInt(currentEle.childNodes[k]['id'].split('_dataIndex_')[1].split('_')[0], 10);
-                                    const markerIndex = parseInt(currentEle.childNodes[k]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                                Array.prototype.forEach.call(currentEle.childNodes, (childNode, k) => {
+                                    this.markerTranslate(childNode, factor, x, y, scale, 'Marker', animate$$1);
+                                    const layerIndex = parseInt(childNode['id'].split('_LayerIndex_')[1].split('_')[0], 10);
+                                    const dataIndex = parseInt(childNode['id'].split('_dataIndex_')[1].split('_')[0], 10);
+                                    const markerIndex = parseInt(childNode['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
-                                    const markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
-                                    for (let x = 0; x < this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x++) {
-                                        if (this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x]['latitude'] ===
-                                            markerSelectionValues['latitude'] ||
-                                            this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x]['longitude'] ===
-                                                markerSelectionValues['longitude']) {
-                                            maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
+                                    if (this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length > 0) {
+                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                        const markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
+                                        for (let x = 0; x < this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x++) {
+                                            if (this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x]['latitude'] ===
+                                                markerSelectionValues['latitude'] ||
+                                                this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x]['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) {
@@ -14958,7 +14964,7 @@ class Zoom {
                                             currentEle.style.cssText = markerStyle;
                                         }
                                     }
-                                }
+                                });
                                 if (this.isPanning && maps.markerModule.sameMarkerData.length > 0) {
                                     clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
                                 }
@@ -15090,7 +15096,7 @@ class Zoom {
             removeElement(markerTemplateElements.id);
         }
         const currentLayers = this.maps.layersCollection[layerIndex];
-        currentLayers.markerSettings.map((markerSettings, markerIndex) => {
+        Array.prototype.forEach.call(currentLayers.markerSettings, (markerSettings, markerIndex) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerDatas = markerSettings.dataSource;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15139,6 +15145,7 @@ class Zoom {
                     this.maps.markerNullCount = (isNullOrUndefined(lati) || isNullOrUndefined(long))
                         ? this.maps.markerNullCount + 1 : this.maps.markerNullCount;
                     const markerDataLength = markerDatas.length - this.maps.markerNullCount;
+                    let isMarkersClustered = false;
                     if (markerSVGObject.childElementCount === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
                         if (this.maps.isTileMap) {
                             const polygonsElement = document.getElementById(this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
@@ -15161,13 +15168,13 @@ class Zoom {
                         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);
                             }
                         }