@syncfusion/ej2-maps 28.2.9 → 29.1.34

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

@@ -1333,7 +1333,6 @@ function mergeSeparateCluster(sameMarkerData, maps) {
     var markerIndex = sameMarkerData[0].markerIndex;
     var dataIndex = sameMarkerData[0].dataIndex;
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
-    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
     var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElement(clusterId + '_Group') : getElement(clusterId);
     var clusterEleLabel = getElement(clusterId + '_datalabel_' + clusterIndex);
@@ -7395,7 +7394,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             }
         }
     };
-    LayerPanel.prototype.generateTiles = function (zoomLevel, tileTranslatePoint, zoomType, bing, position) {
+    LayerPanel.prototype.generateTiles = function (zoomLevel, tileTranslatePoint, zoomType, bing, position, isPinch) {
         var userLang = this.mapObject.locale;
         var size = this.mapObject.availableSize;
         this.tiles = [];
@@ -7485,122 +7484,136 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         }
         if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset || this.mapObject.isZoomByPosition
             || this.mapObject.zoomNotApplied) {
-            this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+            this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY, isPinch);
         }
     };
-    LayerPanel.prototype.arrangeTiles = function (type, x, y) {
+    LayerPanel.prototype.arrangeTiles = function (type, x, y, isPinch) {
         var _this = this;
+        if (isPinch === void 0) { isPinch = false; }
         var element = document.getElementById(this.mapObject.element.id + '_tile_parent');
         var element1 = document.getElementById(this.mapObject.element.id + '_tiles');
-        var timeOut;
-        if (!isNullOrUndefined(type) && type !== 'Pan') {
-            this.tileAnimation(type, x, y);
-            timeOut = animationMode === 'Disable' ? 0 : (this.mapObject.layersCollection[0].animationDuration === 0 &&
-                animationMode === 'Enable') ? 1000 : this.mapObject.layersCollection[0].animationDuration;
-        }
-        else {
-            timeOut = 0;
-        }
-        setTimeout(function () {
-            if (element) {
-                element.style.zIndex = '1';
-            }
-            if (element1) {
-                element1.style.zIndex = '0';
-            }
-            var animateElement;
-            if (!document.getElementById(_this.mapObject.element.id + '_animated_tiles') && element) {
-                animateElement = createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
-                element.appendChild(animateElement);
+        if (!isPinch) {
+            var timeOut = void 0;
+            if (!isNullOrUndefined(type) && type !== 'Pan') {
+                this.tileAnimation(type, x, y);
+                timeOut = animationMode === 'Disable' ? 0 : (this.mapObject.layersCollection[0].animationDuration === 0 &&
+                    animationMode === 'Enable') ? 1000 : this.mapObject.layersCollection[0].animationDuration;
             }
             else {
-                if (type !== 'Pan' && element1 && element) {
-                    element1.appendChild(element.children[0]);
-                    if (!_this.mapObject.isAddLayer && !isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
-                        document.getElementById(_this.mapObject.element.id + '_animated_tiles').id =
-                            _this.mapObject.element.id + '_animated_tiles_old';
-                    }
+                timeOut = 0;
+            }
+            setTimeout(function () {
+                if (element) {
+                    element.style.zIndex = '1';
+                }
+                if (element1) {
+                    element1.style.zIndex = '0';
+                }
+                var animateElement;
+                if (!document.getElementById(_this.mapObject.element.id + '_animated_tiles') && element) {
                     animateElement = createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
                     element.appendChild(animateElement);
                 }
                 else {
-                    animateElement = element ? element.children[0] : null;
-                }
-            }
-            for (var id = 0; id < _this.tiles.length; id++) {
-                var tile = _this.tiles[id];
-                var imgElement = null;
-                var mapId = _this.mapObject.element.id;
-                if (type === 'Pan') {
-                    var child = document.getElementById(mapId + '_tile_' + id);
-                    var isNewTile = false;
-                    if (isNullOrUndefined(child)) {
-                        isNewTile = true;
-                        child = createElement('div', { id: mapId + '_tile_' + id });
-                        imgElement = createElement('img');
+                    if (type !== 'Pan' && element1 && element) {
+                        element1.appendChild(element.children[0]);
+                        if (!_this.mapObject.isAddLayer && !isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
+                            document.getElementById(_this.mapObject.element.id + '_animated_tiles').id =
+                                _this.mapObject.element.id + '_animated_tiles_old';
+                        }
+                        animateElement = createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
+                        element.appendChild(animateElement);
                     }
                     else {
-                        child.style.removeProperty('display');
-                        imgElement = child.children[0];
-                    }
-                    if (!isNewTile && imgElement && imgElement.src !== tile.src) {
-                        imgElement.src = tile.src;
+                        animateElement = element ? element.children[0] : null;
                     }
-                    child.style.position = 'absolute';
-                    child.style.left = tile.left + 'px';
-                    child.style.top = tile.top + 'px';
-                    child.style.height = tile.height + 'px';
-                    child.style.width = tile.width + 'px';
-                    if (isNewTile) {
-                        imgElement.setAttribute('height', '256px');
-                        imgElement.setAttribute('width', '256px');
-                        imgElement.setAttribute('src', tile.src);
-                        imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
-                        imgElement.style.setProperty('user-select', 'none');
-                        child.appendChild(imgElement);
-                        animateElement.appendChild(child);
+                }
+                _this.tileProcess(type, animateElement, isPinch);
+                if (!isNullOrUndefined(_this.mapObject.currentTiles)) {
+                    for (var l = _this.tiles.length; l < animateElement.childElementCount; l++) {
+                        var isExistingElement = false;
+                        for (var a = 0; a < _this.mapObject.currentTiles.childElementCount; a++) {
+                            if (!isExistingElement &&
+                                _this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
+                                isExistingElement = true;
+                            }
+                        }
+                        if (isExistingElement) {
+                            animateElement.children[l].style.display = 'none';
+                        }
+                        else {
+                            animateElement.removeChild(animateElement.children[l]);
+                        }
                     }
                 }
-                else {
+            }, timeOut);
+        }
+        else {
+            var animateElement = document.getElementById(this.mapObject.element.id + '_animates_tiles');
+            if (isNullOrUndefined(animateElement)) {
+                animateElement = createElement('div', { id: this.mapObject.element.id + '_animates_tiles' });
+            }
+            this.tileProcess(type, animateElement, isPinch);
+            element1.appendChild(animateElement);
+        }
+    };
+    LayerPanel.prototype.tileProcess = function (type, animateElement, isPinch) {
+        for (var id = 0; id < this.tiles.length; id++) {
+            var tile = this.tiles[id];
+            var imgElement = null;
+            var mapId = this.mapObject.element.id;
+            if (type === 'Pan') {
+                var child = document.getElementById(mapId + '_tile_' + id);
+                var isNewTile = false;
+                if (isNullOrUndefined(child)) {
+                    isNewTile = true;
+                    child = createElement('div', { id: mapId + '_tile_' + id });
                     imgElement = createElement('img');
+                }
+                else {
+                    child.style.removeProperty('display');
+                    imgElement = child.children[0];
+                }
+                if (!isNewTile && imgElement && imgElement.src !== tile.src) {
+                    imgElement.src = tile.src;
+                }
+                child.style.position = 'absolute';
+                child.style.left = tile.left + 'px';
+                child.style.top = tile.top + 'px';
+                child.style.height = tile.height + 'px';
+                child.style.width = tile.width + 'px';
+                if (isNewTile) {
                     imgElement.setAttribute('height', '256px');
                     imgElement.setAttribute('width', '256px');
                     imgElement.setAttribute('src', tile.src);
+                    imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
                     imgElement.style.setProperty('user-select', 'none');
-                    imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
-                    var child = createElement('div', { id: mapId + '_tile_' + id });
-                    child.style.position = 'absolute';
-                    child.style.left = tile.left + 'px';
-                    child.style.top = tile.top + 'px';
-                    child.style.height = tile.height + 'px';
-                    child.style.width = tile.width + 'px';
                     child.appendChild(imgElement);
-                    if (animateElement) {
-                        animateElement.appendChild(child);
-                    }
-                }
-                if (id === (_this.tiles.length - 1) && document.getElementById(_this.mapObject.element.id + '_animated_tiles_old')) {
-                    removeElement(_this.mapObject.element.id + '_animated_tiles_old');
+                    animateElement.appendChild(child);
                 }
             }
-            if (!isNullOrUndefined(_this.mapObject.currentTiles)) {
-                for (var l = _this.tiles.length; l < animateElement.childElementCount; l++) {
-                    var isExistingElement = false;
-                    for (var a = 0; a < _this.mapObject.currentTiles.childElementCount; a++) {
-                        if (!isExistingElement &&
-                            _this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
-                            isExistingElement = true;
-                        }
-                    }
-                    if (isExistingElement) {
-                        animateElement.children[l].style.display = 'none';
-                    }
-                    else {
-                        animateElement.removeChild(animateElement.children[l]);
-                    }
+            else {
+                imgElement = createElement('img');
+                imgElement.setAttribute('height', '256px');
+                imgElement.setAttribute('width', '256px');
+                imgElement.setAttribute('src', tile.src);
+                imgElement.style.setProperty('user-select', 'none');
+                imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
+                var child = createElement('div', { id: mapId + '_tile_' + id });
+                child.style.position = 'absolute';
+                child.style.left = tile.left + 'px';
+                child.style.top = tile.top + 'px';
+                child.style.height = tile.height + 'px';
+                child.style.width = tile.width + 'px';
+                child.appendChild(imgElement);
+                if (animateElement) {
+                    animateElement.appendChild(child);
                 }
             }
-        }, timeOut);
+            if (!isPinch && id === (this.tiles.length - 1) && document.getElementById(this.mapObject.element.id + '_animated_tiles_old')) {
+                removeElement(this.mapObject.element.id + '_animated_tiles_old');
+            }
+        }
     };
     /**
      * Animation for tile layers and hide the group element until the tile layer rendering.
@@ -9859,6 +9872,20 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.mapsTooltipModule)) {
             this.mapsTooltipModule.removeEventListener();
         }
+        if (!isNullOrUndefined(this.zoomModule)) {
+            this.zoomModule.removeEventListener();
+        }
+        if (!isNullOrUndefined(this.legendModule)) {
+            this.legendModule.removeEventListener();
+        }
+        if (!isNullOrUndefined(this.selectionModule)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.selectionModule.removeEventListener();
+        }
+        if (!isNullOrUndefined(this.highlightModule)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.highlightModule.removeEventListener();
+        }
         if (!isNullOrUndefined(this.bingMap)) {
             this.bingMap.destroy();
         }
@@ -14583,8 +14610,10 @@ var Legend = /** @__PURE__ @class */ (function () {
         this.defsElement = null;
         this.legendElement = [];
         this.oldShapeElement = null;
-        this.removeEventListener();
-        this.maps = null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.maps.refreshing) {
+            this.maps = null;
+        }
     };
     return Legend;
 }());
@@ -14613,6 +14642,7 @@ var Highlight = /** @__PURE__ @class */ (function () {
      * To unbind events for highlight module.
      *
      * @returns {void}
+     * @private
      */
     Highlight.prototype.removeEventListener = function () {
         if (this.maps.isDestroyed) {
@@ -14851,8 +14881,10 @@ var Highlight = /** @__PURE__ @class */ (function () {
      */
     Highlight.prototype.destroy = function () {
         this.highlightSettings = null;
-        this.removeEventListener();
-        this.maps = null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.maps.refreshing) {
+            this.maps = null;
+        }
     };
     return Highlight;
 }());
@@ -14879,6 +14911,7 @@ var Selection = /** @__PURE__ @class */ (function () {
      * For removing events from selection module.
      *
      * @returns {void}
+     * @private
      */
     Selection.prototype.removeEventListener = function () {
         if (this.maps.isDestroyed) {
@@ -15180,8 +15213,10 @@ var Selection = /** @__PURE__ @class */ (function () {
      */
     Selection.prototype.destroy = function () {
         this.selectionsettings = null;
-        this.removeEventListener();
-        this.maps = null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.maps.refreshing) {
+            this.maps = null;
+        }
     };
     return Selection;
 }());
@@ -15645,22 +15680,20 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
      * @private
      */
     MapsTooltip.prototype.removeEventListener = function () {
-        if (this.maps) {
-            if (this.maps.isDestroyed) {
-                return;
-            }
-            if (this.maps.tooltipDisplayMode === 'DoubleClick') {
-                this.maps.off('dblclick', this.renderTooltip);
-            }
-            else if (this.maps.tooltipDisplayMode === 'Click') {
-                this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
-            }
-            else {
-                this.maps.off(Browser.touchMoveEvent, this.renderTooltip);
-            }
-            this.maps.off(Browser.touchCancelEvent, this.removeTooltip);
-            this.maps.element.removeEventListener('contextmenu', this.removeTooltip);
+        if (this.maps.isDestroyed) {
+            return;
+        }
+        if (this.maps.tooltipDisplayMode === 'DoubleClick') {
+            this.maps.off('dblclick', this.renderTooltip);
         }
+        else if (this.maps.tooltipDisplayMode === 'Click') {
+            this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
+        }
+        else {
+            this.maps.off(Browser.touchMoveEvent, this.renderTooltip);
+        }
+        this.maps.off(Browser.touchCancelEvent, this.removeTooltip);
+        this.maps.element.removeEventListener('contextmenu', this.removeTooltip);
     };
     /**
      * Get module name.
@@ -15683,7 +15716,9 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
             removeElement(this.maps.element.id + '_mapsTooltip');
         }
         this.svgTooltip = null;
-        this.maps = null;
+        if (!this.maps.refreshing) {
+            this.maps = null;
+        }
     };
     return MapsTooltip;
 }());
@@ -15715,6 +15750,12 @@ var Zoom = /** @__PURE__ @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.startTouches = [];
         /** @private */
+        this.isCancellation = false;
+        this.pinchTileZoomScale = 1;
+        this.tileZoomLevel = 1;
+        this.pinchZoomScale = 1;
+        this.isPinchZooming = false;
+        /** @private */
         this.mouseDownLatLong = { x: 0, y: 0 };
         /** @private */
         this.mouseMoveLatLong = { x: 0, y: 0 };
@@ -15909,6 +15950,22 @@ var Zoom = /** @__PURE__ @class */ (function () {
         map.tileTranslatePoint.y = (currentLevel === 1) ? ((bounds.height / 2) - ((tileDefaultSize * 2) / 2) + (padding * 2)) :
             position.y - ((y * totalSize) / 100);
     };
+    Zoom.prototype.getTileTranslate = function (currentLevel, type) {
+        var map = this.maps;
+        var padding = type === 'ZoomOut' ? 10 : (type === 'Reset' && currentLevel > 1) ? 0 : 10;
+        var bounds = map.availableSize;
+        var totalSize = Math.pow(2, currentLevel) * 256;
+        var x = (bounds.width / 2) - (totalSize / 2);
+        var y = (bounds.height / 2) - (totalSize / 2);
+        var position = convertTileLatLongToPoint(new MapLocation(this.pinchStartLatLong['longitude'], this.pinchStartLatLong['latitude']), currentLevel, { x: x, y: y }, true);
+        x -= position.x - (bounds.width / 2);
+        y = y - (position.y - (bounds.height / 2)) + padding;
+        var scale = Math.pow(2, currentLevel - 1);
+        map.tileTranslatePoint.x = x;
+        map.tileTranslatePoint.y = y;
+        map.translatePoint.x = (x - (0.01 * this.tileZoomLevel)) / scale;
+        map.translatePoint.y = (y - (0.01 * this.tileZoomLevel)) / scale;
+    };
     /**
      * @returns {void}
      * @private
@@ -15989,6 +16046,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
             this.setInteraction(null);
         }
     };
+    Zoom.prototype.tilePinchingProcess = function (scale) {
+        this.tileZoomLevel = Math.round(scale);
+        this.getTileTranslate(this.tileZoomLevel);
+        this.maps.mapLayerPanel.generateTiles(this.tileZoomLevel, this.maps.tileTranslatePoint, null, null, null, true);
+    };
     /**
      * @param {PointerEvent} e - Specifies the vent in the map
      * @returns {void}
@@ -16048,48 +16110,112 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
         else {
-            var touchCenter = this.getTouchCenterPoint();
-            var distance = Math.sqrt(Math.pow((this.touchMoveList[0].pageX - this.touchMoveList[1].pageX), 2) + Math.pow((this.touchMoveList[0].pageY - this.touchMoveList[1].pageY), 2));
-            var factor = map.tileZoomLevel;
+            this.isPinchZooming = true;
+            var touchCenter = this.touchCenter;
+            var touchOnePoint = this.getMousePosition(this.touchMoveList[0].pageX, this.touchMoveList[0].pageY);
+            var touchTwoPoint = this.getMousePosition(this.touchMoveList[1].pageX, this.touchMoveList[1].pageY);
+            var distance = Math.sqrt(Math.pow((touchOnePoint.x - touchTwoPoint.x), 2) + Math.pow((touchOnePoint.y - touchTwoPoint.y), 2));
+            var pinchScale = distance / this.startDistance;
             if (!isNullOrUndefined(this.pinchDistance)) {
+                var pinchZoomFactor = Math.log2(pinchScale * (256 * Math.pow(2, prevLevel)) / 256);
+                pinchZoomFactor = Math.min(map.zoomSettings.maxZoom, Math.max(map.zoomSettings.minZoom, pinchZoomFactor));
+                var scaleFactor = this.pinchDistance > distance ? (prevLevel * pinchScale) : pinchZoomFactor;
+                var factor = pinchZoomFactor;
+                var isZoomOut = false;
                 if (this.pinchDistance > distance) {
-                    factor = factor - 1;
+                    factor = (scaleFactor % 1);
+                    isZoomOut = true;
                 }
                 else if (this.pinchDistance < distance) {
-                    factor = factor + 1;
-                }
-                factor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.maps.zoomSettings.minZoom, factor));
-                if (factor !== map.tileZoomLevel) {
-                    this.pinchFactor = factor;
-                    map.previousScale = map.scale;
-                    map.tileZoomLevel = this.pinchFactor;
-                    map.scale = Math.pow(2, map.tileZoomLevel - 1);
-                    this.getTileTranslatePosition(prevLevel, this.pinchFactor, { x: touchCenter.x, y: touchCenter.y }, null);
-                    map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.scale)) / map.scale;
-                    map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.scale)) / map.scale;
-                    isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
-                    if (isZoomCancelled) {
-                        map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
-                        map.scale = map.previousScale;
-                        map.tileZoomLevel = prevLevel;
-                        map.zoomSettings.zoomFactor = map.previousScale;
+                    factor = (scaleFactor % 1) + 1;
+                }
+                var zoomFactor = Math.ceil(scaleFactor);
+                if (zoomFactor > map.zoomSettings.minZoom && zoomFactor <= map.zoomSettings.maxZoom) {
+                    var element = document.getElementById(map.element.id);
+                    if (element) {
+                        element.style.overflow = 'hidden';
                     }
-                    else {
-                        map.mapLayerPanel.generateTiles(factor, map.tileTranslatePoint);
+                    this.tileZoomLevel = zoomFactor;
+                    var transformOriginX = (touchCenter.x / (map.mapAreaRect.width - map.mapAreaRect.x)) * 100;
+                    var transformOriginY = (touchCenter.y / (map.mapAreaRect.height - map.mapAreaRect.y)) * 100;
+                    var tilesParent = document.getElementById(map.element.id + '_tile_parent');
+                    var copyTilesParent = document.getElementById(map.element.id + '_tiles');
+                    if (!copyTilesParent) {
+                        copyTilesParent = document.createElement('div');
+                        copyTilesParent.id = map.element.id + '_tiles';
+                        map.element.appendChild(copyTilesParent);
+                        this.copyStyles(tilesParent, copyTilesParent);
+                        copyTilesParent.style.zIndex = '0';
+                    }
+                    copyTilesParent.style.visibility = 'hidden';
+                    tilesParent.style.transformOrigin = transformOriginX + "% " + transformOriginY + "%";
+                    tilesParent.style.transform = "scale(" + factor + ")";
+                    var svgElement = document.getElementById(map.element.id + '_Tile_SVG_Parent');
+                    svgElement.style.transformOrigin = transformOriginX + "% " + transformOriginY + "%";
+                    svgElement.style.transform = "scale(" + factor + ")";
+                    if (!this.isCancellation && (0.2 >= scaleFactor % 1 && scaleFactor % 1 >= 0.1 && !isZoomOut) || (scaleFactor % 1 <= 0.9 && isZoomOut)) {
+                        var animateTile = document.getElementById(map.element.id + '_animates_tiles');
+                        if (!animateTile) {
+                            animateTile = document.createElement('div');
+                            animateTile.id = map.element.id + '_animates_tiles';
+                            animateTile.classList.add(this.tileZoomLevel.toString());
+                            copyTilesParent.appendChild(animateTile);
+                        }
+                        if (animateTile.childElementCount === 0) {
+                            this.pinchZoomScale = isZoomOut ? Math.floor(scaleFactor) : Math.ceil(scaleFactor);
+                            this.tilePinchingProcess(this.pinchZoomScale);
+                            this.isCancellation = true;
+                        }
+                    }
+                    if (this.isCancellation && (scaleFactor % 1 >= 0.99 && !isZoomOut) || (scaleFactor % 1 <= 0.1 && isZoomOut)) {
+                        if (tilesParent.style.transformOrigin !== '' && this.isCancellation) {
+                            tilesParent.style.transformOrigin = '';
+                            tilesParent.style.transform = '';
+                            svgElement.style.transformOrigin = '';
+                            svgElement.style.transform = '';
+                            this.pinchTileZoomScale = isZoomOut ? Math.floor(scaleFactor) : Math.ceil(scaleFactor);
+                            this.getTileTranslate(this.pinchTileZoomScale);
+                            var targetElement_1 = document.getElementById(map.element.id + '_animated_tiles');
+                            var sourceElement = document.getElementById(map.element.id + '_animates_tiles');
+                            while (targetElement_1.firstChild) {
+                                targetElement_1.removeChild(targetElement_1.firstChild);
+                            }
+                            Array.from(sourceElement.children).forEach(function (child) {
+                                targetElement_1.appendChild(child.cloneNode(true));
+                            });
+                            document.getElementById(map.element.id + '_animated_tiles')['className'] = this.pinchTileZoomScale.toFixed(0);
+                            if (sourceElement) {
+                                while (sourceElement.firstChild) {
+                                    sourceElement.removeChild(sourceElement.firstChild);
+                                }
+                            }
+                            this.isCancellation = false;
+                            map.mapScaleValue = this.pinchTileZoomScale;
+                            map.scale = Math.pow(2, this.pinchTileZoomScale - 1);
+                            this.applyTransform(map);
+                        }
                     }
                 }
             }
             this.pinchDistance = distance;
         }
-        map.mapScaleValue = zoomCalculationFactor;
-        if (!isZoomCancelled) {
-            this.applyTransform(map);
+        if (!map.isTileMap) {
+            map.mapScaleValue = zoomCalculationFactor;
+            if (!isZoomCancelled) {
+                this.applyTransform(map);
+            }
+            this.triggerZoomComplete(map, prevLevel, '');
         }
-        this.triggerZoomComplete(map, prevLevel, '');
         if (Browser.isDevice) {
             this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
         }
     };
+    Zoom.prototype.copyStyles = function (sourceElement, targetElement) {
+        var sourceStyles = window.getComputedStyle(sourceElement);
+        Array.from(sourceStyles).forEach(function (style) {
+            targetElement.style[style] = sourceStyles.getPropertyValue(style);
+        });
+    };
     Zoom.prototype.getTouchCenterPoint = function () {
         var touchList = [];
         for (var i = 0; i < this.touchMoveList.length; i++) {
@@ -16153,6 +16279,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 height: map.availableSize.height,
                 style: 'position: absolute;'
             });
+            rectSVGObject.style.position = 'absolute';
             var rectOption = new RectOption(map.element.id + '_ZoomRect', this.maps.themeStyle.rectangleZoomFillColor, border, this.maps.themeStyle.rectangleZoomFillOpacity, this.zoomingRect, 0, 0, '', '3');
             rectSVGObject.appendChild(map.renderer.drawRectangle(rectOption));
             getElementByID(map.element.id + '_Secondary_Element').appendChild(rectSVGObject);
@@ -16230,17 +16357,17 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             if (maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
                                 currentEle.remove();
                                 if (layerElement.children.length > 0 && layerElement.children[0]) {
-                                    layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this_1.currentLayer, maps.tileZoomLevel, this_1.index), layerElement.children[1]);
+                                    layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this_1.currentLayer, this_1.isPinchZooming ? this_1.pinchZoomScale : maps.tileZoomLevel, this_1.index), layerElement.children[1]);
                                 }
                                 else {
-                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this_1.currentLayer, maps.tileZoomLevel, this_1.index));
+                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this_1.currentLayer, this_1.isPinchZooming ? this_1.pinchZoomScale : maps.tileZoomLevel, this_1.index));
                                 }
                             }
                             else if (maps.isTileMap && (currentEle.id.indexOf('_Polygons_Group') > -1)) {
                                 if (this_1.currentLayer.polygonSettings.polygons.length > 0) {
                                     this_1.currentLayer.polygonSettings.polygons.map(function (polygonSettings, polygonIndex) {
                                         var markerData = polygonSettings.points;
-                                        var path = calculatePolygonPath(maps, maps.tileZoomLevel, _this.currentLayer, markerData);
+                                        var path = calculatePolygonPath(maps, _this.isPinchZooming ? _this.pinchZoomScale : maps.tileZoomLevel, _this.currentLayer, markerData);
                                         var element = document.getElementById(maps.element.id + '_LayerIndex_' + _this.index + '_PolygonIndex_' + polygonIndex);
                                         if (!isNullOrUndefined(element)) {
                                             element.setAttribute('d', path);
@@ -16470,7 +16597,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         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 location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), _this.isPinchZooming ? _this.pinchZoomScale : _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++;
@@ -16758,7 +16885,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 !isNullOrUndefined(marker.dataSource[dataIndex]['latitude']) ? parseFloat(marker.dataSource[dataIndex]['latitude']) :
                     !isNullOrUndefined(marker.dataSource[dataIndex]['Latitude']) ? parseFloat(marker.dataSource[dataIndex]['Latitude']) : 0;
             var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
-            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);
+            var location_2 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(lng, lat), this.isPinchZooming ? this.pinchZoomScale : this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, layer, this.maps);
             if (this.maps.isTileMap) {
                 if (type === 'Template') {
                     element.style.left = (location_2.x + marker.offset.x) + 'px';
@@ -17686,6 +17813,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var pageY;
         var target;
         var touches = null;
+        this.isPinchZooming = false;
         //eslint-disable-next-line @typescript-eslint/no-unused-vars
         var element = e.target;
         if (e.type === 'touchstart') {
@@ -17720,6 +17848,16 @@ var Zoom = /** @__PURE__ @class */ (function () {
             this.pinchFactor = this.maps.scale;
             this.fingers = touches.length;
         }
+        if (this.maps.isTileMap && this.isTouch && e['touches'].length > 1) {
+            var startTouch = this.getMousePosition(e['touches'][0].pageX, e['touches'][0].pageY);
+            var endTouch = this.getMousePosition(e['touches'][1].pageX, e['touches'][1].pageY);
+            this.startDistance = Math.sqrt(Math.pow((startTouch.x - endTouch.x), 2) + Math.pow((startTouch.y - endTouch.y), 2));
+            this.touchCenter = { x: (startTouch.x + endTouch.x) / 2, y: (startTouch.y + endTouch.y) / 2 };
+            this.pinchStartLatLong = this.maps.pointToLatLong((startTouch.x + endTouch.x) / 2, (startTouch.y + endTouch.y) / 2);
+            this.isCancellation = false;
+            this.pinchTileZoomScale = this.maps.tileZoomLevel;
+            this.pinchDistance = null;
+        }
         this.isSingleClick = true;
     };
     /**
@@ -17755,7 +17893,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
         if (this.isTouch) {
-            if (this.maps.zoomSettings.pinchZooming && touches !== null) {
+            if (this.maps.zoomSettings.enable && this.maps.zoomSettings.pinchZooming && touches !== null) {
                 if (this.firstMove && touches.length === 2) {
                     this.rectZoomingStart = false;
                     this.updateInteraction();
@@ -17763,7 +17901,9 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 }
                 else if (touches.length === 2 && this.touchStartList.length === 2) {
                     this.touchMoveList = targetTouches(e);
-                    e.preventDefault();
+                    if (e.cancelable) {
+                        e.preventDefault();
+                    }
                     this.rectZoomingStart = false;
                     this.performPinchZooming(e);
                 }
@@ -17771,7 +17911,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
             }
         }
         this.mouseMovePoints = this.getMousePosition(pageX, pageY);
-        if (zoom.enable && this.isPanModeEnabled && this.maps.markerDragId.indexOf('_MarkerIndex_') === -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice)) {
+        if (!this.isPinchZooming && (zoom.enable && this.isPanModeEnabled && this.maps.markerDragId.indexOf('_MarkerIndex_') === -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice))) {
             e.preventDefault();
             this.maps.element.style.cursor = 'pointer';
             this.mouseMoveLatLong = { x: pageX, y: pageY };
@@ -17783,7 +17923,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 this.mouseDownLatLong['y'] = pageY;
             }
         }
-        if (this.isTouch ? (touches !== null && touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart) {
+        if (!this.isPinchZooming && (this.isTouch ? (touches !== null && touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart)) {
             e.preventDefault();
             var scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
             if (this.maps.zoomSettings.enableSelectionZooming && scale < this.maps.zoomSettings.maxZoom) {
@@ -17807,7 +17947,26 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.touchStartList = [];
         this.touchMoveList = [];
         this.lastScale = 1;
+        this.isCancellation = false;
         this.maps.element.style.cursor = 'auto';
+        if (this.isPinchZooming && this.maps.isTileMap) {
+            this.isPinchZooming = false;
+            var tilesParent = document.getElementById(this.maps.element.id + '_tile_parent');
+            var svgElement = document.getElementById(this.maps.element.id + '_Tile_SVG_Parent');
+            tilesParent.style.transformOrigin = '';
+            tilesParent.style.transform = '';
+            svgElement.style.transformOrigin = '';
+            svgElement.style.transform = '';
+            this.maps.tileZoomLevel = this.maps.mapScaleValue = this.maps.zoomSettings.zoomFactor = this.pinchZoomScale;
+            this.maps.scale = Math.pow(2, this.pinchZoomScale - 1);
+            this.tileZoomLevel = Math.round(this.pinchZoomScale);
+            this.getTileTranslate(this.tileZoomLevel);
+            this.maps.mapLayerPanel.generateTiles(this.tileZoomLevel, this.maps.tileTranslatePoint);
+            this.applyTransform(this.maps);
+            if (document.getElementById(this.maps.element.id + '_animates_tiles')) {
+                document.getElementById(this.maps.element.id + '_animates_tiles').remove();
+            }
+        }
         if (this.isPanModeEnabled && this.maps.zoomSettings.enablePanning && !isNullOrUndefined(this.maps.previousPoint) &&
             (!this.maps.isTileMap ? (this.maps.translatePoint.x !== this.maps.previousPoint.x && this.maps.translatePoint.y !== this.maps.previousPoint.y)
                 : this.isPanningInProgress)) {
@@ -18007,10 +18166,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
         this.startTouches = [];
         this.mouseDownLatLong = null;
         this.mouseMoveLatLong = null;
-        this.removeEventListener();
         this.layerCollectionEle = null;
         this.currentLayer = null;
         this.pinchDistance = null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.maps.refreshing) {
+            this.maps = null;
+        }
     };
     return Zoom;
 }());