@syncfusion/ej2-maps 28.2.9 → 29.1.34

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

@@ -1279,7 +1279,6 @@ function mergeSeparateCluster(sameMarkerData, maps) {
     const markerIndex = sameMarkerData[0].markerIndex;
     const dataIndex = sameMarkerData[0].dataIndex;
     const markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
-    const marker = maps.layers[layerIndex].markerSettings[markerIndex];
     const clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
     const clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElement(clusterId + '_Group') : getElement(clusterId);
     const clusterEleLabel = getElement(clusterId + '_datalabel_' + clusterIndex);
@@ -7127,7 +7126,7 @@ class LayerPanel {
             }
         }
     }
-    generateTiles(zoomLevel, tileTranslatePoint, zoomType, bing, position) {
+    generateTiles(zoomLevel, tileTranslatePoint, zoomType, bing, position, isPinch) {
         const userLang = this.mapObject.locale;
         const size = this.mapObject.availableSize;
         this.tiles = [];
@@ -7215,121 +7214,134 @@ class LayerPanel {
         }
         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);
         }
     }
-    arrangeTiles(type, x, y) {
+    arrangeTiles(type, x, y, isPinch = false) {
         const element = document.getElementById(this.mapObject.element.id + '_tile_parent');
         const element1 = document.getElementById(this.mapObject.element.id + '_tiles');
-        let 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(() => {
-            if (element) {
-                element.style.zIndex = '1';
-            }
-            if (element1) {
-                element1.style.zIndex = '0';
-            }
-            let 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) {
+            let 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 {
-                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(() => {
+                if (element) {
+                    element.style.zIndex = '1';
+                }
+                if (element1) {
+                    element1.style.zIndex = '0';
+                }
+                let 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 (let id = 0; id < this.tiles.length; id++) {
-                const tile = this.tiles[id];
-                let imgElement = null;
-                const mapId = this.mapObject.element.id;
-                if (type === 'Pan') {
-                    let child = document.getElementById(mapId + '_tile_' + id);
-                    let 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 (let l = this.tiles.length; l < animateElement.childElementCount; l++) {
+                        let isExistingElement = false;
+                        for (let 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 {
+            let 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);
+        }
+    }
+    tileProcess(type, animateElement, isPinch) {
+        for (let id = 0; id < this.tiles.length; id++) {
+            const tile = this.tiles[id];
+            let imgElement = null;
+            const mapId = this.mapObject.element.id;
+            if (type === 'Pan') {
+                let child = document.getElementById(mapId + '_tile_' + id);
+                let 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.style.setProperty('user-select', 'none');
                     imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
-                    const 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';
+                    imgElement.style.setProperty('user-select', 'none');
                     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 (let l = this.tiles.length; l < animateElement.childElementCount; l++) {
-                    let isExistingElement = false;
-                    for (let 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'));
+                const 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.
@@ -9550,6 +9562,20 @@ let Maps = class Maps extends Component {
         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();
         }
@@ -14226,8 +14252,10 @@ class Legend {
         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;
+        }
     }
 }
 
@@ -14255,6 +14283,7 @@ class Highlight {
      * To unbind events for highlight module.
      *
      * @returns {void}
+     * @private
      */
     removeEventListener() {
         if (this.maps.isDestroyed) {
@@ -14492,8 +14521,10 @@ class Highlight {
      */
     destroy() {
         this.highlightSettings = null;
-        this.removeEventListener();
-        this.maps = null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.maps.refreshing) {
+            this.maps = null;
+        }
     }
 }
 
@@ -14519,6 +14550,7 @@ class Selection {
      * For removing events from selection module.
      *
      * @returns {void}
+     * @private
      */
     removeEventListener() {
         if (this.maps.isDestroyed) {
@@ -14819,8 +14851,10 @@ class Selection {
      */
     destroy() {
         this.selectionsettings = null;
-        this.removeEventListener();
-        this.maps = null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.maps.refreshing) {
+            this.maps = null;
+        }
     }
 }
 
@@ -15280,22 +15314,20 @@ class MapsTooltip {
      * @private
      */
     removeEventListener() {
-        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.
@@ -15318,7 +15350,9 @@ class MapsTooltip {
             removeElement(this.maps.element.id + '_mapsTooltip');
         }
         this.svgTooltip = null;
-        this.maps = null;
+        if (!this.maps.refreshing) {
+            this.maps = null;
+        }
     }
 }
 
@@ -15349,6 +15383,12 @@ class Zoom {
         // 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 };
@@ -15541,6 +15581,22 @@ class Zoom {
         map.tileTranslatePoint.y = (currentLevel === 1) ? ((bounds.height / 2) - ((tileDefaultSize * 2) / 2) + (padding * 2)) :
             position.y - ((y * totalSize) / 100);
     }
+    getTileTranslate(currentLevel, type) {
+        const map = this.maps;
+        const padding = type === 'ZoomOut' ? 10 : (type === 'Reset' && currentLevel > 1) ? 0 : 10;
+        const bounds = map.availableSize;
+        const totalSize = Math.pow(2, currentLevel) * 256;
+        let x = (bounds.width / 2) - (totalSize / 2);
+        let y = (bounds.height / 2) - (totalSize / 2);
+        const 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;
+        const 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
@@ -15621,6 +15677,11 @@ class Zoom {
             this.setInteraction(null);
         }
     }
+    tilePinchingProcess(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}
@@ -15680,48 +15741,112 @@ class Zoom {
             }
         }
         else {
-            const touchCenter = this.getTouchCenterPoint();
-            const 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));
-            let factor = map.tileZoomLevel;
+            this.isPinchZooming = true;
+            const touchCenter = this.touchCenter;
+            const touchOnePoint = this.getMousePosition(this.touchMoveList[0].pageX, this.touchMoveList[0].pageY);
+            const touchTwoPoint = this.getMousePosition(this.touchMoveList[1].pageX, this.touchMoveList[1].pageY);
+            const distance = Math.sqrt(Math.pow((touchOnePoint.x - touchTwoPoint.x), 2) + Math.pow((touchOnePoint.y - touchTwoPoint.y), 2));
+            const pinchScale = distance / this.startDistance;
             if (!isNullOrUndefined(this.pinchDistance)) {
+                let pinchZoomFactor = Math.log2(pinchScale * (256 * Math.pow(2, prevLevel)) / 256);
+                pinchZoomFactor = Math.min(map.zoomSettings.maxZoom, Math.max(map.zoomSettings.minZoom, pinchZoomFactor));
+                const scaleFactor = this.pinchDistance > distance ? (prevLevel * pinchScale) : pinchZoomFactor;
+                let factor = pinchZoomFactor;
+                let 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;
+                }
+                const zoomFactor = Math.ceil(scaleFactor);
+                if (zoomFactor > map.zoomSettings.minZoom && zoomFactor <= map.zoomSettings.maxZoom) {
+                    const element = document.getElementById(map.element.id);
+                    if (element) {
+                        element.style.overflow = 'hidden';
                     }
-                    else {
-                        map.mapLayerPanel.generateTiles(factor, map.tileTranslatePoint);
+                    this.tileZoomLevel = zoomFactor;
+                    const transformOriginX = (touchCenter.x / (map.mapAreaRect.width - map.mapAreaRect.x)) * 100;
+                    const transformOriginY = (touchCenter.y / (map.mapAreaRect.height - map.mapAreaRect.y)) * 100;
+                    const tilesParent = document.getElementById(map.element.id + '_tile_parent');
+                    let 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})`;
+                    const 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)) {
+                        let 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);
+                            const targetElement = document.getElementById(map.element.id + '_animated_tiles');
+                            const sourceElement = document.getElementById(map.element.id + '_animates_tiles');
+                            while (targetElement.firstChild) {
+                                targetElement.removeChild(targetElement.firstChild);
+                            }
+                            Array.from(sourceElement.children).forEach((child) => {
+                                targetElement.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_');
         }
     }
+    copyStyles(sourceElement, targetElement) {
+        const sourceStyles = window.getComputedStyle(sourceElement);
+        Array.from(sourceStyles).forEach((style) => {
+            targetElement.style[style] = sourceStyles.getPropertyValue(style);
+        });
+    }
     getTouchCenterPoint() {
         const touchList = [];
         for (let i = 0; i < this.touchMoveList.length; i++) {
@@ -15785,6 +15910,7 @@ class Zoom {
                 height: map.availableSize.height,
                 style: 'position: absolute;'
             });
+            rectSVGObject.style.position = 'absolute';
             const 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);
@@ -15861,17 +15987,17 @@ class Zoom {
                             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.currentLayer, maps.tileZoomLevel, this.index), layerElement.children[1]);
+                                    layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this.currentLayer, this.isPinchZooming ? this.pinchZoomScale : maps.tileZoomLevel, this.index), layerElement.children[1]);
                                 }
                                 else {
-                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index));
+                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, this.isPinchZooming ? this.pinchZoomScale : maps.tileZoomLevel, this.index));
                                 }
                             }
                             else if (maps.isTileMap && (currentEle.id.indexOf('_Polygons_Group') > -1)) {
                                 if (this.currentLayer.polygonSettings.polygons.length > 0) {
                                     this.currentLayer.polygonSettings.polygons.map((polygonSettings, polygonIndex) => {
                                         const markerData = polygonSettings.points;
-                                        const path = calculatePolygonPath(maps, maps.tileZoomLevel, this.currentLayer, markerData);
+                                        const path = calculatePolygonPath(maps, this.isPinchZooming ? this.pinchZoomScale : maps.tileZoomLevel, this.currentLayer, markerData);
                                         const element = document.getElementById(maps.element.id + '_LayerIndex_' + this.index + '_PolygonIndex_' + polygonIndex);
                                         if (!isNullOrUndefined(element)) {
                                             element.setAttribute('d', path);
@@ -16093,7 +16219,7 @@ class Zoom {
                         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 location = (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);
                             const transPoint = { x: x, y: y };
                             if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
                                 markerTemplateCounts++;
@@ -16379,7 +16505,7 @@ class Zoom {
                 !isNullOrUndefined(marker.dataSource[dataIndex]['latitude']) ? parseFloat(marker.dataSource[dataIndex]['latitude']) :
                     !isNullOrUndefined(marker.dataSource[dataIndex]['Latitude']) ? parseFloat(marker.dataSource[dataIndex]['Latitude']) : 0;
             const duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
-            const location = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(lng, lat), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, layer, this.maps);
+            const location = (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.x + marker.offset.x) + 'px';
@@ -17306,6 +17432,7 @@ class Zoom {
         let pageY;
         let target;
         let touches = null;
+        this.isPinchZooming = false;
         //eslint-disable-next-line @typescript-eslint/no-unused-vars
         const element = e.target;
         if (e.type === 'touchstart') {
@@ -17340,6 +17467,16 @@ class Zoom {
             this.pinchFactor = this.maps.scale;
             this.fingers = touches.length;
         }
+        if (this.maps.isTileMap && this.isTouch && e['touches'].length > 1) {
+            const startTouch = this.getMousePosition(e['touches'][0].pageX, e['touches'][0].pageY);
+            const 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;
     }
     /**
@@ -17375,7 +17512,7 @@ class Zoom {
             }
         }
         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();
@@ -17383,7 +17520,9 @@ class Zoom {
                 }
                 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);
                 }
@@ -17391,7 +17530,7 @@ class Zoom {
             }
         }
         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 };
@@ -17403,7 +17542,7 @@ class Zoom {
                 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();
             const scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
             if (this.maps.zoomSettings.enableSelectionZooming && scale < this.maps.zoomSettings.maxZoom) {
@@ -17427,7 +17566,26 @@ class Zoom {
         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;
+            const tilesParent = document.getElementById(this.maps.element.id + '_tile_parent');
+            const 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)) {
@@ -17627,10 +17785,13 @@ class Zoom {
         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;
+        }
     }
 }