@syncfusion/ej2-maps 27.2.2 → 28.1.38

package/src/maps/maps.js

@@ -29,7 +29,7 @@ import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, merge
 import { createStyle, getProcessedMarginValue } from './utils/helper';
 import { ZoomSettings, LegendSettings } from './model/base';
 import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';
-import { load, click, onclick, rightClick, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
+import { load, click, onclick, rightClick, doubleClick, resize, shapeSelected, zoomIn, mouseMove } from './model/constants';
 import { getThemeStyle, Theme } from './model/theme';
 import { LayerPanel } from './layers/layer-panel';
 import { Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';
@@ -67,6 +67,8 @@ var Maps = /** @class */ (function (_super) {
         _this.isTileMap = false;
         /**
          * Resize the map
+         *
+         * @private
          */
         _this.isResize = false;
         /**
@@ -663,7 +665,7 @@ var Maps = /** @class */ (function (_super) {
                 }
             }
             if (this.zoomModule && ((this.previousScale !== this.scale) || this.zoomNotApplied || this.isZoomByPosition)) {
-                this.zoomModule.applyTransform(this, true);
+                this.zoomModule.applyTransform(this, false, true);
             }
         }
     };
@@ -725,14 +727,7 @@ var Maps = /** @class */ (function (_super) {
                             -(Math.abs(elementOffset.top - layerOffset.top)) : Math.abs(elementOffset.top - layerOffset.top);
                     }
                     Array.prototype.forEach.call(templateGroupEle.childNodes, function (currentTemplate) {
-                        if (currentTemplate.id.indexOf('Marker') !== -1) {
-                            if (currentTemplate.style.visibility !== 'hidden') {
-                                var elementOffset_1 = getElementByID(currentTemplate.id).getBoundingClientRect();
-                                currentTemplate.style.left = parseFloat(currentTemplate.style.left) - (_this.isTileMap ? 0 : elementOffset_1.width / 2) + 'px';
-                                currentTemplate.style.top = parseFloat(currentTemplate.style.top) - (_this.isTileMap ? 0 : elementOffset_1.height / 2) + 'px';
-                            }
-                        }
-                        else {
+                        if (currentTemplate.id.indexOf('Marker') === -1) {
                             currentTemplate.style.left = parseFloat(currentTemplate.style.left) + offSetLetValue + 'px';
                             currentTemplate.style.top = parseFloat(currentTemplate.style.top) + offSetTopValue + 'px';
                             currentTemplate.style.transform = 'translate(-50%, -50%)';
@@ -1517,6 +1512,7 @@ var Maps = /** @class */ (function (_super) {
         // if (target.id.indexOf('shapeIndex') !== -1 && !this.highlightSettings.enable) {
         //     triggerShapeEvent(target.id, this.highlightSettings, this, shapeHighlight);
         // }
+        this.mouseMoveEvent(e);
         if (this.markerModule) {
             this.markerModule.markerMove(e);
             this.markerModule.markerClusterMouseMove(e);
@@ -1530,6 +1526,34 @@ var Maps = /** @class */ (function (_super) {
         this.onMouseMove(e);
         this.notify(Browser.touchMoveEvent, e);
     };
+    /**
+     * To check and trigger mouse move event on maps.
+     *
+     * @param {PointerEvent} e - Specifies the pointer event on maps.
+     * @returns {void}
+     * @private
+     */
+    Maps.prototype.mouseMoveEvent = function (e) {
+        var targetId = e.target.id;
+        var layerIndex;
+        var eventArgs;
+        if (this.isTileMap) {
+            var latLongValue = this.getTileGeoLocation(e['layerX'], e['layerY']);
+            eventArgs = {
+                x: e.clientX, y: e.clientY, latitude: latLongValue.latitude,
+                longitude: latLongValue.longitude, target: e.target
+            };
+        }
+        else {
+            layerIndex = targetId.indexOf('_LayerIndex_') > -1 ? parseInt(targetId.split('_LayerIndex_')[1].split('_')[0], 10) : this.baseLayerIndex;
+            var latLongValue = this.getGeoLocation(layerIndex, e.clientX, e.clientY);
+            eventArgs = {
+                x: e.clientX, y: e.clientY, latitude: latLongValue.latitude,
+                longitude: latLongValue.longitude, target: e.target
+            };
+        }
+        this.trigger(mouseMove, eventArgs);
+    };
     /**
      * This method is used to perform operations when mouse move event is performed on maps.
      *
@@ -1760,13 +1784,24 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.addMarker = function (layerIndex, markerCollection) {
         if (!this.isDestroyed && !isNullOrUndefined(this.markerModule)) {
-            var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
-            if (markerCollection.length > 0 && layerEle) {
-                for (var _i = 0, markerCollection_1 = markerCollection; _i < markerCollection_1.length; _i++) {
-                    var newMarker = markerCollection_1[_i];
-                    this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+            if (!isNullOrUndefined(layerIndex) && !isNullOrUndefined(markerCollection)) {
+                var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + layerIndex);
+                if (markerCollection.length > 0 && layerEle) {
+                    for (var _i = 0, markerCollection_1 = markerCollection; _i < markerCollection_1.length; _i++) {
+                        var newMarker = markerCollection_1[_i];
+                        this.layersCollection[layerIndex].markerSettings.push(new MarkerSettings(this, 'markerSettings', newMarker));
+                    }
+                    this.markerModule.markerRender(this, layerEle, layerIndex, this.isTileMap ? this.tileZoomLevel : this.mapLayerPanel['currentFactor'], 'AddMarker');
+                    this.arrangeTemplate();
+                }
+            }
+            else {
+                for (var i = 0; i < this.layers.length; i++) {
+                    var layerEle = document.getElementById(this.element.id + '_LayerIndex_' + i);
+                    this.markerModule.zoomedMarkerCluster[i] = [];
+                    this.markerModule.initialMarkerCluster[i] = [];
+                    this.markerModule.markerRender(this, layerEle, i, this.isTileMap ? this.tileZoomLevel : this.mapLayerPanel['currentFactor'], null);
                 }
-                this.markerModule.markerRender(this, layerEle, layerIndex, this.mapLayerPanel['currentFactor'], 'AddMarker');
                 this.arrangeTemplate();
             }
         }
@@ -2761,6 +2796,9 @@ var Maps = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Maps.prototype, "markerMouseMove", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "mouseMove", void 0);
     __decorate([
         Event()
     ], Maps.prototype, "dataLabelRendering", void 0);

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

@@ -1760,6 +1760,20 @@ export interface MarkerBaseModel {
      */
     fill?: string;
 
+    /**
+     * Gets or sets the field name from the data source that determines the marker height.
+     *
+     * @default null
+     */
+    heightValuePath?: string;
+
+    /**
+     * Gets or sets the field name from the data source that determines the marker width.
+     *
+     * @default null
+     */
+    widthValuePath?: string;
+
     /**
      * Gets or sets the height of the marker in maps.
      *
@@ -1900,6 +1914,12 @@ export interface MarkerBaseModel {
      */
     initialMarkerSelection?: InitialMarkerSelectionSettingsModel[];
 
+    /**
+     * Gets or sets the options for customizing the clustering of markers on the map.
+     * This property is used to cluster markers based on the current marker settings, and it is applied only when the `allowClustering` property is enabled.
+     */
+    clusterSettings?: MarkerClusterSettingsModel;
+
 }
 
 /**

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

@@ -1518,6 +1518,18 @@ export declare class MarkerBase extends ChildProperty<MarkerBase> {
      * @default '#FF471A'
      */
     fill: string;
+    /**
+     * Gets or sets the field name from the data source that determines the marker height.
+     *
+     * @default null
+     */
+    heightValuePath: string;
+    /**
+     * Gets or sets the field name from the data source that determines the marker width.
+     *
+     * @default null
+     */
+    widthValuePath: string;
     /**
      * Gets or sets the height of the marker in maps.
      *
@@ -1637,6 +1649,11 @@ export declare class MarkerBase extends ChildProperty<MarkerBase> {
      * The initial selection of markers will be performed only when the selection functionality of marker is enabled.
      */
     initialMarkerSelection: InitialMarkerSelectionSettingsModel[];
+    /**
+     * Gets or sets the options for customizing the clustering of markers on the map.
+     * This property is used to cluster markers based on the current marker settings, and it is applied only when the `allowClustering` property is enabled.
+     */
+    clusterSettings: MarkerClusterSettingsModel;
 }
 /**
  * Gets or sets the options to customize the markers in the maps.

package/src/maps/model/base.js

@@ -1069,6 +1069,12 @@ var MarkerBase = /** @class */ (function (_super) {
     __decorate([
         Property('#FF471A')
     ], MarkerBase.prototype, "fill", void 0);
+    __decorate([
+        Property(null)
+    ], MarkerBase.prototype, "heightValuePath", void 0);
+    __decorate([
+        Property(null)
+    ], MarkerBase.prototype, "widthValuePath", void 0);
     __decorate([
         Property(10)
     ], MarkerBase.prototype, "height", void 0);
@@ -1132,6 +1138,9 @@ var MarkerBase = /** @class */ (function (_super) {
     __decorate([
         Collection([], InitialMarkerSelectionSettings)
     ], MarkerBase.prototype, "initialMarkerSelection", void 0);
+    __decorate([
+        Complex({}, MarkerClusterSettings)
+    ], MarkerBase.prototype, "clusterSettings", void 0);
     return MarkerBase;
 }(ChildProperty));
 export { MarkerBase };

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

@@ -130,6 +130,12 @@ export declare const markerClusterClick: string;
  * @private
  */
 export declare const markerMouseMove: string;
+/**
+ * Specifies the maps mouse move event name.
+ *
+ * @private
+ */
+export declare const mouseMove: string;
 /**
  * Specifies the maps cluster mouse move event name.
  *

package/src/maps/model/constants.js

@@ -130,6 +130,12 @@ export var markerClusterClick = 'markerClusterClick';
  * @private
  */
 export var markerMouseMove = 'markerMouseMove';
+/**
+ * Specifies the maps mouse move event name.
+ *
+ * @private
+ */
+export var mouseMove = 'mouseMove';
 /**
  * Specifies the maps cluster mouse move event name.
  *

package/src/maps/model/export-image.js

@@ -41,11 +41,11 @@ var ImageExport = /** @class */ (function () {
             var svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
             var backgroundElement = svgObject.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Tailwind3' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 svgObject.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
-            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Tailwind3Dark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
                 maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 svgObject.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
@@ -101,8 +101,8 @@ var ImageExport = /** @class */ (function () {
                         var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                         var exportTileImg = new Image();
                         exportTileImg.crossOrigin = 'Anonymous';
-                        var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
-                            (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
+                        var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Tailwind3' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
+                            (maps.theme === 'TailwindDark' || maps.theme === 'Tailwind3Dark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
                         ctxt_1.fillStyle = background;
                         ctxt_1.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                         ctxt_1.font = maps.titleSettings.textStyle.size + ' Arial';

package/src/maps/model/export-pdf.js

@@ -43,12 +43,12 @@ var PdfExport = /** @class */ (function () {
             var exportElement = maps.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' ||
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Tailwind3' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' ||
                 maps.theme === 'Fluent2')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
-            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Tailwind3Dark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
                 maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
@@ -88,8 +88,8 @@ var PdfExport = /** @class */ (function () {
                     var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                     var tileImg = new Image();
                     tileImg.crossOrigin = 'Anonymous';
-                    var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
-                        (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
+                    var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Tailwind3' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
+                        (maps.theme === 'TailwindDark' || maps.theme === 'Tailwind3Dark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
                     ctx.fillStyle = background;
                     ctx.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                     ctx.font = maps.titleSettings.textStyle.size + ' Arial';

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

@@ -104,6 +104,21 @@ export interface IMouseEventArgs extends IMapsEventArgs {
     /** Specifies whether the shape is selected or not in the maps. */
     isShapeSelected?: boolean;
 }
+/**
+ * Specifies the event arguments for mouseMove event in the Maps.
+ */
+export interface IMouseMoveEventArgs {
+    /** Gets the current horizontal position value of the location over which the mouse pointer is moved. */
+    x: number;
+    /** Gets the current vertical position value of the location over which the mouse pointer is moved. */
+    y: number;
+    /** Gets the current latitude value of the location over which the mouse pointer is moved. */
+    latitude?: number;
+    /** Gets the current longitude value of the location over which the mouse pointer is moved. */
+    longitude?: number;
+    /** Gets the current target element over which the mouse is positioned on the Maps. */
+    target?: Element;
+}
 /**
  * Specifies the location using geographical coordinates in maps.
  */

package/src/maps/model/print.js

@@ -54,12 +54,12 @@ var Print = /** @class */ (function () {
             backgroundElement = backgroundElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 var backgroundColor = backgroundElement.getAttribute('fill');
-                if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' ||
+                if ((maps.theme === 'Tailwind' || maps.theme === 'Tailwind3' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' ||
                     maps.theme === 'Fluent2')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
-                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Tailwind3Dark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
                     maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');

package/src/maps/model/theme.js

@@ -175,6 +175,12 @@ export function getShapeColor(theme) {
             themePalette = ['#10B981', '#22D3EE', '#2DD4BF', '#4ADE80', '#8B5CF6',
                 '#E879F9', '#F472B6', '#F87171', '#F97316', '#FCD34D'];
             break;
+        case 'tailwind3':
+            themePalette = ['#2F4074', '#03B4B4', '#0D72DE', '#FF5733', '#D63384', '#F39C12', '#EF291F', '#91C822'];
+            break;
+        case 'tailwind3dark':
+            themePalette = ['#8029F1', '#1ABC9C', '#0D72DE', '#FF5733', '#D63384', '#F39C12', '#EF291F', '#91C822'];
+            break;
         case 'fluent':
             themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
                 '#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
@@ -499,6 +505,72 @@ export function getThemeStyle(theme) {
                 zoomButtonRadius: 30
             };
             break;
+        case 'tailwind3':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#111827',
+                subTitleFontColor: '#111827',
+                legendTitleFontColor: '#111827',
+                legendTextColor: '#6B7280',
+                dataLabelFontColor: '#111827',
+                tooltipFontColor: '#F9FAFB',
+                tooltipFillColor: '#111827',
+                zoomFillColor: '#374151',
+                fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: '400',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Inter',
+                titleFontWeight: '500',
+                zoomSelectionColor: '#6B7280',
+                shapeFill: '#F3F4F6',
+                shapeBorderColor: '#E5E7EB',
+                rectangleZoomFillColor: '#818CF8',
+                rectangleZoomFillOpacity: 0.3,
+                rectangleZoomBorderColor: '#4F46E5',
+                legendBorderColor: '#E5E7EB',
+                legendBorderWidth: 0,
+                tooltipBorderColor: '#111827',
+                zoomButtonRadius: 32
+            };
+            break;
+        case 'tailwind3dark':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#FFFFFF',
+                subTitleFontColor: '#FFFFFF',
+                legendTitleFontColor: '#FFFFFF',
+                legendTextColor: '#9CA3AF',
+                dataLabelFontColor: '#FFFFFF',
+                tooltipFontColor: '#1F2937',
+                tooltipFillColor: '#F9FAFB',
+                zoomFillColor: '#D1D5DB',
+                fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: '400',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Inter',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#9CA3AF',
+                shapeFill: '#282F3C',
+                shapeBorderColor: '#282F3C',
+                rectangleZoomFillColor: '#3730A3',
+                rectangleZoomFillOpacity: 0.3,
+                rectangleZoomBorderColor: '#6366F1',
+                legendBorderColor: '#282F3C',
+                legendBorderWidth: 0,
+                tooltipBorderColor: '#F9FAFB',
+                zoomButtonRadius: 30
+            };
+            break;
         case 'bootstrap5':
             style = {
                 backgroundColor: 'transparent',

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

@@ -1,7 +1,7 @@
 import { tooltipRender } from '../index';
 import { Tooltip } from '@syncfusion/ej2-svg-base';
 import { createElement, Browser, isNullOrUndefined, extend, remove } from '@syncfusion/ej2-base';
-import { getMousePosition, Internalize, checkPropertyPath, getValueFromObject, formatValue, convertStringToValue } from '../utils/helper';
+import { getMousePosition, Internalize, checkPropertyPath, getValueFromObject, formatValue, convertStringToValue, removeElement } from '../utils/helper';
 /**
  * Map Tooltip
  */
@@ -495,6 +495,8 @@ var MapsTooltip = /** @class */ (function () {
     MapsTooltip.prototype.destroy = function () {
         if (!isNullOrUndefined(this.svgTooltip)) {
             this.svgTooltip.destroy();
+            this.svgTooltip.controlInstance = null;
+            removeElement(this.maps.element.id + '_mapsTooltip');
         }
         this.svgTooltip = null;
         this.maps = null;

package/src/maps/user-interaction/zoom.d.ts

@@ -84,10 +84,11 @@ export declare class Zoom {
      * @param {Point} position - Specifies the position.
      * @param {number} newZoomFactor - Specifies the zoom factor.
      * @param {string} type - Specifies the type.
+     * @param {boolean} isMouseWheel - Indicates whether the zoom operation was triggered by the mouse wheel.
      * @returns {void}
      * @private
      */
-    performZooming(position: Point, newZoomFactor: number, type: string): void;
+    performZooming(position: Point, newZoomFactor: number, type: string, isMouseWheel?: boolean): void;
     private calculateInitalZoomTranslatePoint;
     private triggerZoomEvent;
     private getTileTranslatePosition;
@@ -124,12 +125,13 @@ export declare class Zoom {
     private animateTransform;
     /**
      * @param {Maps} maps - Specifies the Map control
+     * @param {boolean} isMouseWheel - Indicates whether the zoom operation was triggered by the mouse wheel.
      * @param {boolean} animate - Specifies the animation is available or not
      * @param {boolean} isPanning - Specifies that it is panning or not
      * @returns {void}
      * @private
      */
-    applyTransform(maps: Maps, animate?: boolean, isPanning?: boolean): void;
+    applyTransform(maps: Maps, isMouseWheel?: boolean, animate?: boolean, isPanning?: boolean): void;
     private markerTranslates;
     /**
      * To translate the layer template elements.
@@ -143,7 +145,19 @@ export declare class Zoom {
      */
     processTemplate(x: number, y: number, scale: number, maps: Maps): void;
     private dataLabelTranslate;
-    private markerTranslate;
+    /**
+     *
+     * @param {Element | HTMLElement} element - Specifies the marker element.
+     * @param {number} factor - Specifies scale factor.
+     * @param {number} x - Specifies the x location of the marker element.
+     * @param {number} y - Specifies the y location of the marker element.
+     * @param {number} scale - Specifies scale factor.
+     * @param {number} type - Specifies the type of the marker processing.
+     * @param {number} animate - Specifies whether the animation is enabled or not.
+     * @returns {void}
+     * @private
+     */
+    markerTranslate(element: Element | HTMLElement, factor: number, x: number, y: number, scale: number, type: string, animate?: boolean): void;
     private markerLineAnimation;
     /**
      * @param {PanDirection} direction - Specifies the direction of the panning.