@syncfusion/ej2-maps 20.2.36 → 20.2.45

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.36
+*  version : 20.2.45
 *  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@16.39.0",
+  "_id": "@syncfusion/ej2-maps@20.2.43",
   "_inBundle": false,
-  "_integrity": "sha512-udFrFSHobgtPOukgW1CI/Q+jLYQhCmy/ccsCgNQaR4HwvUt/elKftvpnWVDYPg8zoYR57rQWeqacwgrYNHVfhA==",
+  "_integrity": "sha512-308cXHFmR8U6mS1c43fdPzHz1njXi1DoiRYfcI+cLf0pqdQw6CO0oqKX3tQgxEs2d3jJjanXcXg1x3SdvMnRmg==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-maps/-/ej2-maps-16.39.0.tgz",
-  "_shasum": "734582b258450188397b1405beccd43aaede5a5a",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-20.2.43.tgz",
+  "_shasum": "55de91fc150f29a81e5fd5d6a87846a8b47e9ff7",
   "_spec": "@syncfusion/ej2-maps@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.36",
-    "@syncfusion/ej2-buttons": "~20.2.36",
-    "@syncfusion/ej2-compression": "~20.2.36",
-    "@syncfusion/ej2-data": "~20.2.36",
-    "@syncfusion/ej2-file-utils": "~20.2.36",
-    "@syncfusion/ej2-pdf-export": "~20.2.36",
-    "@syncfusion/ej2-svg-base": "~20.2.36"
+    "@syncfusion/ej2-base": "~20.2.45",
+    "@syncfusion/ej2-buttons": "~20.2.45",
+    "@syncfusion/ej2-compression": "~20.2.45",
+    "@syncfusion/ej2-data": "~20.2.45",
+    "@syncfusion/ej2-file-utils": "~20.2.45",
+    "@syncfusion/ej2-pdf-export": "~20.2.45",
+    "@syncfusion/ej2-svg-base": "~20.2.45"
   },
   "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",
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.2.36",
+  "version": "20.2.45",
   "sideEffects": false
 }

package/src/maps/layers/bubble.js

@@ -150,7 +150,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);
-                if (_this.maps.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(_this.maps.zoomModule)) {
+                if (_this.maps.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(_this.maps.zoomModule) && !_this.maps.isTileMap) {
                     translate = getZoomTranslate(_this.maps, layer, animate);
                 }
                 else {

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

@@ -98,7 +98,7 @@ var DataLabel = /** @class */ (function () {
         var shapeWidth;
         var scaleZoomValue = !isNullOrUndefined(this.maps.scale) ? Math.floor(this.maps.scale) : 1;
         var zoomLabelsPosition = this.maps.zoomSettings.enable ? !isNullOrUndefined(this.maps.zoomShapeCollection) &&
-            this.maps.zoomShapeCollection.length > 0 : this.maps.zoomSettings.enable;
+            this.maps.zoomShapeCollection.length > 0 && !this.maps.isAddLayer : this.maps.zoomSettings.enable;
         this.maps.translateType = 'labels';
         for (var j = 0; j < properties.length; j++) {
             if (shapeProperties[properties[j]]) {

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

@@ -1243,7 +1243,7 @@ var LayerPanel = /** @class */ (function () {
                 else {
                     if (type !== 'Pan' && element1 && element) {
                         element1.appendChild(element.children[0]);
-                        if (!isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
+                        if (!_this.mapObject.isAddLayer && !isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
                             document.getElementById(_this.mapObject.element.id + '_animated_tiles').id =
                                 _this.mapObject.element.id + '_animated_tiles_old';
                         }

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

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Ajax } from '@syncfusion/ej2-base';import { EventHandler, Browser, EmitType, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';import { ModuleDeclaration } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle, querySelector } from './utils/helper';import { createStyle } from './utils/helper';import { ZoomSettings, LegendSettings, Tile } from './model/base';import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';import { ZoomSettingsModel, LegendSettingsModel, LayerSettingsModel, BubbleSettingsModel } from './model/base-model';import { MarkerSettingsModel, SelectionSettingsModel , InitialMarkerSelectionSettingsModel} from './model/base-model';import { TitleSettingsModel, BorderModel, MarginModel, CenterPositionModel, InitialShapeSelectionSettingsModel } from './model/base-model';import { MapsAreaSettingsModel, AnnotationModel } from './model/base-model';import { Bubble } from './layers/bubble';import { Legend } from './layers/legend';import { Marker } from './layers/marker';import { Highlight } from './user-interaction/highlight';import { Selection } from './user-interaction/selection';import { MapsTooltip } from './user-interaction/tooltip';import { Zoom } from './user-interaction/zoom';import { load, click, rightClick, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { BingMap } from './layers/bing-map';import { ILoadEventArgs, ILoadedEventArgs, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';import { IMarkerClusterClickEventArgs, IMarkerClusterMoveEventArgs, IMarkerClusterRenderingEventArgs } from './model/interface';import { ISelectionEventArgs, IShapeSelectedEventArgs, IMapPanEventArgs, IMapZoomEventArgs } from './model/interface';import { IBubbleRenderingEventArgs, IAnimationCompleteEventArgs, IPrintEventArgs, IThemeStyle } from './model/interface';import { LayerPanel } from './layers/layer-panel';import { GeoLocation, Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, convertGeoToPoint, calculateZoomLevel } from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { DataManager, Query } from '@syncfusion/ej2-data';import { ExportType } from '../maps/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Print } from './model/print';import { PdfExport } from './model/export-pdf';import { ImageExport } from './model/export-image';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Ajax } from '@syncfusion/ej2-base';import { EventHandler, Browser, EmitType, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';import { ModuleDeclaration } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle, querySelector } from './utils/helper';import { createStyle } from './utils/helper';import { ZoomSettings, LegendSettings, Tile } from './model/base';import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';import { ZoomSettingsModel, LegendSettingsModel, LayerSettingsModel, BubbleSettingsModel } from './model/base-model';import { MarkerSettingsModel, SelectionSettingsModel , InitialMarkerSelectionSettingsModel} from './model/base-model';import { TitleSettingsModel, BorderModel, MarginModel, CenterPositionModel, InitialShapeSelectionSettingsModel } from './model/base-model';import { MapsAreaSettingsModel, AnnotationModel } from './model/base-model';import { Bubble } from './layers/bubble';import { Legend } from './layers/legend';import { Marker } from './layers/marker';import { Highlight } from './user-interaction/highlight';import { Selection } from './user-interaction/selection';import { MapsTooltip } from './user-interaction/tooltip';import { Zoom } from './user-interaction/zoom';import { load, click, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { BingMap } from './layers/bing-map';import { ILoadEventArgs, ILoadedEventArgs, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';import { IMarkerClusterClickEventArgs, IMarkerClusterMoveEventArgs, IMarkerClusterRenderingEventArgs } from './model/interface';import { ISelectionEventArgs, IShapeSelectedEventArgs, IMapPanEventArgs, IMapZoomEventArgs } from './model/interface';import { IBubbleRenderingEventArgs, IAnimationCompleteEventArgs, IPrintEventArgs, IThemeStyle } from './model/interface';import { LayerPanel } from './layers/layer-panel';import { GeoLocation, Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, convertGeoToPoint, calculateZoomLevel } from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { DataManager, Query } from '@syncfusion/ej2-data';import { ExportType } from '../maps/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Print } from './model/print';import { PdfExport } from './model/export-pdf';import { ImageExport } from './model/export-image';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -173,12 +173,20 @@ export interface MapsModel extends ComponentModel{
     loaded?: EmitType<ILoadedEventArgs>;
 
     /**
-     * Triggers when clicking an element in maps.
+     * Triggers when a user clicks on an element in Maps.
      *
      * @event click
+
      */
     click?: EmitType<IMouseEventArgs>;
 
+    /**
+     * Triggers when a user clicks on an element in Maps.
+     *
+     * @event onclick
+     */
+    onclick?: EmitType<IMouseEventArgs>;
+
     /**
      * Triggers when performing the double click operation on an element in maps.
      *

package/src/maps/maps.d.ts

@@ -248,11 +248,18 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      */
     loaded: EmitType<ILoadedEventArgs>;
     /**
-     * Triggers when clicking an element in maps.
+     * Triggers when a user clicks on an element in Maps.
      *
      * @event click
+
      */
     click: EmitType<IMouseEventArgs>;
+    /**
+     * Triggers when a user clicks on an element in Maps.
+     *
+     * @event onclick
+     */
+    onclick: EmitType<IMouseEventArgs>;
     /**
      * Triggers when performing the double click operation on an element in maps.
      *
@@ -437,6 +444,12 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @private
      */
     availableSize: Size;
+    /**
+     * whether it is layer add or not.
+     *
+     * @private
+     */
+    isAddLayer: boolean;
     /**
      * Specifies the localization object.
      *
@@ -818,6 +831,7 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @param {PointerEvent} e - Specifies the pointer event on maps.
      */
     mapsOnClick(e: PointerEvent): void;
+    private clickHandler;
     private triggerShapeSelection;
     private getClickLocation;
     /**

package/src/maps/maps.js

@@ -35,7 +35,7 @@ import { createStyle } from './utils/helper';
 import { ZoomSettings, LegendSettings } from './model/base';
 import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';
 import { Marker } from './layers/marker';
-import { load, click, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
+import { load, click, onclick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
 import { getThemeStyle, Theme } from './model/theme';
 import { BingMap } from './layers/bing-map';
 import { LayerPanel } from './layers/layer-panel';
@@ -236,6 +236,7 @@ var Maps = /** @class */ (function (_super) {
         this.renderArea();
         this.processRequestJsonData();
         this.renderComplete();
+        this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
     };
     /**
      * To Initialize the control rendering.
@@ -1042,24 +1043,35 @@ var Maps = /** @class */ (function (_super) {
                 latitude: latitude, longitude: longitude,
                 isShapeSelected: this.SelectedElement(targetEle)
             };
-            this.trigger('click', eventArgs_1, function (mouseArgs) {
-                if (targetEle.id.indexOf('shapeIndex') > -1) {
-                    _this.mergeCluster();
-                    if (getElement(_this.element.id + '_mapsTooltip') &&
-                        _this.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_') > -1) {
-                        removeElement(_this.element.id + '_mapsTooltip');
-                    }
-                }
-                if (_this.markerModule) {
-                    _this.markerModule.markerClusterClick(e);
-                }
-                if (!eventArgs_1.cancel) {
-                    _this.notify(click, targetEle);
-                }
-                if (!eventArgs_1.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
-                    _this.triggerShapeSelection(targetEle);
-                }
-            });
+            if (this.onclick) {
+                eventArgs_1.name = onclick;
+                this.trigger('onclick', eventArgs_1, function (mouseArgs) {
+                    _this.clickHandler(e, eventArgs_1, targetEle);
+                });
+            }
+            else {
+                this.trigger('click', eventArgs_1, function (mouseArgs) {
+                    _this.clickHandler(e, eventArgs_1, targetEle);
+                });
+            }
+        }
+    };
+    Maps.prototype.clickHandler = function (e, eventArgs, targetEle) {
+        if (targetEle.id.indexOf('shapeIndex') > -1) {
+            this.mergeCluster();
+            if (getElement(this.element.id + '_mapsTooltip') &&
+                this.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_') > -1) {
+                removeElement(this.element.id + '_mapsTooltip');
+            }
+        }
+        if (this.markerModule) {
+            this.markerModule.markerClusterClick(e);
+        }
+        if (!eventArgs.cancel) {
+            this.notify(click, targetEle);
+        }
+        if (!eventArgs.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
+            this.triggerShapeSelection(targetEle);
         }
     };
     Maps.prototype.triggerShapeSelection = function (targetEle) {
@@ -1159,13 +1171,6 @@ var Maps = /** @class */ (function (_super) {
                     latitude = latLongValue.latitude;
                     longitude = latLongValue.longitude;
                 }
-                var eventArgs = {
-                    cancel: false, name: click, target: targetId, x: e.clientX, y: e.clientY,
-                    latitude: latitude, longitude: longitude, isShapeSelected: this.SelectedElement(targetEle)
-                };
-                // eslint-disable-next-line @typescript-eslint/no-empty-function
-                this.trigger('click', eventArgs, function (mouseArgs) {
-                });
             }
             this.titleTooltip(e, pageX, pageY, true);
             if (!isNullOrUndefined(this.legendModule)) {
@@ -1173,7 +1178,7 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        if (e.cancelable) {
+        if (e.cancelable && !this.isTouch) {
             e.preventDefault();
         }
         return false;
@@ -1451,8 +1456,10 @@ var Maps = /** @class */ (function (_super) {
      * @param {Object} layer - Specifies the layer for the maps.
      */
     Maps.prototype.addLayer = function (layer) {
-        this.layers.push(new LayerSettings(this.layers[0], 'layers', layer));
-        this.refresh();
+        var mapsLayer = this.layers;
+        mapsLayer.push(layer);
+        this.isAddLayer = true;
+        this.layers = mapsLayer;
     };
     /**
      * This method is used to remove a layer from map.
@@ -1461,8 +1468,9 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.removeLayer = function (index) {
-        this.layers.splice(index, 1);
-        this.refresh();
+        var mapsLayer = this.layers;
+        mapsLayer.splice(index, 1);
+        this.layers = mapsLayer;
     };
     /**
      * This method is used to add markers dynamically in the maps.
@@ -1747,6 +1755,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.onPropertyChanged = function (newProp, oldProp) {
         var render = false;
         var isMarker = false;
+        var isLayer = false;
         var isStaticMapType = false;
         var layerEle;
         if (newProp['layers']) {
@@ -1767,6 +1776,7 @@ var Maps = /** @class */ (function (_super) {
                 case 'legendSettings':
                 case 'baseLayerIndex':
                     if (prop === 'layers') {
+                        isLayer = true;
                         var layerPropLength = Object.keys(newProp.layers).length;
                         for (var x = 0; x < layerPropLength; x++) {
                             if (!isNullOrUndefined(newProp.layers[x])) {
@@ -1791,7 +1801,7 @@ var Maps = /** @class */ (function (_super) {
                     break;
                 case 'zoomSettings':
                     if (!isNullOrUndefined(oldProp.zoomSettings)) {
-                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor) {
+                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor && !isLayer) {
                             render = false;
                         }
                         else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
@@ -2287,6 +2297,9 @@ var Maps = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Maps.prototype, "click", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "onclick", void 0);
     __decorate([
         Event()
     ], Maps.prototype, "doubleClick", void 0);

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

@@ -19,6 +19,12 @@ export declare const loaded: string;
  * @private
  */
 export declare const click: string;
+/**
+ * Specifies the maps onclick event name.
+ *
+ * @private
+ */
+export declare const onclick: string;
 /**
  * Specifies the maps right click event name.
  *

package/src/maps/model/constants.js

@@ -19,6 +19,12 @@ export var loaded = 'loaded';
  * @private
  */
 export var click = 'click';
+/**
+ * Specifies the maps onclick event name.
+ *
+ * @private
+ */
+export var onclick = 'onclick';
 /**
  * Specifies the maps right click event name.
  *

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

@@ -1,6 +1,6 @@
 import { click, itemSelection } from '../index';
 import { getElement, createStyle, customizeStyle, removeClass, getTargetElement, getElementByID } from '../utils/helper';
-import { isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
  * Selection module class
  */
@@ -17,7 +17,6 @@ var Selection = /** @class */ (function () {
     Selection.prototype.addEventListener = function () {
         if (!this.maps.isDestroyed) {
             this.maps.on(click, this.mouseClick, this);
-            this.maps.on(Browser.touchEndEvent, this.mouseClick, this);
         }
     };
     /**
@@ -30,7 +29,6 @@ var Selection = /** @class */ (function () {
             return;
         }
         this.maps.off(click, this.mouseClick);
-        this.maps.off(Browser.touchEndEvent, this.mouseClick);
     };
     Selection.prototype.mouseClick = function (targetElement) {
         if (!isNullOrUndefined(targetElement['type']) && targetElement['type'].indexOf('touch') !== -1 &&

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

@@ -184,7 +184,7 @@ var MapsTooltip = /** @class */ (function () {
                 options: tooltipOption,
                 fill: option.fill,
                 maps: this.maps,
-                element: target, eventArgs: e
+                element: target, eventArgs: e, content: !isNullOrUndefined(currentData) ? currentData.toString() : ''
             };
             this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
@@ -202,7 +202,7 @@ var MapsTooltip = /** @class */ (function () {
                             header: '',
                             data: option['data'],
                             template: option['template'],
-                            content: [currentData.toString()],
+                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
                             shapes: [],
                             location: option['location'],
                             palette: [markerFill],
@@ -218,7 +218,7 @@ var MapsTooltip = /** @class */ (function () {
                             header: '',
                             data: tooltipArgs.options['data'],
                             template: tooltipArgs.options['template'],
-                            content: [currentData.toString()],
+                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
                             shapes: [],
                             location: tooltipArgs.options['location'],
                             palette: [markerFill],

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

@@ -411,7 +411,7 @@ var Zoom = /** @class */ (function () {
                             if (this.maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
                                 currentEle.remove();
                                 if (layerElement.children.length > 0 && layerElement.children[0]) {
-                                    layerElement.insertBefore(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index), layerElement.children[0]);
+                                    layerElement.insertBefore(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index), layerElement.children[1]);
                                 }
                                 else {
                                     layerElement.appendChild(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index));
@@ -520,16 +520,17 @@ var Zoom = /** @class */ (function () {
                                 }
                             }
                         }
-                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1) {
+                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(this.maps.layers[this.index])) {
                             this.intersect = [];
                             this.maps.zoomLabelPositions = [];
                             this.maps.zoomLabelPositions = this.maps.dataLabelModule.dataLabelCollections;
+                            var labelAnimate = !this.maps.isTileMap && animate;
                             for (var k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
                                     this.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
                                     this.maps.zoomShapeCollection.push(this.zoomshapewidth);
-                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', animate);
+                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate);
                                     var dataLabel = this.maps.layers[this.index].dataLabelSettings;
                                     var border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
@@ -746,7 +747,7 @@ var Zoom = /** @class */ (function () {
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Hide') {
                         if (scale > 1) {
-                            text = (this.zoomshapewidth['width'] >= zoomtextSize['width']) ? zoomtext : '';
+                            text = ((this.maps.dataLabelShape[l] * scale) >= zoomtextSize['width']) ? zoomtext : '';
                             element.innerHTML = text;
                         }
                         else {
@@ -756,7 +757,7 @@ var Zoom = /** @class */ (function () {
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
                         if (scale > 1) {
-                            zoomtrimLabel = textTrim(this.zoomshapewidth['width'], zoomtext, style);
+                            zoomtrimLabel = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             text = zoomtrimLabel;
                             element.innerHTML = text;
                         }
@@ -794,7 +795,7 @@ var Zoom = /** @class */ (function () {
                                     || textLocations['heightTop'] > this.intersect[j]['heightBottom']) {
                                     trimmedLable = !isNullOrUndefined(text) ? text : zoomtext;
                                     if (scale > 1) {
-                                        trimmedLable = textTrim(this.zoomshapewidth['width'], trimmedLable, style);
+                                        trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), trimmedLable, style);
                                     }
                                     element.innerHTML = trimmedLable;
                                 }
@@ -820,11 +821,11 @@ var Zoom = /** @class */ (function () {
                         }
                         this.intersect.push(textLocations);
                         if (isNullOrUndefined(trimmedLable)) {
-                            trimmedLable = textTrim(this.zoomshapewidth['width'], zoomtext, style);
+                            trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             element.innerHTML = trimmedLable;
                         }
                     }
-                    else {
+                    if (animate || duration > 0) {
                         smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
                     }
                 }
@@ -1112,6 +1113,7 @@ var Zoom = /** @class */ (function () {
                         if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
                             document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                         }
+                        _this.maps.isAddLayer = false;
                     }, animationDuration);
                 }
             }

package/src/maps/utils/helper.js

@@ -1026,8 +1026,8 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                             shapeCustom['borderWidth'] = eventArg.border.width;
                             shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters_1.opacity : eventArg.border.opacity;
                         }
-                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : ((location_1.x + transPoint.x + eventArg.width) * maps.mapScaleValue);
-                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : ((location_1.y + transPoint.y + (eventArg.height / 2)) * maps.mapScaleValue);
+                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : tempX + postionY - (eventArg.width / 2);
+                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : tempY - (eventArg.height / 2);
                         if (maps.isTileMap && !maps.zoomSettings.enable) {
                             tempX = location_1.x;
                             tempY = location_1.y;
@@ -1106,7 +1106,7 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
             layerElement.appendChild(markerCollection);
         }
-        var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_0_markerCluster');
+        var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster');
         if (!isNullOrUndefined(markerCluster)) {
             markerCluster.remove();
         }
@@ -2255,6 +2255,8 @@ export function getZoomTranslate(mapObject, layer, animate) {
         }
     }
     scaleFactor = (mapObject.enablePersistence) ? (mapObject.mapScaleValue === 0 ? 1 : mapObject.mapScaleValue) : scaleFactor;
+    mapObject.widthBeforeRefresh = mapObject.availableSize.width;
+    mapObject.heightBeforeRefresh = mapObject.availableSize.height;
     return { scale: animate ? 1 : scaleFactor, location: new Point(x, y) };
 }
 /**
@@ -3140,7 +3142,11 @@ export function animate(element, delay, duration, process, end) {
         else {
             window.cancelAnimationFrame(clearAnimation);
             end.call(_this, { element: element });
-            element.setAttribute('style', markerStyle);
+            if (element.id.indexOf('Marker') > -1) {
+                console.log(element);
+                var markerElement = getElementByID(element.id.split('_')[0] + '_Markers_Group');
+                markerElement.setAttribute('style', markerStyle);
+            }
         }
     };
     clearAnimation = window.requestAnimationFrame(startAnimation);