@syncfusion/ej2-maps 20.1.47 → 20.1.59

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

@@ -6908,6 +6908,10 @@ let Maps = class Maps extends Component {
          * Resize the map
          */
         this.isResize = false;
+        /**
+         * @private
+         */
+        this.isReset = false;
         /** @private */
         this.baseSize = new Size(0, 0);
         /** @public */
@@ -8163,6 +8167,7 @@ let Maps = class Maps extends Component {
                     this.refreshing = true;
                     this.wireEVents();
                     this.render();
+                    this.refreshing = false;
                 }, 500);
             }
         }
@@ -8557,7 +8562,10 @@ let Maps = class Maps extends Component {
                             if (!isNullOrUndefined(newProp.layers[x])) {
                                 const collection = Object.keys(newProp.layers[x]);
                                 for (const collectionProp of collection) {
-                                    if (collectionProp === 'markerSettings') {
+                                    if (collectionProp === 'layerType' && newProp.layers[x].layerType === 'OSM') {
+                                        this.isReset = true;
+                                    }
+                                    else if (collectionProp === 'markerSettings') {
                                         isMarker = true;
                                     }
                                     else if (collectionProp === 'staticMapType') {
@@ -12952,8 +12960,13 @@ class Zoom {
             translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
             map.translatePoint = new Point(translatePointX, translatePointY);
             map.scale = newZoomFactor;
-            this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-            this.applyTransform();
+            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                map.translatePoint = map.previousPoint;
+                map.scale = map.previousScale;
+            }
+            else {
+                this.applyTransform();
+            }
         }
         else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
             this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
@@ -12970,31 +12983,38 @@ class Zoom {
             }
             map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
             map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
-            this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-            if (document.querySelector('.GroupElement')) {
-                document.querySelector('.GroupElement').style.display = 'none';
-            }
-            if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
+            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                map.scale = map.previousScale;
+                map.tileZoomLevel = prevLevel;
+                map.zoomSettings.zoomFactor = map.previousScale;
             }
-            this.markerLineAnimation(map);
-            map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
-            const element1 = document.getElementById(this.maps.element.id + '_tiles');
-            const animationDuration = this.maps.layersCollection[0].animationDuration;
-            setTimeout(() => {
-                // if (type === 'ZoomOut') {
-                //     element1.removeChild(element1.children[element1.childElementCount - 1]);
-                //     if (element1.childElementCount) {
-                //         element1.removeChild(element1.children[element1.childElementCount - 1]);
-                //     } else {
-                //         element1 = element1;
-                //     }
-                // }
-                this.applyTransform();
+            else {
+                if (document.querySelector('.GroupElement')) {
+                    document.querySelector('.GroupElement').style.display = 'none';
+                }
                 if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
                 }
-            }, animationDuration);
+                this.markerLineAnimation(map);
+                map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
+                const element1 = document.getElementById(this.maps.element.id + '_tiles');
+                const animationDuration = this.maps.layersCollection[0].animationDuration;
+                setTimeout(() => {
+                    // if (type === 'ZoomOut') {
+                    //     element1.removeChild(element1.children[element1.childElementCount - 1]);
+                    //     if (element1.childElementCount) {
+                    //         element1.removeChild(element1.children[element1.childElementCount - 1]);
+                    //     } else {
+                    //         element1 = element1;
+                    //     }
+                    // }
+                    this.applyTransform();
+                    if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                    }
+                }, animationDuration);
+            }
         }
         this.maps.zoomNotApplied = false;
     }
@@ -13016,6 +13036,7 @@ class Zoom {
             };
         }
         map.trigger('zoom', zoomArgs);
+        return zoomArgs.cancel;
     }
     getTileTranslatePosition(prevLevel, currentLevel, position, type) {
         const map = this.maps;
@@ -13041,6 +13062,7 @@ class Zoom {
         const zoomRect = this.zoomingRect;
         const maxZoom = map.zoomSettings.maxZoom;
         const minZoom = map.zoomSettings.minZoom;
+        let isZoomCancelled;
         if (zoomRect.height > 0 && zoomRect.width > 0) {
             const x = this.zoomingRect.x + (this.zoomingRect.width / 2);
             const y = this.zoomingRect.y + (this.zoomingRect.height / 2);
@@ -13053,7 +13075,11 @@ class Zoom {
                 const translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
                 map.translatePoint = new Point(translatePointX, translatePointY);
                 map.scale = zoomCalculationFactor;
-                this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+                isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+                if (isZoomCancelled) {
+                    map.translatePoint = map.previousPoint;
+                    map.scale = map.previousScale;
+                }
             }
             else {
                 zoomCalculationFactor = prevLevel + (Math.round(prevLevel + (((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2)));
@@ -13066,13 +13092,21 @@ class Zoom {
                 map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, zoomCalculationFactor))) /
                     (Math.pow(2, zoomCalculationFactor));
                 map.scale = (Math.pow(2, zoomCalculationFactor));
-                this.triggerZoomEvent(prevTilePoint, prevLevel, '');
-                map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
+                isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+                if (isZoomCancelled) {
+                    map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                    map.scale = map.tileZoomLevel = map.zoomSettings.zoomFactor = prevLevel;
+                }
+                else {
+                    map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
+                }
+            }
+            if (!isZoomCancelled) {
+                map.mapScaleValue = zoomCalculationFactor;
+                this.applyTransform(true);
+                this.maps.zoomNotApplied = false;
+                this.zoomingRect = null;
             }
-            map.mapScaleValue = zoomCalculationFactor;
-            this.applyTransform(true);
-            this.maps.zoomNotApplied = false;
-            this.zoomingRect = null;
         }
     }
     setInteraction(newInteraction) {
@@ -13101,6 +13135,7 @@ class Zoom {
         this.pinchFactor *= newScale;
         this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
         const zoomCalculationFactor = this.pinchFactor;
+        let isZoomCancelled;
         if (!map.isTileMap) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const minBounds = map.baseMapRectBounds['min'];
@@ -13116,7 +13151,11 @@ class Zoom {
             translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
             map.translatePoint = new Point(translatePointX, translatePointY);
             map.scale = zoomCalculationFactor;
-            this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+            isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+            if (isZoomCancelled) {
+                map.translatePoint = map.previousPoint;
+                map.scale = map.previousScale;
+            }
         }
         else {
             const newTileFactor = zoomCalculationFactor;
@@ -13127,10 +13166,20 @@ class Zoom {
             map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, newTileFactor))) /
                 (Math.pow(2, newTileFactor));
             map.scale = (Math.pow(2, newTileFactor));
-            this.triggerZoomEvent(prevTilePoint, prevLevel, '');
-            map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
+            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;
+            }
+            else {
+                map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
+            }
+        }
+        if (!isZoomCancelled) {
+            this.applyTransform();
         }
-        this.applyTransform();
     }
     drawZoomRectangle() {
         const map = this.maps;
@@ -13836,8 +13885,13 @@ class Zoom {
             map.translatePoint = new Point(translatePointX, translatePointY);
             map.zoomTranslatePoint = map.translatePoint;
             map.scale = zoomFactor;
-            this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-            this.applyTransform(true);
+            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                map.translatePoint = map.zoomTranslatePoint = map.previousPoint;
+                map.scale = map.previousScale;
+            }
+            else {
+                this.applyTransform(true);
+            }
         }
         else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
             let tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
@@ -13854,25 +13908,32 @@ class Zoom {
                     map.tileTranslatePoint.y = map.initialTileTranslate.y;
                     tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
                 }
-                this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
-                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
-                if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
-                }
-                if (document.querySelector('.GroupElement')) {
-                    document.querySelector('.GroupElement').style.display = 'none';
+                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                    map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                    map.scale = map.previousScale;
+                    map.tileZoomLevel = prevLevel;
+                    map.zoomSettings.zoomFactor = map.previousScale;
                 }
-                this.markerLineAnimation(map);
-                map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
-                const element1 = document.getElementById(this.maps.element.id + '_tiles');
-                const animationDuration = this.maps.layersCollection[0].animationDuration;
-                setTimeout(() => {
-                    this.applyTransform(true);
+                else {
+                    map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                    map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
                     if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
                     }
-                }, animationDuration);
+                    if (document.querySelector('.GroupElement')) {
+                        document.querySelector('.GroupElement').style.display = 'none';
+                    }
+                    this.markerLineAnimation(map);
+                    map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
+                    const element1 = document.getElementById(this.maps.element.id + '_tiles');
+                    const animationDuration = this.maps.layersCollection[0].animationDuration;
+                    setTimeout(() => {
+                        this.applyTransform(true);
+                        if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                            document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                        }
+                    }, animationDuration);
+                }
             }
             this.maps.zoomNotApplied = false;
         }
@@ -14641,6 +14702,9 @@ class ImageExport {
                     image.src = url;
                 }
                 else {
+                    const svgParentElement = document.getElementById(this.control.element.id + '_MapAreaBorder');
+                    let top = parseFloat(svgParentElement.getAttribute('y'));
+                    let left = parseFloat(svgParentElement.getAttribute('x'));
                     const imgxHttp = new XMLHttpRequest();
                     const imgTileLength = this.control.mapLayerPanel.tiles.length;
                     for (let i = 0; i <= imgTileLength + 1; i++) {
@@ -14659,17 +14723,17 @@ class ImageExport {
                             if (i === 0 || i === imgTileLength + 1) {
                                 if (i === 0) {
                                     ctxt.setTransform(1, 0, 0, 1, 0, 0);
-                                    ctxt.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
+                                    ctxt.rect(0, top, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
                                     ctxt.clip();
                                 }
                                 else {
-                                    ctxt.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
+                                    ctxt.setTransform(1, 0, 0, 1, left, top);
                                 }
                             }
                             else {
                                 const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
-                                ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
-                                    (parseFloat(tileParent.style.top)));
+                                ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left, parseFloat(tile.style.top) +
+                                    top);
                             }
                             ctxt.drawImage(exportTileImg, 0, 0);
                             if (i === imgTileLength + 1) {
@@ -14803,6 +14867,9 @@ class PdfExport {
                 image.src = url;
             }
             else {
+                const svgParentElement = document.getElementById(this.control.element.id + '_MapAreaBorder');
+                let top = parseFloat(svgParentElement.getAttribute('y'));
+                let left = parseFloat(svgParentElement.getAttribute('x'));
                 const xHttp = new XMLHttpRequest();
                 const tileLength = this.control.mapLayerPanel.tiles.length;
                 for (let i = 0; i <= tileLength + 1; i++) {
@@ -14821,17 +14888,16 @@ class PdfExport {
                         if (i === 0 || i === tileLength + 1) {
                             if (i === 0) {
                                 ctx.setTransform(1, 0, 0, 1, 0, 0);
-                                ctx.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
+                                ctx.rect(0, top, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
                                 ctx.clip();
                             }
                             else {
-                                ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
+                                ctx.setTransform(1, 0, 0, 1, left, top);
                             }
                         }
                         else {
                             const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
-                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
-                                (parseFloat(tileParent.style.top)));
+                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left, parseFloat(tile.style.top) + top);
                         }
                         ctx.drawImage(tileImg, 0, 0);
                         if (i === tileLength + 1) {