@syncfusion/ej2-maps 27.2.2 → 28.1.38

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

@@ -52,11 +52,13 @@ var Zoom = /** @class */ (function () {
      * @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
      */
-    Zoom.prototype.performZooming = function (position, newZoomFactor, type) {
+    Zoom.prototype.performZooming = function (position, newZoomFactor, type, isMouseWheel) {
         var _this = this;
+        if (isMouseWheel === void 0) { isMouseWheel = false; }
         var map = this.maps;
         map.previousProjection = newZoomFactor <= 1.5 ? undefined : map.projectionType;
         map.defaultState = false;
@@ -115,7 +117,7 @@ var Zoom = /** @class */ (function () {
                     map.scale = map.mapScaleValue = map.previousScale;
                 }
                 else {
-                    this.applyTransform(map);
+                    this.applyTransform(map, isMouseWheel);
                 }
             }
             else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
@@ -159,7 +161,7 @@ var Zoom = /** @class */ (function () {
                         //         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';
                         }
@@ -285,7 +287,7 @@ var Zoom = /** @class */ (function () {
             }
             if (!isZoomCancelled) {
                 map.mapScaleValue = zoomCalculationFactor;
-                this.applyTransform(map, true);
+                this.applyTransform(map, false, true);
                 this.maps.zoomNotApplied = false;
                 this.zoomingRect = null;
             }
@@ -318,6 +320,7 @@ var Zoom = /** @class */ (function () {
         var zoomCalculationFactor = this.pinchFactor;
         var isZoomCancelled;
         var prevTilePoint = map.tileTranslatePoint;
+        this.maps.mergeCluster();
         if (!map.isTileMap) {
             var availSize = map.mapAreaRect;
             map.isMarkerZoomCompleted = false;
@@ -498,12 +501,13 @@ var Zoom = /** @class */ (function () {
     };
     /**
      * @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
      */
-    Zoom.prototype.applyTransform = function (maps, animate, isPanning) {
+    Zoom.prototype.applyTransform = function (maps, isMouseWheel, animate, isPanning) {
         var _this = this;
         var layerIndex;
         this.templateCount = 0;
@@ -517,6 +521,17 @@ var Zoom = /** @class */ (function () {
         if (document.getElementById(maps.element.id + '_mapsTooltip')) {
             removeElement(maps.element.id + '_mapsTooltip');
         }
+        if (maps.isTileMap) {
+            var element = document.getElementById(maps.element.id + '_svg');
+            if (element) {
+                for (var k = 0; k < maps.layers.length; k++) {
+                    var layerElement = element.querySelector('#' + maps.element.id + '_LayerIndex_' + k);
+                    if (layerElement) {
+                        element.removeChild(layerElement);
+                    }
+                }
+            }
+        }
         if (this.layerCollectionEle) {
             var _loop_1 = function (i) {
                 var layerElement = this_1.layerCollectionEle.childNodes[i];
@@ -526,6 +541,7 @@ var Zoom = /** @class */ (function () {
                     this_1.currentLayer = maps.layersCollection[this_1.index];
                     var factor_1 = maps.mapLayerPanel.calculateFactor(this_1.currentLayer);
                     var elementCount = layerElement.childElementCount;
+                    var templateElement = document.getElementById(maps.element.id + '_LayerIndex_' + this_1.index + '_Markers_Template_Group');
                     var _loop_2 = function (j) {
                         var currentEle = layerElement.childNodes[j];
                         if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
@@ -559,17 +575,16 @@ var Zoom = /** @class */ (function () {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if ((!this_1.isPanModeEnabled || !isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
-                                this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement);
+                            if ((!this_1.isPanModeEnabled || !isPanning) && (!isNullOrUndefined(currentEle.childNodes[0]) || !isNullOrUndefined(templateElement.childNodes[0]))) {
+                                var processElement = (!isNullOrUndefined(currentEle.childNodes[0]) ? currentEle.childNodes[0] : templateElement.childNodes[0]);
+                                this_1.markerTranslates(processElement, factor_1, x, y, scale, 'Marker', layerElement);
                             }
                             currentEle = layerElement.childNodes[j];
-                            var markerAnimation_1;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
                                     _this.markerTranslate(childNode, factor_1, x, y, scale, 'Marker', animate);
                                     var dataIndex = parseInt(childNode['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     var markerIndex = parseInt(childNode['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
-                                    markerAnimation_1 = _this.currentLayer.markerSettings[markerIndex].animationDuration > 0 || animationMode === 'Enable';
                                     if (_this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length > 0) {
                                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                         var markerSelectionValues = _this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
@@ -583,16 +598,12 @@ var Zoom = /** @class */ (function () {
                                         }
                                     }
                                     if (((_this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && _this.currentLayer.type === 'SubLayer')) && !_this.isPanModeEnabled) {
-                                        if (maps.isTileMap) {
-                                            var groupElement = document.querySelector('.GroupElement');
-                                            if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation_1) {
-                                                groupElement.style.display = 'none';
+                                        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_1.isPanModeEnabled && maps.markerModule.sameMarkerData.length > 0) {
@@ -737,92 +748,111 @@ var Zoom = /** @class */ (function () {
             removeElement(markerTemplateElements.id);
         }
         var currentLayers = this.maps.layersCollection[layerIndex];
+        var allowInnerClusterSetting = this.maps.markerModule.allowInnerClusterSetting(currentLayers);
         Array.prototype.forEach.call(currentLayers.markerSettings, function (markerSettings, markerIndex) {
+            markerTemplateCounts = 0;
+            markerCounts = 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerDatas = markerSettings.dataSource;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            Array.prototype.forEach.call(markerDatas, function (data, dataIndex) {
-                _this.maps.markerNullCount = markerIndex >= 0 && dataIndex === 0 ? 0 : _this.maps.markerNullCount;
-                var eventArgs = {
-                    template: markerSettings.template, data: data, maps: _this.maps, marker: markerSettings,
-                    cancel: false, name: markerRendering, fill: markerSettings.fill, colorValuePath: markerSettings.colorValuePath,
-                    shapeValuePath: markerSettings.shapeValuePath, height: markerSettings.height,
-                    width: markerSettings.width, imageUrl: markerSettings.imageUrl, imageUrlValuePath: markerSettings.imageUrlValuePath, shape: markerSettings.shape,
-                    border: markerSettings.border
-                };
-                eventArgs = markerShapeChoose(eventArgs, data);
-                eventArgs = markerColorChoose(eventArgs, data);
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                _this.maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
-                    if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
-                        eventArgs = markerShapeChoose(eventArgs, data);
-                    }
-                    if (markerSettings.colorValuePath !== eventArgs.colorValuePath) {
-                        eventArgs = markerColorChoose(eventArgs, data);
-                    }
-                    var lati = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
-                    var long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
-                        Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
-                    var offset = markerSettings.offset;
-                    if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
-                        var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
-                            + markerIndex + '_dataIndex_' + dataIndex;
-                        var location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), _this.maps.tileZoomLevel, _this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, _this.maps);
-                        var transPoint = { x: x, y: y };
-                        if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
-                            markerTemplateCounts++;
-                            markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateElements, location_1, transPoint, scale, offset, _this.maps);
+            if (!isNullOrUndefined(markerDatas)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                Array.prototype.forEach.call(markerDatas, function (data, dataIndex) {
+                    _this.maps.markerNullCount = markerIndex >= 0 && dataIndex === 0 ? 0 : _this.maps.markerNullCount;
+                    var eventArgs = {
+                        template: markerSettings.template, data: data, maps: _this.maps, marker: markerSettings,
+                        cancel: false, name: markerRendering, fill: markerSettings.fill, colorValuePath: markerSettings.colorValuePath,
+                        shapeValuePath: markerSettings.shapeValuePath,
+                        height: !isNullOrUndefined(markerSettings.heightValuePath) && !isNullOrUndefined(data[markerSettings.heightValuePath])
+                            ? data[markerSettings.heightValuePath] : markerSettings.height,
+                        width: !isNullOrUndefined(markerSettings.widthValuePath) && !isNullOrUndefined(data[markerSettings.widthValuePath])
+                            ? data[markerSettings.widthValuePath] : markerSettings.width,
+                        imageUrl: markerSettings.imageUrl, imageUrlValuePath: markerSettings.imageUrlValuePath, shape: markerSettings.shape,
+                        border: markerSettings.border
+                    };
+                    eventArgs = markerShapeChoose(eventArgs, data);
+                    eventArgs = markerColorChoose(eventArgs, data);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    _this.maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
+                        if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
+                            eventArgs = markerShapeChoose(eventArgs, data);
                         }
-                        else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
-                            markerCounts++;
-                            marker(eventArgs, markerSettings, markerDatas, dataIndex, location_1, transPoint, markerID, offset, scale, _this.maps, markerSVGObject);
+                        if (markerSettings.colorValuePath !== eventArgs.colorValuePath) {
+                            eventArgs = markerColorChoose(eventArgs, data);
                         }
-                    }
-                    nullCount += (!isNaN(lati) && !isNaN(long)) ? 0 : 1;
-                    markerTemplateCounts += (eventArgs.cancel) ? 1 : 0;
-                    markerCounts += (eventArgs.cancel) ? 1 : 0;
-                    _this.maps.markerNullCount = (isNullOrUndefined(lati) || isNullOrUndefined(long))
-                        ? _this.maps.markerNullCount + 1 : _this.maps.markerNullCount;
-                    var markerDataLength = markerDatas.length - _this.maps.markerNullCount;
-                    var isMarkersClustered = false;
-                    if (markerSVGObject.childElementCount === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
-                        if (_this.maps.isTileMap) {
-                            var polygonsElement = document.getElementById(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
-                            var polygonElement = document.getElementById(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
-                            if (!isNullOrUndefined(polygonsElement)) {
-                                polygonsElement.insertAdjacentElement('afterend', markerSVGObject);
+                        var lati = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
+                            parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
+                        var long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
+                            parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
+                        var offset = markerSettings.offset;
+                        if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
+                            var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                                + markerIndex + '_dataIndex_' + dataIndex;
+                            var location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), _this.maps.tileZoomLevel, _this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, _this.maps);
+                            var transPoint = { x: x, y: y };
+                            if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                                markerTemplateCounts++;
+                                markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateElements, location_1, transPoint, scale, offset, _this.maps);
                             }
-                            else {
-                                if (!isNullOrUndefined(polygonElement)) {
-                                    polygonElement.insertAdjacentElement('afterend', markerSVGObject);
+                            else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                                markerCounts++;
+                                marker(eventArgs, markerSettings, markerDatas, dataIndex, location_1, transPoint, markerID, offset, scale, _this.maps, markerSVGObject);
+                            }
+                        }
+                        nullCount += (!isNaN(lati) && !isNaN(long)) ? 0 : 1;
+                        markerTemplateCounts += (eventArgs.cancel) ? 1 : 0;
+                        markerCounts += (eventArgs.cancel) ? 1 : 0;
+                        _this.maps.markerNullCount = (isNullOrUndefined(lati) || isNullOrUndefined(long))
+                            ? _this.maps.markerNullCount + 1 : _this.maps.markerNullCount;
+                        var markerDataLength = markerDatas.length - _this.maps.markerNullCount;
+                        var isMarkersClustered = false;
+                        var markerGroup = (markerSettings.clusterSettings.allowClustering
+                            || (currentLayers.markerClusterSettings.allowClustering && currentLayers.markerSettings.length > 1))
+                            ? markerSVGObject.querySelectorAll("[id*='LayerIndex_" + layerIndex + "_MarkerIndex_" + markerIndex + "']:not([id*='_Group'])")
+                            : markerSVGObject.childNodes;
+                        if (markerGroup.length === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
+                            if (_this.maps.isTileMap) {
+                                var polygonsElement = document.getElementById(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
+                                var polygonElement = document.getElementById(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
+                                if (!isNullOrUndefined(polygonsElement)) {
+                                    polygonsElement.insertAdjacentElement('afterend', markerSVGObject);
                                 }
                                 else {
-                                    layerElement.insertBefore(markerSVGObject, layerElement.firstElementChild);
+                                    if (!isNullOrUndefined(polygonElement)) {
+                                        polygonElement.insertAdjacentElement('afterend', markerSVGObject);
+                                    }
+                                    else {
+                                        layerElement.insertBefore(markerSVGObject, layerElement.firstElementChild);
+                                    }
                                 }
                             }
+                            else {
+                                layerElement.appendChild(markerSVGObject);
+                            }
+                            if (currentLayers.markerSettings[markerIndex].clusterSettings.allowClustering ||
+                                !allowInnerClusterSetting && currentLayers.markerClusterSettings.allowClustering) {
+                                _this.maps.svgObject.appendChild(markerSVGObject);
+                                _this.maps.element.appendChild(_this.maps.svgObject);
+                                isMarkersClustered = clusterTemplate(currentLayers, markerSVGObject, _this.maps, layerIndex, markerIndex, markerSVGObject, layerElement, true, true, null, allowInnerClusterSetting);
+                            }
                         }
-                        else {
-                            layerElement.appendChild(markerSVGObject);
-                        }
-                        if (currentLayers.markerClusterSettings.allowClustering) {
-                            _this.maps.svgObject.appendChild(markerSVGObject);
-                            _this.maps.element.appendChild(_this.maps.svgObject);
-                            isMarkersClustered = clusterTemplate(currentLayers, markerSVGObject, _this.maps, layerIndex, markerSVGObject, layerElement, true, true);
-                        }
-                    }
-                    if (markerTemplateElements.childElementCount === (markerDataLength - markerCounts - nullCount) && getElementByID(_this.maps.element.id + '_Secondary_Element')) {
-                        getElementByID(_this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateElements);
-                        if (scale >= 1) {
-                            if (currentLayers.markerClusterSettings.allowClustering && !isMarkersClustered) {
-                                clusterTemplate(currentLayers, markerTemplateElements, _this.maps, layerIndex, markerSVGObject, layerElement, false, true);
+                        var markerTemplateGroup = (markerSettings.clusterSettings.allowClustering
+                            || (currentLayers.markerClusterSettings.allowClustering && currentLayers.markerSettings.length > 1))
+                            ? markerTemplateElements.querySelectorAll("[id*='LayerIndex_" + layerIndex + "_MarkerIndex_" + markerIndex + "']:not([id*='_Group'])")
+                            : markerTemplateElements.childNodes;
+                        if (markerTemplateGroup.length === (markerDataLength - markerCounts - nullCount) && getElementByID(_this.maps.element.id + '_Secondary_Element')) {
+                            getElementByID(_this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateElements);
+                            if (scale >= 1) {
+                                if ((markerSettings.clusterSettings.allowClustering || !allowInnerClusterSetting &&
+                                    currentLayers.markerClusterSettings.allowClustering) && !isMarkersClustered) {
+                                    clusterTemplate(currentLayers, markerTemplateElements, _this.maps, layerIndex, markerIndex, markerSVGObject, layerElement, false, true, null, allowInnerClusterSetting);
+                                }
                             }
                         }
-                    }
+                    });
                 });
-            });
+            }
         });
     };
     /**
@@ -1018,6 +1048,18 @@ var Zoom = /** @class */ (function () {
             }
         }
     };
+    /**
+     *
+     * @param {Element | HTMLElement} element - Specifies the marker element.
+     * @param {number} factor - Specifies scale factor.
+     * @param {number} x - Specifies the x location of the marker element.
+     * @param {number} y - Specifies the y location of the marker element.
+     * @param {number} scale - Specifies scale factor.
+     * @param {number} type - Specifies the type of the marker processing.
+     * @param {number} animate - Specifies whether the animation is enabled or not.
+     * @returns {void}
+     * @private
+     */
     Zoom.prototype.markerTranslate = function (element, factor, x, y, scale, type, animate) {
         if (animate === void 0) { animate = false; }
         var layerIndex = parseInt(element.id.split('_LayerIndex_')[1].split('_')[0], 10);
@@ -1038,9 +1080,8 @@ var Zoom = /** @class */ (function () {
             var location_2 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(lng, lat), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, layer, this.maps);
             if (this.maps.isTileMap) {
                 if (type === 'Template') {
-                    var templateOffset = element.getBoundingClientRect();
-                    element.style.left = ((location_2.x - (templateOffset.width / 2)) + marker.offset.x) + 'px';
-                    element.style.top = ((location_2.y - (templateOffset.height / 2)) + marker.offset.y) + 'px';
+                    element.style.left = (location_2.x + marker.offset.x) + 'px';
+                    element.style.top = (location_2.y + marker.offset.y) + 'px';
                 }
                 else {
                     location_2.x += marker.offset.x;
@@ -1060,9 +1101,8 @@ var Zoom = /** @class */ (function () {
                         element.style.transform = 'translate(-50%, -50%)';
                     }
                     else {
-                        var elementOffset = element.getBoundingClientRect();
-                        element.style.left = ((location_2.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
-                        element.style.top = ((location_2.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
+                        element.style.left = ((location_2.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x + 'px';
+                        element.style.top = ((location_2.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y + 'px';
                     }
                 }
                 else {
@@ -1149,15 +1189,15 @@ var Zoom = /** @class */ (function () {
             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;
@@ -1186,7 +1226,7 @@ var Zoom = /** @class */ (function () {
             };
             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;
         }
@@ -1216,6 +1256,7 @@ var Zoom = /** @class */ (function () {
         var size = map.mapAreaRect;
         var translatePoint = map.previousPoint = map.translatePoint;
         var prevTilePoint = map.tileTranslatePoint;
+        this.maps.mergeCluster();
         map.previousProjection = type === 'Reset' ? undefined : map.projectionType;
         zoomFactor = (type === 'ZoomOut') ? (Math.round(zoomFactor) === 1 ? 1 : zoomFactor) : zoomFactor;
         zoomFactor = (type === 'Reset') ? minZoom : (Math.round(zoomFactor) === 0) ? 1 : zoomFactor;
@@ -1256,7 +1297,7 @@ var Zoom = /** @class */ (function () {
                 map.scale = map.previousScale;
             }
             else {
-                this.applyTransform(map, true);
+                this.applyTransform(map, false, true);
             }
         }
         else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
@@ -1297,7 +1338,7 @@ var Zoom = /** @class */ (function () {
                             // element1.removeChild(element1.children[element1.childElementCount - 1]);
                             // element1.childElementCount ? element1.removeChild(element1.children[element1.childElementCount - 1]) : element1;
                         }
-                        _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';
                         }
@@ -1897,6 +1938,7 @@ var Zoom = /** @class */ (function () {
             var delta = 1;
             var staticMaxZoomLevel = map.zoomSettings.maxZoom;
             var value = (map.isTileMap) ? prevLevel : prevScale;
+            this.maps.mergeCluster();
             if (((position.x > map.mapAreaRect.x) && (position.x < (map.mapAreaRect.x + map.mapAreaRect.width))) &&
                 (position.y > map.mapAreaRect.y) && position.y < (map.mapAreaRect.y + map.mapAreaRect.height)) {
                 e.preventDefault();
@@ -1909,11 +1951,11 @@ var Zoom = /** @class */ (function () {
                         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 {
@@ -1927,7 +1969,7 @@ var Zoom = /** @class */ (function () {
                     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'] :
@@ -2250,6 +2292,16 @@ var Zoom = /** @class */ (function () {
         this.maps.off(Browser.touchStartEvent, this.mouseDownHandler);
         this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
         EventHandler.remove(this.maps.element, this.cancelEvent, this.mouseCancelHandler);
+        var toolbarElement = document.getElementById(this.maps.element.id + '_Zooming_KitCollection');
+        if (toolbarElement) {
+            for (var i = 0; i < toolbarElement.childNodes.length; i++) {
+                if (toolbarElement.childNodes[i].tagName === 'g') {
+                    EventHandler.add(toolbarElement.childNodes[i], Browser.touchStartEvent, this.performToolBarAction);
+                    EventHandler.add(toolbarElement.childNodes[i], 'mouseover', this.showTooltip);
+                    EventHandler.add(toolbarElement.childNodes[i], 'mouseout', this.removeTooltip);
+                }
+            }
+        }
     };
     /**
      * Get module name.
@@ -2284,7 +2336,6 @@ var Zoom = /** @class */ (function () {
         this.layerCollectionEle = null;
         this.currentLayer = null;
         this.pinchDistance = null;
-        this.maps = null;
     };
     return Zoom;
 }());

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

@@ -37,6 +37,10 @@ export declare type MapsTheme =
 'Tailwind' | 
 /** Renders a map with TailwindDark theme. */
 'TailwindDark' | 
+/** Renders a map with Tailwind3 theme. */
+'Tailwind3' | 
+/** Renders a map with Tailwind3Dark theme. */
+'Tailwind3Dark' | 
 /** Renders a map with Bootstrap5 theme. */
 'Bootstrap5' | 
 /**  Render a map with Bootstrap5 dark theme. */

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

@@ -488,14 +488,17 @@ export declare function markerShapeChoose(eventArgs: IMarkerRenderingEventArgs,
  * @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
  */
-export declare function clusterTemplate(currentLayer: LayerSettings, markerTemplate: HTMLElement | Element, maps: Maps, layerIndex: number, markerCollection: Element, layerElement: Element, check: boolean, zoomCheck: boolean): boolean;
+export declare function clusterTemplate(currentLayer: LayerSettings, markerTemplate: HTMLElement | Element, maps: Maps, layerIndex: number, markerIndex: number, markerCollection: Element, layerElement: Element, check: boolean, zoomCheck: boolean, translatePoint?: any, allowInnerClusterSetting?: boolean): boolean;
 /**
  * @param {Maps} maps - Specifies the map control.
  * @param {number} currentZoomFactor - Specifies the current zoom factor.
@@ -921,14 +924,6 @@ export declare function fixInitialScaleForTile(map: Maps): void;
  * @private
  */
 export declare function getElementByID(id: string): Element;
-/**
- * Function to get clientElement from id.
- *
- * @param {string} id - Specifies the id
- * @returns {Element} - Returns the element
- * @private
- */
-export declare function getClientElement(id: string): ClientRect;
 /**
  * Function to return the number value for the string value.
  *