@syncfusion/ej2-maps 30.2.4 → 31.2.2

package/dist/ts/maps/user-interaction/zoom.ts

@@ -0,0 +1,2523 @@
+/* eslint-disable max-len */
+import { Maps, Orientation, ITouches, ZoomSettings } from '../../index';
+import { Point, getElementByID, Size, PathOption, Rect, convertGeoToPoint, CircleOption, convertTileLatLongToPoint, measureTextElement } from '../utils/helper';
+import { RectOption, createTooltip, calculateScale, getTouchCenter, getTouches, targetTouches, Coordinate } from '../utils/helper';
+import { MapLocation, zoomAnimate, smoothTranslate , measureText, textTrim, clusterTemplate, marker, getProcessedMarginValue } from '../utils/helper';
+import { markerTemplate, removeElement, getElement, clusterSeparate, markerColorChoose, calculatePolygonPath } from '../utils/helper';
+import { markerShapeChoose   } from '../utils/helper';
+import { isNullOrUndefined, EventHandler, Browser, remove, createElement, animationMode } from '@syncfusion/ej2-base';
+import { MarkerSettings, LayerSettings, changeBorderWidth, IMarkerRenderingEventArgs, markerRendering} from '../index';
+import { IMapZoomEventArgs, IMapPanEventArgs, IMinMaxLatitudeLongitude, GeoPosition } from '../model/interface';
+import { pan } from '../model/constants';
+import { getValueFromObject } from '../utils/helper';
+import { PanDirection } from '../utils/enum';
+import { FontModel, DataLabelSettingsModel, BorderModel, ZoomToolbarButtonSettingsModel, ZoomToolbarTooltipSettingsModel, ZoomToolbarSettingsModel, PolygonSettingModel } from '../model/base-model';
+import { MapsTooltip } from './tooltip';
+
+/**
+ * Zoom module used to process the zoom for maps
+ */
+export class Zoom {
+    private maps: Maps;
+    /** @private */
+    public toolBarGroup: Element;
+    private currentToolbarEle: Element;
+    /** @private */
+    public zoomingRect: Rect;
+    /** @private */
+    public selectionColor: string;
+    private fillColor: string;
+    private zoomElements: Element;
+    private panElements: Element;
+    /** @private */
+    public isPanModeEnabled: boolean = false;
+    /** @private */
+    public mouseEnter: boolean = false;
+    /** @private */
+    public baseTranslatePoint: Point;
+    private wheelEvent: string;
+    private cancelEvent: string;
+    /** @private */
+    public currentScale: number;
+    /** @private */
+    public isTouch: boolean = false;
+    /** @private */
+    public rectZoomingStart: boolean = false;
+    /** @private */
+    public touchStartList: ITouches[] | TouchList;
+    /** @private */
+    public touchMoveList: ITouches[] | TouchList;
+    /** @private */
+    public previousTouchMoveList: ITouches[] | TouchList;
+    /** @private */
+    public mouseDownPoints: Point;
+    /** @private */
+    public mouseMovePoints: Point;
+    /** @private */
+    public isDragZoom: boolean;
+    /** @private */
+    public currentLayer: LayerSettings;
+    private panColor: string;
+    private clearTimeout: number;
+    /** @private */
+    public zoomColor: string;
+    /** @private */
+    public browserName: string = Browser.info.name;
+    /** @private */
+    public isPointer: boolean = Browser.isPointer;
+    private handled: boolean = false;
+    private fingers: number;
+    /** @private */
+    public firstMove: boolean;
+    /** @private */
+    public isPanningInProgress: boolean = false;
+    private isPan: boolean = false;
+    private isZoomFinal: boolean = false;
+    private isZoomSelection: boolean = false;
+    private interaction: string;
+    private lastScale: number;
+    private pinchFactor: number = 1;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private startTouches: any[] = [];
+    private index: number;
+    private templateCount: number;
+    private pinchDistance: number;
+    /** @private */
+    public startDistance: number;
+    /** @private */
+    public touchCenter: Point;
+    /** @private */
+    public pinchStartLatLong: object;
+    /** @private */
+    public isCancellation: boolean = false;
+    private pinchTileZoomScale: number = 1;
+    private tileZoomLevel: number = 1;
+    private pinchZoomScale: number = 1;
+    private isPinchZooming: boolean = false;
+
+    /** @private */
+    public mouseDownLatLong: object = { x: 0, y: 0 };
+    /** @private */
+    public mouseMoveLatLong: object = { x: 0, y: 0 };
+    /** @private */
+    public isSingleClick: boolean = false;
+    /** @private */
+    public layerCollectionEle: Element;
+    constructor(maps: Maps) {
+        this.maps = maps;
+        this.wheelEvent = this.browserName === 'mozilla' ? (this.isPointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';
+        this.cancelEvent = this.isPointer ? 'pointerleave' : 'mouseleave';
+        this.selectionColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor;
+        this.fillColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.color;
+        this.addEventListener();
+    }
+
+    /**
+     * To perform zooming for maps.
+     *
+     * @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
+     */
+    public performZooming(position: Point, newZoomFactor: number, type: string, isMouseWheel: boolean = false): void {
+        const map: Maps = this.maps;
+        map.previousProjection = newZoomFactor <= 1.5 ? undefined : map.projectionType;
+        map.defaultState = false;
+        map.initialCheck = false;
+        map.markerZoomedState = map.isMarkerZoomCompleted = false;
+        map.zoomPersistence = map.enablePersistence;
+        const prevLevel: number = map.tileZoomLevel;
+        const maxZoom: number = map.zoomSettings.maxZoom;
+        const minZoom: number = map.zoomSettings.minZoom;
+        newZoomFactor = maxZoom >= newZoomFactor ? newZoomFactor : maxZoom; let isToolbarPerform: boolean = true;
+        switch (type.toLowerCase()) {
+        case 'zoomin':
+            isToolbarPerform = newZoomFactor <= this.maps.zoomSettings.maxZoom;
+            break;
+        case 'zoomout':
+            isToolbarPerform = newZoomFactor >= this.maps.zoomSettings.minZoom;
+            break;
+        }
+        if (isToolbarPerform) {
+            const scale: number = map.previousScale = map.scale;
+            const prevTilePoint: Point = map.tileTranslatePoint;
+            if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
+                || map.isReset)) {
+                const availSize: Rect = map.mapAreaRect;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const minBounds: any = map.baseMapRectBounds['min'] as any;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const maxBounds: any = map.baseMapRectBounds['max'] as any;
+                let mapTotalWidth: number = Math.abs(minBounds['x'] - maxBounds['x']);
+                let mapTotalHeight: number = Math.abs(minBounds['y'] - maxBounds['y']);
+                let translatePointX: number;
+                let translatePointY: number;
+                if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                    if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                        mapTotalWidth = availSize.width / 2;
+                        mapTotalHeight = availSize.height;
+                    }
+                    newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                    newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
+                    map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+                } else {
+                    const point: Point = map.translatePoint;
+                    translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
+                    translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
+                    const currentHeight: number = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
+                    translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                    translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                    map.translatePoint = new Point(translatePointX, translatePointY);
+                }
+                map.scale = newZoomFactor;
+                map.zoomTranslatePoint = map.translatePoint;
+                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                    map.translatePoint = map.previousPoint;
+                    map.scale = map.mapScaleValue = map.previousScale;
+                } else {
+                    this.applyTransform(map, isMouseWheel);
+                }
+            } else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
+                this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
+                map.tileZoomLevel = newZoomFactor;
+                map.zoomSettings.zoomFactor = newZoomFactor;
+                map.scale = Math.pow(2, newZoomFactor - 1);
+                if (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
+                    map.initialCheck = true;
+                    map.zoomPersistence = false;
+                    map.tileTranslatePoint.x = map.initialTileTranslate.x;
+                    map.tileTranslatePoint.y = map.initialTileTranslate.y;
+                    newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+                    map.scale = Math.pow(2, newZoomFactor - 1);
+                }
+                map.mapScaleValue = isNaN(map.mapScaleValue) ? 1 : map.mapScaleValue;
+                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
+                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                    map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                    map.scale = map.previousScale;
+                    map.tileZoomLevel = prevLevel;
+                    map.zoomSettings.zoomFactor = map.previousScale;
+                } else {
+                    if (document.querySelector('.GroupElement')) {
+                        (document.querySelector('.GroupElement') as HTMLElement).style.display = 'none';
+                    }
+                    if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
+                    }
+                    this.markerLineAnimation(map);
+                    map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
+                    const animationDuration: number = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
+                    setTimeout(() => {
+                        // if (type === 'ZoomOut') {
+                        //     element1.removeChild(element1.children[element1.childElementCount - 1]);
+                        //     if (element1.childElementCount) {
+                        //         element1.removeChild(element1.children[element1.childElementCount - 1]);
+                        //     } else {
+                        //         element1 = element1;
+                        //     }
+                        // }
+                        this.applyTransform(this.maps, isMouseWheel);
+                        if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                            document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                        }
+                    }, animationDuration);
+                }
+            }
+            this.triggerZoomComplete(map, prevLevel, type);
+        }
+        this.maps.zoomNotApplied = false;
+        if (this.maps.isDevice) {
+            this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private calculateInitalZoomTranslatePoint(newZoomFactor: number, mapTotalWidth: number, mapTotalHeight: number, availSize: Rect, minBounds: any, map: Maps): Point {
+        mapTotalWidth *= newZoomFactor;
+        mapTotalHeight *= newZoomFactor;
+        const widthDiff: number = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
+        const translatePointX: number = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
+        const translatePointY: number = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
+        return new Point(translatePointX, translatePointY);
+    }
+
+    private triggerZoomEvent(prevTilePoint: Point, prevLevel: number, type: string): boolean {
+        const map: Maps = this.maps; let zoomArgs: IMapZoomEventArgs;
+        if (map.isTileMap) {
+            map.mapScaleValue = isNullOrUndefined(map.mapScaleValue) ? 1 : map.mapScaleValue;
+            map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+            map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
+        }
+        const minMaxLatitudeLongitude : IMinMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
+        if (!map.isTileMap) {
+            zoomArgs = {
+                cancel: false, name: 'zoom', type: type, maps: map,
+                tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
+                tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale },
+                minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+            };
+        } else {
+            zoomArgs = {
+                cancel: false, name: 'zoom', type: type, maps: map,
+                tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
+                tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale },
+                minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+            };
+        }
+        map.trigger('zoom', zoomArgs);
+        return zoomArgs.cancel;
+    }
+
+    private getTileTranslatePosition(prevLevel: number, currentLevel: number, position: Point, type?: string): void {
+        const map: Maps = this.maps;
+        const tileDefaultSize: number = 256;
+        const padding: number = type === 'ZoomOut' ? 10 : (type === 'Reset' && currentLevel > 1) ? 0 : 10;
+        const bounds: Size = map.availableSize;
+        const prevSize: number = Math.pow(2, prevLevel) * 256;
+        const totalSize: number = Math.pow(2, currentLevel) * 256;
+        const x: number = ((position.x - map.tileTranslatePoint.x) / prevSize) * 100;
+        const y: number = ((position.y - map.tileTranslatePoint.y) / prevSize) * 100;
+        map.tileTranslatePoint.x = (currentLevel === 1) ? (bounds.width / 2) - ((tileDefaultSize * 2) / 2) :
+            position.x - ((x * totalSize) / 100);
+        map.tileTranslatePoint.y = (currentLevel === 1) ? ((bounds.height / 2) - ((tileDefaultSize * 2) / 2) + (padding * 2)) :
+            position.y - ((y * totalSize) / 100);
+    }
+
+    private getTileTranslate(currentLevel: number, type?: string): void {
+        const map: Maps = this.maps;
+        const padding: number = type === 'ZoomOut' ? 10 : (type === 'Reset' && currentLevel > 1) ? 0 : 10;
+        const bounds: Size = map.availableSize;
+        const totalSize: number = Math.pow(2, currentLevel) * 256;
+        let x: number = (bounds.width / 2) - (totalSize / 2);
+        let y: number = (bounds.height / 2) - (totalSize / 2);
+        const position: Point = convertTileLatLongToPoint(
+            new MapLocation(this.pinchStartLatLong['longitude'], this.pinchStartLatLong['latitude']), currentLevel, {x: x, y: y}, true
+        );
+        x -= position.x - (bounds.width / 2);
+        y = y - (position.y - (bounds.height / 2)) + padding;
+        const scale: number = Math.pow(2, currentLevel - 1);
+        map.tileTranslatePoint.x = x;
+        map.tileTranslatePoint.y = y;
+        map.translatePoint.x = (x - (0.01 * this.tileZoomLevel)) / scale;
+        map.translatePoint.y = (y - (0.01 * this.tileZoomLevel)) / scale;
+    }
+
+    /**
+     * @returns {void}
+     * @private
+     */
+    public performRectZooming(): void {
+        this.isDragZoom = true;
+        const map: Maps = this.maps;
+        const size: Size = map.availableSize;
+        map.previousProjection = map.projectionType;
+        const prevLevel: number = map.tileZoomLevel;
+        const prevTilePoint: Point = map.tileTranslatePoint;
+        const zoomRect: Rect = this.zoomingRect;
+        const maxZoom: number = map.zoomSettings.maxZoom;
+        const minZoom: number = map.zoomSettings.minZoom;
+        let isZoomCancelled: boolean;
+        if (zoomRect.height > 0 && zoomRect.width > 0) {
+            const x: number = this.zoomingRect.x + (this.zoomingRect.width / 2);
+            const y: number = this.zoomingRect.y + (this.zoomingRect.height / 2);
+            let zoomCalculationFactor: number;
+            if (!map.isTileMap) {
+                const scale: number = map.previousScale = map.scale;
+                zoomCalculationFactor = scale + Math.round((((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2));
+                zoomCalculationFactor = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
+                const translatePoint: Point = map.previousPoint = map.translatePoint;
+                if (zoomCalculationFactor <= maxZoom) {
+                    const translatePointX: number = translatePoint.x - (((size.width / scale) - (size.width / zoomCalculationFactor)) / (size.width / x));
+                    const translatePointY: number = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
+                    map.translatePoint = new Point(translatePointX, translatePointY);
+                }
+                map.scale = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
+                isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+                if (isZoomCancelled) {
+                    map.translatePoint = map.previousPoint;
+                    map.scale = map.previousScale;
+                }
+                map.zoomTranslatePoint = map.translatePoint;
+            } else {
+                zoomCalculationFactor = prevLevel + (Math.round(prevLevel + (((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2)));
+                zoomCalculationFactor = (zoomCalculationFactor >= minZoom && zoomCalculationFactor <= maxZoom) ? zoomCalculationFactor : maxZoom;
+                map.zoomSettings.zoomFactor = zoomCalculationFactor;
+                this.getTileTranslatePosition(prevLevel, zoomCalculationFactor, { x: x, y: y });
+                map.tileZoomLevel = zoomCalculationFactor;
+                map.translatePoint.x = (map.tileTranslatePoint.x - (0.5 * Math.pow(2, zoomCalculationFactor))) /
+                    (Math.pow(2, zoomCalculationFactor));
+                map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, zoomCalculationFactor))) /
+                    (Math.pow(2, zoomCalculationFactor));
+                map.scale = (Math.pow(2, zoomCalculationFactor));
+                isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+                if (isZoomCancelled) {
+                    map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                    map.scale = map.tileZoomLevel = map.zoomSettings.zoomFactor = prevLevel;
+                } else {
+                    map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
+                }
+            }
+            if (!isZoomCancelled) {
+                map.mapScaleValue = zoomCalculationFactor;
+                this.applyTransform(map, false, true);
+                this.maps.zoomNotApplied = false;
+                this.zoomingRect = null;
+            }
+        }
+        this.isZoomFinal = this.isZoomSelection && Math.round(map.scale) === this.maps.zoomSettings.maxZoom;
+        this.triggerZoomComplete(map, prevLevel, '');
+        this.removeToolbarOpacity(map.scale, this.maps.element.id + '_Zooming_');
+    }
+
+    private setInteraction(newInteraction: string): void {
+        this.lastScale = 1;
+        this.interaction = newInteraction;
+    }
+
+    private updateInteraction(): void {
+        if (this.fingers === 2) {
+            this.setInteraction('zoom');
+        } else {
+            this.setInteraction(null);
+        }
+    }
+
+    private tilePinchingProcess (scale: number): void {
+        this.tileZoomLevel = Math.round(scale);
+        this.getTileTranslate(this.tileZoomLevel);
+        this.maps.mapLayerPanel.generateTiles(this.tileZoomLevel, this.maps.tileTranslatePoint, null, null, null, true);
+    }
+
+    /**
+     * @param {PointerEvent} e - Specifies the vent in the map
+     * @returns {void}
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public performPinchZooming(e: PointerEvent | TouchEvent): void {
+        const map: Maps = this.maps;
+        const prevLevel: number = map.tileZoomLevel;
+        let zoomCalculationFactor: number = this.pinchFactor;
+        let isZoomCancelled: boolean;
+        const prevTilePoint: Point = map.tileTranslatePoint;
+        this.maps.mergeCluster();
+        if (!map.isTileMap) {
+            const availSize: Rect = map.mapAreaRect;
+            map.isMarkerZoomCompleted = false;
+            map.previousScale = map.scale;
+            map.previousPoint = map.translatePoint;
+            map.previousProjection = map.projectionType;
+            const scale: number = calculateScale(<ITouches[]>this.touchStartList, <ITouches[]>this.touchMoveList);
+            const touchCenter: Point = getTouchCenter(getTouches(<ITouches[]>this.touchMoveList, this.maps));
+            const newScale: number = scale / this.lastScale;
+            this.lastScale = scale;
+            this.pinchFactor *= newScale;
+            this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const minBounds: any = map.baseMapRectBounds['min'] as any;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const maxBounds: any = map.baseMapRectBounds['max'] as any;
+            let mapTotalHeight: number = Math.abs(minBounds['y'] - maxBounds['y']);
+            let mapTotalWidth: number = Math.abs(minBounds['x'] - maxBounds['x']);
+            const translatePoint: Point = map.translatePoint;
+            let translatePointX: number;
+            let translatePointY: number;
+            if (zoomCalculationFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                    mapTotalWidth = availSize.width / 2;
+                    mapTotalHeight = availSize.height;
+                }
+                zoomCalculationFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                zoomCalculationFactor = zoomCalculationFactor > 1.05 ? 1 : zoomCalculationFactor;
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomCalculationFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+            }
+            else {
+                const currentHeight: number = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
+                translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
+                translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
+            map.scale = zoomCalculationFactor;
+            isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
+            if (isZoomCancelled) {
+                map.translatePoint = map.previousPoint;
+                map.scale = map.previousScale;
+            }
+        } else {
+            this.isPinchZooming = true;
+            const touchCenter: Point = this.touchCenter;
+            const touchOnePoint: MapLocation = this.getMousePosition(this.touchMoveList[0].pageX, this.touchMoveList[0].pageY);
+            const touchTwoPoint: MapLocation = this.getMousePosition(this.touchMoveList[1].pageX, this.touchMoveList[1].pageY);
+            const distance: number = Math.sqrt(Math.pow((touchOnePoint.x - touchTwoPoint.x), 2) + Math.pow((touchOnePoint.y - touchTwoPoint.y), 2));
+            const pinchScale: number = distance / this.startDistance;
+            if (!isNullOrUndefined(this.pinchDistance)) {
+                let pinchZoomFactor: number = Math.log2(pinchScale * (256 * Math.pow(2, prevLevel)) / 256);
+                pinchZoomFactor = Math.min(map.zoomSettings.maxZoom, Math.max(map.zoomSettings.minZoom, pinchZoomFactor));
+                const scaleFactor: number = this.pinchDistance > distance ? (prevLevel * pinchScale) : pinchZoomFactor;
+                let factor: number = pinchZoomFactor;
+                let isZoomOut: boolean = false;
+                if (this.pinchDistance > distance) {
+                    factor = (scaleFactor % 1);
+                    isZoomOut = true;
+                } else if (this.pinchDistance < distance) {
+                    factor = (scaleFactor % 1) + 1;
+                }
+                const zoomFactor: number = Math.ceil(scaleFactor);
+                if (zoomFactor > map.zoomSettings.minZoom && zoomFactor <= map.zoomSettings.maxZoom) {
+                    const element: HTMLElement = document.getElementById(map.element.id);
+                    if (element) {
+                        element.style.overflow = 'hidden';
+                    }
+                    this.tileZoomLevel = zoomFactor;
+                    const transformOriginX: number = (touchCenter.x / (map.mapAreaRect.width - map.mapAreaRect.x)) * 100;
+                    const transformOriginY: number = (touchCenter.y / (map.mapAreaRect.height - map.mapAreaRect.y)) * 100;
+                    const tilesParent: HTMLElement = document.getElementById(map.element.id + '_tile_parent');
+                    let copyTilesParent: HTMLElement = document.getElementById(map.element.id + '_tiles');
+                    if (!copyTilesParent) {
+                        copyTilesParent = document.createElement('div');
+                        copyTilesParent.id = map.element.id + '_tiles';
+                        map.element.appendChild(copyTilesParent);
+                        this.copyStyles(tilesParent, copyTilesParent);
+                        copyTilesParent.style.zIndex = '0';
+                    }
+                    copyTilesParent.style.visibility = 'hidden';
+                    tilesParent.style.transformOrigin = `${transformOriginX}% ${transformOriginY}%`;
+                    tilesParent.style.transform = `scale(${factor})`;
+                    const svgElement: HTMLElement = document.getElementById(map.element.id + '_Tile_SVG_Parent');
+                    svgElement.style.transformOrigin = `${transformOriginX}% ${transformOriginY}%`;
+                    svgElement.style.transform = `scale(${factor})`;
+                    if (!this.isCancellation && (0.2 >= scaleFactor % 1 && scaleFactor % 1 >= 0.1 && !isZoomOut) || (scaleFactor % 1 <= 0.9 && isZoomOut)) {
+                        let animateTile: HTMLElement = document.getElementById(map.element.id + '_animates_tiles');
+                        if (!animateTile) {
+                            animateTile = document.createElement('div');
+                            animateTile.id = map.element.id + '_animates_tiles';
+                            animateTile.classList.add(this.tileZoomLevel.toString());
+                            copyTilesParent.appendChild(animateTile);
+                        }
+                        if (animateTile.childElementCount === 0) {
+                            this.pinchZoomScale = isZoomOut ? Math.floor(scaleFactor) : Math.ceil(scaleFactor);
+                            this.tilePinchingProcess(this.pinchZoomScale);
+                            this.isCancellation = true;
+                        }
+                    }
+                    if (this.isCancellation && (scaleFactor % 1 >= 0.99 && !isZoomOut) || (scaleFactor % 1 <= 0.1 && isZoomOut)) {
+                        if (tilesParent.style.transformOrigin !== '' && this.isCancellation) {
+                            tilesParent.style.transformOrigin = '';
+                            tilesParent.style.transform = '';
+                            svgElement.style.transformOrigin = '';
+                            svgElement.style.transform = '';
+                            this.pinchTileZoomScale = isZoomOut ? Math.floor(scaleFactor) : Math.ceil(scaleFactor);
+                            this.getTileTranslate(this.pinchTileZoomScale);
+                            const targetElement: HTMLElement = document.getElementById(map.element.id + '_animated_tiles');
+                            const sourceElement: HTMLElement = document.getElementById(map.element.id + '_animates_tiles');
+                            while (targetElement.firstChild) {
+                                targetElement.removeChild(targetElement.firstChild);
+                            }
+                            Array.from(sourceElement.children).forEach((child: Element) => {
+                                targetElement.appendChild(child.cloneNode(true));
+                            });
+                            document.getElementById(map.element.id + '_animated_tiles')['className'] = this.pinchTileZoomScale.toFixed(0);
+                            if (sourceElement) {
+                                while (sourceElement.firstChild) {
+                                    sourceElement.removeChild(sourceElement.firstChild);
+                                }
+                            }
+                            this.isCancellation = false;
+                            map.mapScaleValue = this.pinchTileZoomScale;
+                            map.scale = Math.pow(2, this.pinchTileZoomScale - 1);
+                            this.applyTransform(map);
+                        }
+                    }
+                }
+            }
+            this.pinchDistance = distance;
+        }
+        if (!map.isTileMap) {
+            map.mapScaleValue = zoomCalculationFactor;
+            if (!isZoomCancelled) {
+                this.applyTransform(map);
+            }
+            this.triggerZoomComplete(map, prevLevel, '');
+        }
+        if (Browser.isDevice) {
+            this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
+        }
+    }
+
+    private copyStyles(sourceElement: HTMLElement, targetElement: HTMLElement): void {
+        const sourceStyles: CSSStyleDeclaration = window.getComputedStyle(sourceElement);
+        Array.from(sourceStyles).forEach((style: string) => {
+            targetElement.style[style as string] = sourceStyles.getPropertyValue(style);
+        });
+    }
+    private getTouchCenterPoint(): Point {
+        const touchList: Point[] = [];
+        for (let i: number = 0; i < this.touchMoveList.length; i++) {
+            touchList.push(this.getMousePosition(this.touchMoveList[i as number].pageX, this.touchMoveList[i as number].pageY));
+        }
+        return {
+            x: (touchList[0].x + touchList[1].x) / 2,
+            y: (touchList[0].y + touchList[1].y) / 2
+        };
+    }
+
+    private triggerZoomComplete(map: Maps, prevLevel: number, type: string): void {
+        if (map.zoomSettings.enable) {
+            let zoomArgs: IMapZoomEventArgs;
+            if (map.isTileMap) {
+                map.mapScaleValue = isNullOrUndefined(map.mapScaleValue) ? 1 : map.mapScaleValue;
+                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
+            }
+            const minMaxLatitudeLongitude : IMinMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
+            if (!map.isTileMap) {
+                zoomArgs = {
+                    cancel: false, name: 'zoomComplete', type: type, maps: map,
+                    tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
+                    tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale },
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            } else {
+                zoomArgs = {
+                    cancel: false, name: 'zoomComplete', type: type, maps: map,
+                    tileTranslatePoint: { previous: map.tileTranslatePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
+                    tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale },
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            this.maps.trigger('zoomComplete', zoomArgs);
+        }
+    }
+
+    /**
+     * @returns {void}
+     * @private
+     */
+    public drawZoomRectangle(): void {
+        const map: Maps = this.maps;
+        const down: Point = this.mouseDownPoints;
+        const move: Point = this.mouseMovePoints;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const border: any = { width: 1, color: this.maps.themeStyle.rectangleZoomBorderColor };
+        const width: number = Math.abs(move.x - down.x);
+        const height: number = Math.abs(move.y - down.y);
+        const x: number = ((move.x > down.x) ? down.x : down.x - width);
+        const y: number = ((move.y > down.y) ? down.y : down.y - height);
+        if ((x > map.mapAreaRect.x && x < (map.mapAreaRect.x + map.mapAreaRect.width)) &&
+            (y > map.mapAreaRect.y) && (y < map.mapAreaRect.y + map.mapAreaRect.height)) {
+            this.zoomingRect = new Rect(x, y, width, height);
+            const rectSVGObject: Element = map.renderer.createSvg({
+                id: map.element.id + '_Selection_Rect_Zooming',
+                width: map.availableSize.width,
+                height: map.availableSize.height,
+                style: 'position: absolute;'
+            });
+            (rectSVGObject as HTMLElement).style.position = 'absolute';
+            const rectOption: RectOption = new RectOption(
+                map.element.id + '_ZoomRect', this.maps.themeStyle.rectangleZoomFillColor, border, this.maps.themeStyle.rectangleZoomFillOpacity, this.zoomingRect, 0, 0, '', '3'
+            );
+            rectSVGObject.appendChild(map.renderer.drawRectangle(rectOption));
+            getElementByID(map.element.id + '_Secondary_Element').appendChild(rectSVGObject);
+        }
+    }
+    /**
+     * To animate the zooming process.
+     *
+     * @param {Element} element - Specifies the element
+     * @param {boolean} animate - Specifies the boolean value
+     * @param {number} x - Specifies the x value
+     * @param {number} y - Specifies the y value
+     * @param {number} scale - Specifies the scale value
+     * @returns {void}
+     */
+    private animateTransform(element: Element, animate: boolean, x: number, y: number, scale: number): void {
+        const duration: number = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
+        if (!animate || duration === 0 || this.maps.isTileMap) {
+            if (!(this.maps.isTileMap && element.id.indexOf('_Polygons_Group') > -1)) {
+                element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
+            }
+            return;
+        }
+        if (!this.maps.isTileMap) {
+            zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
+        }
+    }
+
+    /**
+     * @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
+     */
+    public applyTransform(maps: Maps, isMouseWheel?: boolean, animate?: boolean, isPanning?: boolean): void {
+        let layerIndex: number;
+        this.templateCount = 0;
+        let markerStyle: string;
+        const scale: number = maps.scale;
+        const x: number = maps.translatePoint.x;
+        const y: number = maps.translatePoint.y;
+        let currentLabelIndex: number = 0;
+        maps.zoomShapeCollection = [];
+        this.isPanningInProgress = isPanning || false;
+        if (document.getElementById(maps.element.id + '_mapsTooltip')) {
+            removeElement(maps.element.id + '_mapsTooltip');
+        }
+        if (maps.isTileMap) {
+            const element: HTMLElement = document.getElementById(maps.element.id + '_svg');
+            if (element) {
+                for (let k: number = 0; k < maps.layers.length; k++) {
+                    const layerElement: Element = element.querySelector('#' + maps.element.id + '_LayerIndex_' + k);
+                    if (layerElement) {
+                        element.removeChild(layerElement);
+                    }
+                }
+            }
+        }
+        if (this.layerCollectionEle) {
+            for (let i: number = 0; i < this.layerCollectionEle.childElementCount; i++) {
+                const layerElement: Element = this.layerCollectionEle.childNodes[i as number] as Element;
+                if (layerElement.tagName === 'g') {
+                    this.templateCount++;
+                    this.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
+                    this.currentLayer = <LayerSettings>maps.layersCollection[this.index];
+                    const factor: number = maps.mapLayerPanel.calculateFactor(this.currentLayer);
+                    const elementCount: number = layerElement.childElementCount;
+                    const templateElement: Element = document.getElementById(maps.element.id + '_LayerIndex_' + this.index + '_Markers_Template_Group');
+                    for (let j: number = 0; j < elementCount; j++) {
+                        let currentEle: Element = layerElement.childNodes[j as number] as Element;
+                        if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
+                            && (!(currentEle.id.indexOf('_dataLableIndex_Group') > -1))
+                        ) {
+                            if (maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
+                                currentEle.remove();
+                                if (layerElement.children.length > 0 && layerElement.children[0]) {
+                                    layerElement.insertBefore(
+                                        maps.navigationLineModule.renderNavigation(
+                                            this.currentLayer, this.isPinchZooming ? this.pinchZoomScale : maps.tileZoomLevel,
+                                            this.index
+                                        ),
+                                        layerElement.children[1]
+                                    );
+                                } else {
+                                    layerElement.appendChild(maps.navigationLineModule.renderNavigation(this.currentLayer, this.isPinchZooming ? this.pinchZoomScale : maps.tileZoomLevel, this.index));
+                                }
+                            } else if (maps.isTileMap && (currentEle.id.indexOf('_Polygons_Group') > -1)){
+                                if (this.currentLayer.polygonSettings.polygons.length > 0) {
+                                    this.currentLayer.polygonSettings.polygons.map((polygonSettings: PolygonSettingModel, polygonIndex: number) => {
+                                        const markerData: Coordinate[] = polygonSettings.points;
+                                        const path: string = calculatePolygonPath(maps, this.isPinchZooming ? this.pinchZoomScale : maps.tileZoomLevel, this.currentLayer, markerData);
+                                        const element: Element = document.getElementById(maps.element.id + '_LayerIndex_' + this.index + '_PolygonIndex_' + polygonIndex);
+                                        if (!isNullOrUndefined(element)) {
+                                            element.setAttribute('d', path);
+                                        }
+                                    });
+                                    document.getElementById(maps.element.id + '_LayerIndex_' + this.index + '_Polygons_Group').style.visibility = '';
+                                }
+                            } else if (currentEle.id.indexOf('Legend') === -1) {
+                                changeBorderWidth(currentEle, this.index, scale, maps);
+                                maps.zoomTranslatePoint = maps.translatePoint;
+                                this.animateTransform(currentEle, animate, x, y, scale);
+                            }
+
+                        } else if (currentEle.id.indexOf('_Markers_Group') > -1) {
+                            if ((!this.isPanModeEnabled || !isPanning) && (!isNullOrUndefined(currentEle.childNodes[0]) || !isNullOrUndefined(templateElement.childNodes[0]))) {
+                                const processElement: Element = <Element>(!isNullOrUndefined(currentEle.childNodes[0]) ? currentEle.childNodes[0] : templateElement.childNodes[0]);
+                                this.markerTranslates(processElement, factor, x, y, scale, 'Marker', layerElement);
+                            }
+                            currentEle = layerElement.childNodes[j as number] as Element;
+                            if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
+                                Array.prototype.forEach.call(currentEle.childNodes, (childNode: HTMLElement, k: number) => {
+                                    this.markerTranslate(<Element>childNode, factor, x, y, scale, 'Marker', animate);
+                                    const dataIndex : number = parseInt(childNode['id'].split('_dataIndex_')[1].split('_')[0], 10);
+                                    const markerIndex  : number = parseInt(childNode['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                                    if (this.currentLayer.markerSettings[markerIndex as number].initialMarkerSelection.length > 0) {
+                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                        const markerSelectionValues: any = this.currentLayer.markerSettings[markerIndex as number].dataSource[dataIndex as number];
+                                        for (let x: number = 0; x < this.currentLayer.markerSettings[markerIndex as number].initialMarkerSelection.length; x++) {
+                                            if (this.currentLayer.markerSettings[markerIndex as number].initialMarkerSelection[x as number]['latitude'] ===
+                                                markerSelectionValues['latitude'] ||
+                                                this.currentLayer.markerSettings[markerIndex as number].initialMarkerSelection[x as number]['longitude'] ===
+                                                markerSelectionValues['longitude']) {
+                                                maps.markerSelection(this.currentLayer.markerSettings[markerIndex as number].selectionSettings,
+                                                                     maps, currentEle.children[k as number],
+                                                                     this.currentLayer.markerSettings[markerIndex as number].dataSource[dataIndex as number]
+                                                );
+                                            }
+                                        }
+                                    }
+                                    if (((this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && this.currentLayer.type === 'SubLayer')) && !this.isPanModeEnabled) {
+                                        if (!maps.isTileMap) {
+                                            markerStyle = isMouseWheel ? markerStyle : 'visibility:hidden';
+                                            if (!isNullOrUndefined(markerStyle)) {
+                                                (currentEle as HTMLElement).style.cssText = markerStyle;
+                                            }
+                                        }
+                                    }
+                                });
+                                if (this.isPanModeEnabled && maps.markerModule.sameMarkerData.length > 0) {
+                                    clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
+                                } else if (maps.markerModule.sameMarkerData.length > 0) {
+                                    maps.markerModule.sameMarkerData = [];
+                                    if (document.getElementById(maps.element.id + '_mapsTooltip')) {
+                                        removeElement(maps.element.id + '_mapsTooltip');
+                                    }
+                                }
+                                if (document.getElementById(maps.element.id + '_mapsTooltip') && maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
+                                    && !this.isPanModeEnabled) {
+                                    const mapsTooltip: MapsTooltip = maps.mapsTooltipModule;
+                                    const tooltipElement: Element = currentEle.querySelector('#' + mapsTooltip.tooltipTargetID);
+                                    if (!isNullOrUndefined(tooltipElement)) {
+                                        if (tooltipElement['style']['visibility'] === 'hidden') {
+                                            removeElement(maps.element.id + '_mapsTooltip');
+                                        } else {
+                                            let x: number = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[1]);
+                                            let y: number = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[2]);
+                                            if (maps.isTileMap) {
+                                                x += +getElement(maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
+                                                y += +getElement(maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
+                                            }
+                                            mapsTooltip.svgTooltip.location.x = x;
+                                            mapsTooltip.svgTooltip.location.y = y;
+                                            mapsTooltip.svgTooltip.enableAnimation = false;
+                                        }
+                                    }
+                                }
+                            }
+                        } else if (currentEle.id.indexOf('_bubble_Group') > -1) {
+                            let childElement: HTMLElement;
+                            for (let k: number = 0; k < currentEle.childElementCount; k++) {
+                                childElement = currentEle.childNodes[k as number] as HTMLElement;
+                                layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
+                                const bubleIndex: number = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
+                                const dataIndex: number = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
+                                for (let l: number = 0; l < maps.bubbleModule.bubbleCollection.length; l++) {
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    const bubbleCollection: any = maps.bubbleModule.bubbleCollection[l as number];
+                                    if (bubbleCollection['LayerIndex'] === layerIndex && bubbleCollection['BubbleIndex'] === bubleIndex &&
+                                        bubbleCollection['DataIndex'] === dataIndex) {
+                                        const centerX: number = bubbleCollection['center']['x'];
+                                        const centerY: number = bubbleCollection['center']['y'];
+                                        const currentX: number = ((centerX + x) * scale);
+                                        const currentY: number = ((centerY + y) * scale);
+                                        const duration: number = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
+                                        if (!animate || duration === 0) {
+                                            childElement.setAttribute('transform', 'translate( ' + currentX + ' ' + currentY + ' )');
+                                        } else {
+                                            smoothTranslate(childElement, 0, duration, new MapLocation(currentX, currentY));
+                                        }
+                                        break;
+                                    }
+                                }
+                            }
+                        } else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this.index])) {
+                            maps.zoomLabelPositions = [];
+                            maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
+                            const labelAnimate: boolean = !maps.isTileMap && animate;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            const intersect: any[] = [];
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            Array.prototype.forEach.call(currentEle.childNodes, (childNode: any, k: number) => {
+                                if (currentEle.childNodes[k as number]['id'].indexOf('_LabelIndex_') > -1) {
+                                    const labelIndex: number = parseFloat(currentEle.childNodes[k as number]['id'].split('_LabelIndex_')[1].split('_')[0]);
+                                    const zoomShapeWidth : string = (currentEle.childNodes[k as number] as Element).id;
+                                    maps.zoomShapeCollection.push(zoomShapeWidth);
+                                    this.dataLabelTranslate(<Element>currentEle.childNodes[k as number], factor, x, y, scale, 'DataLabel', labelAnimate, currentLabelIndex, isPanning, intersect);
+                                    currentLabelIndex++;
+                                    const dataLabel: DataLabelSettingsModel = maps.layers[this.index].dataLabelSettings;
+                                    const border: BorderModel = dataLabel.border;
+                                    if (k > 0 && border['width'] > 1) {
+                                        if (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !isNullOrUndefined(maps.zoomLabelPositions[labelIndex as number])) {
+                                            const labelX: number = ((maps.zoomLabelPositions[labelIndex as number]['location']['x'] + x) * scale);
+                                            const labelY: number = ((maps.zoomLabelPositions[labelIndex as number]['location']['y'] + y) * scale);
+                                            const zoomtext: string = currentEle.childNodes[k as number]['textContent'];
+                                            const style: FontModel = maps.layers[this.index].dataLabelSettings.textStyle;
+                                            const zoomtextSize: Size = measureText(zoomtext, style);
+                                            const padding: number = 5;
+                                            const rectElement: ChildNode = currentEle.childNodes[k - 1];
+                                            const rectX: number = labelX - zoomtextSize['width'] / 2;
+                                            const rectY: number = labelY - zoomtextSize['height'] / 2 - padding;
+                                            rectElement['setAttribute']('x', rectX);
+                                            rectElement['setAttribute']('y', rectY);
+                                        }
+                                    }
+                                }
+                            });
+                        }
+                    }
+                }
+                maps.arrangeTemplate();
+            }
+            if (!isNullOrUndefined(this.currentLayer)) {
+                if (!animate || this.currentLayer.animationDuration === 0 || maps.isTileMap) {
+                    this.processTemplate(x, y, scale, maps);
+                }
+            }
+        }
+    }
+
+    private markerTranslates(
+        element: Element | HTMLElement, factor: number, x: number, y: number, scale: number, type: string, layerElement: Element): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let templateFn: any;
+        let nullCount: number = 0;
+        let markerCounts: number = 0;
+        let markerTemplateCounts : number = 0;
+        const layerIndex: number = parseInt((element ? element : layerElement).id.split('_LayerIndex_')[1].split('_')[0], 10);
+        const markerSVGObject: Element = this.maps.renderer.createGroup({
+            id: this.maps.element.id + '_Markers_Group',
+            class: 'GroupElement'
+        });
+        (markerSVGObject as HTMLElement).style.pointerEvents = 'auto';
+        if (document.getElementById(markerSVGObject.id)) {
+            removeElement(markerSVGObject.id);
+        }
+        const mapsAreaRect: Rect = this.maps.mapAreaRect;
+        const markerTemplateElements: HTMLElement = createElement('div', {
+            id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
+            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);
+        }
+        const currentLayers: LayerSettings = <LayerSettings>this.maps.layersCollection[layerIndex as number];
+        const allowInnerClusterSetting: boolean = this.maps.markerModule.allowInnerClusterSetting(currentLayers);
+        Array.prototype.forEach.call(currentLayers.markerSettings, (markerSettings: MarkerSettings, markerIndex: number) => {
+            markerTemplateCounts = 0;
+            markerCounts = 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const markerDatas: any[] = <any[]>markerSettings.dataSource;
+            if (!isNullOrUndefined(markerDatas)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                Array.prototype.forEach.call(markerDatas, (data: any, dataIndex: number) => {
+                    this.maps.markerNullCount = markerIndex >= 0 && dataIndex === 0 ? 0 : this.maps.markerNullCount;
+                    let eventArgs: IMarkerRenderingEventArgs = {
+                        template: markerSettings.template, data: data, maps: this.maps, marker: markerSettings,
+                        cancel: false, name: markerRendering, fill: markerSettings.fill, colorValuePath: markerSettings.colorValuePath,
+                        shapeValuePath: markerSettings.shapeValuePath,
+                        height: !isNullOrUndefined(markerSettings.heightValuePath) && !isNullOrUndefined(data[markerSettings.heightValuePath])
+                            ? data[markerSettings.heightValuePath] : markerSettings.height,
+                        width: !isNullOrUndefined(markerSettings.widthValuePath) && !isNullOrUndefined(data[markerSettings.widthValuePath])
+                            ? data[markerSettings.widthValuePath] : markerSettings.width,
+                        imageUrl: markerSettings.imageUrl, imageUrlValuePath: markerSettings.imageUrlValuePath, shape: markerSettings.shape,
+                        border: markerSettings.border
+                    };
+                    eventArgs = markerShapeChoose(eventArgs, data);
+                    eventArgs = markerColorChoose(eventArgs, data);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    this.maps.trigger('markerRendering', eventArgs, (MarkerArgs: IMarkerRenderingEventArgs) => {
+                        if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath ) {
+                            eventArgs = markerShapeChoose(eventArgs, data);
+                        }
+                        if (markerSettings.colorValuePath !== eventArgs.colorValuePath ) {
+                            eventArgs = markerColorChoose(eventArgs, data);
+                        }
+                        const lati: number = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
+                                parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
+                        const long: number = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
+                            Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
+                                parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
+                        const offset: Point = markerSettings.offset;
+                        if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
+                            const markerID: string = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+                                + markerIndex + '_dataIndex_' + dataIndex;
+                            const location: Point = (this.maps.isTileMap) ? convertTileLatLongToPoint(
+                                new MapLocation(long, lati), this.isPinchZooming ? this.pinchZoomScale : this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true
+                            ) : convertGeoToPoint(lati, long, factor, currentLayers, this.maps);
+                            const transPoint: Point = {x: x, y: y};
+                            if (eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
+                                markerTemplateCounts++;
+                                markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateElements, location, transPoint,
+                                               scale, offset, this.maps);
+                            } else  if (!eventArgs.template && (!isNaN(location.x) && !isNaN(location.y))) {
+                                markerCounts++;
+                                marker(eventArgs, markerSettings, markerDatas, dataIndex, location, transPoint,
+                                       markerID, offset, scale, this.maps, markerSVGObject);
+                            }
+                        }
+                        nullCount += (!isNaN(lati) && !isNaN(long)) ? 0 : 1;
+                        markerTemplateCounts += (eventArgs.cancel) ? 1 : 0;
+                        markerCounts += (eventArgs.cancel) ? 1 : 0;
+                        this.maps.markerNullCount = (isNullOrUndefined(lati) || isNullOrUndefined(long))
+                            ? this.maps.markerNullCount + 1 : this.maps.markerNullCount;
+                        const markerDataLength: number = markerDatas.length - this.maps.markerNullCount;
+                        let isMarkersClustered: boolean = false;
+                        const markerGroup: NodeListOf<Element> | NodeListOf<ChildNode> = (markerSettings.clusterSettings.allowClustering
+                            || (currentLayers.markerClusterSettings.allowClustering && currentLayers.markerSettings.length > 1))
+                            ? markerSVGObject.querySelectorAll(`[id*='LayerIndex_${layerIndex}_MarkerIndex_${markerIndex}']:not([id*='_Group'])`)
+                            : markerSVGObject.childNodes;
+                        if (markerGroup.length === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
+                            if (this.maps.isTileMap) {
+                                const polygonsElement: Element = document.getElementById(this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
+                                const polygonElement: Element = document.getElementById(this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
+                                if (!isNullOrUndefined(polygonsElement)) {
+                                    polygonsElement.insertAdjacentElement('afterend', markerSVGObject);
+                                } else {
+                                    if (!isNullOrUndefined(polygonElement)) {
+                                        polygonElement.insertAdjacentElement('afterend', markerSVGObject);
+                                    } else {
+                                        layerElement.insertBefore(markerSVGObject, layerElement.firstElementChild);
+                                    }
+                                }
+                            } else {
+                                layerElement.appendChild(markerSVGObject);
+                            }
+                            if (currentLayers.markerSettings[markerIndex as number].clusterSettings.allowClustering ||
+                                !allowInnerClusterSetting && currentLayers.markerClusterSettings.allowClustering) {
+                                this.maps.svgObject.appendChild(markerSVGObject);
+                                this.maps.element.appendChild(this.maps.svgObject);
+                                isMarkersClustered = clusterTemplate(currentLayers, markerSVGObject, this.maps, layerIndex, markerIndex, markerSVGObject, layerElement, true, true, null, allowInnerClusterSetting);
+                            }
+                        }
+                        const markerTemplateGroup: NodeListOf<Element> | NodeListOf<ChildNode> = (markerSettings.clusterSettings.allowClustering
+                            || (currentLayers.markerClusterSettings.allowClustering && currentLayers.markerSettings.length > 1))
+                            ? markerTemplateElements.querySelectorAll(`[id*='LayerIndex_${layerIndex}_MarkerIndex_${markerIndex}']:not([id*='_Group'])`)
+                            : markerTemplateElements.childNodes;
+                        if (markerTemplateGroup.length === (markerDataLength - markerCounts - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
+                            getElementByID(this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateElements);
+                            if (scale >= 1) {
+                                if ((markerSettings.clusterSettings.allowClustering || !allowInnerClusterSetting &&
+                                    currentLayers.markerClusterSettings.allowClustering) && !isMarkersClustered) {
+                                    clusterTemplate(currentLayers, markerTemplateElements, this.maps, layerIndex, markerIndex, markerSVGObject, layerElement, false, true, null, allowInnerClusterSetting);
+                                }
+                            }
+                        }
+                    });
+                });
+            }
+        });
+    }
+    /**
+     * To translate the layer template elements.
+     *
+     * @param {number} x - Specifies the x value
+     * @param {number} y - Specifies the y value
+     * @param {number} scale - Specifies the scale value
+     * @param {Maps} maps - Specifies the maps value
+     * @returns {void}
+     * @private
+     */
+    public processTemplate(x: number, y: number, scale: number, maps: Maps): void {
+        let currentLabelIndex: number = 0;
+        for (let i: number = 0; i < this.templateCount; i++) {
+            const factor: number = maps.mapLayerPanel.calculateFactor(this.currentLayer);
+            const markerTemplateElement: HTMLElement = <HTMLElement>getElementByID(maps.element.id + '_LayerIndex_' +
+                i + '_Markers_Template_Group');
+            const datalabelTemplateElemement: HTMLElement = <HTMLElement>getElementByID(maps.element.id + '_LayerIndex_'
+                + i + '_Label_Template_Group');
+            const polygonElement: HTMLElement = <HTMLElement>getElementByID(maps.element.id + '_LayerIndex_'
+                + i + '_Polygons_Group');
+            if ((!isNullOrUndefined(markerTemplateElement)) && markerTemplateElement.childElementCount > 0) {
+                markerTemplateElement.style.visibility = 'visible';
+                for (let k: number = 0; k < markerTemplateElement.childElementCount; k++) {
+                    this.markerTranslate(<HTMLElement>markerTemplateElement.childNodes[k as number], factor, x, y, scale, 'Template');
+                }
+            }
+            if ((!isNullOrUndefined(datalabelTemplateElemement)) && datalabelTemplateElemement.childElementCount > 0) {
+                for (let k: number = 0; k < datalabelTemplateElemement.childElementCount; k++) {
+                    this.dataLabelTranslate(<HTMLElement>datalabelTemplateElemement.childNodes[k as number], factor, x, y, scale, 'Template', false, currentLabelIndex);
+                    currentLabelIndex++;
+                }
+            }
+            if (!isNullOrUndefined(polygonElement)) {
+                for (let k: number = 0; k < polygonElement.childElementCount; k++) {
+                    const width: number = maps.layersCollection[i as number].polygonSettings.polygons[k as number].borderWidth;
+                    (polygonElement.childNodes[k as number].childNodes[0] as HTMLElement).setAttribute('stroke-width', (width / scale).toString());
+                }
+            }
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private dataLabelTranslate(element: Element | HTMLElement, factor: number, x: number, y: number, scale: number, type: string, animate: boolean = false, currentLabelIndex: number, isPanning?: boolean, intersect?: any[]): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const labelCollection: any[] = this.maps.dataLabelModule.dataLabelCollections;
+        let text: string; let trimmedLable: string;
+        const style: FontModel = this.maps.layers[this.index].dataLabelSettings.textStyle;
+        let zoomtext: string; let zoomtextSize: Size; let zoomtrimLabel: string;
+        const layerIndex: number = parseFloat(element.id.split('_LayerIndex_')[1].split('_')[0]);
+        const shapeIndex: number = parseFloat(element.id.split('_shapeIndex_')[1].split('_')[0]);
+        let labelIndex: number;
+        if (element.id.indexOf('_LabelIndex_') > -1) {
+            labelIndex = parseFloat(element.id.split('_LabelIndex_')[1].split('_')[0]);
+        }
+        const duration: number = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const label: any = labelCollection[currentLabelIndex as number];
+        const index: number = currentLabelIndex;
+        if (label['layerIndex'] === layerIndex && label['shapeIndex'] === shapeIndex
+            && label['labelIndex'] === labelIndex) {
+            let labelX: number = label['location']['x'];
+            let labelY: number = label['location']['y'];
+            if (type === 'Template') {
+                let locationX: number = 0;
+                let locationY: number = 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 {
+                    const layerEle: Element = 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);
+                    const layerOffset: ClientRect = layerEle.getBoundingClientRect();
+                    const elementOffset: ClientRect = element.parentElement.getBoundingClientRect();
+                    locationX = ((labelX) + (layerOffset.left - elementOffset.left));
+                    locationY = ((labelY) + (layerOffset.top - elementOffset.top));
+                }
+                (<HTMLElement>element).style.left = locationX + 'px';
+                (<HTMLElement>element).style.top = locationY + 'px';
+            } else {
+                labelX = ((labelX + x) * scale); labelY = ((labelY + y) * scale);
+                zoomtext = label['dataLabelText'];
+                if (!animate || duration === 0) {
+                    element.setAttribute('transform', 'translate( ' + labelX + ' ' + labelY + ' )');
+                }
+                if ((isNullOrUndefined(isPanning) || !isPanning) && (this.maps.layers[this.index].dataLabelSettings.smartLabelMode !== 'None' ||
+                    this.maps.layers[this.index].dataLabelSettings.intersectionAction !== 'None')) {
+                    zoomtextSize = measureTextElement(zoomtext, style);
+                    const start: number = labelY - zoomtextSize['height'] / 2;
+                    const end: number = labelY + zoomtextSize['height'] / 2;
+                    const xpositionEnds: number = labelX + zoomtextSize['width'] / 2;
+                    const xpositionStart: number = labelX - zoomtextSize['width'] / 2;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const textLocations: any = { rightWidth: xpositionEnds, leftWidth: xpositionStart, heightTop: start, heightBottom: end };
+                    if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Hide') {
+                        if (scale > 1) {
+                            text = ((this.maps.dataLabelShape[index as number] * scale) >= zoomtextSize['width']) ? zoomtext : '';
+                            element.textContent = text;
+                        } else {
+                            text = (this.maps.dataLabelShape[index as number] >= zoomtextSize['width']) ? zoomtext : '';
+                            element.textContent = text;
+                        }
+                    }
+                    const widthList: number[] = [];
+                    if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
+                        if (scale > 1) {
+                            zoomtrimLabel = textTrim((this.maps.dataLabelShape[index as number] * scale), zoomtext, style, zoomtextSize.width, true, widthList);
+                            text = zoomtrimLabel; element.textContent = text;
+                        } else {
+                            zoomtrimLabel = textTrim(this.maps.dataLabelShape[index as number], zoomtext, style, zoomtextSize.width, true, widthList);
+                            text = zoomtrimLabel; element.textContent = text;
+                        }
+                    }
+                    if (this.maps.layers[this.index].dataLabelSettings.intersectionAction === 'Hide') {
+                        for (let m: number = 0; m < intersect.length; m++) {
+                            if (!isNullOrUndefined(intersect[m as number])) {
+                                if (textLocations['leftWidth'] > intersect[m as number]['rightWidth']
+                                    || textLocations['rightWidth'] < intersect[m as number]['leftWidth']
+                                    || textLocations['heightTop'] > intersect[m as number]['heightBottom']
+                                    || textLocations['heightBottom'] < intersect[m as number]['heightTop']) {
+                                    text = !isNullOrUndefined(text) ? text : zoomtext;
+                                    (element as HTMLElement).textContent = text;
+                                } else {
+                                    text = ''; element.textContent = text;
+                                    break;
+                                }
+                            }
+                        }
+                        intersect.push(textLocations);
+                    }
+                    if (this.maps.layers[this.index].dataLabelSettings.intersectionAction === 'Trim') {
+                        for (let j: number = 0; j < intersect.length; j++) {
+                            if (!isNullOrUndefined(intersect[j as number])) {
+                                if (textLocations['rightWidth'] < intersect[j as number]['leftWidth']
+                                    || textLocations['leftWidth'] > intersect[j as number]['rightWidth']
+                                    || textLocations['heightBottom'] < intersect[j as number]['heightTop']
+                                    || textLocations['heightTop'] > intersect[j as number]['heightBottom']) {
+                                    trimmedLable = !isNullOrUndefined(text) ? text : zoomtext;
+                                    if (scale > 1) {
+                                        const trimmedWidth: number = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        trimmedLable = textTrim((this.maps.dataLabelShape[index as number] * scale), trimmedLable, style, trimmedWidth, true);
+                                    }
+                                    element.textContent = trimmedLable;
+                                } else {
+                                    if (textLocations['leftWidth'] > intersect[j as number]['leftWidth']) {
+                                        const width: number = intersect[j as number]['rightWidth'] - textLocations['leftWidth'];
+                                        const difference: number = width - (textLocations['rightWidth'] - textLocations['leftWidth']);
+                                        text = !isNullOrUndefined(text) ? text : zoomtext;
+                                        const trimmedWidth: number = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        trimmedLable = textTrim(difference, text, style, trimmedWidth, true);
+                                        element.textContent = trimmedLable;
+                                        break;
+                                    }
+                                    if (textLocations['leftWidth'] < intersect[j as number]['leftWidth']) {
+                                        const width: number = textLocations['rightWidth'] - intersect[j as number]['leftWidth'];
+                                        const difference: number = Math.abs(width - (textLocations['rightWidth'] - textLocations['leftWidth']));
+                                        text = !isNullOrUndefined(text) ? text : zoomtext;
+                                        const trimmedWidth: number = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
+                                        trimmedLable = textTrim(difference, text, style, trimmedWidth, true);
+                                        element.textContent = trimmedLable;
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+                        intersect.push(textLocations);
+                        if (isNullOrUndefined(trimmedLable)) {
+                            trimmedLable = textTrim((this.maps.dataLabelShape[index as number] * scale), zoomtext, style, zoomtextSize.width, true);
+                            element.textContent = trimmedLable;
+                        }
+                    }
+                }
+                if (animate || duration > 0) {
+                    smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
+                }
+            }
+        }
+    }
+
+    /**
+     *
+     * @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
+     */
+    public markerTranslate(
+        element: Element | HTMLElement, factor: number, x: number, y: number, scale: number, type: string, animate: boolean = false
+    ): void {
+        const layerIndex: number = parseInt(element.id.split('_LayerIndex_')[1].split('_')[0], 10);
+        const markerIndex: number = parseInt(element.id.split('_MarkerIndex_')[1].split('_')[0], 10);
+        const dataIndex: number = parseInt(element.id.split('_dataIndex_')[1].split('_')[0], 10);
+        const layer: LayerSettings = <LayerSettings>this.maps.layersCollection[layerIndex as number];
+        const marker: MarkerSettings = <MarkerSettings>layer.markerSettings[markerIndex as number];
+        if (!isNullOrUndefined(marker) && !isNullOrUndefined(marker.dataSource) && !isNullOrUndefined(marker.dataSource[dataIndex as number])) {
+            const lng: number = (!isNullOrUndefined(marker.longitudeValuePath)) ?
+                Number(getValueFromObject(marker.dataSource[dataIndex as number], marker.longitudeValuePath)) :
+                !isNullOrUndefined(marker.dataSource[dataIndex as number]['longitude']) ? parseFloat(marker.dataSource[dataIndex as number]['longitude']) :
+                    !isNullOrUndefined(marker.dataSource[dataIndex as number]['Longitude']) ? parseFloat(marker.dataSource[dataIndex as number]['Longitude']) : 0;
+            const lat: number = (!isNullOrUndefined(marker.latitudeValuePath)) ?
+                Number(getValueFromObject(marker.dataSource[dataIndex as number], marker.latitudeValuePath)) :
+                !isNullOrUndefined(marker.dataSource[dataIndex as number]['latitude']) ? parseFloat(marker.dataSource[dataIndex as number]['latitude']) :
+                    !isNullOrUndefined(marker.dataSource[dataIndex as number]['Latitude']) ? parseFloat(marker.dataSource[dataIndex as number]['Latitude']) : 0;
+            const duration: number = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
+            const location: Point = (this.maps.isTileMap) ? convertTileLatLongToPoint(
+                new Point(lng, lat), this.isPinchZooming ? this.pinchZoomScale : this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true
+            ) : convertGeoToPoint(lat, lng, factor, layer, this.maps);
+            if (this.maps.isTileMap) {
+                if (type === 'Template') {
+                    (<HTMLElement>element).style.left = (location.x + marker.offset.x) + 'px';
+                    (<HTMLElement>element).style.top = (location.y + marker.offset.y) + 'px';
+                } else {
+                    location.x += marker.offset.x;
+                    location.y += marker.offset.y;
+                    element.setAttribute('transform', 'translate( ' + location.x + ' ' + location.y + ' )');
+                }
+            } else {
+                if (type === 'Template') {
+                    if (duration > 0) {
+                        location.x = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location.x)) * scale);
+                        location.y = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location.y)) * scale);
+                        const layerOffset: ClientRect = getElementByID(this.maps.element.id + '_Layer_Collections').getBoundingClientRect();
+                        const elementOffset: ClientRect = element.parentElement.getBoundingClientRect();
+                        (<HTMLElement>element).style.left = (((location.x) + (layerOffset.left - elementOffset.left)) + marker.offset.x) + 'px';
+                        (<HTMLElement>element).style.top = (((location.y) + (layerOffset.top - elementOffset.top)) + marker.offset.y) + 'px';
+                        (<HTMLElement>element).style.transform = 'translate(-50%, -50%)';
+                    } else {
+                        (<HTMLElement>element).style.left = ((location.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x + 'px';
+                        (<HTMLElement>element).style.top = ((location.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y + 'px';
+                    }
+                } else {
+                    location.x = (((location.x + x) * scale) + marker.offset.x);
+                    location.y = (((location.y + y) * scale) + marker.offset.y);
+                    if (!animate || duration === 0) {
+                        element.setAttribute('transform', 'translate( ' + location.x + ' ' + location.y + ' )');
+                    } else {
+                        smoothTranslate(element, 0, duration, location);
+                    }
+                }
+            }
+        }
+    }
+    private markerLineAnimation(map: Maps): void {
+        if (map.isTileMap) {
+            for (let i: number = 0; i < map.layersCollection.length; i++) {
+                const markerTemplateElement: HTMLElement = <HTMLElement>getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                const lineElement: HTMLElement = <HTMLElement>getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_line_Group');
+                const polygonElement: HTMLElement = <HTMLElement>getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Polygons_Group');
+                if (!isNullOrUndefined(markerTemplateElement)) {
+                    markerTemplateElement.style.visibility = 'hidden';
+                }
+                if (!isNullOrUndefined(lineElement)) {
+                    lineElement.style.visibility = 'hidden';
+                }
+                if (!isNullOrUndefined(polygonElement)) {
+                    polygonElement.style.visibility = 'hidden';
+                }
+            }
+        }
+    }
+    /**
+     * @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} event - Specifies the pointer event argument.
+     * @returns {void}
+     * @private
+     */
+    public panning(direction: PanDirection, xDifference: number, yDifference: number, event?: PointerEvent | TouchEvent | KeyboardEvent): void {
+        const map: Maps = this.maps; let panArgs: IMapPanEventArgs;
+        const down: Point = this.mouseDownPoints;
+        const move: Point = this.mouseMovePoints;
+        const scale: number = map.scale;
+        map.markerZoomedState = false;
+        map.zoomPersistence = map.enablePersistence;
+        map.defaultState = false;
+        map.initialCheck = false;
+        const translatePoint: Point = map.translatePoint;
+        const prevTilePoint: Point = map.tileTranslatePoint;
+        let x: number; let y: number;
+        xDifference = !isNullOrUndefined(xDifference) ? xDifference : (down.x - move.x);
+        yDifference = !isNullOrUndefined(yDifference) ? yDifference : (down.y - move.y);
+        const layerX: number = event.type.indexOf('mouse') > -1 || event.type.indexOf('key') > -1 ? event['layerX'] : (event as TouchEvent).touches[0].pageX;
+        const layerY: number = event.type.indexOf('mouse') > -1 || event.type.indexOf('key') > -1 ? event['layerY'] : (event as TouchEvent).touches[0].pageY;
+        this.maps.mergeCluster();
+        if (!map.isTileMap) {
+            const marginTop: number = getProcessedMarginValue(map.margin.top);
+            const legendElement: HTMLElement = document.getElementById(map.element.id + '_Legend_Group');
+            const legendHeight: number = !isNullOrUndefined(legendElement) ? legendElement.getClientRects()[0].height : 0;
+            x = translatePoint.x - xDifference / scale;
+            y = translatePoint.y - yDifference / scale;
+            const layerRect: ClientRect = getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
+            const elementRect: ClientRect = getElementByID(map.element.id + '_svg').getBoundingClientRect();
+            const panningXDirection: boolean = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
+                ((layerRect.left + layerRect.width + map.mapAreaRect.x) >= (elementRect.width))));
+            const panningYDirection: boolean = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
+                ((layerRect.top + layerRect.height + legendHeight + marginTop) >= (elementRect.top + elementRect.height))));
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const location: any = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, layerX, layerY);
+            const minMaxLatitudeLongitude: IMinMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
+            panArgs = {
+                cancel: false, name: pan, maps: map,
+                tileTranslatePoint: {}, translatePoint: { previous: translatePoint, current: new Point(x, y) },
+                scale: map.scale, tileZoomLevel: map.tileZoomLevel, latitude: location['latitude'], longitude: location['longitude'],
+                minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+            };
+            map.trigger(pan, panArgs);
+            if (!panArgs.cancel) {
+                if (panningXDirection && panningYDirection) {
+                    map.translatePoint = new Point(x, y);
+                    this.applyTransform(map, false, false, true);
+                } else if (panningXDirection) {
+                    map.translatePoint = new Point(x, map.translatePoint.y);
+                    this.applyTransform(map, false, false, true);
+                } else if (panningYDirection) {
+                    map.translatePoint = new Point(map.translatePoint.x, y);
+                    this.applyTransform(map, false, false, true);
+                }
+            }
+            this.maps.zoomNotApplied = false;
+        } else if (this.maps.tileZoomLevel > 1) {
+            x = map.tileTranslatePoint.x - xDifference;
+            y = map.tileTranslatePoint.y - yDifference;
+            map.tileTranslatePoint.x = x;
+            map.tileTranslatePoint.y = y;
+            if ((map.tileTranslatePoint.y > -10 && yDifference < 0) || ((map.tileTranslatePoint.y < -((Math.pow(2, this.maps.tileZoomLevel) - 2) * 256) && yDifference > 0))) {
+                map.tileTranslatePoint.x = x + xDifference;
+                map.tileTranslatePoint.y = y + yDifference;
+            }
+            map.translatePoint.x = (map.tileTranslatePoint.x) / map.scale;
+            map.translatePoint.y = (map.tileTranslatePoint.y) / map.scale;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const location: any = this.maps.getTileGeoLocation(layerX, layerY);
+            const minMaxLatitudeLongitude: IMinMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
+            panArgs = {
+                cancel: false, name: pan, maps: map,
+                tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint },
+                translatePoint: { previous: translatePoint, current: map.translatePoint }, scale: map.scale,
+                tileZoomLevel: map.tileZoomLevel, latitude: location['latitude'], longitude: location['longitude'],
+                minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+            };
+            map.trigger(pan, panArgs);
+            map.mapLayerPanel.generateTiles(map.tileZoomLevel, map.tileTranslatePoint, 'Pan');
+            this.applyTransform(map, false, false, true);
+            map.translatePoint.x = (map.tileTranslatePoint.x - xDifference) / map.scale;
+            map.translatePoint.y = (map.tileTranslatePoint.y - yDifference) / map.scale;
+        }
+        map.zoomTranslatePoint = map.translatePoint;
+        this.mouseDownPoints = this.mouseMovePoints;
+        this.isSingleClick = false;
+    }
+
+    /**
+     * @param {number} zoomFactor - Specifies the factor for zooming
+     * @param {string} type - Specifies the type
+     * @returns {void}
+     * @private
+     */
+    public toolBarZooming(zoomFactor: number, type: string): void {
+        const map: Maps = this.maps;
+        map.initialCheck = map.isMarkerZoomCompleted = false;
+        map.defaultState = ((type === 'Reset' && zoomFactor === 1 && !(map.zoomSettings.resetToInitial && map.applyZoomReset))
+            || (type === 'ZoomOut' && zoomFactor === 1));
+        const prevLevel: number = map.tileZoomLevel;
+        const scale: number = map.previousScale = map.scale;
+        map.markerZoomedState = false;
+        map.zoomPersistence = map.enablePersistence;
+        map.mapScaleValue = zoomFactor;
+        const maxZoom: number = map.zoomSettings.maxZoom;
+        const minZoom: number = map.zoomSettings.minZoom;
+        const size: Rect = map.mapAreaRect;
+        const translatePoint: Point = map.previousPoint = map.translatePoint;
+        const prevTilePoint: Point = map.tileTranslatePoint;
+        this.maps.mergeCluster();
+        map.previousProjection = type === 'Reset' ? undefined : map.projectionType;
+        zoomFactor = (type === 'ZoomOut') ? (Math.round(zoomFactor) === 1 ? 1 : zoomFactor) : zoomFactor;
+        zoomFactor = (type === 'Reset') ? minZoom : (Math.round(zoomFactor) === 0) ? 1 : zoomFactor;
+        zoomFactor = (minZoom > zoomFactor && type === 'ZoomIn') ? minZoom + 1 : zoomFactor;
+        if ((!map.isTileMap) && (type === 'ZoomIn' ? zoomFactor >= minZoom && Math.round(zoomFactor) <= maxZoom : zoomFactor >= minZoom
+        || map.isReset)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const min: any = map.baseMapRectBounds['min'] as any;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const max: any = map.baseMapRectBounds['max'] as any;
+            let mapWidth: number = Math.abs(max['x'] - min['x']);
+            let mapHeight: number = Math.abs(min['y'] - max['y']);
+            let translatePointX: number;
+            let translatePointY: number;
+            if (zoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                if (mapHeight === 0 || mapWidth === 0 || mapHeight === mapWidth) {
+                    mapWidth = size.width / 2;
+                    mapHeight = size.height;
+                }
+                zoomFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                zoomFactor = zoomFactor > 1.05 ? 1 : zoomFactor;
+                map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomFactor, mapWidth, mapHeight, size, min, map);
+            } else {
+                translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomFactor)) / 2);
+                translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomFactor)) / 2);
+                const currentHeight: number = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomFactor;
+                translatePointX = (currentHeight < map.mapAreaRect.height) ? (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))))
+                    : translatePointX;
+                translatePointY = (currentHeight < map.mapAreaRect.height) ? (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))))
+                    : translatePointY;
+                map.translatePoint = new Point(translatePointX, translatePointY);
+            }
+            map.zoomTranslatePoint = map.translatePoint;
+            map.scale = zoomFactor;
+            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                map.translatePoint = map.zoomTranslatePoint = map.previousPoint;
+                map.scale = map.previousScale;
+            } else {
+                this.applyTransform(map, false, true);
+            }
+        } else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
+            let tileZoomFactor: number = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
+            map.scale = Math.pow(2, tileZoomFactor - 1);
+            map.tileZoomLevel = tileZoomFactor;
+            if (map.previousScale !== map.scale || map.isReset) {
+                map.zoomSettings.zoomFactor = zoomFactor;
+                const position: Point = { x: map.availableSize.width / 2, y: map.availableSize.height / 2 };
+                this.getTileTranslatePosition(prevLevel, tileZoomFactor, position, type);
+                if (map.zoomSettings.resetToInitial && map.applyZoomReset && type === 'Reset' || (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && tileZoomFactor <= map.initialZoomLevel)) {
+                    map.initialCheck = true;
+                    map.zoomPersistence = false;
+                    map.tileTranslatePoint.x = map.initialTileTranslate.x;
+                    map.tileTranslatePoint.y = map.initialTileTranslate.y;
+                    tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+                }
+                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                    map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                    map.scale = map.previousScale;
+                    map.tileZoomLevel = prevLevel;
+                    map.zoomSettings.zoomFactor = map.previousScale;
+                } else {
+                    map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                    map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
+                    if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
+                    }
+                    if (document.querySelector('.GroupElement')) {
+                        (document.querySelector('.GroupElement') as HTMLElement).style.display = 'none';
+                    }
+                    this.markerLineAnimation(map);
+                    map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
+                    const animationDuration: number = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
+                    setTimeout(() => {
+                        if (type === 'ZoomOut' || type === 'Reset') {
+                            // element1.removeChild(element1.children[element1.childElementCount - 1]);
+                            // element1.childElementCount ? element1.removeChild(element1.children[element1.childElementCount - 1]) : element1;
+                        }
+                        this.applyTransform(this.maps, false, true);
+                        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);
+                }
+            }
+            this.maps.zoomNotApplied = false;
+        }
+        this.triggerZoomComplete(map, prevLevel, type);
+    }
+
+    /**
+     * @returns {void}
+     * @private
+     */
+    public createZoomingToolbars(): void {
+        const map: Maps = this.maps;
+        this.toolBarGroup = map.renderer.createGroup({
+            id: map.element.id + '_Zooming_KitCollection',
+            opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
+        });
+        let xSpacing: number = 15; let ySpacing: number = 15;
+        const toolbar: ZoomToolbarSettingsModel = map.zoomSettings.toolbarSettings;
+        const button: ZoomToolbarButtonSettingsModel = map.zoomSettings.toolbarSettings.buttonSettings;
+        this.maps.toolbarProperties = {
+            toolBarOrientation: toolbar.orientation,
+            highlightColor: button.highlightColor,
+            selectionColor: button.selectionColor,
+            horizontalAlignment: toolbar.horizontalAlignment,
+            verticalAlignment: toolbar.verticalAlignment,
+            color: button.color,
+            shapeOpacity: button.opacity,
+            borderOpacity: button.borderOpacity
+        };
+        const buttonRadius: number = button.radius || map.themeStyle.zoomButtonRadius;
+        const cx: number = buttonRadius / 4;
+        const cy: number = buttonRadius / 4;
+        const radius: number = buttonRadius / 2;
+        const padding: number = button.padding;
+        const orientation: Orientation = this.maps.toolbarProperties.toolBarOrientation;
+        const toolbarCollection: string[] = map.zoomSettings.toolbarSettings.buttonSettings.toolbarItems.map((value: string) => { return value; });
+        xSpacing = (buttonRadius / 4) + (button.borderWidth / 2) + padding;
+        ySpacing = (buttonRadius / 4) + (button.borderWidth / 2) + padding;
+        let shadowElement: string = '<filter id="chart_shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="5"/>';
+        shadowElement += '<feOffset dx="-3" dy="4" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="1"/>';
+        shadowElement += '</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
+        const toolBarLength: number = toolbarCollection.length;
+        const toolWidth: number = (orientation === 'Horizontal') ? ((toolBarLength * buttonRadius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth)) : (buttonRadius + button.borderWidth + (2 * padding));
+        const toolHeight: number = (orientation === 'Horizontal') ? (buttonRadius + button.borderWidth + (2 * padding)) : ((toolBarLength * buttonRadius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth));
+        const defElement: Element = map.renderer.createDefs();
+        defElement.innerHTML = shadowElement;
+        this.toolBarGroup.appendChild(defElement);
+        const outerElement: Element = map.renderer.drawRectangle(new RectOption(
+            map.element.id + '_Zooming_Rect', toolbar.backgroundColor, { color: toolbar.borderColor, width: toolbar.borderWidth, opacity: toolbar.borderOpacity },
+            toolbar.borderOpacity, new Rect((toolbar.borderWidth / 2), (toolbar.borderWidth / 2), (toolWidth - toolbar.borderWidth), (toolHeight - toolbar.borderWidth)), 0, 0
+        ));
+        this.toolBarGroup.appendChild(outerElement);
+        const scaleX: number = (buttonRadius - (button.borderWidth / 2)) / 30;
+        for (let i: number = 0; i < toolbarCollection.length; i++) {
+            if (i !== 0) {
+                xSpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? (xSpacing + (buttonRadius + padding) + button.borderWidth) : xSpacing;
+                ySpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? ySpacing : (ySpacing + (buttonRadius + padding) + button.borderWidth);
+            }
+            const toolbar: string = toolbarCollection[i as number];
+            const pathStroke: string = !isNullOrUndefined(this.maps.toolbarProperties.color) ? this.maps.toolbarProperties.color : this.maps.themeStyle.zoomFillColor;
+            const borderColor: string = button.borderColor || (this.maps.themeStyle.zoomBorderColor || this.maps.themeStyle.zoomFillColor);
+            this.currentToolbarEle = map.renderer.createGroup({
+                id: map.element.id + '_Zooming_ToolBar_' + toolbar + '_Group',
+                transform: 'translate( ' + xSpacing + ' ' + ySpacing + ' ) '
+            });
+            this.currentToolbarEle.setAttribute('class', 'e-maps-toolbar');
+            this.currentToolbarEle.appendChild(map.renderer.drawCircle(
+                new CircleOption(map.element.id + '_Zooming_ToolBar_' + toolbar + '_Rect', button.fill, { color: borderColor, width: button.borderWidth, opacity: button.borderOpacity }, button.opacity, cx, cy, radius, '')
+            ) as SVGRectElement);
+            const opacity: number = 1;
+            let direction: string = '';
+            const fill: string = button.fill;
+            this.selectionColor = this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor;
+            switch (toolbar.toLowerCase()) {
+            case 'zoom': {
+                let fillColor: string;
+                let strokeColor: string;
+                direction = 'M0.001,14.629L1.372,16l4.571-4.571v-0.685l0.228-0.274c1.051,0.868,2.423,1.417,3.885,1.417c3.291,0,';
+                direction += '5.943-2.651,5.943-5.943S13.395,0,10.103,0S4.16,2.651,4.16,5.943c0,1.508,0.503,2.834,1.417,3.885l-0.274,0.228H4.571';
+                direction = direction + 'L0.001,14.629L0.001,14.629z M5.943,5.943c0-2.285,1.828-4.114,4.114-4.114s4.114,1.828,4.114,';
+                this.currentToolbarEle.setAttribute('class', (this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : ''));
+                if (this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
+                    fillColor = fill;
+                    strokeColor = pathStroke;
+                } else if (this.maps.zoomSettings.enablePanning && this.maps.zoomSettings.enableSelectionZooming) {
+                    fillColor = fill;
+                    strokeColor = pathStroke;
+                } else if (!this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
+                    fillColor = fill;
+                    strokeColor = pathStroke;
+                } else if (!this.maps.zoomSettings.enablePanning && this.maps.zoomSettings.enableSelectionZooming) {
+                    fillColor = this.maps.themeStyle.zoomFillColor;
+                    strokeColor = pathStroke;
+                } else {
+                    fillColor = this.selectionColor;
+                    strokeColor = this.selectionColor;
+                }
+                const zoomPath: Element = map.renderer.drawPath(new PathOption(
+                    map.element.id + '_Zooming_ToolBar_' + toolbar, fillColor, 1, strokeColor, opacity, opacity, null,
+                    direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z')
+                );
+                zoomPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
+                this.currentToolbarEle.appendChild(zoomPath);
+                this.zoomElements = this.currentToolbarEle;
+                this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
+                break;
+            }
+            case 'zoomin':
+                direction = 'M 8, 0 L 8, 16 M 0, 8 L 16, 8';
+                /* eslint-disable no-case-declarations */
+                const zoomInPath: Element = map.renderer.drawPath(new PathOption(
+                    map.element.id + '_Zooming_ToolBar_' + toolbar + '_Path', fill, 3, pathStroke, 1, 1, null, direction)
+                );
+                /* eslint-enable no-case-declarations */
+                zoomInPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
+                this.currentToolbarEle.appendChild(zoomInPath);
+                this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
+                break;
+            case 'zoomout':
+                direction = 'M 0, 8 L 16, 8';
+                /* eslint-disable no-case-declarations */
+                const zoomOutPath: Element = map.renderer.drawPath(new PathOption(
+                    map.element.id + '_Zooming_ToolBar_' + toolbar, fill, 3, pathStroke, 1, 1, null, direction)
+                );
+                /* eslint-enable no-case-declarations */
+                zoomOutPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
+                this.currentToolbarEle.appendChild(zoomOutPath);
+                this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
+                break;
+            case 'pan': {
+                let color: string;
+                direction = 'M5,3h2.3L7.275,5.875h1.4L8.65,3H11L8,0L5,3z M3,11V8.7l2.875,0.025v-1.4L3,7.35V5L0,8L3,';
+                direction += '11z M11,13H8.7l0.025-2.875h-1.4L7.35,13H5l3,3L11,13z M13,5v2.3l-2.875-0.025v1.4L13,8.65V11l3-3L13,5z';
+                this.currentToolbarEle.setAttribute('class', (this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : ''));
+                if (this.maps.zoomSettings.enablePanning && this.maps.zoomModule.isDragZoom) {
+                    color = this.selectionColor || this.maps.themeStyle.zoomFillColor;
+                } else if (!this.maps.zoomSettings.enablePanning) {
+                    color = this.selectionColor || this.maps.themeStyle.zoomFillColor;
+                    this.currentToolbarEle.setAttribute('class', '');
+                }
+                else {
+                    color = fill || this.maps.themeStyle.zoomFillColor;
+                }
+                const panPath: Element = map.renderer.drawPath(new PathOption(
+                    map.element.id + '_Zooming_ToolBar_' + toolbar, color, 1, pathStroke, opacity, opacity, null,
+                    direction)
+                );
+                panPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
+                this.currentToolbarEle.appendChild(panPath);
+                this.panColor = color;
+                this.panElements = this.currentToolbarEle;
+                this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
+                break;
+            }
+            case 'reset':
+                direction = 'M12.364,8h-2.182l2.909,3.25L16,8h-2.182c0-3.575-2.618-6.5-5.818-6.5c-1.128,0-2.218,0.366-3.091,';
+                direction += '1.016l1.055,1.178C6.581,3.328,7.272,3.125,8,3.125C10.4,3.125,12.363,5.319,12.364,8L12.364,8z M11.091,';
+                direction += '13.484l-1.055-1.178C9.419,12.672,8.728,12.875,8,12.875c-2.4,0-4.364-2.194-4.364-4.875h2.182L2.909,4.75L0,8h2.182c0,';
+                /* eslint-disable no-case-declarations */
+                const resetPath: Element = map.renderer.drawPath(new PathOption(
+                    map.element.id + '_Zooming_ToolBar_' + toolbar, fill, null, pathStroke,
+                    1, 1, null, direction + '3.575,2.618,6.5,5.818,6.5C9.128,14.5,10.219,14.134,11.091,13.484L11.091,13.484z')
+                );
+                /* eslint-enable no-case-declarations */
+                resetPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
+                this.currentToolbarEle.appendChild(resetPath);
+                this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
+                break;
+            }
+            this.toolBarGroup.appendChild(this.currentToolbarEle);
+        }
+    }
+
+    /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
+     * @private
+     */
+    public performToolBarAction(e: PointerEvent): void {
+        const target: Element = <Element>e.target;
+        e.stopImmediatePropagation();
+        const isTouch: boolean = e.pointerType === 'touch' || e.pointerType === '2' || (e.type.indexOf('touch') > -1);
+        const toolbar: string = target.id.split('_Zooming_ToolBar_')[1].split('_')[0];
+        let isToolbarPerform: boolean = true;
+        switch (toolbar.toLowerCase()) {
+        case 'zoomin':
+            isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) + 1 <= this.maps.zoomSettings.maxZoom;
+            break;
+        case 'zoomout':
+            /* eslint-disable no-case-declarations */
+            const scaleValue: number = this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale;
+            /* eslint-enable no-case-declarations */
+            isToolbarPerform = (this.maps.projectionType === 'Miller' || this.maps.projectionType === 'Winkel3' ||
+                this.maps.projectionType === 'AitOff') ? Math.round(scaleValue) - 1 >= this.maps.zoomSettings.minZoom :
+                (scaleValue) - 1 >= this.maps.zoomSettings.minZoom;
+            break;
+        case 'reset' :
+            isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) !== this.maps.zoomSettings.minZoom;
+            break;
+        }
+        if (isTouch && isToolbarPerform) {
+            this.handled = true;
+            this.performZoomingByToolBar(toolbar);
+        } else if ((e.type === 'mousedown' || e.type === 'pointerdown') && !this.handled && isToolbarPerform) {
+            this.handled = false;
+            this.performZoomingByToolBar(toolbar);
+        } else {
+            this.handled = false;
+        }
+    }
+
+    /**
+     * @param {string} type - Specifies the type.
+     * @returns {void}
+     * @private
+     */
+    public performZoomingByToolBar(type: string): void {
+        const map: Maps = this.maps;
+        map.isReset = false;
+        let scale: number = 0;
+        const stateColor: string = this.fillColor || this.maps.themeStyle.zoomFillColor;
+        switch (type.toLowerCase()) {
+        case 'zoom':
+            this.panColor = stateColor;
+            this.zoomColor = this.maps.zoomSettings.enableSelectionZooming ? this.selectionColor : stateColor;
+            this.applySelection(this.zoomElements, this.zoomColor);
+            this.applySelection(this.panElements, this.panColor);
+            this.isPan = false;
+            this.isZoomSelection = this.maps.zoomSettings.enableSelectionZooming;
+            break;
+        case 'pan':
+            this.panColor = this.maps.zoomSettings.enablePanning ?  this.selectionColor : stateColor;
+            this.zoomColor = stateColor;
+            if (!this.maps.zoomSettings.enablePanning) {
+                this.applySelection(this.zoomElements, this.selectionColor);
+                this.applySelection(this.panElements, this.panColor);
+            } else {
+                this.applySelection(this.zoomElements, (this.fillColor || stateColor));
+                this.applySelection(this.panElements, this.panColor);
+            }
+            this.isPan = this.maps.zoomSettings.enablePanning;
+            this.isZoomSelection = false;
+            break;
+        case 'zoomin':
+            map.staticMapZoom = map.tileZoomLevel;
+            if (map.staticMapZoom > 0 && map.staticMapZoom < map.zoomSettings.maxZoom) {
+                map.staticMapZoom += 1;
+            }
+            if (map.isTileMap && map.tileZoomLevel >= map.zoomSettings.minZoom && map.tileZoomLevel < map.zoomSettings.maxZoom) {
+                this.toolBarZooming(map.tileZoomLevel + 1, 'ZoomIn');
+            } else if (!map.isTileMap) {
+                this.toolBarZooming(map.scale + 1, 'ZoomIn');
+            }
+            scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
+            if (!this.isZoomSelection) {
+                if (scale === map.zoomSettings.maxZoom || scale > 1 || (scale === 1 && this.maps.isTileMap)) {
+                    this.applySelection(this.zoomElements, stateColor);
+                    this.applySelection(this.panElements, map.zoomSettings.enablePanning ? this.selectionColor : stateColor);
+                } else if (scale === 1 && !this.maps.isTileMap) {
+                    this.applySelection(this.zoomElements, stateColor);
+                    this.applySelection(this.panElements, stateColor);
+                }
+            }
+            break;
+        case 'zoomout':
+            map.staticMapZoom = map.tileZoomLevel;
+            map.markerCenterLatitude = null;
+            map.markerCenterLongitude = null;
+            this.toolBarZooming((map.isTileMap ? map.tileZoomLevel : map.scale) - 1, 'ZoomOut');
+            scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
+            if (!this.isPan && this.isZoomSelection) {
+                this.panColor = stateColor;
+                this.zoomColor = this.selectionColor;
+                this.applySelection(this.zoomElements, this.selectionColor);
+                this.applySelection(this.panElements, this.panColor);
+            } else {
+                if (scale <= 1 && !map.isTileMap) {
+                    this.applySelection(this.panElements, stateColor);
+                } else {
+                    this.applySelection(this.panElements, map.zoomSettings.enablePanning ? this.selectionColor : stateColor);
+                }
+            }
+            break;
+        case 'reset':
+            map.staticMapZoom = map.zoomSettings.enable ? map.zoomSettings.zoomFactor : 0;
+            map.markerCenterLatitude = null;
+            map.markerCenterLongitude = null;
+            this.isZoomSelection = false;
+            this.isPan = map.zoomSettings.enablePanning;
+            this.toolBarZooming(map.zoomSettings.minZoom, 'Reset');
+            if ((this.isPan && !this.isZoomSelection) || (!this.isPan && this.isZoomSelection)) {
+                if (!this.maps.zoomSettings.enablePanning) {
+                    this.applySelection(this.zoomElements, this.selectionColor);
+                    this.applySelection(this.panElements, stateColor);
+                }
+                else {
+                    this.applySelection(this.zoomElements, stateColor);
+                    this.applySelection(this.panElements, this.selectionColor);
+                }
+            } else if (!this.isPan && !this.isZoomSelection) {
+                this.applySelection(this.zoomElements, stateColor);
+                this.applySelection(this.panElements, stateColor);
+            }
+        }
+        this.panningStyle(type.toLowerCase());
+    }
+
+    private panningStyle(toolbar: string): void {
+        const svg: Element = getElementByID(this.maps.element.id + '_svg');
+        if (toolbar === 'pan' || (this.isPanModeEnabled && toolbar !== 'reset')) {
+            svg.setAttribute('class', 'e-maps-panning');
+        } else {
+            svg.setAttribute('class', '');
+        }
+    }
+    private applySelection(elements: Element, color: string): void {
+        if (!elements) {
+            return;
+        }
+        let childElement: HTMLElement;
+        for (let i: number = 0; i < elements.childElementCount; i++) {
+            childElement = elements.childNodes[i as number] as HTMLElement;
+            if (childElement.tagName !== 'circle') {
+                childElement.setAttribute('fill', (elements.id.indexOf('Pan') > -1 ? color : 'transparent'));
+                childElement.setAttribute('stroke', color);
+            }
+        }
+    }
+
+    /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
+     * @private
+     */
+    public showTooltip(e: PointerEvent): void {
+        const text: string = (<Element>e.target).id.split('_Zooming_ToolBar_')[1].split('_')[0];
+        const tooltip: ZoomToolbarTooltipSettingsModel = this.maps.zoomSettings.toolbarSettings.tooltipSettings;
+        const tooltipSettings: ZoomToolbarTooltipSettingsModel = {
+            visible: tooltip.visible,
+            fill: tooltip.fill,
+            borderOpacity: tooltip.borderOpacity,
+            borderWidth: tooltip.borderWidth,
+            borderColor: tooltip.borderColor,
+            fontColor: tooltip.fontColor,
+            fontFamily: tooltip.fontFamily,
+            fontStyle: tooltip.fontStyle,
+            fontWeight: tooltip.fontWeight,
+            fontSize: tooltip.fontSize || '10px',
+            fontOpacity: tooltip.fontOpacity
+        };
+        tooltipSettings.fontFamily = this.maps.themeStyle.fontFamily;
+        if (!this.isTouch) {
+            createTooltip('EJ2_Map_Toolbar_Tip', this.maps.getLocalizedLabel(text), (e.pageY + 10), (e.pageX + 10), tooltipSettings);
+            if (this.maps.isDevice) {
+                clearTimeout(this.clearTimeout);
+                this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
+            }
+        }
+    }
+
+    /**
+     * @returns {void}
+     * @private
+     */
+    public removeTooltip(): void {
+        if (getElementByID('EJ2_Map_Toolbar_Tip')) {
+            remove(getElementByID('EJ2_Map_Toolbar_Tip'));
+        }
+    }
+    /**
+     * @returns {void}
+     * @private
+     */
+    public alignToolBar(): void {
+        const map: Maps = this.maps;
+        const padding: number = 10;
+        const element: HTMLElement = createElement('div', { id: map.element.id + '_ToolBar' });
+        element.style.cssText = 'position:absolute;z-index:2';
+        const rectSVGObject: Element = map.renderer.createSvg({
+            id: map.element.id + '_Zooming_ToolBar', width: 10, height: 10
+        });
+        rectSVGObject.appendChild(this.toolBarGroup);
+        element.appendChild(rectSVGObject);
+        if (getElementByID(map.element.id + '_Secondary_Element')) {
+            getElementByID(map.element.id + '_Secondary_Element').appendChild(element);
+        }
+        const toolBarSize: ClientRect = this.toolBarGroup.getBoundingClientRect();
+        rectSVGObject.setAttribute('height', (toolBarSize.height + map.zoomSettings.toolbarSettings.borderWidth).toString());
+        rectSVGObject.setAttribute('width', (toolBarSize.width + map.zoomSettings.toolbarSettings.borderWidth).toString());
+        const size: Rect = !isNullOrUndefined(map.totalRect) ? map.totalRect : map.mapAreaRect;
+        let x: number = 0; let y: number = 0;
+        switch (map.toolbarProperties.verticalAlignment) {
+        case 'Near':
+            y = size.y;
+            break;
+        case 'Center':
+            y = (size.height / 2) - (toolBarSize.height / 2);
+            break;
+        case 'Far':
+            y = (size.height - toolBarSize.height) - padding;
+            break;
+        }
+        switch (map.toolbarProperties.horizontalAlignment) {
+        case 'Near':
+            x = size.x;
+            break;
+        case 'Center':
+            x = (size.width / 2) - (toolBarSize.width / 2);
+            break;
+        case 'Far':
+            if (!isNullOrUndefined(map.legendModule) && map.legendSettings.position === 'Left') {
+                x = size.width + size.x - toolBarSize.width - padding;
+            } else {
+                x = (size.width - toolBarSize.width) - padding;
+            }
+            break;
+        }
+        element.style.left = x + 'px';
+        element.style.top = y + 'px';
+        const color: string = this.maps.toolbarProperties.highlightColor || this.maps.themeStyle.zoomSelectionColor;
+        const css: string = ' .e-maps-toolbar:hover > circle { stroke:' + color + '; } .e-maps-toolbar:hover > path { fill: ' + color + ' ;  stroke: ' + color + '; }' +
+            '.e-maps-toolbar:hover { cursor: pointer; } .e-maps-cursor-disable:hover { cursor: not-allowed; } .e-maps-panning:hover { cursor: pointer; } ' +
+            '.e-maps-popup-close { display: block; opacity: 0; }';
+        const style: HTMLStyleElement = document.createElement('style');
+        style.appendChild(document.createTextNode(css));
+        element.appendChild(style);
+    }
+
+    /**
+     * @param {number} factor - Specifies the factor for toolbar
+     * @param {string} id - Specifies the id
+     * @returns {void}
+     * @private
+     */
+    public removeToolbarOpacity(factor: number, id: string): void {
+        if (!isNullOrUndefined(this.maps) && this.maps.zoomModule && this.maps.zoomSettings.enable) {
+            if (getElementByID(this.maps.element.id + '_Zooming_KitCollection') && id.indexOf(this.maps.element.id + '_Zooming_') > -1) {
+                if (this.maps.isDevice) {
+                    getElementByID(this.maps.element.id + '_Zooming_KitCollection').setAttribute('opacity', '1');
+                    this.removeToolbarClass('', '', '', '', '');
+                } else {
+                    this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', 'e-maps-toolbar',
+                                            this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', 'e-maps-toolbar');
+                }
+                const toolbarShapeOpacity: number = this.maps.toolbarProperties.shapeOpacity;
+                const toolbarButtonOpacity: number = this.maps.toolbarProperties.borderOpacity;
+
+                if (this.maps.isTileMap && (factor <= 1.1 || this.maps.zoomSettings.minZoom === factor)) {
+                    if (!this.maps.isDevice) {
+                        this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', '',
+                                                this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', '');
+                    }
+                    if (this.maps.zoomSettings.enablePanning) {
+                        this.removePanColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                    }
+                    if (this.isZoomSelection && this.maps.zoomSettings.enableSelectionZooming && !this.maps.isReset) {
+                        this.removeZoomColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                        this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    }
+                    this.removeZoomOpacity((this.maps.zoomSettings.enableSelectionZooming ? toolbarShapeOpacity : 0.3),
+                                           (this.maps.zoomSettings.enableSelectionZooming ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity,
+                                           0.3, 0.3, (this.maps.zoomSettings.enablePanning ? toolbarShapeOpacity : 0.3),
+                                           (this.maps.zoomSettings.enablePanning ? toolbarButtonOpacity : 0.3), 0.3, 0.3);
+
+                } else if ((factor <= 1.1 || this.maps.zoomSettings.minZoom === factor)) {
+                    if (!this.maps.isDevice) {
+                        this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', '', '', '');
+                    }
+                    if (!this.isZoomSelection && this.maps.zoomSettings.enablePanning) {
+                        this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    }
+                    if (this.isZoomSelection && this.maps.zoomSettings.enableSelectionZooming && !this.maps.isReset) {
+                        this.removeZoomColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                        this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    }
+                    this.removeZoomOpacity((this.maps.zoomSettings.enableSelectionZooming ? toolbarShapeOpacity : 0.3),
+                                           (this.maps.zoomSettings.enableSelectionZooming ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity,
+                                           0.3, 0.3, 0.3, 0.3, 0.3, 0.3);
+
+                } else if (factor < this.maps.zoomSettings.maxZoom) {
+                    if (!this.maps.isDevice) {
+                        this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', 'e-maps-toolbar',
+                                                this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', 'e-maps-toolbar');
+                    }
+                    if (!this.maps.zoomModule.isZoomFinal) {
+                        this.removeZoomOpacity((this.maps.zoomSettings.enableSelectionZooming ? toolbarShapeOpacity : 0.3),
+                                               (this.maps.zoomSettings.enableSelectionZooming ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity,
+                                               toolbarShapeOpacity, toolbarButtonOpacity, (this.maps.zoomSettings.enablePanning ? toolbarShapeOpacity : 0.3),
+                                               (this.maps.zoomSettings.enablePanning ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity);
+                    } else {
+                        this.maps.zoomModule.isZoomFinal = false;
+                    }
+                    if (this.isZoomSelection && this.maps.zoomSettings.enableSelectionZooming) {
+                        this.removeZoomColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                        if (this.maps.zoomModule.isPan && this.maps.zoomSettings.enablePanning) {
+                            this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                        }
+                    } else if (!this.isZoomSelection && this.maps.zoomSettings.enablePanning) {
+                        this.removePanColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                        if (this.maps.zoomSettings.enableSelectionZooming) {
+                            this.removeZoomColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                        }
+                    }
+                } else {
+                    if (!this.maps.isDevice) {
+                        this.removeToolbarClass('', '', 'e-maps-toolbar', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', 'e-maps-toolbar');
+                    }
+                    this.removeZoomOpacity(0.3, 0.3, 0.3, 0.3, toolbarShapeOpacity, toolbarButtonOpacity,
+                                           (this.maps.zoomSettings.enablePanning ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enablePanning ? toolbarButtonOpacity : 0.3),
+                                           toolbarShapeOpacity, toolbarButtonOpacity);
+                    if (this.maps.zoomSettings.enableSelectionZooming) {
+                        this.removeZoomColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    }
+                    if (!this.isZoomSelection && this.maps.zoomSettings.enablePanning) {
+                        this.removePanColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
+                    }
+                }
+            }
+            else {
+                if (!this.maps.isDevice) {
+                    this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    this.removeZoomColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
+                    this.removeZoomOpacity(1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
+                }
+            }
+        }
+    }
+    private setOpacity(circleId: string, pathId: string, circleOpacity: number, pathOpacity: number): void {
+        if (getElementByID(this.maps.element.id + circleId)) {
+            getElementByID(this.maps.element.id + circleId).setAttribute('stroke-opacity', circleOpacity.toString());
+            getElementByID(this.maps.element.id + circleId).setAttribute('fill-opacity', circleOpacity.toString());
+            getElementByID(this.maps.element.id + pathId).setAttribute('stroke-opacity', pathOpacity.toString());
+            getElementByID(this.maps.element.id + pathId).setAttribute('fill-opacity', pathOpacity.toString());
+        }
+    }
+
+    private removeZoomOpacity(zoomOpacity: number, zoomStrokeOpacity: number, zoomInOpacity: number, zoomInStrokeOpacity: number, zoomOutOpacity: number,
+                              zoomOutStrokeOpacity: number, panOpacity: number, panStrokeOpacity: number, resetOpacity: number, resetStrokeOpacity: number): void {
+        this.setOpacity('_Zooming_ToolBar_Zoom_Rect', '_Zooming_ToolBar_Zoom', zoomStrokeOpacity, zoomOpacity);
+        this.setOpacity('_Zooming_ToolBar_ZoomIn_Rect', '_Zooming_ToolBar_ZoomIn_Path', zoomInStrokeOpacity, zoomInOpacity);
+        this.setOpacity('_Zooming_ToolBar_ZoomOut_Rect', '_Zooming_ToolBar_ZoomOut', zoomOutStrokeOpacity, zoomOutOpacity);
+        this.setOpacity('_Zooming_ToolBar_Pan_Rect', '_Zooming_ToolBar_Pan', panStrokeOpacity, panOpacity);
+        this.setOpacity('_Zooming_ToolBar_Reset_Rect', '_Zooming_ToolBar_Reset', resetStrokeOpacity, resetOpacity);
+    }
+    /**
+     * @param {string} zoomClassStyle - Specifies the style for zoom class.
+     * @param {string} zoomInClassStyle - Specifies the style for zoom in.
+     * @param {string} zoomOutClassStyle - Specifies the style for zoom out.
+     * @param {string} panClassStyle -  Specifies the style for pan.
+     * @param {string} resetClassStyle - Specifies the style for reset.
+     * @returns {void}
+     * @private
+     */
+    public removeToolbarClass(zoomClassStyle: string, zoomInClassStyle: string, zoomOutClassStyle: string,
+                              panClassStyle: string, resetClassStyle: string): void {
+        if (getElementByID(this.maps.element.id + '_Zooming_KitCollection')) {
+            if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_ZoomIn_Group')) {
+                getElementByID(this.maps.element.id + '_Zooming_ToolBar_ZoomIn_Group').setAttribute('class', zoomInClassStyle);
+            }
+            if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_ZoomOut_Group')) {
+                getElementByID(this.maps.element.id + '_Zooming_ToolBar_ZoomOut_Group').setAttribute('class', zoomOutClassStyle);
+            }
+            if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_Reset_Group')) {
+                getElementByID(this.maps.element.id + '_Zooming_ToolBar_Reset_Group').setAttribute('class', resetClassStyle);
+            }
+            if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_Zoom_Group') && this.maps.zoomSettings.enableSelectionZooming) {
+                getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom_Group').setAttribute('class', zoomClassStyle);
+            }
+            if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_Pan_Group') && this.maps.zoomSettings.enablePanning) {
+                getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan_Group').setAttribute('class', panClassStyle);
+            }
+        }
+    }
+    private removePanColor(selectionColor: string): void {
+        if (getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan_Rect') && this.maps.zoomSettings.enablePanning) {
+            getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan').setAttribute('fill', selectionColor);
+            getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan').setAttribute('stroke', selectionColor);
+        }
+    }
+    private removeZoomColor(selectionColor: string): void {
+        if (getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom_Rect') && this.maps.zoomSettings.enableSelectionZooming) {
+            getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom').setAttribute('fill', 'transparent');
+            getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom').setAttribute('stroke', selectionColor);
+        }
+    }
+
+    /**
+     * To bind events.
+     *
+     * @param {Element} element - Specifies the element.
+     * @param {Function} process - Specifies the process.
+     * @returns {void}
+     * @private
+     */
+    public wireEvents(element: Element, process: Function): void {
+        EventHandler.add(element, Browser.touchStartEvent, process, this);
+        EventHandler.add(element, 'mouseover', this.showTooltip, this);
+        EventHandler.add(element, 'mouseout', this.removeTooltip, this);
+    }
+
+    /**
+     * @param {WheelEvent} e - Specifies the wheel event in the map for zooming
+     * @returns {void}
+     * @private
+     */
+    public mapMouseWheel(e: WheelEvent): void {
+        if (this.maps.zoomSettings.enable && this.maps.zoomSettings.mouseWheelZoom) {
+            const map: Maps = this.maps;
+            map.markerZoomedState = false;
+            map.zoomPersistence = map.enablePersistence;
+            const position: Point = this.getMousePosition(e.pageX, e.pageY);
+            const prevLevel: number = map.tileZoomLevel;
+            const prevScale: number = map.scale;
+            const delta: number = 1;
+            const staticMaxZoomLevel : number =  map.zoomSettings.maxZoom;
+            const value: number = (map.isTileMap) ? prevLevel : prevScale;
+            this.maps.mergeCluster();
+            if (((position.x > map.mapAreaRect.x) && (position.x < (map.mapAreaRect.x + map.mapAreaRect.width))) &&
+                (position.y > map.mapAreaRect.y) && position.y < (map.mapAreaRect.y + map.mapAreaRect.height)) {
+                e.preventDefault();
+                const direction: string = (this.browserName === 'mozilla' && !this.isPointer) ?
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    -(e.detail) / 3 > 0 ? 'ZoomIn' : 'ZoomOut' : ((e as any).wheelDelta / 120) > 0 ? 'ZoomIn' : 'ZoomOut';
+                if (direction === 'ZoomIn') {
+                    map.mapScaleValue = value + delta;
+                    if (map.isTileMap) {
+                        map.staticMapZoom = map.tileZoomLevel;
+                        if (map.staticMapZoom > 0 && map.staticMapZoom < staticMaxZoomLevel) {
+                            map.staticMapZoom += 1;
+                            this.performZooming(position, (value + delta), direction, true);
+                        }
+                    } else {
+                        this.performZooming(position, (value + delta), direction, true);
+                    }
+                } else {
+                    map.mapScaleValue = value - delta;
+                    map.isReset = (map.mapScaleValue < 1) ? true : false;
+                    map.staticMapZoom = map.tileZoomLevel;
+                    if (map.mapScaleValue === 1) {
+                        map.markerCenterLatitude = null;
+                        map.markerCenterLongitude = null;
+                    }
+                    if (map.staticMapZoom > 1 && map.staticMapZoom < staticMaxZoomLevel) {
+                        map.staticMapZoom -= 1;
+                    }
+                    this.performZooming(position, (value - delta), direction, true);
+                }
+            }
+            this.removeToolbarOpacity(map.mapScaleValue, (!this.maps.isDevice ? (!isNullOrUndefined(e.target) ?  e.target['id'] :
+                this.maps.element.id) : this.maps.element.id + '_Zooming_'));
+        }
+    }
+
+    /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
+     * @private
+     */
+    public doubleClick(e: PointerEvent): void {
+        const pageX: number = e.pageX;
+        const pageY: number = e.pageY;
+        const tooltipElement: Element = (e.target as HTMLElement).closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
+        if (this.maps.zoomSettings.enable && this.maps.zoomSettings.doubleClickZoom
+            && !(e.target['id'].indexOf('_Zooming_') > -1) && isNullOrUndefined(tooltipElement)) {
+            const position: Point = this.getMousePosition(pageX, pageY);
+            const map: Maps = this.maps;
+            const prevLevel: number = map.tileZoomLevel;
+            const prevScale: number = map.scale;
+            map.mapScaleValue = map.mapScaleValue + 1;
+            const value: number = (map.isTileMap) ? prevLevel : prevScale;
+            if (((position.x > map.mapAreaRect.x) && (position.x < (map.mapAreaRect.x + map.mapAreaRect.width))) &&
+                (position.y > map.mapAreaRect.y) && position.y < (map.mapAreaRect.y + map.mapAreaRect.height)) {
+                this.performZooming(position, (value + 1), 'ZoomIn');
+            }
+        }
+    }
+
+    /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
+     * @private
+     */
+    public mouseDownHandler(e: PointerEvent | TouchEvent): void {
+        let pageX: number;
+        let pageY: number;
+        let target: Element;
+        let touches: TouchList = null;
+        this.isPinchZooming = false;
+        //eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const element: Element = <Element>e.target;
+        if (e.type === 'touchstart') {
+            this.isTouch = true;
+            touches = (<TouchEvent & PointerEvent>e).touches;
+            target = <Element>(<TouchEvent & PointerEvent>e).target;
+            pageX = touches[0].pageX;
+            pageY = touches[0].pageY;
+        } else {
+            pageX = (<PointerEvent>e).pageX;
+            pageY = (<PointerEvent>e).pageY;
+            //eslint-disable-next-line @typescript-eslint/no-unused-vars
+            target = <Element>e.target;
+        }
+        if (!this.isTouch) {
+            e.preventDefault();
+        }
+        if (!this.maps.zoomSettings.enablePanning) {
+            this.isPan = this.isPanModeEnabled = this.panColor !== this.selectionColor ? this.maps.zoomSettings.enablePanning
+                : this.zoomColor === this.selectionColor;
+        } else {
+            this.isPan = this.isPanModeEnabled = !this.isZoomSelection;
+        }
+        this.mouseDownLatLong = { x: pageX, y: pageY };
+        const scale: number = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
+        this.rectZoomingStart = ((this.isZoomSelection && scale < this.maps.zoomSettings.maxZoom) && this.maps.zoomSettings.enable);
+        this.mouseDownPoints = this.getMousePosition(pageX, pageY);
+        if (this.isTouch && touches !== null) {
+            this.firstMove = true;
+            this.pinchFactor = this.maps.scale;
+            this.fingers = touches.length;
+        }
+        if (this.maps.isTileMap && this.isTouch && e['touches'].length > 1) {
+            const startTouch: MapLocation = this.getMousePosition(e['touches'][0].pageX, e['touches'][0].pageY);
+            const endTouch: MapLocation = this.getMousePosition(e['touches'][1].pageX, e['touches'][1].pageY);
+            this.startDistance = Math.sqrt(Math.pow((startTouch.x - endTouch.x), 2) + Math.pow((startTouch.y - endTouch.y), 2));
+            this.touchCenter = { x: (startTouch.x + endTouch.x) / 2, y: (startTouch.y + endTouch.y) / 2 };
+            this.pinchStartLatLong = this.maps.pointToLatLong((startTouch.x + endTouch.x) / 2, (startTouch.y + endTouch.y) / 2);
+            this.isCancellation = false;
+            this.pinchTileZoomScale = this.maps.tileZoomLevel;
+            this.pinchDistance = null;
+        }
+        this.isSingleClick = true;
+    }
+
+    /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
+     * @private
+     */
+    public mouseMoveHandler(e: PointerEvent | TouchEvent): void {
+        let pageX: number;
+        let pageY: number;
+        const map: Maps = this.maps;
+        //eslint-disable-next-line @typescript-eslint/no-unused-vars
+        let touchArg: TouchEvent;
+        let target: Element;
+        let touches: TouchList = null;
+        const zoom: ZoomSettings = <ZoomSettings>this.maps.zoomSettings;
+        if (e.type === 'touchmove') {
+            this.isTouch = true;
+            target = <Element>(<TouchEvent & PointerEvent>e).target;
+            touches = (<TouchEvent & PointerEvent>e).touches;
+            pageX = touches[0].pageX;
+            pageY = touches[0].pageY;
+        } else {
+            pageX = (<PointerEvent>e).pageX;
+            pageY = (<PointerEvent>e).pageY;
+            target = <Element>e.target;
+        }
+        if (getElementByID(map.element.id + '_Zooming_KitCollection')) {
+            if (target.id.indexOf('_Zooming_') > -1) {
+                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', '1');
+            }
+            else if (!map.isDevice) {
+                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
+            }
+        }
+        if (this.isTouch) {
+            if (this.maps.zoomSettings.enable && this.maps.zoomSettings.pinchZooming && touches !== null) {
+                if (this.firstMove && touches.length === 2) {
+                    this.rectZoomingStart = false;
+                    this.updateInteraction();
+                    this.touchStartList = targetTouches(e);
+                } else if (touches.length === 2 && this.touchStartList.length === 2) {
+                    this.touchMoveList = targetTouches(e);
+                    if (e.cancelable) { e.preventDefault(); }
+                    this.rectZoomingStart = false;
+                    this.performPinchZooming(<PointerEvent>e);
+                }
+                this.firstMove = false;
+            }
+        }
+        this.mouseMovePoints = this.getMousePosition(pageX, pageY);
+        if (!this.isPinchZooming && (zoom.enable && this.isPanModeEnabled && this.maps.markerDragId.indexOf('_MarkerIndex_') === -1 && ((Browser.isDevice && touches.length >= 1) || !Browser.isDevice))) {
+            e.preventDefault();
+            this.maps.element.style.cursor = 'pointer';
+            this.mouseMoveLatLong = { x: pageX, y: pageY };
+            if ((this.mouseDownLatLong['x'] !== this.mouseMoveLatLong['x']) && (this.mouseDownLatLong['y'] !== this.mouseMoveLatLong['y'])) {
+                if (this.maps.zoomSettings.enablePanning) {
+                    this.panning('None', null, null, e);
+                }
+                this.mouseDownLatLong['x'] = pageX;
+                this.mouseDownLatLong['y'] = pageY;
+            }
+        }
+        if (!this.isPinchZooming && (this.isTouch ? (touches !== null && touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart)) {
+            e.preventDefault();
+            const scale : number = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
+            if (this.maps.zoomSettings.enableSelectionZooming && scale < this.maps.zoomSettings.maxZoom) {
+                this.drawZoomRectangle();
+            }
+            else {
+                this.rectZoomingStart = false;
+                this.isPan = true;
+            }
+        }
+    }
+
+    /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
+     * @private
+     */
+    public mouseUpHandler(e: PointerEvent | TouchEvent): void {
+        this.rectZoomingStart = false;
+        this.isSingleClick = this.isSingleClick ? true : false;
+        this.isTouch = false;
+        this.touchStartList = [];
+        this.touchMoveList = [];
+        this.lastScale = 1;
+        this.isCancellation = false;
+        this.maps.element.style.cursor = 'auto';
+        if (this.isPinchZooming && this.maps.isTileMap) {
+            this.isPinchZooming = false;
+            const tilesParent: HTMLElement = document.getElementById(this.maps.element.id + '_tile_parent');
+            const svgElement: HTMLElement = document.getElementById(this.maps.element.id + '_Tile_SVG_Parent');
+            tilesParent.style.transformOrigin = '';
+            tilesParent.style.transform = '';
+            svgElement.style.transformOrigin = '';
+            svgElement.style.transform = '';
+            this.maps.tileZoomLevel = this.maps.mapScaleValue = this.maps.zoomSettings.zoomFactor = this.pinchZoomScale;
+            this.maps.scale = Math.pow(2, this.pinchZoomScale - 1);
+            this.tileZoomLevel = Math.round(this.pinchZoomScale);
+            this.getTileTranslate(this.tileZoomLevel);
+            this.maps.mapLayerPanel.generateTiles(this.tileZoomLevel, this.maps.tileTranslatePoint);
+            this.applyTransform(this.maps);
+            if (document.getElementById(this.maps.element.id + '_animates_tiles')) {
+                document.getElementById(this.maps.element.id + '_animates_tiles').remove();
+            }
+        }
+        if (this.isPanModeEnabled && this.maps.zoomSettings.enablePanning && !isNullOrUndefined(this.maps.previousPoint) &&
+            (!this.maps.isTileMap  ? (this.maps.translatePoint.x !== this.maps.previousPoint.x && this.maps.translatePoint.y !== this.maps.previousPoint.y)
+                : this.isPanningInProgress)) {
+            let pageX: number;
+            let pageY: number;
+            let layerX: number = 0;
+            let layerY: number = 0;
+            let target: Element;
+            const element: Element = <Element>e.target;
+            if (e.type.indexOf('touch') !== - 1) {
+                const touchArg: TouchEvent = <TouchEvent & PointerEvent>e;
+                layerX = pageX = touchArg.changedTouches[0].pageX;
+                pageY = touchArg.changedTouches[0].pageY;
+                layerY = pageY - (this.maps.isTileMap ? 10 : 0);
+                target = <Element>touchArg.target;
+                this.maps.mouseClickEvent = { x: pageX, y: pageY };
+            } else {
+                pageX = (e as PointerEvent).pageX;
+                pageY = (e as PointerEvent).pageY;
+                layerX = e['layerX'];
+                layerY = e['layerY'] - (this.maps.isTileMap ? 10 : 0);
+                //eslint-disable-next-line @typescript-eslint/no-unused-vars
+                target = <Element>e.target;
+            }
+            let panCompleteEventArgs: IMapPanEventArgs;
+            const minMaxLatitudeLongitude: IMinMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
+            if (!this.maps.isTileMap) {
+                this.maps.mouseClickEvent['x'] = this.maps.mouseDownEvent['x'];
+                this.maps.mouseClickEvent['y'] = this.maps.mouseDownEvent['y'];
+                const location: GeoPosition = this.maps.getClickLocation(element.id, pageX, pageY, (element as HTMLElement), pageX, pageY);
+                panCompleteEventArgs = {
+                    cancel: false, name: 'panComplete', maps: this.maps,
+                    tileTranslatePoint: {}, translatePoint: { previous: this.maps.previousPoint, current: this.maps.translatePoint },
+                    scale: this.maps.scale, tileZoomLevel: this.maps.tileZoomLevel, latitude: !isNullOrUndefined(location) ?
+                        location.latitude : 0, longitude: !isNullOrUndefined(location) ? location.longitude : 0,
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            } else {
+                const location: GeoPosition = this.maps.getTileGeoLocation(layerX, layerY);
+                panCompleteEventArgs = {
+                    cancel: false, name: 'panComplete', maps: this.maps,
+                    tileTranslatePoint: { previous: this.maps.tileTranslatePoint , current: this.maps.tileTranslatePoint },
+                    translatePoint: { previous: this.maps.previousPoint, current: this.maps.translatePoint}, scale: this.maps.scale,
+                    tileZoomLevel: this.maps.tileZoomLevel, latitude: location.latitude, longitude: location.longitude,
+                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
+                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
+                };
+            }
+            this.maps.trigger('panComplete', panCompleteEventArgs);
+        }
+        this.isPanModeEnabled = false;
+        this.isPanningInProgress = false;
+        const zoomRectElement: HTMLElement = <HTMLElement>getElementByID(this.maps.element.id + '_Selection_Rect_Zooming');
+        if (zoomRectElement && this.maps.zoomSettings.enable && this.maps.zoomSettings.enableSelectionZooming) {
+            remove(zoomRectElement);
+            this.performRectZooming();
+        }
+        this.mouseMoveLatLong = { x: 0, y: 0 };
+        this.mouseDownLatLong = { x: 0, y: 0 };
+        this.pinchDistance = null;
+    }
+
+    /**
+     * @param {PointerEvent} e - Specifies the event in the map
+     * @returns {void}
+     * @private
+     */
+    //eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public mouseCancelHandler(e: PointerEvent): void {
+        this.isPanModeEnabled = false;
+        this.isTouch = false;
+        this.rectZoomingStart = false;
+        const zoomRectElement: HTMLElement = <HTMLElement>getElementByID(this.maps.element.id + '_Selection_Rect_Zooming');
+        if (zoomRectElement && this.maps.zoomSettings.enable) {
+            remove(zoomRectElement);
+            this.performRectZooming();
+        }
+    }
+    /**
+     * To handle the click event for maps.
+     *
+     * @param {PointerEvent} e - Specifies the pointer event.
+     * @returns {void}
+     * @private
+     */
+    public click(e: PointerEvent): void {
+        const map: Maps = this.maps;
+        const tooltipElement: Element = (e.target as HTMLElement).closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
+        if ((map.markerModule && map.markerModule.sameMarkerData.length > 0) ||
+            (e.target['id'].indexOf('MarkerIndex') > -1 && e.target['id'].indexOf('cluster') === -1) || !isNullOrUndefined(tooltipElement)) {
+            return null;
+        }
+        if (this.isSingleClick && map.zoomSettings.zoomOnClick && !(e.target['id'].indexOf('_Zooming_') > -1) && !map.zoomSettings.doubleClickZoom
+            && (this.zoomColor !== this.selectionColor)) {
+            const pageX: number = e.pageX;
+            const pageY: number = e.pageY;
+            const position: Point = this.getMousePosition(pageX, pageY);
+            const prevLevel: number = map.tileZoomLevel;
+            const prevScale: number = map.scale;
+            map.mapScaleValue = map.mapScaleValue + 1;
+            const value: number = (map.isTileMap) ? prevLevel : prevScale;
+            if (((position.x > map.mapAreaRect.x) && (position.x < (map.mapAreaRect.x + map.mapAreaRect.width))) &&
+                (position.y > map.mapAreaRect.y) && position.y < (map.mapAreaRect.y + map.mapAreaRect.height)) {
+                this.performZooming(position, (value + 1), 'ZoomIn');
+            }
+        }
+    }
+
+    /**
+     * Gets the Mouse Position.
+     *
+     * @param {number} pageX - Specifies the Page x in map
+     * @param {number} pageY - Specifies the Page y in map
+     * @returns {Point} - returns the mouse point position
+     * @private
+     */
+    public getMousePosition(pageX: number, pageY: number): Point {
+        const map: Maps = this.maps;
+        const elementRect: ClientRect = map.element.getBoundingClientRect();
+        const pageXOffset: number = map.element.ownerDocument.defaultView.pageXOffset;
+        const pageYOffset: number = map.element.ownerDocument.defaultView.pageYOffset;
+        const clientTop: number = map.element.ownerDocument.documentElement.clientTop;
+        const clientLeft: number = map.element.ownerDocument.documentElement.clientLeft;
+        const positionX: number = elementRect.left + pageXOffset - clientLeft;
+        const positionY: number = elementRect.top + pageYOffset - clientTop;
+        return new Point(Math.abs(pageX - positionX), Math.abs(pageY - positionY));
+    }
+
+    /**
+     * @returns {void}
+     * @private
+     */
+    public addEventListener(): void {
+        if (this.maps.isDestroyed) {
+            return;
+        }
+        EventHandler.add(this.maps.element, this.wheelEvent, this.mapMouseWheel, this);
+        EventHandler.add(this.maps.element, 'click', this.click, this);
+        EventHandler.add(this.maps.element, 'dblclick', this.doubleClick, this);
+        this.maps.on(Browser.touchMoveEvent, this.mouseMoveHandler, this);
+        this.maps.on(Browser.touchStartEvent, this.mouseDownHandler, this);
+        this.maps.on(Browser.touchEndEvent, this.mouseUpHandler, this);
+        EventHandler.add(this.maps.element, this.cancelEvent, this.mouseCancelHandler, this);
+    }
+
+    /**
+     * @returns {void}
+     * @private
+     */
+    public removeEventListener(): void {
+        if (this.maps.isDestroyed) {
+            return;
+        }
+        EventHandler.remove(this.maps.element, this.wheelEvent, this.mapMouseWheel);
+        EventHandler.remove(this.maps.element, 'click', this.click);
+        EventHandler.remove(this.maps.element, 'dblclick', this.doubleClick);
+        this.maps.off(Browser.touchMoveEvent, this.mouseMoveHandler);
+        this.maps.off(Browser.touchStartEvent, this.mouseDownHandler);
+        this.maps.off(Browser.touchEndEvent, this.mouseUpHandler);
+        EventHandler.remove(this.maps.element, this.cancelEvent, this.mouseCancelHandler);
+        const toolbarElement: HTMLElement = document.getElementById(this.maps.element.id + '_Zooming_KitCollection');
+        if (toolbarElement) {
+            for (let i: number = 0; i < toolbarElement.childNodes.length; i++) {
+                if ((toolbarElement.childNodes[i as number] as HTMLElement).tagName === 'g') {
+                    EventHandler.add((toolbarElement.childNodes[i as number] as HTMLElement), Browser.touchStartEvent, this.performToolBarAction);
+                    EventHandler.add((toolbarElement.childNodes[i as number] as HTMLElement), 'mouseover', this.showTooltip);
+                    EventHandler.add((toolbarElement.childNodes[i as number] as HTMLElement), 'mouseout', this.removeTooltip);
+                }
+            }
+        }
+    }
+
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name.
+     */
+    protected getModuleName(): string {
+        return 'Zoom';
+    }
+
+    /**
+     * To destroy the zoom.
+     *
+     * @returns {void}
+     * @private
+     */
+    public destroy(): void {
+        this.toolBarGroup = null;
+        this.currentToolbarEle = null;
+        this.zoomingRect = null;
+        this.zoomElements = null;
+        this.panElements = null;
+        this.baseTranslatePoint = null;
+        this.touchStartList = null;
+        this.touchMoveList = null;
+        this.previousTouchMoveList = null;
+        this.mouseDownPoints = null;
+        this.mouseMovePoints = null;
+        this.startTouches = [];
+        this.mouseDownLatLong = null;
+        this.mouseMoveLatLong = null;
+        this.layerCollectionEle = null;
+        this.currentLayer = null;
+        this.pinchDistance = null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!(this.maps as any).refreshing) {
+            this.maps = null;
+        }
+    }
+}