@syncfusion/ej2-maps 20.3.49 → 20.4.38

package/src/maps/model/base.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable max-len */
 /**
  * Maps base document
  */
@@ -598,7 +598,7 @@ var ZoomSettings = /** @class */ (function (_super) {
         Property(false)
     ], ZoomSettings.prototype, "doubleClickZoom", void 0);
     __decorate([
-        Property(false)
+        Property(true)
     ], ZoomSettings.prototype, "pinchZooming", void 0);
     __decorate([
         Property(false)

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

@@ -15,10 +15,11 @@ export declare class ImageExport {
     /**
      * To export the file as image/svg format
      *
-     * @param {ExportType} type - Specifies the type of the image file
-     * @param {string} fileName - Specifies the file name of the image file
+     * @param {Maps} maps - Specifies the Maps instance.
+     * @param {ExportType} type - Specifies the type of the image file for exporting.
+     * @param {string} fileName - Specifies the file name of the image file for exporting.
      * @param {boolean} allowDownload - Specifies whether to download image as a file or not.
-     * @returns {Promise<string>} - Returns the promise string.
+     * @returns {Promise<string>} - Specifies the base64 string of the exported image which is returned when the allowDownload is set to false.
      * @private
      */
     export(maps: Maps, type: ExportType, fileName: string, allowDownload?: boolean): Promise<string>;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { createElement, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { triggerDownload, getElementByID } from '../utils/helper';
 /**
@@ -12,19 +11,21 @@ var ImageExport = /** @class */ (function () {
      *
      * @param {Maps} control - Specifies the instance of the map
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     function ImageExport(control) {
     }
     /**
      * To export the file as image/svg format
      *
-     * @param {ExportType} type - Specifies the type of the image file
-     * @param {string} fileName - Specifies the file name of the image file
+     * @param {Maps} maps - Specifies the Maps instance.
+     * @param {ExportType} type - Specifies the type of the image file for exporting.
+     * @param {string} fileName - Specifies the file name of the image file for exporting.
      * @param {boolean} allowDownload - Specifies whether to download image as a file or not.
-     * @returns {Promise<string>} - Returns the promise string.
+     * @returns {Promise<string>} - Specifies the base64 string of the exported image which is returned when the allowDownload is set to false.
      * @private
      */
     ImageExport.prototype.export = function (maps, type, fileName, allowDownload) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
         var promise = new Promise(function (resolve, reject) {
             var imageCanvasElement = createElement('canvas', {
                 id: 'ej2-canvas',
@@ -34,7 +35,6 @@ var ImageExport = /** @class */ (function () {
                 }
             });
             var isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
-            var toolbarEle = document.getElementById(maps.element.id + '_ToolBar');
             var svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
             var svgDataElement;
             var tileSvg;
@@ -168,6 +168,7 @@ var ImageExport = /** @class */ (function () {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     ImageExport.prototype.destroy = function () { };
     return ImageExport;
 }());

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

@@ -10,17 +10,17 @@ export declare class PdfExport {
     /**
      * Constructor for Maps
      *
-     * @param {Maps} control Specifies the instance of the map
      */
     constructor();
     /**
      * To export the file as image/svg format
      *
-     * @param {ExportType} type - Specifies the type of the document
-     * @param {string} fileName - Specifies the file name of the document
-     * @param {boolean} allowDownload - Specifies whether to download the document or not
-     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component
-     * @returns {Promise<string>} - Returns the promise string
+     * @param {Maps} maps - Specifies the Maps instance.
+     * @param {ExportType} type - Specifies the type of the document.
+     * @param {string} fileName - Specifies the name of the PDF document.
+     * @param {boolean} allowDownload - Specifies whether to download the document or not.
+     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component.
+     * @returns {Promise<string>} - Returns "null" value when the allowDownload is set to false.
      * @private
      */
     export(maps: Maps, type: ExportType, fileName: string, allowDownload?: boolean, orientation?: PdfPageOrientation): Promise<string>;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { PdfPageOrientation, PdfDocument, PdfBitmap } from '@syncfusion/ej2-pdf-export';
 /**
@@ -10,18 +9,19 @@ var PdfExport = /** @class */ (function () {
     /**
      * Constructor for Maps
      *
-     * @param {Maps} control Specifies the instance of the map
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     function PdfExport() {
     }
     /**
      * To export the file as image/svg format
      *
-     * @param {ExportType} type - Specifies the type of the document
-     * @param {string} fileName - Specifies the file name of the document
-     * @param {boolean} allowDownload - Specifies whether to download the document or not
-     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component
-     * @returns {Promise<string>} - Returns the promise string
+     * @param {Maps} maps - Specifies the Maps instance.
+     * @param {ExportType} type - Specifies the type of the document.
+     * @param {string} fileName - Specifies the name of the PDF document.
+     * @param {boolean} allowDownload - Specifies whether to download the document or not.
+     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component.
+     * @returns {Promise<string>} - Returns "null" value when the allowDownload is set to false.
      * @private
      */
     PdfExport.prototype.export = function (maps, type, fileName, allowDownload, orientation) {
@@ -157,6 +157,7 @@ var PdfExport = /** @class */ (function () {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     PdfExport.prototype.destroy = function () { };
     return PdfExport;
 }());

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

@@ -508,8 +508,8 @@ export interface ILabelRenderingEventArgs extends IMapsEventArgs {
      */
     offsetX: number;
     /**
-    * Defines the top and bottom position of text for the data-label in event argument.
-    */
+     * Defines the top and bottom position of text for the data-label in event argument.
+     */
     offsetY: number;
     /**
      * Defines the color and width of the border for the data-label in event argument.

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

@@ -8,13 +8,14 @@ export declare class Print {
     /**
      * Constructor for Maps
      *
-     * @param {Maps} control - Specifies the instance of the map
+     * @param {Maps} control - Specifies the instance of the Maps
      */
     constructor(control: Maps);
     /**
      * To print the Maps
      *
-     * @param {string[] | string | Element} elements - Specifies the element
+     * @param {Maps} maps -Specifies the Maps instance.
+     * @param {string[] | string | Element} elements - Specifies the element of the Maps
      * @returns {void}
      * @private
      */
@@ -22,6 +23,7 @@ export declare class Print {
     /**
      * To get the html string of the Maps
      *
+     * @param {Maps} maps -Specifies the Maps instance.
      * @param {string[] | string | Element} elements - Specifies the html element
      * @returns {Element} - Returns the div element
      * @private

package/src/maps/model/print.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { print as printFunction, createElement } from '@syncfusion/ej2-base';
 import { getElement } from '../utils/helper';
 import { beforePrint } from '../model/constants';
@@ -11,14 +10,16 @@ var Print = /** @class */ (function () {
     /**
      * Constructor for Maps
      *
-     * @param {Maps} control - Specifies the instance of the map
+     * @param {Maps} control - Specifies the instance of the Maps
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     function Print(control) {
     }
     /**
      * To print the Maps
      *
-     * @param {string[] | string | Element} elements - Specifies the element
+     * @param {Maps} maps -Specifies the Maps instance.
+     * @param {string[] | string | Element} elements - Specifies the element of the Maps
      * @returns {void}
      * @private
      */
@@ -38,6 +39,7 @@ var Print = /** @class */ (function () {
     /**
      * To get the html string of the Maps
      *
+     * @param {Maps} maps -Specifies the Maps instance.
      * @param {string[] | string | Element} elements - Specifies the html element
      * @returns {Element} - Returns the div element
      * @private
@@ -97,6 +99,7 @@ var Print = /** @class */ (function () {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     Print.prototype.destroy = function () { };
     return Print;
 }());

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable jsdoc/require-param */
 import { annotationRendering } from '../index';
 import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getTemplateFunction, getElementOffset, getElementByID } from '../utils/helper';
@@ -43,8 +41,9 @@ var Annotations = /** @class */ (function () {
         var availSize = map.availableSize;
         var id = map.element.id + '_Annotation_' + annotationIndex;
         var childElement = createElement('div', {
-            id: map.element.id + '_Annotation_' + annotationIndex, styles: 'position: absolute; z-index:' + annotation.zIndex + ';'
+            id: map.element.id + '_Annotation_' + annotationIndex
         });
+        childElement.style.cssText = 'position: absolute; z-index:' + annotation.zIndex + ';';
         var argsData = {
             cancel: false, name: annotationRendering, content: annotation.content,
             annotation: annotation

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

@@ -1,4 +1,4 @@
-import { itemHighlight } from '../index';
+import { itemHighlight, shapeHighlight } from '../index';
 import { Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getElementsByClassName, getElement, removeClass, createStyle, customizeStyle, getTargetElement } from '../utils/helper';
 /**
@@ -158,16 +158,37 @@ var Highlight = /** @class */ (function () {
             var marker = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker].highlightSettings.enable;
         }
-        var border = {
-            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color),
-            width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
-            opacity: this.highlightSettings.border.opacity
-        };
+        var borderColor = (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color);
+        var borderWidth = (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale);
+        var borderOpacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity :
+            this.highlightSettings.border.opacity;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var eventArgs = {
             opacity: this.highlightSettings.opacity,
             fill: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
                 ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none') : 'transparent',
-            border: border,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
+            cancel: false
+        };
+        var shapeEventArgs = {
+            opacity: eventArgs.opacity,
+            fill: eventArgs.fill,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
+            name: shapeHighlight,
+            target: targetEle.id,
+            cancel: false,
+            shapeData: shapeData,
+            data: data,
+            maps: this.maps
+        };
+        if (targetEle.id.indexOf('shapeIndex') > -1) {
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            this.maps.trigger(shapeHighlight, shapeEventArgs, function () { });
+        }
+        var itemEventArgs = {
+            opacity: eventArgs.opacity,
+            fill: eventArgs.fill,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
             name: itemHighlight,
             target: targetEle.id,
             cancel: false,
@@ -175,15 +196,18 @@ var Highlight = /** @class */ (function () {
             data: data,
             maps: this.maps
         };
-        this.maps.trigger(itemHighlight, eventArgs, function () {
-            eventArgs.border.opacity = isNullOrUndefined(_this.highlightSettings.border.opacity) ? _this.highlightSettings.opacity : _this.highlightSettings.border.opacity;
-            _this.highlightMap(targetEle, eventArgs);
+        this.maps.trigger(itemHighlight, itemEventArgs, function () {
+            itemEventArgs.cancel = eventArgs.cancel !== itemEventArgs.cancel ? itemEventArgs.cancel : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.cancel : eventArgs.cancel;
+            itemEventArgs.fill = eventArgs.fill !== itemEventArgs.fill ? itemEventArgs.fill : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.fill : eventArgs.fill;
+            itemEventArgs.opacity = eventArgs.opacity !== itemEventArgs.opacity ? itemEventArgs.opacity : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.opacity : eventArgs.opacity;
+            itemEventArgs.border.color = eventArgs.border.color !== itemEventArgs.border.color ? itemEventArgs.border.color : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.color : eventArgs.border.color;
+            itemEventArgs.border.width = eventArgs.border.width !== itemEventArgs.border.width ? itemEventArgs.border.width : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.width : eventArgs.border.width;
+            itemEventArgs.border.opacity = eventArgs.border.opacity !== itemEventArgs.border.opacity ? itemEventArgs.border.opacity : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.opacity : eventArgs.border.opacity;
+            _this.highlightMap(targetEle, itemEventArgs);
         });
     };
     Highlight.prototype.highlightMap = function (targetEle, eventArgs) {
-        var parentElement;
-        var children;
-        if (targetEle.getAttribute('class') === 'highlightMapStyle') {
+        if (targetEle.getAttribute('class') === 'highlightMapStyle' || eventArgs.cancel) {
             return;
         }
         else {

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

@@ -138,7 +138,8 @@ var Selection = /** @class */ (function () {
         var isLineStringShape = targetElement.parentElement.id.indexOf('LineString') > -1;
         var selectionsettings = this.selectionsettings;
         var border = {
-            color: isLineStringShape ? (this.selectionsettings.fill || this.selectionsettings.border.color) : this.selectionsettings.border.color,
+            color: isLineStringShape ? (this.selectionsettings.fill || this.selectionsettings.border.color) :
+                this.selectionsettings.border.color,
             width: isLineStringShape ? (this.selectionsettings.border.width / this.maps.scale) :
                 (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)),
             opacity: this.selectionsettings.border.opacity
@@ -155,7 +156,8 @@ var Selection = /** @class */ (function () {
             maps: this.maps
         };
         this.maps.trigger('itemSelection', eventArgs, function (observedArgs) {
-            eventArgs.border.opacity = isNullOrUndefined(_this.selectionsettings.border.opacity) ? _this.selectionsettings.opacity : _this.selectionsettings.border.opacity;
+            eventArgs.border.opacity = isNullOrUndefined(_this.selectionsettings.border.opacity) ?
+                _this.selectionsettings.opacity : _this.selectionsettings.border.opacity;
             if (!eventArgs.cancel) {
                 if (targetElement.getAttribute('class') === _this.selectionType + 'selectionMapStyle'
                     || targetElement.getAttribute('class') === 'LineselectionMapStyle') {

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { tooltipRender } from '../index';
 import { Tooltip } from '@syncfusion/ej2-svg-base';
 import { createElement, Browser, isNullOrUndefined, extend, remove } from '@syncfusion/ej2-base';
@@ -36,9 +35,7 @@ var MapsTooltip = /** @class */ (function () {
         }
         var option;
         var currentData = '';
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var targetId = target.id;
-        var item = {};
         var tooltipEle;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var templateData = [];
@@ -161,9 +158,9 @@ var MapsTooltip = /** @class */ (function () {
             else {
                 tooltipEle = createElement('div', {
                     id: this.maps.element.id + '_mapsTooltip',
-                    className: 'EJ2-maps-Tooltip',
-                    styles: 'position: absolute;pointer-events:none;'
+                    className: 'EJ2-maps-Tooltip'
                 });
+                tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
                 document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
             }
             if (option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
@@ -186,6 +183,7 @@ var MapsTooltip = /** @class */ (function () {
                 maps: this.maps,
                 element: target, eventArgs: e, content: !isNullOrUndefined(currentData) ? currentData.toString() : ''
             };
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
                     (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
@@ -202,7 +200,8 @@ var MapsTooltip = /** @class */ (function () {
                             header: '',
                             data: option['data'],
                             template: option['template'],
-                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                [currentData.toString()],
                             shapes: [],
                             location: option['location'],
                             palette: [markerFill],
@@ -218,7 +217,8 @@ var MapsTooltip = /** @class */ (function () {
                             header: '',
                             data: tooltipArgs.options['data'],
                             template: tooltipArgs.options['template'],
-                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                [currentData.toString()],
                             shapes: [],
                             location: tooltipArgs.options['location'],
                             palette: [markerFill],
@@ -241,7 +241,7 @@ var MapsTooltip = /** @class */ (function () {
                         && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
                         var templateStyle = tooltipTemplateElement.getAttribute('style');
                         templateStyle = templateStyle.replace('pointer-events: none;', 'position-events:all;');
-                        tooltipTemplateElement.setAttribute('style', templateStyle);
+                        tooltipTemplateElement.style.cssText = templateStyle;
                     }
                 }
                 else {

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

@@ -100,6 +100,11 @@ export declare class Zoom {
     private markerTranslate;
     private markerLineAnimation;
     /**
+     * @param {PanDirection} direction - Specifies the direction of the panning.
+     * @param {number} xDifference - Specifies the distance moved in the horizontal direction.
+     * @param {number} yDifference - Specifies the distance moved in the vertical direction.
+     * @param {PointerEvent | TouchEvent | KeyboardEvent} mouseLocation - Specifies the pointer event argument.
+     * @returns {void}
      * @private
      */
     panning(direction: PanDirection, xDifference: number, yDifference: number, mouseLocation?: PointerEvent | TouchEvent | KeyboardEvent): void;

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

@@ -150,6 +150,7 @@ var Zoom = /** @class */ (function () {
         }
         this.maps.zoomNotApplied = false;
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Zoom.prototype.calculateInitalZoomTranslatePoint = function (newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
         mapTotalWidth *= newZoomFactor;
         mapTotalHeight *= newZoomFactor;
@@ -417,7 +418,7 @@ var Zoom = /** @class */ (function () {
                                     layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, maps.tileZoomLevel, this.index));
                                 }
                             }
-                            else if (currentEle.id.indexOf('Legend') == -1) {
+                            else if (currentEle.id.indexOf('Legend') === -1) {
                                 changeBorderWidth(currentEle, this.index, scale, maps);
                                 maps.zoomTranslatePoint = maps.translatePoint;
                                 this.animateTransform(currentEle, animate, x, y, scale);
@@ -455,7 +456,7 @@ var Zoom = /** @class */ (function () {
                                         }
                                         else {
                                             markerStyle = 'visibility:hidden';
-                                            currentEle.setAttribute('style', markerStyle);
+                                            currentEle.style.cssText = markerStyle;
                                         }
                                     }
                                 }
@@ -495,7 +496,6 @@ var Zoom = /** @class */ (function () {
                             var childElement = void 0;
                             for (var k = 0; k < currentEle.childElementCount; k++) {
                                 childElement = currentEle.childNodes[k];
-                                var bubbleTransform = childElement.getAttribute('transform');
                                 layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                                 var bubleIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
                                 var dataIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
@@ -573,22 +573,22 @@ var Zoom = /** @class */ (function () {
         var layerIndex = parseInt((element ? element : layerElement).id.split('_LayerIndex_')[1].split('_')[0], 10);
         var markerSVGObject = this.maps.renderer.createGroup({
             id: this.maps.element.id + '_Markers_Group',
-            class: 'GroupElement',
-            style: 'pointer-events: auto;'
+            class: 'GroupElement'
         });
+        markerSVGObject.style.pointerEvents = 'auto';
         if (document.getElementById(markerSVGObject.id)) {
             removeElement(markerSVGObject.id);
         }
         var mapsAreaRect = this.maps.mapAreaRect;
         var markerTemplateElements = createElement('div', {
             id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
-            className: 'template',
-            styles: 'overflow: hidden; position: absolute;pointer-events: none;' +
-                'top:' + mapsAreaRect.y + 'px;' +
-                'left:' + mapsAreaRect.x + 'px;' +
-                'height:' + mapsAreaRect.height + 'px;' +
-                'width:' + mapsAreaRect.width + 'px;'
+            className: 'template'
         });
+        markerTemplateElements.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
+            'top:' + mapsAreaRect.y + 'px;' +
+            'left:' + mapsAreaRect.x + 'px;' +
+            'height:' + mapsAreaRect.height + 'px;' +
+            'width:' + mapsAreaRect.width + 'px;';
         if (document.getElementById(markerTemplateElements.id)) {
             removeElement(markerTemplateElements.id);
         }
@@ -626,7 +626,6 @@ var Zoom = /** @class */ (function () {
                         var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                             + markerIndex + '_dataIndex_' + dataIndex;
                         var location_1 = (_this.maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(long, lati), _this.maps.tileZoomLevel, _this.maps.tileTranslatePoint, true) : convertGeoToPoint(lati, long, factor, currentLayers, _this.maps);
-                        var animate_1 = currentLayers.animationDuration !== 0 || isNullOrUndefined(_this.maps.zoomModule);
                         var transPoint = { x: x, y: y };
                         if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
                             markerTemplateCounts++;
@@ -696,15 +695,12 @@ var Zoom = /** @class */ (function () {
         if (animate === void 0) { animate = false; }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var labelCollection = this.maps.dataLabelModule.dataLabelCollections;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var zoomelement = element.getBoundingClientRect();
         var text;
         var trimmedLable;
         var style = this.maps.layers[this.index].dataLabelSettings.textStyle;
         var zoomtext;
         var zoomtextSize;
         var zoomtrimLabel;
-        var labelPath = this.maps.layers[this.index].dataLabelSettings.labelPath;
         var layerIndex = parseFloat(element.id.split('_LayerIndex_')[1].split('_')[0]);
         var shapeIndex = parseFloat(element.id.split('_shapeIndex_')[1].split('_')[0]);
         var labelIndex;
@@ -720,16 +716,25 @@ var Zoom = /** @class */ (function () {
                 var labelX = label['location']['x'];
                 var labelY = label['location']['y'];
                 if (type === 'Template') {
-                    var layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
-                    labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
-                    labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
-                    var templateOffset = element.getBoundingClientRect();
-                    var layerOffset = layerEle.getBoundingClientRect();
-                    var elementOffset = element.parentElement.getBoundingClientRect();
-                    var x_3 = ((labelX) + (layerOffset.left - elementOffset.left) - (templateOffset.width / 2));
-                    var y_2 = ((labelY) + (layerOffset.top - elementOffset.top) - (templateOffset.height / 2));
-                    element.style.left = x_3 + 'px';
-                    element.style.top = y_2 + 'px';
+                    var locationX = 0;
+                    var locationY = 0;
+                    if (this.maps.isTileMap) {
+                        zoomtext = label['dataLabelText'];
+                        zoomtextSize = measureText(zoomtext, style);
+                        locationX = ((labelX + x) * scale) - (zoomtextSize['width'] / 2);
+                        locationY = ((labelY + y) * scale) - (zoomtextSize['height']);
+                    }
+                    else {
+                        var layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
+                        labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
+                        labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
+                        var layerOffset = layerEle.getBoundingClientRect();
+                        var elementOffset = element.parentElement.getBoundingClientRect();
+                        locationX = ((labelX) + (layerOffset.left - elementOffset.left));
+                        locationY = ((labelY) + (layerOffset.top - elementOffset.top));
+                    }
+                    element.style.left = locationX + 'px';
+                    element.style.top = locationY + 'px';
                 }
                 else {
                     labelX = ((labelX + x) * scale);
@@ -861,10 +866,10 @@ var Zoom = /** @class */ (function () {
                         if (element['style']['display'] !== 'none') {
                             if ((staticMapOffset['x'] > templateOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < templateOffset['x'] + templateOffset['width'])
                                 && (staticMapOffset['y'] > templateOffset['y'] || staticMapOffset['y'] + staticMapOffset['height'] < templateOffset['y'] + templateOffset['height'])) {
-                                element['style']['display'] = 'none';
+                                element.style.display = 'none';
                             }
                             else if ((staticMapOffset['x'] > templateOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < templateOffset['x'] + templateOffset['width'])) {
-                                element['style']['display'] = 'none';
+                                element.style.display = 'none';
                             }
                         }
                     }
@@ -920,6 +925,11 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
+     * @param {PanDirection} direction - Specifies the direction of the panning.
+     * @param {number} xDifference - Specifies the distance moved in the horizontal direction.
+     * @param {number} yDifference - Specifies the distance moved in the vertical direction.
+     * @param {PointerEvent | TouchEvent | KeyboardEvent} mouseLocation - Specifies the pointer event argument.
+     * @returns {void}
      * @private
      */
     Zoom.prototype.panning = function (direction, xDifference, yDifference, mouseLocation) {
@@ -1001,7 +1011,6 @@ var Zoom = /** @class */ (function () {
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
-        this.maps.zoomNotApplied = false;
         this.isSingleClick = false;
     };
     Zoom.prototype.toAlignSublayer = function () {
@@ -1352,7 +1361,8 @@ var Zoom = /** @class */ (function () {
     Zoom.prototype.alignToolBar = function () {
         var map = this.maps;
         var padding = 10;
-        var element = createElement('div', { id: map.element.id + '_ToolBar', styles: 'position:absolute;z-index:2' });
+        var element = createElement('div', { id: map.element.id + '_ToolBar' });
+        element.style.cssText = 'position:absolute;z-index:2';
         var rectSVGObject = map.renderer.createSvg({
             id: map.element.id + '_Zooming_ToolBar', width: 10, height: 10
         });

package/src/maps/utils/helper.d.ts

@@ -674,6 +674,7 @@ export declare function drawStar(maps: Maps, options: PathOption, size: Size, lo
  * @param {PathOption} options - Specifies the path options
  * @param {Size} size - Specifies the size
  * @param {MapLocation} location - Specifies the map location
+ * @param {string} type - Specifies the type.
  * @param {Element} element - Specifies the element
  * @returns {Element} - Returns the element
  * @private
@@ -838,6 +839,7 @@ export declare function Internalize(maps: Maps, value: number): string;
  * Function to compile the template function for maps.
  *
  * @param {string} template - Specifies the template
+ * @param {Maps} maps - Specifies the Maps instance.
  * @returns {Function} - Returns the function
  * @private
  */