@syncfusion/ej2-maps 22.2.8 → 23.1.36

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.2.8
+*  version : 23.1.36
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-maps@*",
-  "_id": "@syncfusion/ej2-maps@22.2.5",
+  "_id": "@syncfusion/ej2-maps@16.42.0",
   "_inBundle": false,
-  "_integrity": "sha512-2ujWL1A6ZAjiqFnt64NJckR3+ipLQ4GfYL+oZsfFl2eoJnxJp3mpW8PSv8YCP33ZDQs49HhLZEcv56TFhtFpCQ==",
+  "_integrity": "sha512-H3ZkM03G9U0zWAZBoQvjnZ9H5Ckvf8q/V98WcUVkOlblkD82V5Hh0P3Z8c+PtwBkI0rpGvgR5wtJv7QMN1lXUg==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-22.2.5.tgz",
-  "_shasum": "a26db405fe74df77f71b2007dc2d8c77d6dab16e",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-maps/-/ej2-maps-16.42.0.tgz",
+  "_shasum": "574fe0af0d6ba3dd6005d24a99ce878fa2c85c0b",
   "_spec": "@syncfusion/ej2-maps@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.5",
-    "@syncfusion/ej2-buttons": "~22.2.8",
-    "@syncfusion/ej2-compression": "~22.2.5",
-    "@syncfusion/ej2-data": "~22.2.5",
-    "@syncfusion/ej2-file-utils": "~22.2.5",
-    "@syncfusion/ej2-pdf-export": "~22.2.5",
-    "@syncfusion/ej2-svg-base": "~22.2.8"
+    "@syncfusion/ej2-base": "~23.1.36",
+    "@syncfusion/ej2-buttons": "~23.1.36",
+    "@syncfusion/ej2-compression": "~23.1.36",
+    "@syncfusion/ej2-data": "~23.1.36",
+    "@syncfusion/ej2-file-utils": "~23.1.36",
+    "@syncfusion/ej2-pdf-export": "~23.1.36",
+    "@syncfusion/ej2-svg-base": "~23.1.36"
   },
   "deprecated": false,
   "description": "The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options",
@@ -93,6 +93,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "22.2.8",
+  "version": "23.1.36",
   "sideEffects": false
 }

package/src/maps/layers/bubble.js

@@ -1,6 +1,6 @@
 import { ColorMapping, bubbleRendering } from '../index';
 import { bubbleClick, bubbleMouseMove } from '../index';
-import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, animationMode } from '@syncfusion/ej2-base';
 import { CircleOption, MapLocation, findMidPointOfPolygon, Point, drawCircle, elementAnimate, getTranslate } from '../utils/helper';
 import { RectOption, Rect, drawRectangle, checkPropertyPath, getZoomTranslate, getRatioOfBubble, maintainSelection, getValueFromObject } from '../utils/helper';
 /**
@@ -151,7 +151,7 @@ var Bubble = /** @class */ (function () {
                 });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var translate;
-                var animate = layer.animationDuration !== 0 || isNullOrUndefined(_this.maps.zoomModule);
+                var animate = (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);
                 }
@@ -172,7 +172,7 @@ var Bubble = /** @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);
                 }
             });

package/src/maps/layers/data-label.d.ts

@@ -29,6 +29,7 @@ export declare class DataLabel {
      * @private
      */
     renderLabel(layer: LayerSettings, layerIndex: number, shape: any, layerData: any[], group: Element, labelTemplateElement: HTMLElement, index: number, intersect: any[]): void;
+    private datalabelAnimate;
     private getPoint;
     /**
      * Get module name.

package/src/maps/layers/data-label.js

@@ -1,5 +1,5 @@
 import { findMidPointOfPolygon, Rect, filter, getTemplateFunction, getZoomTranslate, getTranslate, RectOption, convertElementFromLabel, Point, TextOption, renderTextElement, textTrim, measureText, Internalize } from '../utils/helper';
-import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, Animation, animationMode } from '@syncfusion/ej2-base';
 import { dataLabelRendering } from '../model/constants';
 import { Theme } from '../model/theme';
 /**
@@ -64,6 +64,7 @@ var DataLabel = /** @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;
@@ -87,7 +88,7 @@ var DataLabel = /** @class */ (function () {
             layer.shapePropertyPath : [layer.shapePropertyPath]);
         var propertyPath;
         var isPoint = false;
-        var animate = layer.animationDuration !== 0 || isNullOrUndefined(this.maps.zoomModule);
+        var animate = (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) :
@@ -346,11 +347,13 @@ var DataLabel = /** @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))) + ' )');
@@ -376,9 +379,35 @@ var DataLabel = /** @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') {

package/src/maps/layers/layer-panel.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-import { isNullOrUndefined, extend, createElement, Fetch } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, extend, createElement, Fetch, animationMode } from '@syncfusion/ej2-base';
 import { getShapeColor } from '../model/theme';
 import { GeoLocation, isCustomPath, convertGeoToPoint, Point, PathOption, Size, removeElement } from '../utils/helper';
 import { getElementByID, maintainSelection, getValueFromObject } from '../utils/helper';
@@ -975,7 +975,8 @@ var LayerPanel = /** @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 = duration !== 0 || isNullOrUndefined(this.mapObject.zoomModule);
             this.mapObject.baseTranslatePoint = this.mapObject.zoomTranslatePoint;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1234,7 +1235,8 @@ var LayerPanel = /** @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;
@@ -1369,7 +1371,8 @@ var LayerPanel = /** @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 + ')';
         }
     };

package/src/maps/layers/marker.js

@@ -1,6 +1,6 @@
 import { markerRendering, convertTileLatLongToPoint, MapLocation, markerDragStart } from '../index';
 import { markerClick, markerMouseMove, markerClusterClick, markerClusterMouseMove } from '../index';
-import { isNullOrUndefined, createElement } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, createElement, animationMode } from '@syncfusion/ej2-base';
 import { getTranslate, convertGeoToPoint, clusterTemplate, marker, markerTemplate, getZoomTranslate } from '../utils/helper';
 import { getElementByID, mergeSeparateCluster, clusterSeparate, removeElement, getElement, markerColorChoose, markerShapeChoose, calculateZoomLevel, compareZoomFactor, getValueFromObject } from '../utils/helper';
 /**
@@ -62,7 +62,7 @@ var Marker = /** @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 = currentLayer.animationDuration !== 0 || isNullOrUndefined(maps.zoomModule);
+                        var animate = (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 ?

package/src/maps/maps.js

@@ -340,7 +340,18 @@ var Maps = /** @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);
     };
@@ -1336,7 +1347,7 @@ var Maps = /** @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();

package/src/maps/model/base-model.d.ts

@@ -1535,6 +1535,13 @@ export interface DataLabelSettingsModel {
      */
     template?: string | Function;
 
+    /**
+     * Gets and sets the duration time for animating the data label.
+     *
+     * @default 0
+     */
+    animationDuration?: number;
+
 }
 
 /**

package/src/maps/model/base.d.ts

@@ -1332,6 +1332,12 @@ export declare class DataLabelSettings extends ChildProperty<DataLabelSettings>
      * @aspType string
      */
     template: string | Function;
+    /**
+     * Gets and sets the duration time for animating the data label.
+     *
+     * @default 0
+     */
+    animationDuration: number;
 }
 /**
  * Gets or sets the options to customize the shapes in the maps.

package/src/maps/model/base.js

@@ -923,6 +923,9 @@ var DataLabelSettings = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], DataLabelSettings.prototype, "template", void 0);
+    __decorate([
+        Property(0)
+    ], DataLabelSettings.prototype, "animationDuration", void 0);
     return DataLabelSettings;
 }(ChildProperty));
 export { DataLabelSettings };

package/src/maps/user-interaction/tooltip.js

@@ -40,6 +40,12 @@ var MapsTooltip = /** @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;

package/src/maps/user-interaction/zoom.js

@@ -3,7 +3,7 @@ import { RectOption, createTooltip, calculateScale, getTouchCenter, getTouches,
 import { MapLocation, zoomAnimate, smoothTranslate, measureText, textTrim, clusterTemplate, marker } from '../utils/helper';
 import { markerTemplate, removeElement, getElement, clusterSeparate, markerColorChoose } from '../utils/helper';
 import { markerShapeChoose } from '../utils/helper';
-import { isNullOrUndefined, EventHandler, Browser, remove, createElement } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, EventHandler, Browser, remove, createElement, animationMode } from '@syncfusion/ej2-base';
 import { changeBorderWidth, markerRendering } from '../index';
 import { pan } from '../model/constants';
 import { getValueFromObject } from '../utils/helper';
@@ -154,7 +154,7 @@ var Zoom = /** @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]);
@@ -416,7 +416,7 @@ var Zoom = /** @class */ (function () {
      * @returns {void}
      */
     Zoom.prototype.animateTransform = function (element, animate, x, y, scale) {
-        var duration = this.currentLayer.animationDuration;
+        var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
         if (!animate || duration === 0 || this.maps.isTileMap) {
             element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
             return;
@@ -485,7 +485,7 @@ var Zoom = /** @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++) {
@@ -496,7 +496,7 @@ var Zoom = /** @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) {
@@ -557,7 +557,7 @@ var Zoom = /** @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 || duration === 0) {
                                             childElement.setAttribute('transform', 'translate( ' + currentX + ' ' + currentY + ' )');
                                         }
@@ -757,7 +757,7 @@ var Zoom = /** @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];
@@ -904,7 +904,7 @@ var Zoom = /** @class */ (function () {
                 Number(getValueFromObject(marker.dataSource[dataIndex], marker.latitudeValuePath)) :
                 !isNullOrUndefined(marker.dataSource[dataIndex]['latitude']) ? parseFloat(marker.dataSource[dataIndex]['latitude']) :
                     !isNullOrUndefined(marker.dataSource[dataIndex]['Latitude']) ? parseFloat(marker.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') {
@@ -1167,7 +1167,7 @@ var Zoom = /** @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 () {
                         if (type === 'ZoomOut' || type === 'Reset') {
                             // element1.removeChild(element1.children[element1.childElementCount - 1]);

package/src/maps/utils/helper.js

@@ -16,7 +16,7 @@ var __extends = (this && this.__extends) || (function () {
  * Helper functions for maps control
  */
 import { createElement, isNullOrUndefined, remove, compile as templateComplier, merge, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
-import { Animation } from '@syncfusion/ej2-base';
+import { Animation, animationMode } from '@syncfusion/ej2-base';
 import { SvgRenderer } from '@syncfusion/ej2-svg-base';
 import { itemSelection } from '../../index';
 import { animationComplete } from '../index';
@@ -701,7 +701,7 @@ export function renderTextElement(option, style, color, parent, isMinus) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export 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;
@@ -1294,7 +1294,7 @@ export function marker(eventArgs, markerSettings, markerData, dataIndex, locatio
     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;
@@ -2653,7 +2653,7 @@ export function elementAnimate(element, delay, duration, point, maps, ele, radiu
     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) {
@@ -3244,6 +3244,7 @@ export 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;