@syncfusion/ej2-maps 22.2.8 → 23.1.36

package/dist/es6/ej2-maps.es5.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';
@@ -684,7 +684,7 @@ function renderTextElement(option, style, color, parent, isMinus) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function convertElement(element, markerId, data, index, mapObj) {
     var childElement = createElement('div', {
-        id: markerId
+        id: markerId, className: mapObj.element.id + '_marker_template_element'
     });
     childElement.style.cssText = 'position: absolute;pointer-events: auto;';
     var elementLength = element.length;
@@ -1276,7 +1276,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
     markerCollection.appendChild(ele);
     var element = (markerData.length - 1) === dataIndex ? 'marker' : null;
     var 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;
@@ -2635,7 +2635,7 @@ function elementAnimate(element, delay, duration, point, maps, ele, radius) {
     var height = 0;
     var transform = element.getAttribute('transform') || '';
     new Animation({}).animate(element, {
-        duration: duration,
+        duration: (duration === 0 && animationMode === 'Enable') ? 1000 : duration,
         delay: delay,
         progress: function (args) {
             if (args.timeStamp > args.delay) {
@@ -3226,6 +3226,7 @@ function animate(element, delay, duration, process, end) {
     // eslint-disable-next-line prefer-const
     var clearAnimation;
     var markerStyle = 'visibility:visible';
+    duration = animationMode === "Disable" ? 0 : duration;
     var startAnimation = function (timestamp) {
         if (!start) {
             start = timestamp;
@@ -4949,6 +4950,9 @@ var DataLabelSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Property('')
     ], DataLabelSettings.prototype, "template", void 0);
+    __decorate$1([
+        Property(0)
+    ], DataLabelSettings.prototype, "animationDuration", void 0);
     return DataLabelSettings;
 }(ChildProperty));
 /**
@@ -5282,7 +5286,7 @@ var Marker = /** @__PURE__ @class */ (function () {
                         var markerID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
                         var location_1 = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
-                        var animate$$1 = currentLayer.animationDuration !== 0 || isNullOrUndefined(maps.zoomModule);
+                        var animate$$1 = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var translate = (maps.isTileMap) ? (currentLayer.type === 'SubLayer' && isNullOrUndefined(maps.zoomModule)) ? location_1 = convertTileLatLongToPoint(new MapLocation(lng, lat), maps.tileZoomLevel, maps.tileTranslatePoint, true) : new Object() :
                             !isNullOrUndefined(maps.zoomModule) && maps.zoomSettings.zoomFactor > 1 ?
@@ -7153,7 +7157,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         var childNode;
         this.mapObject.translateType = 'layer';
         if (!isNullOrUndefined(this.mapObject.baseMapRectBounds)) {
-            var duration = this.currentLayer.animationDuration;
+            var duration = animationMode === 'Disable' ? 0 : (this.currentLayer.animationDuration === 0 && animationMode === 'Enable') ?
+                1000 : this.currentLayer.animationDuration;
             var animate$$1 = duration !== 0 || isNullOrUndefined(this.mapObject.zoomModule);
             this.mapObject.baseTranslatePoint = this.mapObject.zoomTranslatePoint;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7412,7 +7417,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
         var 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;
@@ -7547,7 +7553,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
             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 + ')';
         }
     };
@@ -8133,7 +8140,18 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.serverProcess['request']++;
         var fetchApiModule = new Fetch(localAjax.dataOptions, localAjax.type, localAjax.contentType);
         fetchApiModule.onSuccess = function (args) {
-            _this.processResponseJsonData('Fetch', args, layer, type);
+            if (!isNullOrUndefined(args.type) && args.type === 'application/octet-stream') {
+                var reader_1 = new FileReader();
+                var map_1 = _this;
+                reader_1.onload = function (data) {
+                    args = JSON.parse(reader_1.result.toString());
+                    map_1.processResponseJsonData('Fetch', args, layer, type);
+                };
+                reader_1.readAsText(args);
+            }
+            else {
+                _this.processResponseJsonData('Fetch', args, layer, type);
+            }
         };
         fetchApiModule.send(localAjax.sendData);
     };
@@ -9125,7 +9143,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         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);
         }
         var rect = this.element.getBoundingClientRect();
@@ -10559,7 +10577,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
                 });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var translate;
-                var animate$$1 = layer.animationDuration !== 0 || isNullOrUndefined(_this.maps.zoomModule);
+                var 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);
                 }
@@ -10580,7 +10598,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
                 else {
                     radius = 0;
                 }
-                if (bubbleSettings.animationDuration > 0) {
+                if (bubbleSettings.animationDuration > 0 || animationMode === 'Enable') {
                     elementAnimate(bubbleElement, bubbleSettings.animationDelay, bubbleSettings.animationDuration, position, _this.maps, bubble, radius);
                 }
             });
@@ -10753,6 +10771,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var shapeData = shape;
         var element;
+        var rect;
         var text = '';
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var datasrcObj;
@@ -10776,7 +10795,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
             layer.shapePropertyPath : [layer.shapePropertyPath]);
         var propertyPath;
         var isPoint = false;
-        var animate$$1 = layer.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
+        var animate$$1 = (layer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(this.maps.zoomModule);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var translate = (this.maps.isTileMap) ? new Object() : ((this.maps.zoomSettings.zoomFactor > 1 &&
             !isNullOrUndefined(this.maps.zoomModule)) ? getZoomTranslate(this.maps, layer, animate$$1) :
@@ -11035,11 +11054,13 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                             }
                             border.opacity = isNullOrUndefined(border.opacity) ? opacity : border.opacity;
                             var 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);
-                            var 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))) + ' )');
@@ -11065,9 +11086,35 @@ var DataLabel = /** @__PURE__ @class */ (function () {
                     // 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);
+                        }
+                    }
+                }
             });
         }
     };
+    DataLabel.prototype.datalabelAnimate = function (element, duration, opacity, isRect) {
+        var height = 0;
+        new Animation({}).animate(element, {
+            duration: (duration === 0 && animationMode === 'Enable') ? 1000 : duration,
+            delay: 0,
+            progress: function (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: function (model) {
+                element.style.visibility = 'visible';
+                element.setAttribute(isRect ? 'fill-opacity' : 'opacity', opacity.toString());
+            }
+        });
+    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     DataLabel.prototype.getPoint = function (shapes, points) {
         if (shapes['type'] === 'MultiLineString') {
@@ -14072,6 +14119,12 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
             clearTimeout(this.clearTimeout);
             this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
         }
+        if (target.id.indexOf(this.maps.element.id) === -1) {
+            var ancestor = target.closest('.' + this.maps.element.id + '_marker_template_element');
+            if (!isNullOrUndefined(ancestor) && ancestor.id.indexOf('_MarkerIndex_') > -1) {
+                target = ancestor;
+            }
+        }
         var option;
         var currentData = '';
         var targetId = target.id;
@@ -14596,7 +14649,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     this.markerLineAnimation(map);
                     map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
                     var element1 = document.getElementById(this.maps.element.id + '_tiles');
-                    var animationDuration = this.maps.layersCollection[0].animationDuration;
+                    var animationDuration = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                     setTimeout(function () {
                         // if (type === 'ZoomOut') {
                         //     element1.removeChild(element1.children[element1.childElementCount - 1]);
@@ -14857,7 +14910,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
      * @returns {void}
      */
     Zoom.prototype.animateTransform = function (element, animate$$1, x, y, scale) {
-        var duration = this.currentLayer.animationDuration;
+        var 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;
@@ -14921,7 +14974,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                     var layerIndex_1 = parseInt(currentEle.childNodes[k]['id'].split('_LayerIndex_')[1].split('_')[0], 10);
                                     var dataIndex = parseInt(currentEle.childNodes[k]['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     var 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
                                     var markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
                                     for (var x_1 = 0; x_1 < this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x_1++) {
@@ -14932,7 +14985,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                             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) {
                                             var groupElement = document.querySelector('.GroupElement');
                                             if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
@@ -14993,7 +15046,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                         var centerY = bubbleCollection['center']['y'];
                                         var currentX = ((centerX + x) * scale);
                                         var currentY = ((centerY + y) * scale);
-                                        var duration = this.currentLayer.animationDuration;
+                                        var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
                                         if (!animate$$1 || duration === 0) {
                                             childElement.setAttribute('transform', 'translate( ' + currentX + ' ' + currentY + ' )');
                                         }
@@ -15193,7 +15246,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         if (element.id.indexOf('_LabelIndex_') > -1) {
             labelIndex = parseFloat(element.id.split('_LabelIndex_')[1].split('_')[0]);
         }
-        var duration = this.currentLayer.animationDuration;
+        var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
         for (var l = 0; l < labelCollection.length; l++) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var label = labelCollection[l];
@@ -15340,7 +15393,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 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;
-            var duration = this.currentLayer.animationDuration;
+            var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
             var location_2 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(lng, lat), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, layer, this.maps);
             if (this.maps.isTileMap) {
                 if (type === 'Template') {
@@ -15602,7 +15655,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     this.markerLineAnimation(map);
                     map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
                     var element1 = document.getElementById(this.maps.element.id + '_tiles');
-                    var animationDuration = this.maps.layersCollection[0].animationDuration;
+                    var animationDuration = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                     setTimeout(function () {
                         _this.applyTransform(_this.maps, true);
                         if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {