@syncfusion/ej2-maps 27.2.2 → 28.1.38

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

@@ -424,13 +424,14 @@ function measureText(text, font) {
  * @private
  */
 function measureTextElement(text, font) {
-    const canvas = document.createElement('canvas');
+    let canvas = document.createElement('canvas');
     // eslint-disable-next-line @typescript-eslint/tslint/config
     const context = canvas.getContext('2d');
     context.font = `${font.fontStyle} ${font.fontWeight} ${typeof font.size === 'number' ? font.size + 'px' : font.size} ${font.fontFamily}`;
     const metrics = context.measureText(text);
     const width = metrics.width;
     const height = parseFloat(font.size) || 16;
+    canvas = null;
     return new Size(width, height);
 }
 /**
@@ -925,14 +926,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) {
     let bounds1;
     let bounds2;
     let colloideBounds = [];
@@ -941,7 +947,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
     let tempY = 0;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let data;
-    const style = currentLayer.markerClusterSettings.labelStyle;
+    const markerSetting = currentLayer.markerSettings[markerIndex];
     let options;
     let textElement;
     let tempElement1;
@@ -951,7 +957,9 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
     const postionY = (15 / 4);
     let m = 0;
     let indexCollection = [];
-    const clusters = currentLayer.markerClusterSettings;
+    const clusters = !allowInnerClusterSetting && currentLayer.markerClusterSettings.allowClustering ?
+        currentLayer.markerClusterSettings : markerSetting.clusterSettings;
+    const style = clusters.labelStyle;
     const clusterGroup = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster' });
     const eventArg = {
         cancel: false, name: markerClusterRendering, fill: clusters.fill, height: clusters.height,
@@ -967,9 +975,13 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
     }
     let isClusteringCompleted = false;
     const currentZoomFactor = !maps.isTileMap ? maps.mapScaleValue : maps.tileZoomLevel;
+    const 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, (clusterargs) => {
-        Array.prototype.forEach.call(markerTemplate.childNodes, (markerElement, o) => {
+        Array.prototype.forEach.call(markerGroup, (markerElement, o) => {
             indexCollection = [];
             if (markerElement['style']['visibility'] !== 'hidden') {
                 tempElement = markerElement;
@@ -979,19 +991,19 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                     const 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, (currentIndex) => {
                             if (o !== currentIndex) {
                                 const 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, (otherMarkerElement, p) => {
+                        Array.prototype.forEach.call(markerGroup, (otherMarkerElement, p) => {
                             if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
                                 markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, p);
                             }
@@ -1023,7 +1035,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                         if (!maps.isTileMap) {
                             location = convertGeoToPoint(latitude, longitude, factor, currentLayer, maps);
                         }
-                        else if (maps.isTileMap && !maps.zoomSettings.enable) {
+                        else if (maps.isTileMap) {
                             location = convertTileLatLongToPoint(new Point(longitude, latitude), maps.tileZoomLevel, maps.tileTranslatePoint, true);
                         }
                         markerElement['style']['visibility'] = 'hidden';
@@ -1048,10 +1060,14 @@ 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.x;
                             tempY = location.y;
                         }
+                        else {
+                            tempX = (((location.x + ((!isNullOrUndefined(maps.translatePoint) && maps.translatePoint.x !== 0 && !maps.isResize) ? maps.translatePoint.x : translatePoint.location.x)) * (isNullOrUndefined(maps.scale) ? translatePoint.scale : maps.scale)) + markerSetting.offset.x);
+                            tempY = (((location.y + ((!isNullOrUndefined(maps.translatePoint) && maps.translatePoint.y !== 0 && !maps.isResize) ? maps.translatePoint.y : translatePoint.location.y)) * (isNullOrUndefined(maps.scale) ? translatePoint.scale : maps.scale)) + markerSetting.offset.y);
+                        }
                         const clusterID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m);
                         const labelID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m) + '_datalabel_' + m;
                         m++;
@@ -1066,8 +1082,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);
+                        const eleMarkerIndex = parseFloat(ele.id.split('_MarkerIndex_')[1]);
+                        if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
+                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
+                            clusterGroup.appendChild(ele);
+                            clusterGroup.appendChild(textElement);
+                        }
+                        else {
+                            clusterGroup.appendChild(textElement);
+                            clusterGroup.appendChild(ele);
+                        }
                     }
                 }
                 colloideBounds = [];
@@ -1080,7 +1104,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, (clusterElement, o) => {
                 if (clusterElement['style']['visibility'] !== 'hidden') {
                     tempElement = clusterElement;
@@ -1096,7 +1120,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';
+                                        let 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);
                                     }
                                 }
@@ -1112,7 +1145,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();
+                                let 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++;
                             }
                         }
@@ -1122,7 +1164,16 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             });
         }
         while (0 < clusterGroup.childNodes.length) {
-            markerCollection.insertBefore(clusterGroup.childNodes[0], markerCollection.firstChild);
+            const 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);
@@ -1228,6 +1279,10 @@ function mergeSeparateCluster(sameMarkerData, maps) {
     for (let 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) {
+            const marker = getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+            marker['style']['visibility'] = 'hidden';
+        }
     }
     removeElement(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine');
 }
@@ -1249,17 +1304,22 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     const getElementFunction = isDom ? getElement : markerElement.querySelector.bind(markerElement);
     const getQueryConnect = isDom ? '' : '#';
     const markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
-    const marker = maps.layers[layerIndex].markerSettings[markerIndex];
+    const layer = maps.layers[layerIndex];
+    const allowInnerClusterSetting = maps.markerModule.allowInnerClusterSetting(layer);
+    const cluster = !allowInnerClusterSetting && layer.markerClusterSettings.allowClustering ?
+        layer.markerClusterSettings : layer.markerSettings[markerIndex].clusterSettings;
+    const marker = layer.markerSettings[markerIndex];
     const clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    const clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
+    const clusterEle = cluster.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
     const clusterEleLabel = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'hidden');
     clusterEleLabel.setAttribute('visibility', 'hidden');
     let markerEle = marker.shape === 'Balloon' && isNullOrUndefined(marker.template) ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
     const height = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().height : marker.height;
-    const width = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
+    let width = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
     const centerX = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[0];
     const centerY = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[1].split(')')[0].trim();
+    width = (typeof width === 'string' ? parseFloat(width) : width);
     let radius = width + 5;
     let area = 2 * 3.14 * radius;
     let totalMarker = 0;
@@ -1302,14 +1362,20 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
             markerEle.setAttribute('transform', 'translate( ' + x1 + ' ' + y1 + ')');
         }
         markerEle['style']['visibility'] = 'visible';
+        if (markerEle.id.indexOf('Group') > -1) {
+            const marker = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+            marker['style']['visibility'] = 'visible';
+        }
         newAngle += angle;
     }
-    const connectorLine = maps.layers[layerIndex].markerClusterSettings.connectorLineSettings;
+    const connectorLine = cluster.connectorLineSettings;
     const 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;
+    const layerElement = getElementFunction(maps.element.id + '_LayerIndex_' + layerIndex);
+    markerElement = layerElement.querySelector('#' + markerElement.id);
     const groupEle = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine' });
     groupEle.appendChild(maps.renderer.drawPath(options));
     if (marker.shape === 'Balloon') {
@@ -1389,8 +1455,9 @@ function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, mark
         for (let 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;
@@ -2455,22 +2522,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) {
-    const element = document.getElementById(id);
-    if (!isNullOrUndefined(element)) {
-        return element.getClientRects()[0];
-    }
-    else {
-        return null;
-    }
-}
 /**
  * Function to return the number value for the string value.
  *
@@ -2763,7 +2814,7 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius = 0)
     const centerX = point.x;
     const centerY = point.y;
     let height = 0;
-    const transform = element.getAttribute('transform') || '';
+    let transform = element.getAttribute('transform') || '';
     new Animation({}).animate(element, {
         duration: (duration === 0 && animationMode === 'Enable') ? 1000 : duration,
         delay: delay,
@@ -2779,6 +2830,11 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius = 0)
                 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: (model) => {
@@ -3710,6 +3766,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'];
@@ -4034,6 +4096,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',
@@ -5238,6 +5366,12 @@ __decorate([
 __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);
@@ -5301,6 +5435,9 @@ __decorate([
 __decorate([
     Collection([], InitialMarkerSelectionSettings)
 ], MarkerBase.prototype, "initialMarkerSelection", void 0);
+__decorate([
+    Complex({}, MarkerClusterSettings)
+], MarkerBase.prototype, "clusterSettings", void 0);
 /**
  * Gets or sets the options to customize the markers in the maps.
  */
@@ -5546,6 +5683,12 @@ const markerClusterClick = 'markerClusterClick';
  * @private
  */
 const markerMouseMove = 'markerMouseMove';
+/**
+ * Specifies the maps mouse move event name.
+ *
+ * @private
+ */
+const mouseMove = 'mouseMove';
 /**
  * Specifies the maps cluster mouse move event name.
  *
@@ -6176,7 +6319,7 @@ class LayerPanel {
         proxy.renderTileLayer(proxy, layer, layerIndex, bing);
         this.mapObject.arrangeTemplate();
         if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
-            this.mapObject.zoomModule.applyTransform(this.mapObject, true);
+            this.mapObject.zoomModule.applyTransform(this.mapObject, false, true);
         }
     }
     bubbleCalculation(bubbleSettings, range) {
@@ -7442,6 +7585,8 @@ let Maps = class Maps extends Component {
         this.isTileMap = false;
         /**
          * Resize the map
+         *
+         * @private
          */
         this.isResize = false;
         /**
@@ -8024,7 +8169,7 @@ let Maps = class Maps extends Component {
                 }
             }
             if (this.zoomModule && ((this.previousScale !== this.scale) || this.zoomNotApplied || this.isZoomByPosition)) {
-                this.zoomModule.applyTransform(this, true);
+                this.zoomModule.applyTransform(this, false, true);
             }
         }
     }
@@ -8085,14 +8230,7 @@ let Maps = class Maps extends Component {
                             -(Math.abs(elementOffset.top - layerOffset.top)) : Math.abs(elementOffset.top - layerOffset.top);
                     }
                     Array.prototype.forEach.call(templateGroupEle.childNodes, (currentTemplate) => {
-                        if (currentTemplate.id.indexOf('Marker') !== -1) {
-                            if (currentTemplate.style.visibility !== 'hidden') {
-                                const elementOffset = getElementByID(currentTemplate.id).getBoundingClientRect();
-                                currentTemplate.style.left = parseFloat(currentTemplate.style.left) - (this.isTileMap ? 0 : elementOffset.width / 2) + 'px';
-                                currentTemplate.style.top = parseFloat(currentTemplate.style.top) - (this.isTileMap ? 0 : elementOffset.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%)';
@@ -8875,6 +9013,7 @@ let Maps = class Maps extends Component {
         // 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);
@@ -8888,6 +9027,34 @@ let Maps = class Maps extends Component {
         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
+     */
+    mouseMoveEvent(e) {
+        const targetId = e.target.id;
+        let layerIndex;
+        let eventArgs;
+        if (this.isTileMap) {
+            const 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;
+            const 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.
      *
@@ -9117,12 +9284,23 @@ let Maps = class Maps extends Component {
      */
     addMarker(layerIndex, markerCollection) {
         if (!this.isDestroyed && !isNullOrUndefined(this.markerModule)) {
-            const layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
-            if (markerCollection.length > 0 && layerEle) {
-                for (const newMarker of markerCollection) {
-                    this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+            if (!isNullOrUndefined(layerIndex) && !isNullOrUndefined(markerCollection)) {
+                const layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
+                if (markerCollection.length > 0 && layerEle) {
+                    for (const newMarker of markerCollection) {
+                        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 (let i = 0; i < this.layers.length; i++) {
+                    const 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();
             }
         }
@@ -10102,6 +10280,9 @@ __decorate$1([
 __decorate$1([
     Event()
 ], Maps.prototype, "markerMouseMove", void 0);
+__decorate$1([
+    Event()
+], Maps.prototype, "mouseMove", void 0);
 __decorate$1([
     Event()
 ], Maps.prototype, "dataLabelRendering", void 0);
@@ -10433,7 +10614,6 @@ class Bubble {
 class Marker {
     constructor(maps) {
         this.maps = maps;
-        this.trackElements = [];
         this.sameMarkerData = [];
         this.initialMarkerCluster = [];
         this.zoomedMarkerCluster = [];
@@ -10450,23 +10630,43 @@ class Marker {
         let templateFn;
         let markerCount = 0;
         let nullCount = 0;
+        let isMarkerTemplateNewCreation = false;
         let markerTemplateCount = 0;
         maps.translateType = 'marker';
         const currentLayer = maps.layersCollection[layerIndex];
-        this.markerSVGObject = maps.renderer.createGroup({
-            id: maps.element.id + '_Markers_Group',
-            class: 'GroupElement'
-        });
+        const 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';
-        const 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;';
+        const secondaryElement = getElementByID(maps.element.id + '_Secondary_Element');
+        const markerTemplateElement = secondaryElement.querySelectorAll('#' + maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group');
+        let 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;';
+        }
+        const allowInnerClusterSetting = this.allowInnerClusterSetting(currentLayer);
         const allowAnimation = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let translatePoint;
@@ -10478,13 +10678,20 @@ class Marker {
         Array.prototype.forEach.call(currentLayer.markerSettings, (markerSettings, markerIndex) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerData = markerSettings.dataSource;
+            markerCount = 0;
             if (!isNullOrUndefined(markerSettings.dataSource)) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 Array.prototype.forEach.call(markerData, (data, dataIndex) => {
                     maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                     let 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
@@ -10510,12 +10717,14 @@ class Marker {
                             const scale = type === 'AddMarker' ? maps.scale : translatePoint['scale'];
                             const transPoint = type === 'AddMarker' ? maps.translatePoint : translatePoint['location'];
                             if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
+                                isMarkerTemplateNewCreation = false;
                                 markerTemplateCount++;
                                 markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location, transPoint, scale, offset, maps);
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 maps.renderReactTemplates();
                             }
                             else if (!eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
+                                isMarkerTemplateNewCreation = true;
                                 markerCount++;
                                 marker(eventArgs, markerSettings, markerData, dataIndex, location, transPoint, markerID, offset, scale, maps, this.markerSVGObject);
                             }
@@ -10527,32 +10736,55 @@ class Marker {
                             maps.markerNullCount + 1 : maps.markerNullCount;
                         const markerDataLength = markerData.length - maps.markerNullCount;
                         let isMarkersClustered = false;
-                        if (this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
-                            layerElement.appendChild(this.markerSVGObject);
-                            if (currentLayer.markerClusterSettings.allowClustering) {
-                                maps.svgObject.appendChild(this.markerSVGObject);
-                                maps.element.appendChild(maps.svgObject);
+                        const 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;
+                        const 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);
+                        const 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) {
+                                const layerCollectionEle = getElementByID(maps.element.id + '_Layer_Collections');
+                                layerCollectionEle.appendChild(layerElement);
+                            }
                         }
                     });
                 });
@@ -10833,16 +11065,18 @@ class Marker {
         const markCollection = [];
         const clusterCollection = [];
         let marker;
-        this.maps.markerClusterExpand = layer.markerClusterSettings.allowClusterExpand;
         if (target.indexOf('_MarkerIndex_') > -1) {
             const markerIndex = parseInt(id[1].split('_MarkerIndex_')[1].split('_')[0], 10);
             const dataIndex = parseInt(id[1].split('_dataIndex_')[1].split('_')[0], 10);
             marker = layer.markerSettings[markerIndex];
+            const 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
                 let collection = [];
-                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, (location, index) => {
                         if (location['latitude'] === data['latitude'] && location['longitude'] === data['longitude']) {
@@ -10852,8 +11086,10 @@ class Marker {
                 }
                 if ((target.indexOf('_cluster_') > -1)) {
                     let isClusterSame = false;
-                    const 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);
-                    const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
+                    const cluster = !allowInnerClusterSetting && layer.markerClusterSettings.allowClustering ?
+                        layer.markerClusterSettings : layer.markerSettings[markerIndex].clusterSettings;
+                    const 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);
+                    const indexes = cluster.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
                     collection = [];
                     for (const i of indexes) {
                         collection.push({ data: marker.dataSource[i], index: i });
@@ -10922,6 +11158,23 @@ class Marker {
         };
         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
+     */
+    allowInnerClusterSetting(layer) {
+        let allowInnerClusterSetting = false;
+        for (let markerIndex = 0; markerIndex < layer.markerSettings.length; markerIndex++) {
+            if (layer.markerSettings[markerIndex].clusterSettings.allowClustering) {
+                allowInnerClusterSetting = true;
+                break;
+            }
+        }
+        return allowInnerClusterSetting;
+    }
     /**
      * @private
      * @returns {void}
@@ -10948,7 +11201,6 @@ class Marker {
      */
     destroy() {
         this.maps = null;
-        this.trackElements = [];
         this.markerSVGObject = null;
         this.sameMarkerData = [];
         this.initialMarkerCluster = [];
@@ -11811,6 +12063,13 @@ class Legend {
                     else {
                         legendText = '';
                     }
+                    if (legend.position === 'Left' || legend.position === 'Right') {
+                        for (let i = 0; i < this.legendCollection.length; i++) {
+                            const legendItem = this.legendCollection[i];
+                            const 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) {
@@ -11820,26 +12079,26 @@ class Legend {
                                 (startY - textPadding);
                         }
                         else {
-                            textX = (position === 'After') ? startX - (itemTextSize.width / 2) - textPadding
-                                : (startX + rectWidth + itemTextSize.width / 2) + textPadding;
+                            textX = (position === 'After') ? startX - (this.textMaxWidth / 2) - textPadding
+                                : (startX + rectWidth + this.textMaxWidth / 2) + textPadding;
                             textY = startY + (rectHeight / 2) + (itemTextSize.height / 4);
                         }
                     }
                     if (i === 0) {
                         itemStartX = (arrangement === 'Horizontal') ? startX : (position === 'After') ?
-                            textX - (itemTextSize.width / 2) : startX;
+                            textX - (this.textMaxWidth / 2) : startX;
                         itemStartY = (arrangement === 'Horizontal') ? (position === 'After') ? startY :
                             textY - (itemTextSize.height / 2) : startY;
                         if (this.legendCollection.length === 1) {
                             legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
-                                (rectWidth + maxTextWidth + textPadding);
+                                (rectWidth + this.textMaxWidth + textPadding);
                             legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding) :
                                 Math.abs((startY + rectHeight) - itemStartY);
                         }
                     }
                     else if (i === this.legendCollection.length - 1) {
                         legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
-                            (rectWidth + maxTextWidth + textPadding);
+                            (rectWidth + this.textMaxWidth + textPadding);
                         legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding) :
                             Math.abs((startY + rectHeight) - itemStartY);
                     }
@@ -11851,8 +12110,8 @@ class Legend {
                         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;
                     legendWidth = rectWidth;
                 }
                 this.legendItemRect = { x: itemStartX, y: itemStartY, width: legendWidth, height: legendHeight };
@@ -12919,18 +13178,7 @@ class Legend {
         const spacing = 10;
         const trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
         const textSize = measureText(trimTitle, textStyle);
-        let sameTextWidth = false;
-        for (let 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));
         const legendBorder = {
             color: legend.border.color || this.maps.themeStyle.legendBorderColor, opacity: legend.border.opacity,
@@ -13842,6 +14090,12 @@ class Legend {
         this.maps.off(Browser.touchMoveEvent, this.interactiveHandler);
         this.maps.off(Browser.touchEndEvent, this.interactiveHandler);
         this.maps.off(click, this.legendClick);
+        const pagingElement = document.getElementById(this.maps.element.id + '_Legend_Paging_Group');
+        if (pagingElement) {
+            for (let i = 0; i < pagingElement.childElementCount; i++) {
+                EventHandler.remove(pagingElement.childNodes[i], Browser.touchStartEvent, this.changeNextPage);
+            }
+        }
     }
     getLegendData(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15043,6 +15297,8 @@ class MapsTooltip {
     destroy() {
         if (!isNullOrUndefined(this.svgTooltip)) {
             this.svgTooltip.destroy();
+            this.svgTooltip.controlInstance = null;
+            removeElement(this.maps.element.id + '_mapsTooltip');
         }
         this.svgTooltip = null;
         this.maps = null;
@@ -15094,10 +15350,11 @@ class Zoom {
      * @param {Point} position - Specifies the position.
      * @param {number} newZoomFactor - Specifies the zoom factor.
      * @param {string} type - Specifies the type.
+     * @param {boolean} isMouseWheel - Indicates whether the zoom operation was triggered by the mouse wheel.
      * @returns {void}
      * @private
      */
-    performZooming(position, newZoomFactor, type) {
+    performZooming(position, newZoomFactor, type, isMouseWheel = false) {
         const map = this.maps;
         map.previousProjection = newZoomFactor <= 1.5 ? undefined : map.projectionType;
         map.defaultState = false;
@@ -15156,7 +15413,7 @@ class Zoom {
                     map.scale = map.mapScaleValue = map.previousScale;
                 }
                 else {
-                    this.applyTransform(map);
+                    this.applyTransform(map, isMouseWheel);
                 }
             }
             else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
@@ -15200,7 +15457,7 @@ class Zoom {
                         //         element1 = element1;
                         //     }
                         // }
-                        this.applyTransform(this.maps);
+                        this.applyTransform(this.maps, isMouseWheel);
                         if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                             document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                         }
@@ -15326,7 +15583,7 @@ class Zoom {
             }
             if (!isZoomCancelled) {
                 map.mapScaleValue = zoomCalculationFactor;
-                this.applyTransform(map, true);
+                this.applyTransform(map, false, true);
                 this.maps.zoomNotApplied = false;
                 this.zoomingRect = null;
             }
@@ -15359,6 +15616,7 @@ class Zoom {
         let zoomCalculationFactor = this.pinchFactor;
         let isZoomCancelled;
         const prevTilePoint = map.tileTranslatePoint;
+        this.maps.mergeCluster();
         if (!map.isTileMap) {
             const availSize = map.mapAreaRect;
             map.isMarkerZoomCompleted = false;
@@ -15539,12 +15797,13 @@ class Zoom {
     }
     /**
      * @param {Maps} maps - Specifies the Map control
+     * @param {boolean} isMouseWheel - Indicates whether the zoom operation was triggered by the mouse wheel.
      * @param {boolean} animate - Specifies the animation is available or not
      * @param {boolean} isPanning - Specifies that it is panning or not
      * @returns {void}
      * @private
      */
-    applyTransform(maps, animate, isPanning) {
+    applyTransform(maps, isMouseWheel, animate, isPanning) {
         let layerIndex;
         this.templateCount = 0;
         let markerStyle;
@@ -15557,6 +15816,17 @@ class Zoom {
         if (document.getElementById(maps.element.id + '_mapsTooltip')) {
             removeElement(maps.element.id + '_mapsTooltip');
         }
+        if (maps.isTileMap) {
+            const element = document.getElementById(maps.element.id + '_svg');
+            if (element) {
+                for (let k = 0; k < maps.layers.length; k++) {
+                    const layerElement = element.querySelector('#' + maps.element.id + '_LayerIndex_' + k);
+                    if (layerElement) {
+                        element.removeChild(layerElement);
+                    }
+                }
+            }
+        }
         if (this.layerCollectionEle) {
             for (let i = 0; i < this.layerCollectionEle.childElementCount; i++) {
                 const layerElement = this.layerCollectionEle.childNodes[i];
@@ -15566,6 +15836,7 @@ class Zoom {
                     this.currentLayer = maps.layersCollection[this.index];
                     const factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
                     const elementCount = layerElement.childElementCount;
+                    const templateElement = document.getElementById(maps.element.id + '_LayerIndex_' + this.index + '_Markers_Template_Group');
                     for (let j = 0; j < elementCount; j++) {
                         let currentEle = layerElement.childNodes[j];
                         if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
@@ -15599,17 +15870,16 @@ class Zoom {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if ((!this.isPanModeEnabled || !isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
-                                this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement);
+                            if ((!this.isPanModeEnabled || !isPanning) && (!isNullOrUndefined(currentEle.childNodes[0]) || !isNullOrUndefined(templateElement.childNodes[0]))) {
+                                const processElement = (!isNullOrUndefined(currentEle.childNodes[0]) ? currentEle.childNodes[0] : templateElement.childNodes[0]);
+                                this.markerTranslates(processElement, factor, x, y, scale, 'Marker', layerElement);
                             }
                             currentEle = layerElement.childNodes[j];
-                            let markerAnimation;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 Array.prototype.forEach.call(currentEle.childNodes, (childNode, k) => {
                                     this.markerTranslate(childNode, factor, x, y, scale, 'Marker', animate);
                                     const dataIndex = parseInt(childNode['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     const markerIndex = parseInt(childNode['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
-                                    markerAnimation = this.currentLayer.markerSettings[markerIndex].animationDuration > 0 || animationMode === 'Enable';
                                     if (this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length > 0) {
                                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                         const markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
@@ -15623,16 +15893,12 @@ class Zoom {
                                         }
                                     }
                                     if (((this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && this.currentLayer.type === 'SubLayer')) && !this.isPanModeEnabled) {
-                                        if (maps.isTileMap) {
-                                            const groupElement = document.querySelector('.GroupElement');
-                                            if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
-                                                groupElement.style.display = 'none';
+                                        if (!maps.isTileMap) {
+                                            markerStyle = isMouseWheel ? markerStyle : 'visibility:hidden';
+                                            if (!isNullOrUndefined(markerStyle)) {
+                                                currentEle.style.cssText = markerStyle;
                                             }
                                         }
-                                        else {
-                                            markerStyle = 'visibility:hidden';
-                                            currentEle.style.cssText = markerStyle;
-                                        }
                                     }
                                 });
                                 if (this.isPanModeEnabled && maps.markerModule.sameMarkerData.length > 0) {
@@ -15769,92 +16035,111 @@ class Zoom {
             removeElement(markerTemplateElements.id);
         }
         const currentLayers = this.maps.layersCollection[layerIndex];
+        const allowInnerClusterSetting = this.maps.markerModule.allowInnerClusterSetting(currentLayers);
         Array.prototype.forEach.call(currentLayers.markerSettings, (markerSettings, markerIndex) => {
+            markerTemplateCounts = 0;
+            markerCounts = 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerDatas = markerSettings.dataSource;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            Array.prototype.forEach.call(markerDatas, (data, dataIndex) => {
-                this.maps.markerNullCount = markerIndex >= 0 && dataIndex === 0 ? 0 : this.maps.markerNullCount;
-                let 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, (MarkerArgs) => {
-                    if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
-                        eventArgs = markerShapeChoose(eventArgs, data);
-                    }
-                    if (markerSettings.colorValuePath !== eventArgs.colorValuePath) {
-                        eventArgs = markerColorChoose(eventArgs, data);
-                    }
-                    const lati = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
-                    const long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
-                    const offset = markerSettings.offset;
-                    if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
-                        const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
-                            + markerIndex + '_dataIndex_' + dataIndex;
-                        const location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, this.maps);
-                        const transPoint = { x: x, y: y };
-                        if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
-                            markerTemplateCounts++;
-                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateElements, location, transPoint, scale, offset, this.maps);
+            if (!isNullOrUndefined(markerDatas)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                Array.prototype.forEach.call(markerDatas, (data, dataIndex) => {
+                    this.maps.markerNullCount = markerIndex >= 0 && dataIndex === 0 ? 0 : this.maps.markerNullCount;
+                    let 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, (MarkerArgs) => {
+                        if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
+                            eventArgs = markerShapeChoose(eventArgs, data);
                         }
-                        else if (!eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
-                            markerCounts++;
-                            marker(eventArgs, markerSettings, markerDatas, dataIndex, location, 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;
-                    const markerDataLength = markerDatas.length - this.maps.markerNullCount;
-                    let isMarkersClustered = false;
-                    if (markerSVGObject.childElementCount === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
-                        if (this.maps.isTileMap) {
-                            const polygonsElement = document.getElementById(this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
-                            const polygonElement = document.getElementById(this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
-                            if (!isNullOrUndefined(polygonsElement)) {
-                                polygonsElement.insertAdjacentElement('afterend', markerSVGObject);
+                        const lati = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
+                            parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
+                        const long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
+                            parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
+                        const offset = markerSettings.offset;
+                        if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
+                            const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                                + markerIndex + '_dataIndex_' + dataIndex;
+                            const location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, this.maps);
+                            const transPoint = { x: x, y: y };
+                            if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
+                                markerTemplateCounts++;
+                                markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateElements, location, transPoint, scale, offset, this.maps);
                             }
-                            else {
-                                if (!isNullOrUndefined(polygonElement)) {
-                                    polygonElement.insertAdjacentElement('afterend', markerSVGObject);
+                            else if (!eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
+                                markerCounts++;
+                                marker(eventArgs, markerSettings, markerDatas, dataIndex, location, 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;
+                        const markerDataLength = markerDatas.length - this.maps.markerNullCount;
+                        let isMarkersClustered = false;
+                        const 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) {
+                                const polygonsElement = document.getElementById(this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
+                                const 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);
+                        const 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);
+                                }
                             }
                         }
-                    }
+                    });
                 });
-            });
+            }
         });
     }
     /**
@@ -16049,6 +16334,18 @@ class Zoom {
             }
         }
     }
+    /**
+     *
+     * @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
+     */
     markerTranslate(element, factor, x, y, scale, type, animate = false) {
         const layerIndex = parseInt(element.id.split('_LayerIndex_')[1].split('_')[0], 10);
         const markerIndex = parseInt(element.id.split('_MarkerIndex_')[1].split('_')[0], 10);
@@ -16068,9 +16365,8 @@ class Zoom {
             const location = (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') {
-                    const templateOffset = element.getBoundingClientRect();
-                    element.style.left = ((location.x - (templateOffset.width / 2)) + marker.offset.x) + 'px';
-                    element.style.top = ((location.y - (templateOffset.height / 2)) + marker.offset.y) + 'px';
+                    element.style.left = (location.x + marker.offset.x) + 'px';
+                    element.style.top = (location.y + marker.offset.y) + 'px';
                 }
                 else {
                     location.x += marker.offset.x;
@@ -16090,9 +16386,8 @@ class Zoom {
                         element.style.transform = 'translate(-50%, -50%)';
                     }
                     else {
-                        const elementOffset = element.getBoundingClientRect();
-                        element.style.left = ((location.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
-                        element.style.top = ((location.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
+                        element.style.left = ((location.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x + 'px';
+                        element.style.top = ((location.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y + 'px';
                     }
                 }
                 else {
@@ -16179,15 +16474,15 @@ class Zoom {
             if (!panArgs.cancel) {
                 if (panningXDirection && panningYDirection) {
                     map.translatePoint = new Point(x, y);
-                    this.applyTransform(map, false, true);
+                    this.applyTransform(map, false, false, true);
                 }
                 else if (panningXDirection) {
                     map.translatePoint = new Point(x, map.translatePoint.y);
-                    this.applyTransform(map, false, true);
+                    this.applyTransform(map, false, false, true);
                 }
                 else if (panningYDirection) {
                     map.translatePoint = new Point(map.translatePoint.x, y);
-                    this.applyTransform(map, false, true);
+                    this.applyTransform(map, false, false, true);
                 }
             }
             this.maps.zoomNotApplied = false;
@@ -16216,7 +16511,7 @@ class Zoom {
             };
             map.trigger(pan, panArgs);
             map.mapLayerPanel.generateTiles(map.tileZoomLevel, map.tileTranslatePoint, 'Pan');
-            this.applyTransform(map, false, true);
+            this.applyTransform(map, false, false, true);
             map.translatePoint.x = (map.tileTranslatePoint.x - xDifference) / map.scale;
             map.translatePoint.y = (map.tileTranslatePoint.y - yDifference) / map.scale;
         }
@@ -16245,6 +16540,7 @@ class Zoom {
         const size = map.mapAreaRect;
         const translatePoint = map.previousPoint = map.translatePoint;
         const 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;
@@ -16285,7 +16581,7 @@ class Zoom {
                 map.scale = map.previousScale;
             }
             else {
-                this.applyTransform(map, true);
+                this.applyTransform(map, false, true);
             }
         }
         else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
@@ -16322,7 +16618,7 @@ class Zoom {
                     map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
                     const animationDuration = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                     setTimeout(() => {
-                        this.applyTransform(this.maps, true);
+                        this.applyTransform(this.maps, false, true);
                         if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                             document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                         }
@@ -16922,6 +17218,7 @@ class Zoom {
             const delta = 1;
             const staticMaxZoomLevel = map.zoomSettings.maxZoom;
             const 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();
@@ -16934,11 +17231,11 @@ class Zoom {
                         map.staticMapZoom = map.tileZoomLevel;
                         if (map.staticMapZoom > 0 && map.staticMapZoom < staticMaxZoomLevel) {
                             map.staticMapZoom += 1;
-                            this.performZooming(position, (value + delta), direction);
+                            this.performZooming(position, (value + delta), direction, true);
                         }
                     }
                     else {
-                        this.performZooming(position, (value + delta), direction);
+                        this.performZooming(position, (value + delta), direction, true);
                     }
                 }
                 else {
@@ -16952,7 +17249,7 @@ class Zoom {
                     if (map.staticMapZoom > 1 && map.staticMapZoom < staticMaxZoomLevel) {
                         map.staticMapZoom -= 1;
                     }
-                    this.performZooming(position, (value - delta), direction);
+                    this.performZooming(position, (value - delta), direction, true);
                 }
             }
             this.removeToolbarOpacity(map.mapScaleValue, (!this.maps.isDevice ? (!isNullOrUndefined(e.target) ? e.target['id'] :
@@ -17273,6 +17570,16 @@ class Zoom {
         this.maps.off(Browser.touchStartEvent, this.mouseDownHandler);
         this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
         EventHandler.remove(this.maps.element, this.cancelEvent, this.mouseCancelHandler);
+        const toolbarElement = document.getElementById(this.maps.element.id + '_Zooming_KitCollection');
+        if (toolbarElement) {
+            for (let 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.
@@ -17307,7 +17614,6 @@ class Zoom {
         this.layerCollectionEle = null;
         this.currentLayer = null;
         this.pinchDistance = null;
-        this.maps = null;
     }
 }
 
@@ -17363,12 +17669,12 @@ class Print {
             backgroundElement = backgroundElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const 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)');
@@ -17472,11 +17778,11 @@ class ImageExport {
             const svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
             const backgroundElement = svgObject.childNodes[0];
             const 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)');
@@ -17532,8 +17838,8 @@ class ImageExport {
                         const tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                         const exportTileImg = new Image();
                         exportTileImg.crossOrigin = 'Anonymous';
-                        const 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';
+                        const 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.fillStyle = background;
                         ctxt.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                         ctxt.font = maps.titleSettings.textStyle.size + ' Arial';
@@ -17658,12 +17964,12 @@ class PdfExport {
             const exportElement = maps.svgObject.cloneNode(true);
             const backgroundElement = exportElement.childNodes[0];
             const 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)');
@@ -17703,8 +18009,8 @@ class PdfExport {
                     const tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                     const tileImg = new Image();
                     tileImg.crossOrigin = 'Anonymous';
-                    const 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';
+                    const 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';
@@ -17785,5 +18091,5 @@ class PdfExport {
     destroy() { }
 }
 
-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.es2015.js.map