@syncfusion/ej2-maps 22.2.8 → 23.1.36

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

@@ -1,4 +1,4 @@
-import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Fetch, Internationalization, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove, setValue } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Fetch, Internationalization, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, animationMode, compile, createElement, extend, isNullOrUndefined, merge, print, remove, setValue } from '@syncfusion/ej2-base';
 import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
@@ -631,7 +631,7 @@ function renderTextElement(option, style, color, parent, isMinus = false) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function convertElement(element, markerId, data, index, mapObj) {
     const childElement = createElement('div', {
-        id: markerId
+        id: markerId, className: mapObj.element.id + '_marker_template_element'
     });
     childElement.style.cssText = 'position: absolute;pointer-events: auto;';
     let elementLength = element.length;
@@ -1223,7 +1223,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
     markerCollection.appendChild(ele);
     const element = (markerData.length - 1) === dataIndex ? 'marker' : null;
     const markerPoint = new Point(x, y);
-    if (markerSettings.animationDuration > 0) {
+    if (markerSettings.animationDuration > 0 || animationMode === 'Enable') {
         elementAnimate(ele, markerSettings.animationDelay, markerSettings.animationDuration, markerPoint, maps, element);
     }
     return markerCollection;
@@ -2578,7 +2578,7 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius = 0)
     let height = 0;
     const transform = element.getAttribute('transform') || '';
     new Animation({}).animate(element, {
-        duration: duration,
+        duration: (duration === 0 && animationMode === 'Enable') ? 1000 : duration,
         delay: delay,
         progress: (args) => {
             if (args.timeStamp > args.delay) {
@@ -3168,6 +3168,7 @@ function animate(element, delay, duration, process, end) {
     // eslint-disable-next-line prefer-const
     let clearAnimation;
     const markerStyle = 'visibility:visible';
+    duration = animationMode === "Disable" ? 0 : duration;
     const startAnimation = (timestamp) => {
         if (!start) {
             start = timestamp;
@@ -4744,6 +4745,9 @@ __decorate$1([
 __decorate$1([
     Property('')
 ], DataLabelSettings.prototype, "template", void 0);
+__decorate$1([
+    Property(0)
+], DataLabelSettings.prototype, "animationDuration", void 0);
 /**
  * Gets or sets the options to customize the shapes in the maps.
  */
@@ -5048,7 +5052,7 @@ class Marker {
                         const markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
                         let location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
-                        const animate$$1 = currentLayer.animationDuration !== 0 || isNullOrUndefined(maps.zoomModule);
+                        const animate$$1 = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object() :
                             !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
@@ -6901,7 +6905,8 @@ class LayerPanel {
         let childNode;
         this.mapObject.translateType = 'layer';
         if (!isNullOrUndefined(this.mapObject.baseMapRectBounds)) {
-            const duration = this.currentLayer.animationDuration;
+            const duration = animationMode === 'Disable' ? 0 : (this.currentLayer.animationDuration === 0 && animationMode === 'Enable') ?
+                1000 : this.currentLayer.animationDuration;
             const animate$$1 = duration !== 0 || isNullOrUndefined(this.mapObject.zoomModule);
             this.mapObject.baseTranslatePoint = this.mapObject.zoomTranslatePoint;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7154,7 +7159,8 @@ class LayerPanel {
         let timeOut;
         if (!isNullOrUndefined(type) && type !== 'Pan') {
             this.tileAnimation(type, x, y);
-            timeOut = this.mapObject.layersCollection[0].animationDuration;
+            timeOut = animationMode === 'Disable' ? 0 : (this.mapObject.layersCollection[0].animationDuration === 0 &&
+                animationMode === 'Enable') ? 1000 : this.mapObject.layersCollection[0].animationDuration;
         }
         else {
             timeOut = 0;
@@ -7289,7 +7295,8 @@ class LayerPanel {
             scaleValue = zoomType.indexOf('ZoomOut') === 0 ? '0.5' : '0.2';
         }
         if (!isNullOrUndefined(animatedTiles)) {
-            animatedTiles.style.transition = this.mapObject.layersCollection[0].animationDuration + 'ms';
+            animatedTiles.style.transition = animationMode === 'Disable' ? '0ms' : (this.mapObject.layersCollection[0].animationDuration === 0
+                && animationMode === 'Enable') ? '1000ms' : this.mapObject.layersCollection[0].animationDuration + 'ms';
             animatedTiles.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleValue + ')';
         }
     }
@@ -7843,7 +7850,18 @@ let Maps = class Maps extends Component {
         this.serverProcess['request']++;
         const fetchApiModule = new Fetch(localAjax.dataOptions, localAjax.type, localAjax.contentType);
         fetchApiModule.onSuccess = (args) => {
-            this.processResponseJsonData('Fetch', args, layer, type);
+            if (!isNullOrUndefined(args.type) && args.type === 'application/octet-stream') {
+                let reader = new FileReader();
+                let map = this;
+                reader.onload = function (data) {
+                    args = JSON.parse(reader.result.toString());
+                    map.processResponseJsonData('Fetch', args, layer, type);
+                };
+                reader.readAsText(args);
+            }
+            else {
+                this.processResponseJsonData('Fetch', args, layer, type);
+            }
         };
         fetchApiModule.send(localAjax.sendData);
     }
@@ -8833,7 +8851,7 @@ let Maps = class Maps extends Component {
         if (e.type.indexOf('touch') !== -1 && e.changedTouches) {
             this.mouseDownEvent = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY };
         }
-        if (this.isDevice) {
+        if (this.isDevice && !isNullOrUndefined(this.mapsTooltipModule)) {
             this.mapsTooltipModule.renderTooltip(e);
         }
         const rect = this.element.getBoundingClientRect();
@@ -10248,7 +10266,7 @@ class Bubble {
                 });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 let translate;
-                const animate$$1 = layer.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
+                const animate$$1 = (layer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(this.maps.zoomModule);
                 if (this.maps.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(this.maps.zoomModule) && !this.maps.isTileMap) {
                     translate = getZoomTranslate(this.maps, layer, animate$$1);
                 }
@@ -10269,7 +10287,7 @@ class Bubble {
                 else {
                     radius = 0;
                 }
-                if (bubbleSettings.animationDuration > 0) {
+                if (bubbleSettings.animationDuration > 0 || animationMode === 'Enable') {
                     elementAnimate(bubbleElement, bubbleSettings.animationDelay, bubbleSettings.animationDuration, position, this.maps, bubble, radius);
                 }
             });
@@ -10440,6 +10458,7 @@ class DataLabel {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const shapeData = shape;
         let element;
+        let rect;
         let text = '';
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let datasrcObj;
@@ -10463,7 +10482,7 @@ class DataLabel {
             layer.shapePropertyPath : [layer.shapePropertyPath]);
         let propertyPath;
         const isPoint = false;
-        const animate$$1 = layer.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
+        const animate$$1 = (layer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(this.maps.zoomModule);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const translate = (this.maps.isTileMap) ? new Object() : ((this.maps.zoomSettings.zoomFactor > 1 &&
             !isNullOrUndefined(this.maps.zoomModule)) ? getZoomTranslate(this.maps, layer, animate$$1) :
@@ -10722,11 +10741,13 @@ class DataLabel {
                             }
                             border.opacity = isNullOrUndefined(border.opacity) ? opacity : border.opacity;
                             const rectOptions = new RectOption(this.maps.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + index + '_rectIndex_' + index, fill, border, opacity, new Rect((x + labelArgs.offsetX), (y + labelArgs.offsetY), textSize['width'], textSize['height']), rx, ry);
-                            const rect = this.maps.renderer.drawRectangle(rectOptions);
+                            rect = this.maps.renderer.drawRectangle(rectOptions);
+                            rect.setAttribute('visibility', layer.dataLabelSettings.animationDuration > 0 || animationMode === 'Enable' ? 'hidden' : 'visibile');
                             group.appendChild(rect);
                         }
                     }
                     element = renderTextElement(options, style, style.color || this.maps.themeStyle.dataLabelFontColor, group);
+                    element.setAttribute('visibility', layer.dataLabelSettings.animationDuration > 0 || animationMode === 'Enable' ? 'hidden' : 'visibile');
                     if (zoomLabelsPosition && scaleZoomValue > 1 && !this.maps.zoomNotApplied) {
                         element.setAttribute('transform', 'translate( ' + ((location['x'] + labelArgs.offsetX)) + ' '
                             + (((location['y'] + labelArgs.offsetY))) + ' )');
@@ -10752,9 +10773,35 @@ class DataLabel {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this.maps.renderReactTemplates();
                 }
+                if (layer.dataLabelSettings.animationDuration > 0 || animationMode === 'Enable') {
+                    if (!isNullOrUndefined(element)) {
+                        this.datalabelAnimate(element, dataLabelSettings.animationDuration, style.opacity, false);
+                        if (!isNullOrUndefined(rect)) {
+                            this.datalabelAnimate(rect, dataLabelSettings.animationDuration, dataLabelSettings.opacity, true);
+                        }
+                    }
+                }
             });
         }
     }
+    datalabelAnimate(element, duration, opacity, isRect) {
+        let height = 0;
+        new Animation({}).animate(element, {
+            duration: (duration === 0 && animationMode === 'Enable') ? 1000 : duration,
+            delay: 0,
+            progress: (args) => {
+                if (args.timeStamp > args.delay) {
+                    height = ((args.timeStamp - args.delay) / args.duration);
+                    element.setAttribute('style', 'user-select: none; visibility: visible;');
+                    element.setAttribute(isRect ? 'fill-opacity' : 'opacity', (opacity * height).toString());
+                }
+            },
+            end: (model) => {
+                element.style.visibility = 'visible';
+                element.setAttribute(isRect ? 'fill-opacity' : 'opacity', opacity.toString());
+            }
+        });
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getPoint(shapes, points) {
         if (shapes['type'] === 'MultiLineString') {
@@ -13734,6 +13781,12 @@ class MapsTooltip {
             clearTimeout(this.clearTimeout);
             this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
         }
+        if (target.id.indexOf(this.maps.element.id) === -1) {
+            const ancestor = target.closest('.' + this.maps.element.id + '_marker_template_element');
+            if (!isNullOrUndefined(ancestor) && ancestor.id.indexOf('_MarkerIndex_') > -1) {
+                target = ancestor;
+            }
+        }
         let option;
         let currentData = '';
         const targetId = target.id;
@@ -14254,7 +14307,7 @@ class Zoom {
                     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;
+                    const animationDuration = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                     setTimeout(() => {
                         // if (type === 'ZoomOut') {
                         //     element1.removeChild(element1.children[element1.childElementCount - 1]);
@@ -14515,7 +14568,7 @@ class Zoom {
      * @returns {void}
      */
     animateTransform(element, animate$$1, x, y, scale) {
-        const duration = this.currentLayer.animationDuration;
+        const duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
         if (!animate$$1 || duration === 0 || this.maps.isTileMap) {
             element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
             return;
@@ -14579,7 +14632,7 @@ class Zoom {
                                     const layerIndex = parseInt(currentEle.childNodes[k]['id'].split('_LayerIndex_')[1].split('_')[0], 10);
                                     const dataIndex = parseInt(currentEle.childNodes[k]['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     const markerIndex = parseInt(currentEle.childNodes[k]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
-                                    markerAnimation = this.currentLayer.markerSettings[markerIndex].animationDuration > 0;
+                                    markerAnimation = this.currentLayer.markerSettings[markerIndex].animationDuration > 0 || animationMode === 'Enable';
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     const markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
                                     for (let x = 0; x < this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x++) {
@@ -14590,7 +14643,7 @@ class Zoom {
                                             maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
                                         }
                                     }
-                                    if ((this.currentLayer.animationDuration > 0 || (maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
+                                    if (((this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
                                         if (maps.isTileMap) {
                                             const groupElement = document.querySelector('.GroupElement');
                                             if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
@@ -14651,7 +14704,7 @@ class Zoom {
                                         const centerY = bubbleCollection['center']['y'];
                                         const currentX = ((centerX + x) * scale);
                                         const currentY = ((centerY + y) * scale);
-                                        const duration = this.currentLayer.animationDuration;
+                                        const duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
                                         if (!animate$$1 || duration === 0) {
                                             childElement.setAttribute('transform', 'translate( ' + currentX + ' ' + currentY + ' )');
                                         }
@@ -14848,7 +14901,7 @@ class Zoom {
         if (element.id.indexOf('_LabelIndex_') > -1) {
             labelIndex = parseFloat(element.id.split('_LabelIndex_')[1].split('_')[0]);
         }
-        const duration = this.currentLayer.animationDuration;
+        const duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
         for (let l = 0; l < labelCollection.length; l++) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const label = labelCollection[l];
@@ -14994,7 +15047,7 @@ class Zoom {
                 Number(getValueFromObject(marker$$1.dataSource[dataIndex], marker$$1.latitudeValuePath)) :
                 !isNullOrUndefined(marker$$1.dataSource[dataIndex]['latitude']) ? parseFloat(marker$$1.dataSource[dataIndex]['latitude']) :
                     !isNullOrUndefined(marker$$1.dataSource[dataIndex]['Latitude']) ? parseFloat(marker$$1.dataSource[dataIndex]['Latitude']) : 0;
-            const duration = this.currentLayer.animationDuration;
+            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);
             if (this.maps.isTileMap) {
                 if (type === 'Template') {
@@ -15255,7 +15308,7 @@ class Zoom {
                     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;
+                    const animationDuration = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                     setTimeout(() => {
                         this.applyTransform(this.maps, true);
                         if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {