@syncfusion/ej2-maps 21.2.4 → 21.2.10

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

@@ -993,10 +993,10 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                         const ele = drawSymbols(shapeCustom['shape'], shapeCustom['imageUrl'], { x: 0, y: 0 }, clusterID, shapeCustom, markerCollection, maps);
                         ele.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
                         if (eventArg.shape === 'Balloon') {
-                            ele.children[0].innerText = indexCollection.toString();
+                            ele.children[0].textContent = indexCollection.toString();
                         }
                         else {
-                            ele.innerText = indexCollection.toString();
+                            ele.textContent = indexCollection.toString();
                         }
                         options = new TextOption(labelID, (0), postionY, 'middle', (colloideBounds.length + 1).toString(), '', '');
                         textElement = renderTextElement(options, style, style.color, markerCollection);
@@ -1095,7 +1095,7 @@ function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
     let markerEle;
     const markerDataLength = sameMarkerData[0].data.length;
     for (let i = 0; i < markerDataLength; i++) {
-        markerEle = marker.shape === 'Balloon' ? getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+        markerEle = marker.shape === 'Balloon' && isNullOrUndefined(marker.template) ? getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         markerEle['style']['visibility'] = 'hidden';
     }
     removeElement(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine');
@@ -1124,7 +1124,7 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     const clusterEleLabel = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'hidden');
     clusterEleLabel.setAttribute('visibility', 'hidden');
-    let markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
+    let markerEle = marker.shape === 'Balloon' && isNullOrUndefined(marker.template) ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
     const height = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().height : marker.height;
     const width = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
     const centerX = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[0];
@@ -1160,7 +1160,7 @@ function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
         const x1 = centerX + radius * Math.sin((Math.PI * 2 * newAngle) / 360);
         const y1 = centerY + radius * Math.cos((Math.PI * 2 * newAngle) / 360);
         path += start + 'L ' + (x1) + ' ' + y1 + ' ';
-        markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+        markerEle = marker.shape === 'Balloon' && isNullOrUndefined(marker.template) ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         if (markerEle.parentElement.id.indexOf('Template_Group') > -1) {
             markerEle['style']['transform'] = '';
             markerEle['style']['left'] = maps.isTileMap ? x1 - (width / 2) + 'px' : (x1 - (width / 2) - 10) + 'px';
@@ -5264,7 +5264,7 @@ class Marker {
                 if ((target.indexOf('_cluster_') > -1)) {
                     let isClusterSame = false;
                     const clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? layer.markerClusterSettings.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : layer.markerClusterSettings.shape === 'Balloon' ? target + '_Group' : target);
-                    const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerText.split(',').map(Number) : clusterElement.innerText.split(',').map(Number);
+                    const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
                     collection = [];
                     for (const i of indexes) {
                         collection.push({ data: marker$$1.dataSource[i], index: i });
@@ -7094,6 +7094,7 @@ class LayerPanel {
                             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);
                         }
@@ -7104,6 +7105,7 @@ class LayerPanel {
                         imgElement.setAttribute('width', '256px');
                         imgElement.setAttribute('src', tile.src);
                         imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
+                        imgElement.style.setProperty('user-select', 'none');
                         const child = createElement('div', { id: mapId + '_tile_' + id });
                         child.style.position = 'absolute';
                         child.style.left = tile.left + 'px';
@@ -14038,93 +14040,103 @@ class Zoom {
         const scale = map.previousScale = map.scale;
         const maxZoom = map.zoomSettings.maxZoom;
         const minZoom = map.zoomSettings.minZoom;
-        newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
         newZoomFactor = maxZoom >= newZoomFactor ? newZoomFactor : maxZoom;
-        const prevTilePoint = map.tileTranslatePoint;
-        if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
-            || map.isReset)) {
-            const availSize = map.mapAreaRect;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const minBounds = map.baseMapRectBounds['min'];
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const maxBounds = map.baseMapRectBounds['max'];
-            let mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
-            let mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
-            let translatePointX;
-            let translatePointY;
-            if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
-                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
-                    mapTotalWidth = availSize.width / 2;
-                    mapTotalHeight = availSize.height;
+        let isToolbarPerform = true;
+        switch (type.toLowerCase()) {
+            case 'zoomin':
+                isToolbarPerform = newZoomFactor <= this.maps.zoomSettings.maxZoom;
+                break;
+            case 'zoomout':
+                isToolbarPerform = newZoomFactor >= this.maps.zoomSettings.minZoom;
+                break;
+        }
+        if (isToolbarPerform) {
+            const prevTilePoint = map.tileTranslatePoint;
+            if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
+                || map.isReset)) {
+                const availSize = map.mapAreaRect;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const minBounds = map.baseMapRectBounds['min'];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const maxBounds = map.baseMapRectBounds['max'];
+                let mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
+                let mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
+                let translatePointX;
+                let translatePointY;
+                if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                    if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                        mapTotalWidth = availSize.width / 2;
+                        mapTotalHeight = availSize.height;
+                    }
+                    newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                    newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
+                    map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+                }
+                else {
+                    const point = map.translatePoint;
+                    translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
+                    translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
+                    const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
+                    translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                    translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                    map.translatePoint = new Point(translatePointX, translatePointY);
+                }
+                map.scale = newZoomFactor;
+                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                    map.translatePoint = map.previousPoint;
+                    map.scale = map.mapScaleValue = map.previousScale;
+                }
+                else {
+                    this.applyTransform(map);
                 }
-                newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
-                newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
-                map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
-            }
-            else {
-                const point = map.translatePoint;
-                translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
-                translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
-                const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
-                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-                map.translatePoint = new Point(translatePointX, translatePointY);
-            }
-            map.scale = newZoomFactor;
-            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
-                map.translatePoint = map.previousPoint;
-                map.scale = map.mapScaleValue = map.previousScale;
             }
-            else {
-                this.applyTransform(map);
-            }
-        }
-        else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
-            this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
-            map.tileZoomLevel = newZoomFactor;
-            map.zoomSettings.zoomFactor = newZoomFactor;
-            map.scale = Math.pow(2, newZoomFactor - 1);
-            if (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
-                map.initialCheck = true;
-                map.zoomPersistence = false;
-                map.tileTranslatePoint.x = map.initialTileTranslate.x;
-                map.tileTranslatePoint.y = map.initialTileTranslate.y;
-                newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+            else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
+                this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
+                map.tileZoomLevel = newZoomFactor;
+                map.zoomSettings.zoomFactor = newZoomFactor;
                 map.scale = Math.pow(2, newZoomFactor - 1);
-            }
-            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 (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;
-            }
-            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 = 'none';
-                }
-                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(this.maps);
+                if (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
+                    map.initialCheck = true;
+                    map.zoomPersistence = false;
+                    map.tileTranslatePoint.x = map.initialTileTranslate.x;
+                    map.tileTranslatePoint.y = map.initialTileTranslate.y;
+                    newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+                    map.scale = Math.pow(2, newZoomFactor - 1);
+                }
+                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 (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;
+                }
+                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(this.maps);
+                        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;
@@ -15285,11 +15297,23 @@ class Zoom {
         e.stopImmediatePropagation();
         const isTouch = e.pointerType === 'touch' || e.pointerType === '2' || (e.type.indexOf('touch') > -1);
         const toolbar = target.id.split('_Zooming_ToolBar_')[1].split('_')[0];
-        if (isTouch) {
+        let isToolbarPerform = true;
+        switch (toolbar.toLowerCase()) {
+            case 'zoomin':
+                isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) + 1 <= this.maps.zoomSettings.maxZoom;
+                break;
+            case 'zoomout':
+                isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) - 1 >= this.maps.zoomSettings.minZoom;
+                break;
+            case 'reset':
+                isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) != this.maps.zoomSettings.minZoom;
+                break;
+        }
+        if (isTouch && isToolbarPerform) {
             this.handled = true;
             this.performZoomingByToolBar(toolbar);
         }
-        else if ((e.type === 'mousedown' || e.type === 'pointerdown') && !this.handled) {
+        else if ((e.type === 'mousedown' || e.type === 'pointerdown') && !this.handled && isToolbarPerform) {
             this.handled = false;
             this.performZoomingByToolBar(toolbar);
         }