@syncfusion/ej2-maps 27.2.2 → 28.1.33

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

@@ -448,6 +448,7 @@ function measureTextElement(text, font) {
     var metrics = context.measureText(text);
     var width = metrics.width;
     var height = parseFloat(font.size) || 16;
+    canvas = null;
     return new Size(width, height);
 }
 /**
@@ -978,14 +979,19 @@ function updateImageUrl(eventArgs, data) {
  * @param {HTMLElement | Element} markerTemplate - Specifies the marker template
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {number} layerIndex - Specifies the layer index
+ * @param {number} markerIndex - Specifies the marker index
  * @param {Element} markerCollection - Specifies the marker collection
  * @param {Element} layerElement - Specifies the layer element
  * @param {boolean} check - Specifies the boolean value
  * @param {boolean} zoomCheck - Specifies the boolean value
+ * @param {any} translatePoint - Specifies the data
+ * @param {boolean} allowInnerClusterSetting - Specifies the boolean value
  * @returns {boolean} -Returns boolean for cluster completion
  * @private
  */
-function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerCollection, layerElement, check, zoomCheck) {
+function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerIndex, markerCollection, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+layerElement, check, zoomCheck, translatePoint, allowInnerClusterSetting) {
     var bounds1;
     var bounds2;
     var colloideBounds = [];
@@ -994,7 +1000,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
     var tempY = 0;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var data;
-    var style = currentLayer.markerClusterSettings.labelStyle;
+    var markerSetting = currentLayer.markerSettings[markerIndex];
     var options;
     var textElement;
     var tempElement1;
@@ -1004,7 +1010,9 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
     var postionY = (15 / 4);
     var m = 0;
     var indexCollection = [];
-    var clusters = currentLayer.markerClusterSettings;
+    var clusters = !allowInnerClusterSetting && currentLayer.markerClusterSettings.allowClustering ?
+        currentLayer.markerClusterSettings : markerSetting.clusterSettings;
+    var style = clusters.labelStyle;
     var clusterGroup = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster' });
     var eventArg = {
         cancel: false, name: markerClusterRendering, fill: clusters.fill, height: clusters.height,
@@ -1020,9 +1028,13 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
     }
     var isClusteringCompleted = false;
     var currentZoomFactor = !maps.isTileMap ? maps.mapScaleValue : maps.tileZoomLevel;
+    var markerGroup = (markerSetting.clusterSettings.allowClustering
+        || (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1))
+        ? markerTemplate.querySelectorAll("[id*='LayerIndex_" + layerIndex + "_MarkerIndex_" + markerIndex + "']:not([id*='_Group'])")
+        : markerTemplate.childNodes;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     maps.trigger('markerClusterRendering', eventArg, function (clusterargs) {
-        Array.prototype.forEach.call(markerTemplate.childNodes, function (markerElement, o) {
+        Array.prototype.forEach.call(markerGroup, function (markerElement, o) {
             indexCollection = [];
             if (markerElement['style']['visibility'] !== 'hidden') {
                 tempElement = markerElement;
@@ -1032,19 +1044,19 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                     var list = (maps.markerModule.zoomedMarkerCluster.length > 0 && maps.markerModule.zoomedMarkerCluster[layerIndex] && maps.markerModule.zoomedMarkerCluster[layerIndex][o] && maps.markerModule.zoomedMarkerCluster[layerIndex][o].length > 0)
                         || (maps.markerModule.initialMarkerCluster.length > 0 && maps.markerModule.initialMarkerCluster[layerIndex] && maps.markerModule.initialMarkerCluster[layerIndex][o] && maps.markerModule.initialMarkerCluster[layerIndex][o].length > 0) ?
                         (maps.previousScale < currentZoomFactor ? maps.markerModule.zoomedMarkerCluster[layerIndex][o] : maps.markerModule.initialMarkerCluster[layerIndex][o]) : null;
-                    if (!isNullOrUndefined(list) && list.length !== 0) {
+                    if (!isNullOrUndefined(list) && list.length !== 0 && !markerSetting.clusterSettings.allowClustering) {
                         Array.prototype.forEach.call(list, function (currentIndex) {
                             if (o !== currentIndex) {
                                 var otherMarkerElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
-                                    + 0 + '_dataIndex_' + currentIndex);
-                                if (otherMarkerElement['style']['visibility'] !== 'hidden') {
+                                    + markerIndex + '_dataIndex_' + currentIndex);
+                                if (otherMarkerElement && otherMarkerElement['style']['visibility'] !== 'hidden') {
                                     markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, currentIndex);
                                 }
                             }
                         });
                     }
                     else {
-                        Array.prototype.forEach.call(markerTemplate.childNodes, function (otherMarkerElement, p) {
+                        Array.prototype.forEach.call(markerGroup, function (otherMarkerElement, p) {
                             if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
                                 markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, p);
                             }
@@ -1060,23 +1072,23 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                         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];
+                        var markerIndex_1 = parseInt(markerElement['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                        var markerSetting_1 = currentLayer.markerSettings[markerIndex_1];
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var markerData = markerSetting.dataSource[dataIndex];
+                        var markerData = markerSetting_1.dataSource[dataIndex];
                         var location_1;
-                        var longitude = (!isNullOrUndefined(markerSetting.longitudeValuePath)) ?
-                            Number(getValueFromObject(markerData, markerSetting.longitudeValuePath)) :
+                        var longitude = (!isNullOrUndefined(markerSetting_1.longitudeValuePath)) ?
+                            Number(getValueFromObject(markerData, markerSetting_1.longitudeValuePath)) :
                             !isNullOrUndefined(markerData['longitude']) ? parseFloat(markerData['longitude']) :
                                 !isNullOrUndefined(markerData['Longitude']) ? parseFloat(markerData['Longitude']) : 0;
-                        var latitude = (!isNullOrUndefined(markerSetting.latitudeValuePath)) ?
-                            Number(getValueFromObject(markerData, markerSetting.latitudeValuePath)) :
+                        var latitude = (!isNullOrUndefined(markerSetting_1.latitudeValuePath)) ?
+                            Number(getValueFromObject(markerData, markerSetting_1.latitudeValuePath)) :
                             !isNullOrUndefined(markerData['latitude']) ? parseFloat(markerData['latitude']) :
                                 !isNullOrUndefined(markerData['Latitude']) ? parseFloat(markerData['Latitude']) : 0;
                         if (!maps.isTileMap) {
                             location_1 = convertGeoToPoint(latitude, longitude, factor, currentLayer, maps);
                         }
-                        else if (maps.isTileMap && !maps.zoomSettings.enable) {
+                        else if (maps.isTileMap) {
                             location_1 = convertTileLatLongToPoint(new Point(longitude, latitude), maps.tileZoomLevel, maps.tileTranslatePoint, true);
                         }
                         markerElement['style']['visibility'] = 'hidden';
@@ -1101,12 +1113,16 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                         }
                         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);
-                        if (maps.isTileMap && !maps.zoomSettings.enable) {
+                        if (maps.isTileMap) {
                             tempX = location_1.x;
                             tempY = location_1.y;
                         }
-                        var clusterID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m);
-                        var labelID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m) + '_datalabel_' + m;
+                        else {
+                            tempX = (((location_1.x + ((!isNullOrUndefined(maps.translatePoint) && maps.translatePoint.x !== 0 && !maps.isResize) ? maps.translatePoint.x : translatePoint.location.x)) * (isNullOrUndefined(maps.scale) ? translatePoint.scale : maps.scale)) + markerSetting_1.offset.x);
+                            tempY = (((location_1.y + ((!isNullOrUndefined(maps.translatePoint) && maps.translatePoint.y !== 0 && !maps.isResize) ? maps.translatePoint.y : translatePoint.location.y)) * (isNullOrUndefined(maps.scale) ? translatePoint.scale : maps.scale)) + markerSetting_1.offset.y);
+                        }
+                        var clusterID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex_1 + '_dataIndex_' + dataIndex + '_cluster_' + (m);
+                        var labelID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex_1 + '_dataIndex_' + dataIndex + '_cluster_' + (m) + '_datalabel_' + m;
                         m++;
                         var ele = drawSymbols(shapeCustom['shape'], shapeCustom['imageUrl'], { x: 0, y: 0 }, clusterID, shapeCustom, markerCollection, maps);
                         ele.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
@@ -1119,8 +1135,16 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                         options = new TextOption(labelID, (0), postionY, 'middle', (colloideBounds.length + 1).toString(), '', '');
                         textElement = renderTextElement(options, style, style.color, markerCollection);
                         textElement.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
-                        clusterGroup.appendChild(textElement);
-                        clusterGroup.appendChild(ele);
+                        var eleMarkerIndex = parseFloat(ele.id.split('_MarkerIndex_')[1]);
+                        if ((markerSetting_1.clusterSettings.allowClustering && eleMarkerIndex === markerIndex_1) ||
+                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex_1)) {
+                            clusterGroup.appendChild(ele);
+                            clusterGroup.appendChild(textElement);
+                        }
+                        else {
+                            clusterGroup.appendChild(textElement);
+                            clusterGroup.appendChild(ele);
+                        }
                     }
                 }
                 colloideBounds = [];
@@ -1133,7 +1157,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
         layerElement.appendChild(clusterGroup);
         maps.svgObject.appendChild(layerElement);
         maps.element.appendChild(maps.svgObject);
-        if (clusters.allowDeepClustering) {
+        if (clusters.allowDeepClustering && !allowInnerClusterSetting) {
             Array.prototype.forEach.call(clusterGroup.childNodes, function (clusterElement, o) {
                 if (clusterElement['style']['visibility'] !== 'hidden') {
                     tempElement = clusterElement;
@@ -1149,7 +1173,16 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                                         clusterColloideBounds.push(tempElement1);
                                         clusterColloideBounds.push(clusterGroup.childNodes[p - 1]);
                                         clusterGroup.childNodes[p]['style']['visibility'] = 'hidden';
-                                        clusterGroup.childNodes[p - 1]['style']['visibility'] = 'hidden';
+                                        var eleMarkerIndex = !isNullOrUndefined(clusterGroup.childNodes[p + 1]) ?
+                                            parseFloat(clusterGroup.childNodes[p + 1].id.split('_MarkerIndex_')[1]) : null;
+                                        if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
+                                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
+                                            clusterGroup.childNodes[p + 1]['style']['visibility'] = 'hidden';
+                                        }
+                                        else {
+                                            eleMarkerIndex = parseFloat(clusterGroup.childNodes[p - 1].id.split('_MarkerIndex_')[1]);
+                                            clusterGroup.childNodes[p - 1]['style']['visibility'] = (eleMarkerIndex === markerIndex) ? 'hidden' : clusterGroup.childNodes[p - 1]['style']['visibility'];
+                                        }
                                         indexCollection.push(p);
                                     }
                                 }
@@ -1165,7 +1198,16 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                                 else {
                                     tempElement.textContent = tempElement.textContent + ',' + clusterColloideBounds[i].textContent;
                                 }
-                                clusterGroup.childNodes[o - 1].textContent = ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
+                                var eleMarkerIndex = parseFloat(clusterGroup.childNodes[o + 1].id.split('_MarkerIndex_')[1]);
+                                if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
+                                    (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
+                                    clusterGroup.childNodes[o + 1].textContent = ((+(clusterGroup.childNodes[o + 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
+                                }
+                                else {
+                                    eleMarkerIndex = parseFloat(clusterGroup.childNodes[o - 1].id.split('_MarkerIndex_')[1]);
+                                    clusterGroup.childNodes[o - 1].textContent = (eleMarkerIndex === markerIndex) ?
+                                        ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString() : clusterGroup.childNodes[o - 1].textContent;
+                                }
                                 i++;
                             }
                         }
@@ -1175,7 +1217,16 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             });
         }
         while (0 < clusterGroup.childNodes.length) {
-            markerCollection.insertBefore(clusterGroup.childNodes[0], markerCollection.firstChild);
+            var eleMarkerIndex = parseFloat(clusterGroup.childNodes[0].id.split('_MarkerIndex_')[1]);
+            if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
+                (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
+                markerCollection.insertBefore(clusterGroup.childNodes[0], null);
+            }
+            else {
+                if (eleMarkerIndex === markerIndex) {
+                    markerCollection.insertBefore(clusterGroup.childNodes[0], markerCollection.firstChild);
+                }
+            }
         }
         if (!check) {
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
@@ -1281,6 +1332,10 @@ function mergeSeparateCluster(sameMarkerData, maps) {
     for (var i = 0; i < markerDataLength; i++) {
         markerEle = marker.shape === 'Balloon' && isNullOrUndefined(marker.template) ? getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         markerEle['style']['visibility'] = 'hidden';
+        if (markerEle.id.indexOf('Group') > -1) {
+            var marker_1 = getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+            marker_1['style']['visibility'] = 'hidden';
+        }
     }
     removeElement(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine');
 }
@@ -1302,9 +1357,13 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     var getElementFunction = isDom ? getElement : markerElement.querySelector.bind(markerElement);
     var getQueryConnect = isDom ? '' : '#';
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
-    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
+    var layer = maps.layers[layerIndex];
+    var allowInnerClusterSetting = maps.markerModule.allowInnerClusterSetting(layer);
+    var cluster = !allowInnerClusterSetting && layer.markerClusterSettings.allowClustering ?
+        layer.markerClusterSettings : layer.markerSettings[markerIndex].clusterSettings;
+    var marker = layer.markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
+    var clusterEle = cluster.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
     var clusterEleLabel = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'hidden');
     clusterEleLabel.setAttribute('visibility', 'hidden');
@@ -1313,6 +1372,7 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     var width = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
     var centerX = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[0];
     var centerY = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[1].split(')')[0].trim();
+    width = (typeof width === 'string' ? parseFloat(width) : width);
     var radius = width + 5;
     var area = 2 * 3.14 * radius;
     var totalMarker = 0;
@@ -1355,14 +1415,20 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
             markerEle.setAttribute('transform', 'translate( ' + x1 + ' ' + y1 + ')');
         }
         markerEle['style']['visibility'] = 'visible';
+        if (markerEle.id.indexOf('Group') > -1) {
+            var marker_2 = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+            marker_2['style']['visibility'] = 'visible';
+        }
         newAngle += angle;
     }
-    var connectorLine = maps.layers[layerIndex].markerClusterSettings.connectorLineSettings;
+    var connectorLine = cluster.connectorLineSettings;
     var options = {
         d: path, id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_markerClusterConnectorLine', stroke: connectorLine.color,
         'fill-opacity': connectorLine.opacity, 'stroke-opacity': connectorLine.opacity, 'stroke-width': connectorLine.width
     };
     markerElement = isDom ? getElementFunction(maps.element.id + '_Markers_Group') : markerElement;
+    var layerElement = getElementFunction(maps.element.id + '_LayerIndex_' + layerIndex);
+    markerElement = layerElement.querySelector('#' + markerElement.id);
     var groupEle = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine' });
     groupEle.appendChild(maps.renderer.drawPath(options));
     if (marker.shape === 'Balloon') {
@@ -1442,8 +1508,9 @@ function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, mark
         for (var i = 0; i < markerElement.children.length; i++) {
             markerElement.children[i].style.pointerEvents = 'auto';
         }
-        markerElement.style.left = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x - maps.mapAreaRect.x + 'px';
-        markerElement.style.top = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y - maps.mapAreaRect.y + 'px';
+        markerElement.style.left = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x - (maps.isTileMap ? 0 : maps.mapAreaRect.x) + 'px';
+        markerElement.style.top = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y - (maps.isTileMap ? 0 : maps.mapAreaRect.y) + 'px';
+        markerElement.style.transform = 'translate(-50%, -50%)';
         markerTemplate.appendChild(markerElement);
     }
     return markerTemplate;
@@ -2511,22 +2578,6 @@ function fixInitialScaleForTile(map) {
 function getElementByID(id) {
     return document.getElementById(id);
 }
-/**
- * Function to get clientElement from id.
- *
- * @param {string} id - Specifies the id
- * @returns {Element} - Returns the element
- * @private
- */
-function getClientElement(id) {
-    var element = document.getElementById(id);
-    if (!isNullOrUndefined(element)) {
-        return element.getClientRects()[0];
-    }
-    else {
-        return null;
-    }
-}
 /**
  * Function to return the number value for the string value.
  *
@@ -2836,6 +2887,11 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius) {
                 element.setAttribute('transform', 'translate( ' + (centerX - (radius * height)) + ' ' + (centerY - (radius * height)) +
                     ' ) scale(' + height + ')');
             }
+            else {
+                if (maps.zoomModule.isPanningInProgress) {
+                    transform = element.getAttribute('transform');
+                }
+            }
         },
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         end: function (model) {
@@ -3769,6 +3825,12 @@ function getShapeColor(theme) {
             themePalette = ['#10B981', '#22D3EE', '#2DD4BF', '#4ADE80', '#8B5CF6',
                 '#E879F9', '#F472B6', '#F87171', '#F97316', '#FCD34D'];
             break;
+        case 'tailwind3':
+            themePalette = ['#2F4074', '#03B4B4', '#0D72DE', '#FF5733', '#D63384', '#F39C12', '#EF291F', '#91C822'];
+            break;
+        case 'tailwind3dark':
+            themePalette = ['#8029F1', '#1ABC9C', '#0D72DE', '#FF5733', '#D63384', '#F39C12', '#EF291F', '#91C822'];
+            break;
         case 'fluent':
             themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
                 '#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
@@ -4093,6 +4155,72 @@ function getThemeStyle(theme) {
                 zoomButtonRadius: 30
             };
             break;
+        case 'tailwind3':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#111827',
+                subTitleFontColor: '#111827',
+                legendTitleFontColor: '#111827',
+                legendTextColor: '#6B7280',
+                dataLabelFontColor: '#111827',
+                tooltipFontColor: '#F9FAFB',
+                tooltipFillColor: '#111827',
+                zoomFillColor: '#374151',
+                fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: '400',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Inter',
+                titleFontWeight: '500',
+                zoomSelectionColor: '#6B7280',
+                shapeFill: '#F3F4F6',
+                shapeBorderColor: '#E5E7EB',
+                rectangleZoomFillColor: '#818CF8',
+                rectangleZoomFillOpacity: 0.3,
+                rectangleZoomBorderColor: '#4F46E5',
+                legendBorderColor: '#E5E7EB',
+                legendBorderWidth: 0,
+                tooltipBorderColor: '#111827',
+                zoomButtonRadius: 32
+            };
+            break;
+        case 'tailwind3dark':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#FFFFFF',
+                subTitleFontColor: '#FFFFFF',
+                legendTitleFontColor: '#FFFFFF',
+                legendTextColor: '#9CA3AF',
+                dataLabelFontColor: '#FFFFFF',
+                tooltipFontColor: '#1F2937',
+                tooltipFillColor: '#F9FAFB',
+                zoomFillColor: '#D1D5DB',
+                fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: '400',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Inter',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#9CA3AF',
+                shapeFill: '#282F3C',
+                shapeBorderColor: '#282F3C',
+                rectangleZoomFillColor: '#3730A3',
+                rectangleZoomFillOpacity: 0.3,
+                rectangleZoomBorderColor: '#6366F1',
+                legendBorderColor: '#282F3C',
+                legendBorderWidth: 0,
+                tooltipBorderColor: '#F9FAFB',
+                zoomButtonRadius: 30
+            };
+            break;
         case 'bootstrap5':
             style = {
                 backgroundColor: 'transparent',
@@ -5468,6 +5596,12 @@ var MarkerBase = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Property('#FF471A')
     ], MarkerBase.prototype, "fill", void 0);
+    __decorate([
+        Property(null)
+    ], MarkerBase.prototype, "heightValuePath", void 0);
+    __decorate([
+        Property(null)
+    ], MarkerBase.prototype, "widthValuePath", void 0);
     __decorate([
         Property(10)
     ], MarkerBase.prototype, "height", void 0);
@@ -5531,6 +5665,9 @@ var MarkerBase = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Collection([], InitialMarkerSelectionSettings)
     ], MarkerBase.prototype, "initialMarkerSelection", void 0);
+    __decorate([
+        Complex({}, MarkerClusterSettings)
+    ], MarkerBase.prototype, "clusterSettings", void 0);
     return MarkerBase;
 }(ChildProperty));
 /**
@@ -5794,6 +5931,12 @@ var markerClusterClick = 'markerClusterClick';
  * @private
  */
 var markerMouseMove = 'markerMouseMove';
+/**
+ * Specifies the maps mouse move event name.
+ *
+ * @private
+ */
+var mouseMove = 'mouseMove';
 /**
  * Specifies the maps cluster mouse move event name.
  *
@@ -7730,6 +7873,8 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         _this.isTileMap = false;
         /**
          * Resize the map
+         *
+         * @private
          */
         _this.isResize = false;
         /**
@@ -8388,14 +8533,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                             -(Math.abs(elementOffset.top - layerOffset.top)) : Math.abs(elementOffset.top - layerOffset.top);
                     }
                     Array.prototype.forEach.call(templateGroupEle.childNodes, function (currentTemplate) {
-                        if (currentTemplate.id.indexOf('Marker') !== -1) {
-                            if (currentTemplate.style.visibility !== 'hidden') {
-                                var elementOffset_1 = getElementByID(currentTemplate.id).getBoundingClientRect();
-                                currentTemplate.style.left = parseFloat(currentTemplate.style.left) - (_this.isTileMap ? 0 : elementOffset_1.width / 2) + 'px';
-                                currentTemplate.style.top = parseFloat(currentTemplate.style.top) - (_this.isTileMap ? 0 : elementOffset_1.height / 2) + 'px';
-                            }
-                        }
-                        else {
+                        if (currentTemplate.id.indexOf('Marker') === -1) {
                             currentTemplate.style.left = parseFloat(currentTemplate.style.left) + offSetLetValue + 'px';
                             currentTemplate.style.top = parseFloat(currentTemplate.style.top) + offSetTopValue + 'px';
                             currentTemplate.style.transform = 'translate(-50%, -50%)';
@@ -9180,6 +9318,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         // if (target.id.indexOf('shapeIndex') !== -1 && !this.highlightSettings.enable) {
         //     triggerShapeEvent(target.id, this.highlightSettings, this, shapeHighlight);
         // }
+        this.mouseMoveEvent(e);
         if (this.markerModule) {
             this.markerModule.markerMove(e);
             this.markerModule.markerClusterMouseMove(e);
@@ -9193,6 +9332,34 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.onMouseMove(e);
         this.notify(Browser.touchMoveEvent, e);
     };
+    /**
+     * To check and trigger mouse move event on maps.
+     *
+     * @param {PointerEvent} e - Specifies the pointer event on maps.
+     * @returns {void}
+     * @private
+     */
+    Maps.prototype.mouseMoveEvent = function (e) {
+        var targetId = e.target.id;
+        var layerIndex;
+        var eventArgs;
+        if (this.isTileMap) {
+            var latLongValue = this.getTileGeoLocation(e['layerX'], e['layerY']);
+            eventArgs = {
+                x: e.clientX, y: e.clientY, latitude: latLongValue.latitude,
+                longitude: latLongValue.longitude, target: e.target
+            };
+        }
+        else {
+            layerIndex = targetId.indexOf('_LayerIndex_') > -1 ? parseInt(targetId.split('_LayerIndex_')[1].split('_')[0], 10) : this.baseLayerIndex;
+            var latLongValue = this.getGeoLocation(layerIndex, e.clientX, e.clientY);
+            eventArgs = {
+                x: e.clientX, y: e.clientY, latitude: latLongValue.latitude,
+                longitude: latLongValue.longitude, target: e.target
+            };
+        }
+        this.trigger(mouseMove, eventArgs);
+    };
     /**
      * This method is used to perform operations when mouse move event is performed on maps.
      *
@@ -9423,13 +9590,24 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      */
     Maps.prototype.addMarker = function (layerIndex, markerCollection) {
         if (!this.isDestroyed && !isNullOrUndefined(this.markerModule)) {
-            var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
-            if (markerCollection.length > 0 && layerEle) {
-                for (var _i = 0, markerCollection_1 = markerCollection; _i < markerCollection_1.length; _i++) {
-                    var newMarker = markerCollection_1[_i];
-                    this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+            if (!isNullOrUndefined(layerIndex) && !isNullOrUndefined(markerCollection)) {
+                var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
+                if (markerCollection.length > 0 && layerEle) {
+                    for (var _i = 0, markerCollection_1 = markerCollection; _i < markerCollection_1.length; _i++) {
+                        var newMarker = markerCollection_1[_i];
+                        this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+                    }
+                    this.markerModule.markerRender(this, layerEle, layerIndex, this.isTileMap ? this.tileZoomLevel : this.mapLayerPanel['currentFactor'], 'AddMarker');
+                    this.arrangeTemplate();
+                }
+            }
+            else {
+                for (var i = 0; i < this.layers.length; i++) {
+                    var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + i);
+                    this.markerModule.zoomedMarkerCluster[i] = [];
+                    this.markerModule.initialMarkerCluster[i] = [];
+                    this.markerModule.markerRender(this, layerEle, i, this.isTileMap ? this.tileZoomLevel : this.mapLayerPanel['currentFactor'], null);
                 }
-                this.markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
                 this.arrangeTemplate();
             }
         }
@@ -10424,6 +10602,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Event()
     ], Maps.prototype, "markerMouseMove", void 0);
+    __decorate$1([
+        Event()
+    ], Maps.prototype, "mouseMove", void 0);
     __decorate$1([
         Event()
     ], Maps.prototype, "dataLabelRendering", void 0);
@@ -10759,7 +10940,6 @@ var Bubble = /** @__PURE__ @class */ (function () {
 var Marker = /** @__PURE__ @class */ (function () {
     function Marker(maps) {
         this.maps = maps;
-        this.trackElements = [];
         this.sameMarkerData = [];
         this.initialMarkerCluster = [];
         this.zoomedMarkerCluster = [];
@@ -10777,23 +10957,43 @@ var Marker = /** @__PURE__ @class */ (function () {
         var templateFn;
         var markerCount = 0;
         var nullCount = 0;
+        var isMarkerTemplateNewCreation = false;
         var markerTemplateCount = 0;
         maps.translateType = 'marker';
         var currentLayer = maps.layersCollection[layerIndex];
-        this.markerSVGObject = maps.renderer.createGroup({
-            id: maps.element.id + '_Markers_Group',
-            class: 'GroupElement'
-        });
+        var markerElement = layerElement.querySelectorAll('#' + maps.element.id + '_Markers_Group');
+        if (markerElement.length > 0) {
+            this.markerSVGObject = markerElement[0];
+            this.markerSVGObject.innerHTML = '';
+            isMarkerTemplateNewCreation = true;
+        }
+        else {
+            this.markerSVGObject = maps.renderer.createGroup({
+                id: maps.element.id + '_Markers_Group',
+                class: 'GroupElement'
+            });
+        }
         this.markerSVGObject.style.pointerEvents = 'auto';
-        var markerTemplateEle = createElement('div', {
-            id: maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
-            className: maps.element.id + '_template'
-        });
-        markerTemplateEle.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
-            'top:' + maps.mapAreaRect.y + 'px;' +
-            'left:' + maps.mapAreaRect.x + 'px;' +
-            'height:' + maps.mapAreaRect.height + 'px;' +
-            'width:' + maps.mapAreaRect.width + 'px;';
+        var secondaryElement = getElementByID(maps.element.id + '_Secondary_Element');
+        var markerTemplateElement = secondaryElement.querySelectorAll('#' + maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group');
+        var markerTemplateEle;
+        if (markerTemplateElement && markerTemplateElement.length > 0 && markerTemplateElement[0].childElementCount > 0) {
+            markerTemplateEle = getElementByID(maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group');
+            markerTemplateEle.innerHTML = '';
+            isMarkerTemplateNewCreation = true;
+        }
+        else {
+            markerTemplateEle = createElement('div', {
+                id: maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
+                className: maps.element.id + '_template'
+            });
+            markerTemplateEle.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
+                'top:' + maps.mapAreaRect.y + 'px;' +
+                'left:' + maps.mapAreaRect.x + 'px;' +
+                'height:' + maps.mapAreaRect.height + 'px;' +
+                'width:' + maps.mapAreaRect.width + 'px;';
+        }
+        var allowInnerClusterSetting = this.allowInnerClusterSetting(currentLayer);
         var allowAnimation = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var translatePoint;
@@ -10805,13 +11005,20 @@ var Marker = /** @__PURE__ @class */ (function () {
         Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSettings, markerIndex) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
+            markerCount = 0;
             if (!isNullOrUndefined(markerSettings.dataSource)) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 Array.prototype.forEach.call(markerData, function (data, dataIndex) {
                     maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                     var eventArgs = {
-                        cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
-                        width: markerSettings.width, imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
+                        cancel: false, name: markerRendering, fill: markerSettings.fill,
+                        height: (!isNullOrUndefined(markerSettings.heightValuePath) &&
+                            !isNullOrUndefined(data[markerSettings.heightValuePath]) ?
+                            data[markerSettings.heightValuePath] : markerSettings.height),
+                        width: (!isNullOrUndefined(markerSettings.widthValuePath) &&
+                            !isNullOrUndefined(data[markerSettings.widthValuePath]) ?
+                            data[markerSettings.widthValuePath] : markerSettings.width),
+                        imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
                         template: markerSettings.template, data: data, maps: maps, marker: markerSettings,
                         border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
                         shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
@@ -10837,12 +11044,14 @@ var Marker = /** @__PURE__ @class */ (function () {
                             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))) {
+                                isMarkerTemplateNewCreation = false;
                                 markerTemplateCount++;
                                 markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, maps);
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 maps.renderReactTemplates();
                             }
                             else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                                isMarkerTemplateNewCreation = true;
                                 markerCount++;
                                 marker(eventArgs, markerSettings, markerData, dataIndex, location_1, transPoint, markerID, offset, scale, maps, _this.markerSVGObject);
                             }
@@ -10854,32 +11063,55 @@ var Marker = /** @__PURE__ @class */ (function () {
                             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) {
-                                maps.svgObject.appendChild(_this.markerSVGObject);
-                                maps.element.appendChild(maps.svgObject);
+                        var markerGroup = (markerSettings.clusterSettings.allowClustering ||
+                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1))
+                            ? _this.markerSVGObject.querySelectorAll("[id*='LayerIndex_" + layerIndex + "_MarkerIndex_" + markerIndex + "']:not([id*='_Group'])")
+                            : _this.markerSVGObject.childNodes;
+                        var templateCount = _this.markerSVGObject.childNodes === markerGroup ? markerTemplateCount : 0;
+                        if (markerGroup.length === (markerDataLength - templateCount - nullCount) && (type !== 'Template')) {
+                            if (markerElement.length === 0) {
+                                layerElement.appendChild(_this.markerSVGObject);
+                            }
+                            if (markerSettings.clusterSettings.allowClustering || !allowInnerClusterSetting &&
+                                currentLayer.markerClusterSettings.allowClustering) {
+                                if (markerElement.length === 0) {
+                                    maps.svgObject.appendChild(_this.markerSVGObject);
+                                    maps.element.appendChild(maps.svgObject);
+                                }
                                 if ((currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData))
                                     && maps.zoomSettings.enable) {
-                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
-                                    layerElement.appendChild(_this.markerSVGObject);
+                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, markerIndex, _this.markerSVGObject, layerElement, true, false, null, allowInnerClusterSetting);
+                                    if (markerElement.length === 0) {
+                                        layerElement.appendChild(_this.markerSVGObject);
+                                    }
                                 }
                                 else {
-                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
+                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, markerIndex, _this.markerSVGObject, layerElement, true, false, translatePoint, allowInnerClusterSetting);
                                 }
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 maps.renderReactTemplates();
                             }
                         }
-                        if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
-                            getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
+                        var markerTemplateGroup = (markerSettings.clusterSettings.allowClustering ||
+                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1))
+                            ? markerTemplateEle.querySelectorAll("[id*='LayerIndex_" + layerIndex + "_MarkerIndex_" + markerIndex + "']:not([id*='_Group'])")
+                            : markerTemplateEle.childNodes;
+                        if (markerTemplateGroup.length === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
+                            if (!isMarkerTemplateNewCreation) {
+                                getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
+                            }
                             if (maps.checkInitialRender) {
-                                if (currentLayer.markerClusterSettings.allowClustering && !isMarkersClustered) {
-                                    clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, _this.markerSVGObject, layerElement, false, false);
+                                if ((markerSettings.clusterSettings.allowClustering || !allowInnerClusterSetting &&
+                                    currentLayer.markerClusterSettings.allowClustering) && !isMarkersClustered) {
+                                    clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, markerIndex, _this.markerSVGObject, layerElement, false, false, translatePoint, allowInnerClusterSetting);
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     maps.renderReactTemplates();
                                 }
                             }
+                            if (currentLayer.markerClusterSettings.allowClustering && markerElement.length > 0) {
+                                var layerCollectionEle = getElementByID(maps.element.id + '_Layer_Collections');
+                                layerCollectionEle.appendChild(layerElement);
+                            }
                         }
                     });
                 });
@@ -11160,16 +11392,18 @@ var Marker = /** @__PURE__ @class */ (function () {
         var markCollection = [];
         var clusterCollection = [];
         var marker;
-        this.maps.markerClusterExpand = layer.markerClusterSettings.allowClusterExpand;
         if (target.indexOf('_MarkerIndex_') > -1) {
             var markerIndex = parseInt(id[1].split('_MarkerIndex_')[1].split('_')[0], 10);
             var dataIndex = parseInt(id[1].split('_dataIndex_')[1].split('_')[0], 10);
             marker = layer.markerSettings[markerIndex];
+            var allowInnerClusterSetting = this.allowInnerClusterSetting(layer);
+            this.maps.markerClusterExpand = !allowInnerClusterSetting && layer.markerClusterSettings.allowClustering ?
+                layer.markerClusterSettings.allowClusterExpand : marker.clusterSettings.allowClusterExpand;
             if (!isNaN(markerIndex)) {
                 data = marker.dataSource[dataIndex];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var collection_1 = [];
-                if (!marker.template && (target.indexOf('_cluster_') > -1) && (this.maps.layers[index].markerClusterSettings.allowClusterExpand)) {
+                if (!marker.template && (target.indexOf('_cluster_') > -1) && this.maps.markerClusterExpand) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     Array.prototype.forEach.call(marker.dataSource, function (location, index) {
                         if (location['latitude'] === data['latitude'] && location['longitude'] === data['longitude']) {
@@ -11179,8 +11413,10 @@ var Marker = /** @__PURE__ @class */ (function () {
                 }
                 if ((target.indexOf('_cluster_') > -1)) {
                     var isClusterSame = false;
-                    var clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? layer.markerClusterSettings.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : layer.markerClusterSettings.shape === 'Balloon' ? target + '_Group' : target);
-                    var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
+                    var cluster = !allowInnerClusterSetting && layer.markerClusterSettings.allowClustering ?
+                        layer.markerClusterSettings : layer.markerSettings[markerIndex].clusterSettings;
+                    var clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? cluster.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : cluster.shape === 'Balloon' ? target + '_Group' : target);
+                    var indexes = cluster.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
                     collection_1 = [];
                     for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
                         var i = indexes_1[_i];
@@ -11250,6 +11486,23 @@ var Marker = /** @__PURE__ @class */ (function () {
         };
         this.maps.trigger(markerClusterMouseMove, eventArgs);
     };
+    /**
+     * This method is used to return whether the clustering is enabled in any marker settings.
+     *
+     * @param {LayerSettings} layer - Specifies the layer settings
+     * @returns {boolean}  - Specifies whether the clustering is enabled in any marker settings.
+     * @private
+     */
+    Marker.prototype.allowInnerClusterSetting = function (layer) {
+        var allowInnerClusterSetting = false;
+        for (var markerIndex = 0; markerIndex < layer.markerSettings.length; markerIndex++) {
+            if (layer.markerSettings[markerIndex].clusterSettings.allowClustering) {
+                allowInnerClusterSetting = true;
+                break;
+            }
+        }
+        return allowInnerClusterSetting;
+    };
     /**
      * @private
      * @returns {void}
@@ -11276,7 +11529,6 @@ var Marker = /** @__PURE__ @class */ (function () {
      */
     Marker.prototype.destroy = function () {
         this.maps = null;
-        this.trackElements = [];
         this.markerSVGObject = null;
         this.sameMarkerData = [];
         this.initialMarkerCluster = [];
@@ -12146,6 +12398,13 @@ var Legend = /** @__PURE__ @class */ (function () {
                     else {
                         legendText = '';
                     }
+                    if (legend.position === 'Left' || legend.position === 'Right') {
+                        for (var i_1 = 0; i_1 < this.legendCollection.length; i_1++) {
+                            var legendItem = this.legendCollection[i_1];
+                            var legendTextSize = measureText(legendItem['text'], legend.textStyle);
+                            this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
+                        }
+                    }
                     maxTextHeight = Math.max(maxTextHeight, itemTextSize.height);
                     maxTextWidth = Math.max(maxTextWidth, itemTextSize.width);
                     if (itemTextSize.width > 0 && itemTextSize.height > 0) {
@@ -12155,26 +12414,26 @@ var Legend = /** @__PURE__ @class */ (function () {
                                 (startY - textPadding_1);
                         }
                         else {
-                            textX_1 = (position_1 === 'After') ? startX - (itemTextSize.width / 2) - textPadding_1
-                                : (startX + rectWidth + itemTextSize.width / 2) + textPadding_1;
+                            textX_1 = (position_1 === 'After') ? startX - (this.textMaxWidth / 2) - textPadding_1
+                                : (startX + rectWidth + this.textMaxWidth / 2) + textPadding_1;
                             textY_1 = startY + (rectHeight / 2) + (itemTextSize.height / 4);
                         }
                     }
                     if (i === 0) {
                         itemStartX = (arrangement === 'Horizontal') ? startX : (position_1 === 'After') ?
-                            textX_1 - (itemTextSize.width / 2) : startX;
+                            textX_1 - (this.textMaxWidth / 2) : startX;
                         itemStartY = (arrangement === 'Horizontal') ? (position_1 === 'After') ? startY :
                             textY_1 - (itemTextSize.height / 2) : startY;
                         if (this.legendCollection.length === 1) {
                             legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
-                                (rectWidth + maxTextWidth + textPadding_1);
+                                (rectWidth + this.textMaxWidth + textPadding_1);
                             legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
                                 Math.abs((startY + rectHeight) - itemStartY);
                         }
                     }
                     else if (i === this.legendCollection.length - 1) {
                         legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
-                            (rectWidth + maxTextWidth + textPadding_1);
+                            (rectWidth + this.textMaxWidth + textPadding_1);
                         legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
                             Math.abs((startY + rectHeight) - itemStartY);
                     }
@@ -12186,8 +12445,8 @@ var Legend = /** @__PURE__ @class */ (function () {
                         shapeBorder: this.legendCollection[i]['shapeBorder']
                     });
                 }
-                if (this.legendCollection.length === 1 && !(map.theme === 'Fluent2HighContrast' && legend.position === 'Bottom')) {
-                    legendHeight = rectHeight;
+                if (this.legendCollection.length === 1) {
+                    legendHeight = maxTextHeight + textPadding_1;
                     legendWidth = rectWidth;
                 }
                 this.legendItemRect = { x: itemStartX, y: itemStartY, width: legendWidth, height: legendHeight };
@@ -12697,8 +12956,8 @@ var Legend = /** @__PURE__ @class */ (function () {
                             if (shapeElement !== null) {
                                 var shapeMatch = true;
                                 if (this.maps.legendSelectionCollection !== null) {
-                                    for (var i_1 = 0; i_1 < this.maps.legendSelectionCollection.length; i_1++) {
-                                        if (this.maps.legendSelectionCollection[i_1]['legendElement'] === targetElement) {
+                                    for (var i_2 = 0; i_2 < this.maps.legendSelectionCollection.length; i_2++) {
+                                        if (this.maps.legendSelectionCollection[i_2]['legendElement'] === targetElement) {
                                             shapeMatch = false;
                                             break;
                                         }
@@ -13254,18 +13513,7 @@ var Legend = /** @__PURE__ @class */ (function () {
         var spacing = 10;
         var trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
         var textSize = measureText(trimTitle, textStyle);
-        var sameTextWidth = false;
-        for (var i = 0; i < this.legendRenderingCollections.length; i++) {
-            if (this.legendRenderingCollections[i].textWidth !== this.legendRenderingCollections[0].textWidth) {
-                sameTextWidth = false;
-                break;
-            }
-            else {
-                sameTextWidth = true;
-            }
-        }
-        this.legendBorderRect = new Rect((map.theme === 'Fluent2HighContrast' && !sameTextWidth && (legend.position === 'Left' || legend.position === 'Right') && legend.mode === 'Interactive')
-            ? (this.legendItemRect.x - (spacing * 3)) : (this.legendItemRect.x - spacing), (this.legendItemRect.y - spacing - textSize.height), (this.legendItemRect.width) + (spacing * 2), (this.legendItemRect.height) + (spacing * 2) + textSize.height +
+        this.legendBorderRect = new Rect((this.legendItemRect.x - spacing), (this.legendItemRect.y - spacing - textSize.height), (this.legendItemRect.width) + (spacing * 2), (this.legendItemRect.height) + (spacing * 2) + textSize.height +
             (legend.mode === 'Interactive' ? 0 : (this.page !== 0) ? spacing : 0));
         var legendBorder = {
             color: legend.border.color || this.maps.themeStyle.legendBorderColor, opacity: legend.border.opacity,
@@ -14198,6 +14446,12 @@ var Legend = /** @__PURE__ @class */ (function () {
         this.maps.off(Browser.touchMoveEvent, this.interactiveHandler);
         this.maps.off(Browser.touchEndEvent, this.interactiveHandler);
         this.maps.off(click, this.legendClick);
+        var pagingElement = document.getElementById(this.maps.element.id + '_Legend_Paging_Group');
+        if (pagingElement) {
+            for (var i = 0; i < pagingElement.childElementCount; i++) {
+                EventHandler.remove(pagingElement.childNodes[i], Browser.touchStartEvent, this.changeNextPage);
+            }
+        }
     };
     Legend.prototype.getLegendData = function (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15407,6 +15661,8 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
     MapsTooltip.prototype.destroy = function () {
         if (!isNullOrUndefined(this.svgTooltip)) {
             this.svgTooltip.destroy();
+            this.svgTooltip.controlInstance = null;
+            removeElement(this.maps.element.id + '_mapsTooltip');
         }
         this.svgTooltip = null;
         this.maps = null;
@@ -15725,6 +15981,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var zoomCalculationFactor = this.pinchFactor;
         var isZoomCancelled;
         var prevTilePoint = map.tileTranslatePoint;
+        this.maps.mergeCluster();
         if (!map.isTileMap) {
             var availSize = map.mapAreaRect;
             map.isMarkerZoomCompleted = false;
@@ -15924,6 +16181,17 @@ var Zoom = /** @__PURE__ @class */ (function () {
         if (document.getElementById(maps.element.id + '_mapsTooltip')) {
             removeElement(maps.element.id + '_mapsTooltip');
         }
+        if (maps.isTileMap) {
+            var element = document.getElementById(maps.element.id + '_svg');
+            if (element) {
+                for (var k = 0; k < maps.layers.length; k++) {
+                    var layerElement = element.querySelector('#' + maps.element.id + '_LayerIndex_' + k);
+                    if (layerElement) {
+                        element.removeChild(layerElement);
+                    }
+                }
+            }
+        }
         if (this.layerCollectionEle) {
             var _loop_1 = function (i) {
                 var layerElement = this_1.layerCollectionEle.childNodes[i];
@@ -15933,6 +16201,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     this_1.currentLayer = maps.layersCollection[this_1.index];
                     var factor_1 = maps.mapLayerPanel.calculateFactor(this_1.currentLayer);
                     var elementCount = layerElement.childElementCount;
+                    var templateElement = document.getElementById(maps.element.id + '_LayerIndex_' + this_1.index + '_Markers_Template_Group');
                     var _loop_2 = function (j) {
                         var currentEle = layerElement.childNodes[j];
                         if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
@@ -15966,17 +16235,16 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if ((!this_1.isPanModeEnabled || !isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
-                                this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement);
+                            if ((!this_1.isPanModeEnabled || !isPanning) && (!isNullOrUndefined(currentEle.childNodes[0]) || !isNullOrUndefined(templateElement.childNodes[0]))) {
+                                var processElement = (!isNullOrUndefined(currentEle.childNodes[0]) ? currentEle.childNodes[0] : templateElement.childNodes[0]);
+                                this_1.markerTranslates(processElement, factor_1, x, y, scale, 'Marker', layerElement);
                             }
                             currentEle = layerElement.childNodes[j];
-                            var markerAnimation_1;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
                                     _this.markerTranslate(childNode, factor_1, x, y, scale, 'Marker', animate);
                                     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];
@@ -15990,13 +16258,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         }
                                     }
                                     if (((_this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && _this.currentLayer.type === 'SubLayer')) && !_this.isPanModeEnabled) {
-                                        if (maps.isTileMap) {
-                                            var groupElement = document.querySelector('.GroupElement');
-                                            if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation_1) {
-                                                groupElement.style.display = 'none';
-                                            }
-                                        }
-                                        else {
+                                        if (!maps.isTileMap) {
                                             markerStyle = 'visibility:hidden';
                                             currentEle.style.cssText = markerStyle;
                                         }
@@ -16144,92 +16406,111 @@ var Zoom = /** @__PURE__ @class */ (function () {
             removeElement(markerTemplateElements.id);
         }
         var currentLayers = this.maps.layersCollection[layerIndex];
+        var allowInnerClusterSetting = this.maps.markerModule.allowInnerClusterSetting(currentLayers);
         Array.prototype.forEach.call(currentLayers.markerSettings, function (markerSettings, markerIndex) {
+            markerTemplateCounts = 0;
+            markerCounts = 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerDatas = markerSettings.dataSource;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            Array.prototype.forEach.call(markerDatas, function (data, dataIndex) {
-                _this.maps.markerNullCount = markerIndex >= 0 && dataIndex === 0 ? 0 : _this.maps.markerNullCount;
-                var eventArgs = {
-                    template: markerSettings.template, data: data, maps: _this.maps, marker: markerSettings,
-                    cancel: false, name: markerRendering, fill: markerSettings.fill, colorValuePath: markerSettings.colorValuePath,
-                    shapeValuePath: markerSettings.shapeValuePath, height: markerSettings.height,
-                    width: markerSettings.width, imageUrl: markerSettings.imageUrl, imageUrlValuePath: markerSettings.imageUrlValuePath, shape: markerSettings.shape,
-                    border: markerSettings.border
-                };
-                eventArgs = markerShapeChoose(eventArgs, data);
-                eventArgs = markerColorChoose(eventArgs, data);
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                _this.maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
-                    if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
-                        eventArgs = markerShapeChoose(eventArgs, data);
-                    }
-                    if (markerSettings.colorValuePath !== eventArgs.colorValuePath) {
-                        eventArgs = markerColorChoose(eventArgs, data);
-                    }
-                    var lati = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
-                    var long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
-                    var offset = markerSettings.offset;
-                    if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
-                        var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
-                            + markerIndex + '_dataIndex_' + dataIndex;
-                        var location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), _this.maps.tileZoomLevel, _this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, _this.maps);
-                        var transPoint = { x: x, y: y };
-                        if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
-                            markerTemplateCounts++;
-                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateElements, location_1, transPoint, scale, offset, _this.maps);
+            if (!isNullOrUndefined(markerDatas)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                Array.prototype.forEach.call(markerDatas, function (data, dataIndex) {
+                    _this.maps.markerNullCount = markerIndex >= 0 && dataIndex === 0 ? 0 : _this.maps.markerNullCount;
+                    var eventArgs = {
+                        template: markerSettings.template, data: data, maps: _this.maps, marker: markerSettings,
+                        cancel: false, name: markerRendering, fill: markerSettings.fill, colorValuePath: markerSettings.colorValuePath,
+                        shapeValuePath: markerSettings.shapeValuePath,
+                        height: !isNullOrUndefined(markerSettings.heightValuePath) && !isNullOrUndefined(data[markerSettings.heightValuePath])
+                            ? data[markerSettings.heightValuePath] : markerSettings.height,
+                        width: !isNullOrUndefined(markerSettings.widthValuePath) && !isNullOrUndefined(data[markerSettings.widthValuePath])
+                            ? data[markerSettings.widthValuePath] : markerSettings.width,
+                        imageUrl: markerSettings.imageUrl, imageUrlValuePath: markerSettings.imageUrlValuePath, shape: markerSettings.shape,
+                        border: markerSettings.border
+                    };
+                    eventArgs = markerShapeChoose(eventArgs, data);
+                    eventArgs = markerColorChoose(eventArgs, data);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    _this.maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
+                        if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
+                            eventArgs = markerShapeChoose(eventArgs, data);
                         }
-                        else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
-                            markerCounts++;
-                            marker(eventArgs, markerSettings, markerDatas, dataIndex, location_1, transPoint, markerID, offset, scale, _this.maps, markerSVGObject);
+                        if (markerSettings.colorValuePath !== eventArgs.colorValuePath) {
+                            eventArgs = markerColorChoose(eventArgs, data);
                         }
-                    }
-                    nullCount += (!isNaN(lati) && !isNaN(long)) ? 0 : 1;
-                    markerTemplateCounts += (eventArgs.cancel) ? 1 : 0;
-                    markerCounts += (eventArgs.cancel) ? 1 : 0;
-                    _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');
-                            var polygonElement = document.getElementById(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
-                            if (!isNullOrUndefined(polygonsElement)) {
-                                polygonsElement.insertAdjacentElement('afterend', markerSVGObject);
+                        var lati = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
+                            parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
+                        var long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
+                            parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
+                        var offset = markerSettings.offset;
+                        if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
+                            var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                                + markerIndex + '_dataIndex_' + dataIndex;
+                            var location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), _this.maps.tileZoomLevel, _this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, _this.maps);
+                            var transPoint = { x: x, y: y };
+                            if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                                markerTemplateCounts++;
+                                markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateElements, location_1, transPoint, scale, offset, _this.maps);
                             }
-                            else {
-                                if (!isNullOrUndefined(polygonElement)) {
-                                    polygonElement.insertAdjacentElement('afterend', markerSVGObject);
+                            else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                                markerCounts++;
+                                marker(eventArgs, markerSettings, markerDatas, dataIndex, location_1, transPoint, markerID, offset, scale, _this.maps, markerSVGObject);
+                            }
+                        }
+                        nullCount += (!isNaN(lati) && !isNaN(long)) ? 0 : 1;
+                        markerTemplateCounts += (eventArgs.cancel) ? 1 : 0;
+                        markerCounts += (eventArgs.cancel) ? 1 : 0;
+                        _this.maps.markerNullCount = (isNullOrUndefined(lati) || isNullOrUndefined(long))
+                            ? _this.maps.markerNullCount + 1 : _this.maps.markerNullCount;
+                        var markerDataLength = markerDatas.length - _this.maps.markerNullCount;
+                        var isMarkersClustered = false;
+                        var markerGroup = (markerSettings.clusterSettings.allowClustering
+                            || (currentLayers.markerClusterSettings.allowClustering && currentLayers.markerSettings.length > 1))
+                            ? markerSVGObject.querySelectorAll("[id*='LayerIndex_" + layerIndex + "_MarkerIndex_" + markerIndex + "']:not([id*='_Group'])")
+                            : markerSVGObject.childNodes;
+                        if (markerGroup.length === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
+                            if (_this.maps.isTileMap) {
+                                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 {
-                                    layerElement.insertBefore(markerSVGObject, layerElement.firstElementChild);
+                                    if (!isNullOrUndefined(polygonElement)) {
+                                        polygonElement.insertAdjacentElement('afterend', markerSVGObject);
+                                    }
+                                    else {
+                                        layerElement.insertBefore(markerSVGObject, layerElement.firstElementChild);
+                                    }
                                 }
                             }
+                            else {
+                                layerElement.appendChild(markerSVGObject);
+                            }
+                            if (currentLayers.markerSettings[markerIndex].clusterSettings.allowClustering ||
+                                !allowInnerClusterSetting && currentLayers.markerClusterSettings.allowClustering) {
+                                _this.maps.svgObject.appendChild(markerSVGObject);
+                                _this.maps.element.appendChild(_this.maps.svgObject);
+                                isMarkersClustered = clusterTemplate(currentLayers, markerSVGObject, _this.maps, layerIndex, markerIndex, markerSVGObject, layerElement, true, true, null, allowInnerClusterSetting);
+                            }
                         }
-                        else {
-                            layerElement.appendChild(markerSVGObject);
-                        }
-                        if (currentLayers.markerClusterSettings.allowClustering) {
-                            _this.maps.svgObject.appendChild(markerSVGObject);
-                            _this.maps.element.appendChild(_this.maps.svgObject);
-                            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 && !isMarkersClustered) {
-                                clusterTemplate(currentLayers, markerTemplateElements, _this.maps, layerIndex, markerSVGObject, layerElement, false, true);
+                        var markerTemplateGroup = (markerSettings.clusterSettings.allowClustering
+                            || (currentLayers.markerClusterSettings.allowClustering && currentLayers.markerSettings.length > 1))
+                            ? markerTemplateElements.querySelectorAll("[id*='LayerIndex_" + layerIndex + "_MarkerIndex_" + markerIndex + "']:not([id*='_Group'])")
+                            : markerTemplateElements.childNodes;
+                        if (markerTemplateGroup.length === (markerDataLength - markerCounts - nullCount) && getElementByID(_this.maps.element.id + '_Secondary_Element')) {
+                            getElementByID(_this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateElements);
+                            if (scale >= 1) {
+                                if ((markerSettings.clusterSettings.allowClustering || !allowInnerClusterSetting &&
+                                    currentLayers.markerClusterSettings.allowClustering) && !isMarkersClustered) {
+                                    clusterTemplate(currentLayers, markerTemplateElements, _this.maps, layerIndex, markerIndex, markerSVGObject, layerElement, false, true, null, allowInnerClusterSetting);
+                                }
                             }
                         }
-                    }
+                    });
                 });
-            });
+            }
         });
     };
     /**
@@ -16425,6 +16706,18 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     *
+     * @param {Element | HTMLElement} element - Specifies the marker element.
+     * @param {number} factor - Specifies scale factor.
+     * @param {number} x - Specifies the x location of the marker element.
+     * @param {number} y - Specifies the y location of the marker element.
+     * @param {number} scale - Specifies scale factor.
+     * @param {number} type - Specifies the type of the marker processing.
+     * @param {number} animate - Specifies whether the animation is enabled or not.
+     * @returns {void}
+     * @private
+     */
     Zoom.prototype.markerTranslate = function (element, factor, x, y, scale, type, animate) {
         if (animate === void 0) { animate = false; }
         var layerIndex = parseInt(element.id.split('_LayerIndex_')[1].split('_')[0], 10);
@@ -16445,9 +16738,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var location_2 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(lng, lat), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, layer, this.maps);
             if (this.maps.isTileMap) {
                 if (type === 'Template') {
-                    var templateOffset = element.getBoundingClientRect();
-                    element.style.left = ((location_2.x - (templateOffset.width / 2)) + marker.offset.x) + 'px';
-                    element.style.top = ((location_2.y - (templateOffset.height / 2)) + marker.offset.y) + 'px';
+                    element.style.left = (location_2.x + marker.offset.x) + 'px';
+                    element.style.top = (location_2.y + marker.offset.y) + 'px';
                 }
                 else {
                     location_2.x += marker.offset.x;
@@ -16467,9 +16759,8 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         element.style.transform = 'translate(-50%, -50%)';
                     }
                     else {
-                        var elementOffset = element.getBoundingClientRect();
-                        element.style.left = ((location_2.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
-                        element.style.top = ((location_2.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
+                        element.style.left = ((location_2.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x + 'px';
+                        element.style.top = ((location_2.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y + 'px';
                     }
                 }
                 else {
@@ -16623,6 +16914,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var size = map.mapAreaRect;
         var translatePoint = map.previousPoint = map.translatePoint;
         var prevTilePoint = map.tileTranslatePoint;
+        this.maps.mergeCluster();
         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;
@@ -17300,6 +17592,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             var delta = 1;
             var staticMaxZoomLevel = map.zoomSettings.maxZoom;
             var value = (map.isTileMap) ? prevLevel : prevScale;
+            this.maps.mergeCluster();
             if (((position.x > map.mapAreaRect.x) && (position.x < (map.mapAreaRect.x + map.mapAreaRect.width))) &&
                 (position.y > map.mapAreaRect.y) && position.y < (map.mapAreaRect.y + map.mapAreaRect.height)) {
                 e.preventDefault();
@@ -17651,6 +17944,16 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.maps.off(Browser.touchStartEvent, this.mouseDownHandler);
         this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
         EventHandler.remove(this.maps.element, this.cancelEvent, this.mouseCancelHandler);
+        var toolbarElement = document.getElementById(this.maps.element.id + '_Zooming_KitCollection');
+        if (toolbarElement) {
+            for (var i = 0; i < toolbarElement.childNodes.length; i++) {
+                if (toolbarElement.childNodes[i].tagName === 'g') {
+                    EventHandler.add(toolbarElement.childNodes[i], Browser.touchStartEvent, this.performToolBarAction);
+                    EventHandler.add(toolbarElement.childNodes[i], 'mouseover', this.showTooltip);
+                    EventHandler.add(toolbarElement.childNodes[i], 'mouseout', this.removeTooltip);
+                }
+            }
+        }
     };
     /**
      * Get module name.
@@ -17685,7 +17988,6 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.layerCollectionEle = null;
         this.currentLayer = null;
         this.pinchDistance = null;
-        this.maps = null;
     };
     return Zoom;
 }());
@@ -17743,12 +18045,12 @@ var Print = /** @__PURE__ @class */ (function () {
             backgroundElement = backgroundElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 var backgroundColor = backgroundElement.getAttribute('fill');
-                if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' ||
+                if ((maps.theme === 'Tailwind' || maps.theme === 'Tailwind3' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' ||
                     maps.theme === 'Fluent2')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
-                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Tailwind3Dark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
                     maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
@@ -17853,11 +18155,11 @@ var ImageExport = /** @__PURE__ @class */ (function () {
             var svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
             var backgroundElement = svgObject.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Tailwind3' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 svgObject.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
-            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Tailwind3Dark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
                 maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 svgObject.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
@@ -17913,8 +18215,8 @@ var ImageExport = /** @__PURE__ @class */ (function () {
                         var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                         var exportTileImg = new Image();
                         exportTileImg.crossOrigin = 'Anonymous';
-                        var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
-                            (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
+                        var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Tailwind3' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
+                            (maps.theme === 'TailwindDark' || maps.theme === 'Tailwind3Dark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
                         ctxt_1.fillStyle = background;
                         ctxt_1.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                         ctxt_1.font = maps.titleSettings.textStyle.size + ' Arial';
@@ -18044,12 +18346,12 @@ var PdfExport = /** @__PURE__ @class */ (function () {
             var exportElement = maps.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' ||
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Tailwind3' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' ||
                 maps.theme === 'Fluent2')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
-            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Tailwind3Dark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
                 maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
@@ -18089,8 +18391,8 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                     var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                     var tileImg = new Image();
                     tileImg.crossOrigin = 'Anonymous';
-                    var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
-                        (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
+                    var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Tailwind3' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
+                        (maps.theme === 'TailwindDark' || maps.theme === 'Tailwind3Dark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
                     ctx.fillStyle = background;
                     ctx.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                     ctx.font = maps.titleSettings.textStyle.size + ' Arial';
@@ -18175,5 +18477,5 @@ var PdfExport = /** @__PURE__ @class */ (function () {
     return PdfExport;
 }());
 
-export { Annotation, Annotations, Arrow, BingMap, Border, Bubble, BubbleSettings, CenterPosition, CircleOption, ColorMapping, ColorMappingSettings, ColorValue, CommonTitleSettings, ConnectorLineSettings, Coordinate, DataLabel, DataLabelSettings, Font, GeoLocation, Highlight, HighlightSettings, ImageExport, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, Internalize, LayerPanel, LayerSettings, Legend, LegendSettings, Line, LineOption, MapAjax, MapLocation, Maps, MapsAreaSettings, MapsTooltip, Margin, Marker, MarkerBase, MarkerClusterData, MarkerClusterSettings, MarkerSettings, MinMax, NavigationLine, NavigationLineSettings, PathOption, PatternOptions, PdfExport, Point, Polygon, PolygonOption, PolygonSetting, PolygonSettings, PolygonTooltipSettings, PolylineOption, Print, Rect, RectOption, Selection, SelectionSettings, ShapeSettings, Size, SubTitleSettings, TextOption, Tile, TitleSettings, ToggleLegendSettings, TooltipSettings, Zoom, ZoomSettings, ZoomToolbarButtonSettings, ZoomToolbarSettings, ZoomToolbarTooltipSettings, acos, aitoff, animate, animationComplete, annotationRendering, appendShape, beforePrint, bubbleClick, bubbleMouseMove, bubbleRendering, calculateBound, calculateCenterFromPixel, calculatePolygonPath, calculateScale, calculateShapes, calculateSize, calculateZoomLevel, changeBorderWidth, changeNavaigationLineWidth, checkPropertyPath, checkShapeDataFields, click, clusterSeparate, clusterTemplate, compareZoomFactor, convertElement, convertElementFromLabel, convertGeoToPoint, convertStringToValue, convertTileLatLongToPoint, createStyle, createSvg, createTooltip, customizeStyle, dataLabelRendering, degreesToRadians, doubleClick, drawBalloon, drawCircle, drawCross, drawDiamond, drawHorizontalLine, drawLine, drawPath, drawPattern, drawPolygon, drawPolyline, drawRectangle, drawStar, drawSymbol, drawSymbols, drawTriangle, drawVerticalLine, elementAnimate, filter, findMidPointOfPolygon, findPosition, fixInitialScaleForTile, formatValue, getClientElement, getDistance, getElement, getElementByID, getElementOffset, getElementsByClassName, getFieldData, getHexColor, getMousePosition, getProcessedMarginValue, getRatioOfBubble, getShapeData, getTargetElement, getTemplateFunction, getTouchCenter, getTouches, getTranslate, getValueFromObject, getZoomTranslate, isCustomPath, itemHighlight, itemSelection, layerRendering, legendRendering, load, loaded, maintainSelection, maintainStyleClass, maintainToggleSelection, marker, markerBoundsComparer, markerClick, markerClusterClick, markerClusterListHandler, markerClusterMouseMove, markerClusterRendering, markerColorChoose, markerDragEnd, markerDragStart, markerMouseMove, markerRendering, markerShapeChoose, markerTemplate, measureText, measureTextElement, mergeSeparateCluster, mousedown, mousemove, mouseup, onclick, pan, panComplete, processResult, querySelector, radiansToDegrees, removeClass, removeElement, renderLegendShape, renderTextElement, resize, rightClick, roundTo, shapeHighlight, shapeRendering, shapeSelected, showTooltip, sinci, smoothTranslate, stringToNumber, sum, targetTouches, textTrim, timeout, tooltipRender, triggerDownload, triggerItemSelectionEvent, triggerShapeEvent, wordWrap, xToCoordinate, yToCoordinate, zoomAnimate, zoomComplete, zoomIn, zoomOut };
+export { Annotation, Annotations, Arrow, BingMap, Border, Bubble, BubbleSettings, CenterPosition, CircleOption, ColorMapping, ColorMappingSettings, ColorValue, CommonTitleSettings, ConnectorLineSettings, Coordinate, DataLabel, DataLabelSettings, Font, GeoLocation, Highlight, HighlightSettings, ImageExport, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, Internalize, LayerPanel, LayerSettings, Legend, LegendSettings, Line, LineOption, MapAjax, MapLocation, Maps, MapsAreaSettings, MapsTooltip, Margin, Marker, MarkerBase, MarkerClusterData, MarkerClusterSettings, MarkerSettings, MinMax, NavigationLine, NavigationLineSettings, PathOption, PatternOptions, PdfExport, Point, Polygon, PolygonOption, PolygonSetting, PolygonSettings, PolygonTooltipSettings, PolylineOption, Print, Rect, RectOption, Selection, SelectionSettings, ShapeSettings, Size, SubTitleSettings, TextOption, Tile, TitleSettings, ToggleLegendSettings, TooltipSettings, Zoom, ZoomSettings, ZoomToolbarButtonSettings, ZoomToolbarSettings, ZoomToolbarTooltipSettings, acos, aitoff, animate, animationComplete, annotationRendering, appendShape, beforePrint, bubbleClick, bubbleMouseMove, bubbleRendering, calculateBound, calculateCenterFromPixel, calculatePolygonPath, calculateScale, calculateShapes, calculateSize, calculateZoomLevel, changeBorderWidth, changeNavaigationLineWidth, checkPropertyPath, checkShapeDataFields, click, clusterSeparate, clusterTemplate, compareZoomFactor, convertElement, convertElementFromLabel, convertGeoToPoint, convertStringToValue, convertTileLatLongToPoint, createStyle, createSvg, createTooltip, customizeStyle, dataLabelRendering, degreesToRadians, doubleClick, drawBalloon, drawCircle, drawCross, drawDiamond, drawHorizontalLine, drawLine, drawPath, drawPattern, drawPolygon, drawPolyline, drawRectangle, drawStar, drawSymbol, drawSymbols, drawTriangle, drawVerticalLine, elementAnimate, filter, findMidPointOfPolygon, findPosition, fixInitialScaleForTile, formatValue, getDistance, getElement, getElementByID, getElementOffset, getElementsByClassName, getFieldData, getHexColor, getMousePosition, getProcessedMarginValue, getRatioOfBubble, getShapeData, getTargetElement, getTemplateFunction, getTouchCenter, getTouches, getTranslate, getValueFromObject, getZoomTranslate, isCustomPath, itemHighlight, itemSelection, layerRendering, legendRendering, load, loaded, maintainSelection, maintainStyleClass, maintainToggleSelection, marker, markerBoundsComparer, markerClick, markerClusterClick, markerClusterListHandler, markerClusterMouseMove, markerClusterRendering, markerColorChoose, markerDragEnd, markerDragStart, markerMouseMove, markerRendering, markerShapeChoose, markerTemplate, measureText, measureTextElement, mergeSeparateCluster, mouseMove, mousedown, mousemove, mouseup, onclick, pan, panComplete, processResult, querySelector, radiansToDegrees, removeClass, removeElement, renderLegendShape, renderTextElement, resize, rightClick, roundTo, shapeHighlight, shapeRendering, shapeSelected, showTooltip, sinci, smoothTranslate, stringToNumber, sum, targetTouches, textTrim, timeout, tooltipRender, triggerDownload, triggerItemSelectionEvent, triggerShapeEvent, wordWrap, xToCoordinate, yToCoordinate, zoomAnimate, zoomComplete, zoomIn, zoomOut };
 //# sourceMappingURL=ej2-maps.es5.js.map