@syncfusion/ej2-maps 31.1.17 → 31.2.12

package/dist/ts/maps/utils/helper.ts

@@ -1,3811 +0,0 @@
-/* eslint-disable max-len */
-/**
- * Helper functions for maps control
- */
-import { createElement, isNullOrUndefined, remove, compile as templateComplier, merge, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
-import { AnimationOptions, Animation, animationMode } from '@syncfusion/ej2-base';
-import { SvgRenderer } from '@syncfusion/ej2-svg-base';
-import { Maps, FontModel, BorderModel, LayerSettings, ProjectionType, ISelectionEventArgs, itemSelection } from '../../index';
-import { animationComplete, IAnimationCompleteEventArgs, Alignment, LayerSettingsModel, ZoomToolbarTooltipSettingsModel } from '../index';
-import {
-    MarkerType, IShapeSelectedEventArgs, ITouches, IShapes, SelectionSettingsModel,
-    MarkerClusterSettingsModel, IMarkerRenderingEventArgs, MarkerSettings, markerClusterRendering,
-    IMarkerClusterRenderingEventArgs, MarkerClusterData
-} from '../index';
-import { CenterPositionModel, ConnectorLineSettingsModel, MarkerSettingsModel } from '../model/base-model';
-import { ExportType } from '../utils/enum';
-
-/**
- * Specifies the size information of an element.
- */
-export class Size {
-    /**
-     * Specifies the height of an element.
-     */
-    public height: number;
-    /**
-     * Specifies the width of an element.
-     */
-    public width: number;
-
-    constructor(width: number, height: number) {
-        this.width = width;
-        this.height = height;
-    }
-}
-/**
- * To find number from string.
- *
- * @param {string} value Specifies the value
- * @param {number} containerSize Specifies the container size
- * @returns {number} Returns the number
- * @private
- */
-export function stringToNumber(value: string, containerSize: number): number {
-    if (typeof value !== 'string') {
-        return value;
-    }
-    if (!isNullOrUndefined(value)) {
-        return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);
-    }
-    return null;
-}
-/**
- * Method to calculate the width and height of the maps.
- *
- * @param {Maps} maps Specifies the maps instance
- * @returns {void}
- * @private
- */
-export function calculateSize(maps: Maps): Size {
-    maps.element.style.height = !isNullOrUndefined(maps.height) ? maps.height : 'auto';
-    maps.element.style.width = !isNullOrUndefined(maps.width) ? maps.width : 'auto';
-    maps.element.style.setProperty('display', 'block');
-    const containerWidth: number = maps.element.clientWidth;
-    const containerHeight: number = maps.element.clientHeight;
-    const containerElementWidth: number = (typeof maps.element.style.width === 'string') ?
-        stringToNumber(maps.element.style.width, containerWidth) : maps.element.style.width;
-    const containerElementHeight: number = (typeof maps.element.style.height === 'string') ?
-        stringToNumber(maps.element.style.height, containerHeight) : maps.element.style.height;
-    let availableSize: Size = new Size(0, 0);
-    if (maps.width === '0px' || maps.width === '0%' || maps.height === '0%' || maps.height === '0px') {
-        availableSize = new Size(0, 0);
-    } else {
-        availableSize = new Size(
-            stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600,
-            stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
-                Math.min(window.innerWidth, window.innerHeight) : 450)
-        );
-    }
-    return availableSize;
-}
-/**
- * Method to create svg for maps.
- *
- * @param {Maps} maps Specifies the map instance
- * @returns {void}
- * @private
- */
-export function createSvg(maps: Maps): void {
-    maps.renderer = new SvgRenderer(maps.element.id);
-    maps.availableSize = calculateSize(maps);
-    maps.svgObject = maps.renderer.createSvg({
-        id: maps.element.id + '_svg',
-        width: maps.availableSize.width,
-        height: maps.availableSize.height
-    });
-    if (maps.width === '0px' || maps.width === '0%' || maps.height === '0%' || maps.height === '0px') {
-        maps.svgObject.setAttribute('height', '0');
-        maps.svgObject.setAttribute('width', '0');
-    }
-}
-/**
- * Method to get the mouse position.
- *
- * @param {number} pageX - Specifies the pageX.
- * @param {number} pageY - Specifies the pageY.
- * @param {Element} element - Specifies the element.
- * @returns {MapLocation} - Returns the location.
- * @private
- */
-export function getMousePosition(pageX: number, pageY: number, element: Element): MapLocation {
-    const elementRect: ClientRect = element.getBoundingClientRect();
-    const pageXOffset: number = element.ownerDocument.defaultView.pageXOffset;
-    const pageYOffset: number = element.ownerDocument.defaultView.pageYOffset;
-    const clientTop: number = element.ownerDocument.documentElement.clientTop;
-    const clientLeft: number = element.ownerDocument.documentElement.clientLeft;
-    const positionX: number = elementRect.left + pageXOffset - clientLeft;
-    const positionY: number = elementRect.top + pageYOffset - clientTop;
-    return new MapLocation((pageX - positionX), (pageY - positionY));
-}
-/**
- * Method to convert degrees to radians.
- *
- * @param {number} deg Specifies the degree value
- * @returns {number} Returns the number
- * @private
- */
-export function degreesToRadians(deg: number): number {
-    return deg * (Math.PI / 180);
-}
-
-/**
- * Convert radians to degrees method.
- *
- * @param {number} radian Specifies the radian value
- * @returns {number} Returns the number
- * @private
- */
-export function radiansToDegrees(radian: number): number {
-    return radian * (180 / Math.PI);
-}
-
-
-/**
- * Method for converting from latitude and longitude values to points.
- *
- * @param {number} latitude - Specifies the latitude.
- * @param {number} longitude - Specifies the longitude.
- * @param {number} factor - Specifies the factor.
- * @param {LayerSettings} layer - Specifies the layer settings.
- * @param {Maps} mapModel - Specifies the maps.
- * @returns {Point} - Returns the point values.
- * @private
- */
-export function convertGeoToPoint(latitude: number, longitude: number, factor: number, layer: LayerSettings, mapModel: Maps): Point {
-    const mapSize: Size = new Size(mapModel.mapAreaRect.width, mapModel.mapAreaRect.height);
-    let x: number; let y: number; let value: Point;
-    let lat: number; let lng: number; let temp: number;
-    const longitudeMinMax: MinMax = mapModel.baseMapBounds.longitude;
-    const latitudeMinMax: MinMax = mapModel.baseMapBounds.latitude;
-    let latRadian: number = degreesToRadians(latitude);
-    const lngRadian: number = degreesToRadians(longitude);
-    const type: ProjectionType = !isNullOrUndefined(mapModel.projectionType) ? mapModel.projectionType : 'Mercator';
-    const size: number = (mapModel.isTileMap) ? Math.pow(2, 1) * 256 : (isNullOrUndefined(factor)) ?
-        Math.min(mapSize.width, mapSize.height) : (Math.min(mapSize.width, mapSize.height) * factor);
-    if (layer.geometryType === 'Normal') {
-        x = isNullOrUndefined(factor) ? longitude : Math.abs((longitude - longitudeMinMax.min) * factor);
-        y = isNullOrUndefined(factor) ? latitude : Math.abs((latitudeMinMax.max - latitude) * factor);
-    } else if (layer.geometryType === 'Geographic') {
-        switch (type) {
-        case 'Mercator': {
-            const pixelOrigin: Point = new Point(size / 2, size / 2);
-            x = pixelOrigin.x + longitude * (size / 360);
-            const sinY: number = calculateBound(Math.sin(degreesToRadians(latitude)), -0.9999, 0.9999);
-            y = pixelOrigin.y + 0.5 * (Math.log((1 + sinY) / (1 - sinY))) * (-(size / (2 * Math.PI)));
-            break;
-        }
-        case 'Winkel3':
-            value = aitoff(lngRadian, latRadian);
-            lng = (value.x + lngRadian / (Math.PI / 2)) / 2;
-            lat = (value.y + latRadian) / 2;
-            break;
-        case 'Miller':
-            lng = lngRadian;
-            lat = (1.25 * Math.log(Math.tan((Math.PI / 4) + (.4 * latRadian))));
-            break;
-        case 'Eckert3':
-            temp = Math.sqrt(Math.PI * (4 + Math.PI));
-            lng = 2 / temp * lngRadian * (1 + Math.sqrt(1 - 4 * latRadian * latRadian / (Math.PI * Math.PI)));
-            lat = 4 / temp * latRadian;
-            break;
-        case 'AitOff':
-            value = aitoff(lngRadian, latRadian);
-            lng = value.x;
-            lat = value.y;
-            break;
-        case 'Eckert5':
-            lng = lngRadian * (1 + Math.cos(latRadian)) / Math.sqrt(2 + Math.PI);
-            lat = 2 * latRadian / Math.sqrt(2 + Math.PI);
-            break;
-        case 'Equirectangular':
-            lng = lngRadian;
-            lat = latRadian;
-            break;
-        case 'Eckert6': {
-            const epsilon: number = 1e-6;
-            temp = (1 + (Math.PI / 2)) * Math.sin(latRadian);
-            let delta: number = Infinity;
-            for (let i: number = 0; i < 10 && Math.abs(delta) > epsilon; i++) {
-                delta = (latRadian + (Math.sin(latRadian)) - temp) / (1 + Math.cos(latRadian));
-                latRadian = latRadian - delta;
-            }
-            temp = Math.sqrt(2 + Math.PI);
-            lng = lngRadian * (1 + Math.cos(latRadian)) / temp;
-            lat = 2 * latRadian / temp;
-            break;
-        }
-        }
-        x = (type === 'Mercator') ? x : roundTo(xToCoordinate(mapModel, radiansToDegrees(lng)), 3);
-        y = (type === 'Mercator') ? y : (-(roundTo(yToCoordinate(mapModel, radiansToDegrees(lat)), 3)));
-    }
-    return new Point(x, y);
-}
-
-/**
- * @param {Maps} maps - Specifies the map control.
- * @param {number} factor - Specifies the factor.
- * @param {LayerSettings} currentLayer - Specifies the current layer.
- * @param {Coordinate} markerData - Specifies the marker data.
- * @returns {string} - Returns the path.
- * @private
- */
-export function calculatePolygonPath(maps: Maps, factor: number, currentLayer: LayerSettings, markerData: Coordinate[]): string {
-    let path: string = '';
-    if (!isNullOrUndefined(markerData) && markerData.length > 1) {
-        Array.prototype.forEach.call(markerData, (data: Coordinate, dataIndex: number) => {
-            const lat: number = data.latitude;
-            const lng: number = data.longitude;
-            const location: Point = (maps.isTileMap) ? convertTileLatLongToPoint(
-                new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true
-            ) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
-            if (dataIndex === 0) {
-                path += 'M ' + location.x + ' ' + location.y;
-            } else {
-                path += ' L ' + location.x + ' ' + location.y;
-            }
-        });
-        path += ' z ';
-    }
-    return path;
-}
-/**
- * Converting tile latitude and longitude to point.
- *
- * @param {MapLocation} center Specifies the map center location
- * @param {number} zoomLevel Specifies the zoom level
- * @param {MapLocation} tileTranslatePoint Specifies the tile translate point
- * @param {boolean} isMapCoordinates Specifies the boolean value
- * @returns {MapLocation} Returns the location value
- * @private
- */
-export function convertTileLatLongToPoint(
-    center: MapLocation, zoomLevel: number, tileTranslatePoint: MapLocation, isMapCoordinates: boolean): MapLocation {
-    const size: number = Math.pow(2, zoomLevel) * 256;
-    const x: number = (center.x + 180) / 360;
-    const sinLatitude: number = Math.sin(center.y * Math.PI / 180);
-    const y: number = 0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI);
-    let pixelX: number = center.x;
-    let pixelY: number = center.y;
-    if (isMapCoordinates) {
-        pixelX = (x * size + 0.5) + tileTranslatePoint.x;
-        pixelY = (y * size + 0.5) + tileTranslatePoint.y;
-    }
-    return { x: pixelX, y: pixelY };
-}
-/**
- * Method for calculate x point.
- *
- * @param {Maps} mapObject - Specifies the maps.
- * @param {number} val - Specifies the value.
- * @returns {number} - Returns the number.
- * @private
- */
-export function xToCoordinate(mapObject: Maps, val: number): number {
-    const longitudeMinMax: MinMax = mapObject.baseMapBounds.longitude;
-    const totalSize: number = isNullOrUndefined(mapObject.baseSize) ? mapObject.mapAreaRect.width : mapObject.mapAreaRect.width +
-        (Math.abs(mapObject.baseSize.width - mapObject.mapAreaRect.width) / 2);
-    return Math.round(totalSize * (val - longitudeMinMax.min) / (longitudeMinMax.max - longitudeMinMax.min) * 100) / 100;
-}
-
-/**
- * Method for calculate y point.
- *
- * @param {Maps} mapObject - Specifies the maps.
- * @param {number} val - Specifies the value.
- * @returns {number} - Returns the number.
- * @private
- */
-export function yToCoordinate(mapObject: Maps, val: number): number {
-    const latitudeMinMax: MinMax = mapObject.baseMapBounds.latitude;
-    return Math.round(mapObject.mapAreaRect.height * (val - latitudeMinMax.min) / (latitudeMinMax.max - latitudeMinMax.min) * 100) / 100;
-}
-
-/**
- * Method for calculate aitoff projection.
- *
- * @param {number} x - Specifies the x value.
- * @param {number} y - Specifies the y value.
- * @returns {Point} - Returns the point value.
- * @private
- */
-export function aitoff(x: number, y: number): Point {
-    const cosy: number = Math.cos(y);
-    const sincia: number = sinci(acos(cosy * Math.cos(x /= 2)));
-    return new Point(2 * cosy * Math.sin(x) * sincia, Math.sin(y) * sincia);
-}
-
-
-/**
- * Method to round the number.
- *
- * @param {number} a - Specifies the a value
- * @param {number} b - Specifies the b value
- * @returns {number} - Returns the number
- * @private
- */
-export function roundTo(a: number, b: number): number {
-    const c: number = Math.pow(10, b);
-    return (Math.round(a * c) / c);
-}
-
-/**
- *
- * @param {number} x - Specifies the x value
- * @returns {number} - Returns the number
- * @private
- */
-export function sinci(x: number): number {
-    return x / Math.sin(x);
-}
-
-/**
- *
- * @param {number} a - Specifies the a value
- * @returns {number} - Returns the number
- * @private
- */
-export function acos(a: number): number {
-    return Math.acos(a);
-}
-
-/**
- * Method to calculate bound.
- *
- * @param {number} value Specifies the value
- * @param {number} min Specifies the minimum value
- * @param {number} max Specifies the maximum value
- * @returns {number} Returns the value
- * @private
- */
-export function calculateBound(value: number, min: number, max: number): number {
-    if (!isNullOrUndefined(min)) {
-        value = Math.max(value, min);
-    }
-    if (!(isNullOrUndefined(max))) {
-        value = Math.min(value, max);
-    }
-    return value;
-}
-
-/**
- * To trigger the download element.
- *
- * @param {string} fileName Specifies the file name
- * @param {ExportType} type Specifies the type
- * @param {string} url Specifies the url
- * @param {boolean} isDownload Specifies whether download a file.
- * @returns {void}
- * @private
- */
-export function triggerDownload(fileName: string, type: ExportType, url: string, isDownload: boolean): void {
-    createElement('a', {
-        attrs: {
-            'download': fileName + '.' + (type as string).toLocaleLowerCase(),
-            'href': url
-        }
-    }).dispatchEvent(new MouseEvent(isDownload ? 'click' : 'move', {
-        view: window,
-        bubbles: false,
-        cancelable: true
-    }));
-}
-/**
- * Specifies the information of the position of the point in maps.
- */
-
-export class Point {
-    /**
-     * Defines the x position in pixels.
-     */
-    public x: number;
-    /**
-     * Defines the y position in pixels.
-     */
-    public y: number;
-    constructor(x: number, y: number) {
-        this.x = x;
-        this.y = y;
-    }
-}
-
-/**
- * Specifies the position of the legend on the map, with options to set the
- * position values as percentages. The legend is placed relative to the Maps,
- * ensuring responsiveness.
- */
-
-export class RelativePoint {
-    /**
-     * Defines the horizontal position of the legend as a percentage.
-     */
-    public x: string;
-    /**
-     * Defines the vertical position of the legend as a percentage.
-     */
-    public y: string;
-    constructor(x: string, y: string) {
-        this.x = x;
-        this.y = y;
-    }
-}
-
-/**
- * Defines the latitude and longitude values that define a map location.
- */
-export class Coordinate {
-    /**
-     * Gets or sets the latitude of a coordinate on a map.
-     */
-    public latitude: number;
-    /**
-     * Gets or sets the longitude of a coordinate on a map.
-     */
-    public longitude: number;
-    constructor(latitude: number, longitude: number) {
-        this.latitude = latitude;
-        this.longitude = longitude;
-    }
-}
-
-/**
- * Map internal class for min and max
- *
- */
-
-export class MinMax {
-    public min: number;
-    public max: number;
-    constructor(min: number, max: number) {
-        this.min = min;
-        this.max = max;
-    }
-}
-
-/**
- * Map internal class locations
- */
-
-export class GeoLocation {
-    public latitude: MinMax;
-    public longitude: MinMax;
-    constructor(latitude: MinMax, longitude: MinMax) {
-        this.latitude = new MinMax(latitude.min, latitude.max);
-        this.longitude = new MinMax(longitude.min, longitude.max);
-    }
-}
-
-/**
- * Function to measure the height and width of the text.
- *
- * @param  {string} text Specifies the text
- * @param  {FontModel} font Specifies the font
- * @returns {Size} Returns the size
- * @private
- */
-export function measureText(text: string, font: FontModel): Size {
-    let measureObject: HTMLElement = document.getElementById('mapsmeasuretext');
-
-    if (measureObject === null) {
-        measureObject = document.createElement('text');
-        measureObject.id = 'mapsmeasuretext';
-        document.body.appendChild(measureObject);
-    }
-    measureObject.innerText = text;
-    measureObject.style.cssText = 'position: absolute; font-size: ' + (typeof (font.size) === 'number' ? (font.size + 'px') : font.size) +
-    '; font-weight: ' + font.fontWeight + '; font-style: ' + font.fontStyle + '; font-family: ' + font.fontFamily +
-    '; visibility: hidden; top: -100; left: 0; whiteSpace: nowrap; lineHeight: normal';
-    return new Size(measureObject.clientWidth, measureObject.clientHeight);
-}
-
-/**
- * @param {string} text - Specifies the text.
- * @param {FontModel} font - Specifies the font.
- * @returns {Size} - Returns the size of text.
- * @private
- */
-export function measureTextElement(text: string, font: FontModel): Size {
-    let canvas: HTMLCanvasElement = document.createElement('canvas');
-    // eslint-disable-next-line @typescript-eslint/tslint/config
-    const context = canvas.getContext('2d');
-    context.font = `${font.fontStyle} ${font.fontWeight} ${typeof font.size === 'number' ? font.size + 'px' : font.size} ${font.fontFamily}`;
-    const metrics: TextMetrics = context.measureText(text);
-    const width: number = metrics.width;
-    const height: number = parseFloat(font.size) || 16;
-    canvas = null;
-    return new Size(width, height);
-}
-
-/**
- * Internal use of text options.
- *
- * @private
- */
-export class TextOption {
-    public anchor: string;
-    public id: string;
-    public transform: string = '';
-    public x: number;
-    public y: number;
-    public text: string | string[];
-    public baseLine: string = 'auto';
-
-    constructor(id?: string, x?: number, y?: number, anchor?: string, text?: string | string[], transform: string = '', baseLine?: string) {
-        this.id = id;
-        this.text = text;
-        this.transform = transform;
-        this.anchor = anchor;
-        this.x = x;
-        this.y = y;
-        this.baseLine = baseLine;
-    }
-}
-/**
- * Internal use of path options.
- *
- * @private
- */
-export class PathOption {
-    public id: string;
-    public fill: string;
-    public stroke: string;
-    public ['stroke-width']: number;
-    public ['stroke-dasharray']: string;
-    public ['stroke-opacity']: number;
-    public ['fill-opacity']: number;
-    public d: string;
-    constructor(
-        id: string, fill: string, width: number, color: string, fillOpacity?: number, strokeOpacity?: number,
-        dashArray?: string, d?: string
-    ) {
-        this.id = id;
-        this['fill-opacity'] = fillOpacity;
-        this['stroke-opacity'] = strokeOpacity;
-        this.fill = fill;
-        this.stroke = color;
-        this['stroke-width'] = width;
-        this['stroke-dasharray'] = dashArray;
-        this.d = d;
-    }
-}
-/** @private */
-export class ColorValue {
-    public r: number;
-    public g: number;
-    public b: number;
-    constructor(r?: number, g?: number, b?: number) {
-        this.r = r;
-        this.g = g;
-        this.b = b;
-    }
-}
-/**
- * Internal use of rectangle options.
- *
- * @private
- */
-export class RectOption extends PathOption {
-
-    public x: number;
-    public y: number;
-    public height: number;
-    public width: number;
-    public rx: number;
-    public ry: number;
-    public transform: string;
-    public ['stroke-dasharray']: string;
-    constructor(
-        id: string, fill: string, border: BorderModel, fillOpacity: number,
-        rect: Rect, rx?: number, ry?: number, transform?: string, dashArray?: string
-    ) {
-        super(id, fill, border.width, border.color, fillOpacity, border.opacity);
-        this.y = rect.y;
-        this.x = rect.x;
-        this.height = rect.height;
-        this.width = rect.width;
-        this.rx = rx ? rx : 0;
-        this.ry = ry ? ry : 0;
-        this.transform = transform ? transform : '';
-        this['stroke-dasharray'] = dashArray;
-        this['fill-opacity'] = fillOpacity;
-        this['stroke-opacity'] = border.opacity;
-    }
-}
-/**
- * Internal use of circle options.
- *
- * @private
- */
-export class CircleOption extends PathOption {
-    public cy: number;
-    public cx: number;
-    public r: number;
-    public ['stroke-dasharray']: string;
-    constructor(id: string, fill: string, border: BorderModel, fillOpacity: number,
-                cx: number, cy: number, r: number, dashArray: string) {
-        super(id, fill, border.width, border.color, fillOpacity, border.opacity, dashArray);
-        this.cy = cy;
-        this.cx = cx;
-        this.r = r;
-        this['stroke-dasharray'] = dashArray;
-        this['fill-opacity'] = fillOpacity;
-        this['stroke-opacity'] = border.opacity;
-    }
-}
-
-/**
- * Internal use of polygon options.
- *
- * @private
- */
-export class PolygonOption extends PathOption {
-    public points: string;
-    constructor(id: string, points: string, fill: string, width: number, color: string, fillOpacity: number = 1,
-                strokeOpacity: number = 1, dashArray: string = ''
-    ) {
-        super(id, fill, width, color, fillOpacity, strokeOpacity, dashArray);
-        this.points = points;
-    }
-}
-/**
- * Internal use of polyline options.
- *
- * @private
- */
-export class PolylineOption extends PolygonOption {
-    constructor(id: string, points: string, fill: string, width: number, color: string,
-                fillOpacity: number = 1, strokeOpacity: number = 1, dashArray: string = '') {
-        super(id, points, fill, width, color, fillOpacity, strokeOpacity, dashArray);
-    }
-}
-/**
- * Internal use of line options.
- *
- * @private
- */
-export class LineOption extends PathOption {
-    public x1: number;
-    public y1: number;
-    public x2: number;
-    public y2: number;
-    constructor(id: string, line: Line, fill: string, width: number, color: string,
-                fillOpacity: number = 1, strokeOpacity: number = 1, dashArray: string = ''
-    ) {
-        super(id, fill, width, color, fillOpacity, strokeOpacity, dashArray);
-        this.x1 = line.x1;
-        this.y1 = line.y1;
-        this.x2 = line.x2;
-        this.y2 = line.y2;
-    }
-}
-/**
- * Internal use of line.
- *
- * @property {number} Line - Specifies the line class
- * @private
- */
-export class Line {
-    public x1: number;
-    public y1: number;
-    public x2: number;
-    public y2: number;
-    constructor(x1: number, y1: number, x2: number, y2: number) {
-        this.x1 = x1;
-        this.y1 = y1;
-        this.x2 = x2;
-        this.y2 = y2;
-    }
-}
-/**
- * Internal use of map location type.
- *
- * @private
- */
-export class MapLocation {
-    /**
-     * To specify x value
-     */
-    public x: number;
-    /**
-     * To specify y value
-     */
-    public y: number;
-    constructor(x: number, y: number) {
-        this.x = x;
-        this.y = y;
-    }
-}
-/**
- * Internal use of type rect.
- *
- * @private
- */
-export class Rect {
-
-    public x: number;
-    public y: number;
-    public height: number;
-    public width: number;
-
-    constructor(x: number, y: number, width: number, height: number) {
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.height = height;
-    }
-}
-/**
- * Defines the pattern unit types for drawing the patterns in maps.
- *
- * @private
- */
-export type patternUnits =
-    /** Specifies the user space for maps. */
-    'userSpaceOnUse' |
-    /** Specifies the bounding box for the object. */
-    'objectBoundingBox';
-/**
- * Internal use for pattern creation.
- *
- * @property {PatternOptions} PatternOptions - Specifies the pattern option class.
- * @private
- */
-export class PatternOptions {
-    public id: string;
-    public patternUnits: patternUnits;
-    public patternContentUnits: patternUnits;
-    public patternTransform: string;
-    public x: number;
-    public y: number;
-    public width: number;
-    public height: number;
-    public href: string;
-    constructor(
-        id: string, x: number, y: number, width: number, height: number, patternUnits: patternUnits = 'userSpaceOnUse',
-        patternContentUnits: patternUnits = 'userSpaceOnUse', patternTransform: string = '', href: string = '') {
-        this.id = id;
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.height = height;
-        this.patternUnits = patternUnits;
-        this.patternContentUnits = patternContentUnits;
-        this.patternTransform = patternTransform;
-        this.href = href;
-    }
-}
-/**
- * Internal rendering of text.
- *
- * @param {TextOption} option Specifies the text option
- * @param {FontModel} style Specifies the style
- * @param {string} color Specifies the color
- * @param {HTMLElement | Element} parent Specifies the parent element
- * @param {boolean} isMinus Specifies the boolean value
- * @returns {Element} Returns the html object
- * @private
- */
-export function renderTextElement(
-    option: TextOption, style: FontModel, color: string, parent: HTMLElement | Element, isMinus: boolean = false
-): Element {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const renderOptions: any = {
-        'id': option.id,
-        'x': option.x,
-        'y': option.y,
-        'fill': color,
-        'font-size': style.size,
-        'font-style': style.fontStyle,
-        'font-family': style.fontFamily,
-        'font-weight': style.fontWeight,
-        'text-anchor': option.anchor,
-        'transform': option.transform,
-        'opacity': style.opacity,
-        'dominant-baseline': option.baseLine
-    };
-    const text: string = typeof option.text === 'string' || typeof option.text === 'number' ? option.text : isMinus ? option.text[option.text.length - 1] : option.text[0];
-    let tspanElement: Element;
-    const renderer: SvgRenderer = new SvgRenderer('');
-    let height: number;
-    const htmlObject: HTMLElement = <HTMLElement>renderer.createText(renderOptions, text);
-    htmlObject.style['user-select'] = 'none';
-    htmlObject.style['font-family'] = style.fontFamily;
-    htmlObject.style['font-size'] = style.size;
-    htmlObject.style['font-weight'] = style.fontWeight;
-    htmlObject.style['font-color'] = style.color;
-    htmlObject.style['-moz-user-select'] = 'none';
-    htmlObject.style['-webkit-touch-callout'] = 'none';
-    htmlObject.style['-webkit-user-select'] = 'none';
-    htmlObject.style['-khtml-user-select'] = 'none';
-    htmlObject.style['-ms-user-select'] = 'none';
-    htmlObject.style['-o-user-select'] = 'none';
-    if (typeof option.text !== 'string' && option.text.length > 1) {
-        for (let i: number = 1, len: number = option.text.length; i < len; i++) {
-            height = (measureText(option.text[i as number], style).height);
-            tspanElement = renderer.createTSpan(
-                {
-                    'x': option.x, 'id': option.id,
-                    'y': (option.y) + ((isMinus) ? -(i * height) : (i * height))
-                },
-                isMinus ? option.text[option.text.length - (i + 1)] : option.text[i as number]
-            );
-            htmlObject.appendChild(tspanElement);
-        }
-    }
-    parent.appendChild(htmlObject);
-    return htmlObject;
-}
-
-/**
- * @param {HTMLCollection} element - Specifies the html collection
- * @param {string} markerId - Specifies the marker id
- * @param {object} data - Specifies the data
- * @param {number} index - Specifies the index
- * @param {Maps} mapObj - Specifies the map object
- * @param {string} templateType - Specifies the template type
- * @returns {HTMLElement} - Returns the html element
- * @private
- */
-export function convertElement(element: HTMLCollection, markerId: string, data: object, index: number, mapObj: Maps, templateType: string): HTMLElement {
-    const childElement: HTMLElement = createElement('div', {
-        id: markerId, className: mapObj.element.id + '_marker_template_element'
-    });
-    childElement.style.cssText = 'position: absolute;pointer-events: auto;';
-    let elementLength: number = element.length;
-    while (elementLength > 0) {
-        childElement.appendChild(element[0]);
-        elementLength--;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (!(mapObj as any).isReact || templateType !== 'function') {
-        let templateHtml: string = childElement.innerHTML;
-        const properties: string[] = Object.keys(data);
-        const regExp: RegExpConstructor = RegExp;
-        for (let i: number = 0; i < properties.length; i++) {
-            if (typeof data[properties[i as number]] === 'object') {
-                templateHtml = convertStringToValue(templateHtml, '', data, mapObj);
-                // eslint-disable-next-line @typescript-eslint/ban-types
-            } else if ((<String>properties[i as number]).toLowerCase() !== 'latitude' && (<string>properties[i as number]).toLowerCase() !== 'longitude') {
-                templateHtml = templateHtml.replace(new regExp('{{:' + <string>properties[i as number] + '}}', 'g'), data[properties[i as number].toString()]);
-            }
-        }
-        childElement.innerHTML = templateHtml;
-    }
-    return childElement;
-}
-
-/**
- *
- * @param {string} value - Specifies the value
- * @param {Maps} maps - Specifies the instance of the maps
- * @returns {string} - Returns the string value
- * @private
- */
-export function formatValue(value: string, maps: Maps): string {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let formatValue: string; let formatFunction: any;
-    if (maps.format && !isNaN(Number(value))) {
-        formatFunction = maps.intl.getNumberFormat(
-            { format: maps.format, useGrouping: maps.useGroupingSeparator });
-        formatValue = formatFunction(Number(value));
-    } else {
-        formatValue = value;
-    }
-    return formatValue;
-}
-
-/**
- *
- * @param {string} stringTemplate - Specifies the template
- * @param {string} format - Specifies the format
- * @param {object} data - Specifies the data
- * @param {Maps} maps - Specifies the instance of the maps
- * @returns {string} - Returns the string value
- * @private
- */
-export function convertStringToValue(stringTemplate: string, format: string, data: object, maps: Maps): string {
-    let templateHtml: string = (stringTemplate === '') ? format : stringTemplate;
-    const templateValue: string[] = (stringTemplate === '') ? templateHtml.split('${') : templateHtml.split('{{:');
-    const regExp: RegExpConstructor = RegExp;
-    for (let i: number = 0; i < templateValue.length; i++) {
-        if ((templateValue[i as number].indexOf('}}') > -1 && templateValue[i as number].indexOf('.') > -1) ||
-            (templateValue[i as number].indexOf('}') > -1 && templateValue[i as number].search('.') > -1)) {
-            const split: string[] = (stringTemplate === '') ? templateValue[i as number].split('}') : templateValue[i as number].split('}}');
-            for (let j: number = 0; j < split.length; j++) {
-                if (split[j as number].indexOf('.') > -1) {
-                    const templateSplitValue: string = (getValueFromObject(data, split[j as number])).toString();
-
-                    templateHtml = (stringTemplate === '') ?
-                        templateHtml.split('${' + split[j as number] + '}').join(formatValue(templateSplitValue, maps)) :
-                        templateHtml.replace(new regExp('{{:' + split[j as number] + '}}', 'g'), templateSplitValue);
-                }
-            }
-        }
-    }
-    return templateHtml;
-}
-
-/**
- *
- * @param {Element} element - Specifies the element
- * @param {string} labelId - Specifies the label id
- * @param {object} data - Specifies the data
- * @returns {HTMLElement} - Returns the html element
- * @private
- */
-export function convertElementFromLabel(element: Element, labelId: string, data: object): HTMLElement {
-    const labelEle: Element = isNullOrUndefined(element.childElementCount) ? element[0] : element;
-    let templateHtml: string = labelEle.outerHTML;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const properties: any[] = Object.keys(data);
-    const regExp: RegExpConstructor = RegExp;
-    for (let i: number = 0; i < properties.length; i++) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
-        templateHtml = templateHtml.replace(new regExp('{{:' + <String>properties[i as number] + '}}', 'g'), data[properties[i as number].toString()]);
-    }
-    const templateEle: HTMLElement = createElement('div', {
-        id: labelId,
-        innerHTML: templateHtml
-    });
-    templateEle.style.position = 'absolute';
-    return templateEle;
-}
-
-/**
- *
- * @param {MarkerType} shape - Specifies the shape
- * @param {string} imageUrl - Specifies the image url
- * @param {Point} location - Specifies the location
- * @param {string} markerID - Specifies the marker id
- * @param {any} shapeCustom - Specifies the shape custom
- * @param {Element} markerCollection - Specifies the marker collection
- * @param {Maps} maps - Specifies the instance of the maps
- * @returns {Element} - Returns the element
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function drawSymbols(shape: MarkerType, imageUrl: string, location: Point, markerID: string, shapeCustom: any,
-                            markerCollection: Element, maps: Maps): Element {
-    let markerEle: Element; let x: number; let y: number;
-    const size: Size = <Size>shapeCustom['size'];
-    const borderColor: string = shapeCustom['borderColor'];
-    const borderWidth: number = parseFloat(shapeCustom['borderWidth']);
-    const borderOpacity: number = parseFloat(shapeCustom['borderOpacity']);
-    const fill: string = shapeCustom['fill'];
-    const dashArray: string = shapeCustom['dashArray'];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const border: any = { color: borderColor, width: borderWidth, opacity: borderOpacity };
-    const opacity: number = shapeCustom['opacity'];
-    let rectOptions: RectOption;
-    const pathOptions: PathOption = new PathOption(markerID, fill, borderWidth, borderColor, opacity, borderOpacity, dashArray, '');
-    size.width = typeof(size.width) === 'string' ? parseInt(size.width, 10) : size.width;
-    size.height = typeof(size.height) === 'string' ? parseInt(size.height, 10) : size.height;
-    if (shape === 'Circle') {
-        const radius: number = (size.width + size.height) / 4;
-        const circleOptions: CircleOption = new CircleOption(markerID, fill, border, opacity,
-                                                             location.x, location.y, radius, dashArray);
-        markerEle = maps.renderer.drawCircle(circleOptions) as SVGCircleElement;
-    } else if (shape === 'Rectangle') {
-        x = location.x - (size.width / 2);
-        y = location.y - (size.height / 2);
-        rectOptions = new RectOption(
-            markerID, fill, border, opacity, new Rect(x, y, size.width, size.height), null, null, '', dashArray
-        );
-        markerEle = maps.renderer.drawRectangle(rectOptions) as SVGRectElement;
-    } else if (shape === 'Image') {
-        x = location.x - (size.width / 2);
-        y = location.y - (markerID.indexOf('cluster') > -1 ? (size.height / 2) : size.height);
-        merge(pathOptions, { 'href': imageUrl, 'height': size.height, 'width': size.width, x: x, y: y });
-        markerEle = maps.renderer.drawImage(pathOptions) as SVGImageElement;
-    } else {
-        markerEle = calculateShapes(maps, shape, pathOptions, size, location, markerCollection);
-    }
-    return markerEle;
-}
-
-/**
- *
- * @param {object} data - Specifies the data
- * @param {string} value - Specifies the value
- * @returns {any} - Returns the data
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getValueFromObject(data: object, value: string): any {
-    if (!isNullOrUndefined(data) && !isNullOrUndefined(value)) {
-        const splits: string[] = value.replace(/\[/g, '.').replace(/\]/g, '').split('.');
-        if (splits.length === 1) {
-            data = data[splits[0]];
-        }
-        else {
-            for (let i: number = 0; i < splits.length && !isNullOrUndefined(data); i++) {
-                data = data[splits[i as number]];
-            }
-        }
-    }
-    return data;
-}
-
-/**
- *
- * @param {IMarkerRenderingEventArgs} eventArgs - Specifies the event arguments
- * @param {object} data - Specifies the data
- * @returns {IMarkerRenderingEventArgs} - Returns the arguments
- * @private
- */
-export function markerColorChoose(eventArgs: IMarkerRenderingEventArgs, data: object): IMarkerRenderingEventArgs {
-    const color: string = (!isNullOrUndefined(eventArgs.colorValuePath)) ? ((eventArgs.colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, eventArgs.colorValuePath)).toString() :
-        data[eventArgs.colorValuePath]) : data[eventArgs.colorValuePath];
-    eventArgs.fill = (!isNullOrUndefined(eventArgs.colorValuePath) &&
-        !isNullOrUndefined(color)) ?
-        ((eventArgs.colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, eventArgs.colorValuePath)).toString() :
-            data[eventArgs.colorValuePath]) : eventArgs.fill;
-    return eventArgs;
-}
-
-/**
- *
- * @param {IMarkerRenderingEventArgs} eventArgs - Specifies the event arguments
- * @param {object} data - Specifies the data
- * @returns {IMarkerRenderingEventArgs} - Returns the arguments
- * @private
- */
-export function markerShapeChoose(eventArgs: IMarkerRenderingEventArgs, data: object): IMarkerRenderingEventArgs {
-    if (!isNullOrUndefined(eventArgs.shapeValuePath) && !isNullOrUndefined(data[eventArgs.shapeValuePath])) {
-        updateShape(eventArgs, data);
-        if (data[eventArgs.shapeValuePath] === 'Image') {
-            updateImageUrl(eventArgs, data);
-        }
-    } else {
-        updateShape(eventArgs, data);
-        updateImageUrl(eventArgs, data);
-    }
-    return eventArgs;
-}
-/**
- *
- * @param {any} path - contains a dot, it implies that the desired property is nested within the object.
- * @param {any} data - The data object from which the value is to be retrieved. This can be any object that contains the properties specified in the path.
- * @returns {any} - Returns the value of the property specified in the path.
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function getValue(path: string, data: any): any {
-    return (path.indexOf('.') > -1) ? getValueFromObject(data, path).toString() : data[path as string];
-}
-/**
- *
- * @param {any} eventArgs - Specifies the event arguments
- * @param {any} data - Specifies the data
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function updateShape(eventArgs: any, data: any): void {
-    if (!isNullOrUndefined(eventArgs.shapeValuePath)) {
-        const shape: MarkerType = getValue(eventArgs.shapeValuePath, data);
-        eventArgs.shape = (!isNullOrUndefined(shape) && shape.toString() !== '') ? shape : eventArgs.shape;
-    }
-}
-/**
- *
- * @param {any} eventArgs - Specifies the event arguments
- * @param {any} data - Specifies the data
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function updateImageUrl(eventArgs: any, data: any): void {
-    if (!isNullOrUndefined(eventArgs.imageUrlValuePath)) {
-        const imageUrl: string = getValue(eventArgs.imageUrlValuePath, data);
-        eventArgs.imageUrl = (!isNullOrUndefined(imageUrl)) ? imageUrl : eventArgs.imageUrl;
-    }
-}
-
-/**
- *
- * @param {LayerSettings} currentLayer - Specifies the current layer
- * @param {HTMLElement | Element} markerTemplate - Specifies the marker template
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {number} layerIndex - Specifies the layer index
- * @param {number} markerIndex - Specifies the marker index
- * @param {Element} markerCollection - Specifies the marker collection
- * @param {Element} layerElement - Specifies the layer element
- * @param {boolean} check - Specifies the boolean value
- * @param {boolean} zoomCheck - Specifies the boolean value
- * @param {any} translatePoint - Specifies the data
- * @param {boolean} allowInnerClusterSetting - Specifies the boolean value
- * @returns {boolean} -Returns boolean for cluster completion
- * @private
- */
-export function clusterTemplate(currentLayer: LayerSettings, markerTemplate: HTMLElement | Element, maps: Maps,
-                                layerIndex: number, markerIndex: number, markerCollection: Element,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                layerElement: Element, check: boolean, zoomCheck: boolean, translatePoint?: any,
-                                allowInnerClusterSetting?: boolean): boolean {
-    let bounds1: DOMRect;
-    let bounds2: DOMRect;
-    let colloideBounds: DOMRect[] = [];
-    let clusterColloideBounds: Element[] = [];
-    let tempX: number = 0;
-    let tempY: number = 0;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let data: any;
-    const markerSetting: MarkerSettingsModel = currentLayer.markerSettings[markerIndex as number];
-    let options: TextOption;
-    let textElement: Element;
-    let tempElement1: Element;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let shapeCustom: any;
-    let tempElement: Element;
-    const postionY: number = (15 / 4);
-    let m: number = 0;
-    let indexCollection: number[] = [];
-    const clusters: MarkerClusterSettingsModel = !allowInnerClusterSetting && currentLayer.markerClusterSettings.allowClustering ?
-        currentLayer.markerClusterSettings : markerSetting.clusterSettings;
-    const style: FontModel = clusters.labelStyle;
-    const clusterGroup: Element = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster' });
-    const eventArg: IMarkerClusterRenderingEventArgs = {
-        cancel: false, name: markerClusterRendering, fill: clusters.fill, height: clusters.height,
-        width: clusters.width, imageUrl: clusters.imageUrl, shape: clusters.shape,
-        data: data, maps: maps, cluster: clusters, border: clusters.border
-    };
-    const containerRect: ClientRect = maps.element.getBoundingClientRect();
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
-    let factor: number;
-    if (!maps.isTileMap) {
-        factor = maps.mapLayerPanel.calculateFactor(currentLayer);
-    }
-    let isClusteringCompleted: boolean = false;
-    const currentZoomFactor: number = !maps.isTileMap ? maps.mapScaleValue : maps.tileZoomLevel;
-    const markerGroup: NodeListOf<Element> | NodeListOf<ChildNode> = (markerSetting.clusterSettings.allowClustering
-        || (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1))
-        ? markerTemplate.querySelectorAll(`[id*='LayerIndex_${layerIndex}_MarkerIndex_${markerIndex}']:not([id*='_Group'])`)
-        : markerTemplate.childNodes;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    maps.trigger('markerClusterRendering', eventArg, (clusterargs: IMarkerClusterRenderingEventArgs) => {
-        Array.prototype.forEach.call(markerGroup, (markerElement: Element, o: number) => {
-            indexCollection = [];
-            if (markerElement['style']['visibility'] !== 'hidden') {
-                tempElement = markerElement as Element;
-                bounds1 = tempElement.getBoundingClientRect() as DOMRect;
-                indexCollection.push(o);
-                if (!isNullOrUndefined(bounds1)) {
-                    const list: number[] = (maps.markerModule.zoomedMarkerCluster.length > 0 && maps.markerModule.zoomedMarkerCluster[layerIndex as number] && maps.markerModule.zoomedMarkerCluster[layerIndex as number][o as number] && maps.markerModule.zoomedMarkerCluster[layerIndex as number][o as number].length > 0)
-                    || (maps.markerModule.initialMarkerCluster.length > 0 && maps.markerModule.initialMarkerCluster[layerIndex as number] && maps.markerModule.initialMarkerCluster[layerIndex as number][o as number] && maps.markerModule.initialMarkerCluster[layerIndex as number][o as number].length > 0) ?
-                        (maps.previousScale < currentZoomFactor ? maps.markerModule.zoomedMarkerCluster[layerIndex as number][o as number] : maps.markerModule.initialMarkerCluster[layerIndex as number][o as number]) : null;
-                    if (!isNullOrUndefined(list) && list.length !== 0 && !markerSetting.clusterSettings.allowClustering) {
-                        Array.prototype.forEach.call(list, (currentIndex: number) => {
-                            if (o !== currentIndex) {
-                                const otherMarkerElement: Element = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
-                                    + markerIndex + '_dataIndex_' + currentIndex);
-                                if (otherMarkerElement && otherMarkerElement['style']['visibility'] !== 'hidden') {
-                                    markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, currentIndex);
-                                }
-                            }
-                        });
-                    } else {
-                        Array.prototype.forEach.call(markerGroup, (otherMarkerElement: Element, p: number) => {
-                            if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
-                                markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, p);
-                            }
-                        });
-                    }
-                    markerClusterListHandler(maps, currentZoomFactor, layerIndex, o, indexCollection);
-                    tempX = bounds1.left + bounds1.width / 2;
-                    tempY = bounds1.top + bounds1.height;
-                    if (colloideBounds.length > 0) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        indexCollection = indexCollection.filter((item: any, index: any, value: any) => value.indexOf(item) === index);
-                        tempX = tempX - containerRect['left'];
-                        tempY = (tempY - ((maps.availableSize.height <= containerRect['height']) ?
-                            containerRect['top'] : (containerRect['bottom'] - containerRect['top'])));
-                        const dataIndex: number = parseInt(markerElement['id'].split('_dataIndex_')[1].split('_')[0], 10);
-                        const markerIndex: number = parseInt(markerElement['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
-                        const markerSetting: MarkerSettingsModel = currentLayer.markerSettings[markerIndex as number];
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const markerData: any = markerSetting.dataSource[dataIndex as number];
-                        let location: Point;
-                        const longitude: number = (!isNullOrUndefined(markerSetting.longitudeValuePath)) ?
-                            Number(getValueFromObject(markerData, markerSetting.longitudeValuePath)) :
-                            !isNullOrUndefined(markerData['longitude']) ? parseFloat(markerData['longitude']) :
-                                !isNullOrUndefined(markerData['Longitude']) ? parseFloat(markerData['Longitude']) : 0;
-                        const latitude: number = (!isNullOrUndefined(markerSetting.latitudeValuePath)) ?
-                            Number(getValueFromObject(markerData, markerSetting.latitudeValuePath)) :
-                            !isNullOrUndefined(markerData['latitude']) ? parseFloat(markerData['latitude']) :
-                                !isNullOrUndefined(markerData['Latitude']) ? parseFloat(markerData['Latitude']) : 0;
-                        if (!maps.isTileMap) {
-                            location = convertGeoToPoint(latitude, longitude, factor, currentLayer, maps);
-                        } else if (maps.isTileMap) {
-                            location = convertTileLatLongToPoint(new Point(longitude, latitude), maps.tileZoomLevel,
-                                                                 maps.tileTranslatePoint, true);
-                        }
-                        markerElement['style']['visibility'] = 'hidden';
-                        if (eventArg.cancel) {
-                            shapeCustom = {
-                                size: new Size(clusters.width, clusters.height),
-                                fill: clusters.fill, borderColor: clusters.border.color,
-                                borderWidth: clusters.border.width, opacity: clusters.opacity,
-                                dashArray: clusters.dashArray, imageUrl: clusters.imageUrl, shape: clusters.shape
-                            };
-                            shapeCustom['borderOpacity'] = isNullOrUndefined(clusters.border.opacity) ? clusters.opacity : clusters.border.opacity;
-                        } else {
-                            shapeCustom = {
-                                size: new Size(eventArg.width, eventArg.height),
-                                fill: eventArg.fill, borderColor: eventArg.border.color,
-                                borderWidth: eventArg.border.width, opacity: clusters.opacity,
-                                dashArray: clusters.dashArray, imageUrl: eventArg.imageUrl,
-                                shape: eventArg.shape
-                            };
-                            shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters.opacity : eventArg.border.opacity;
-                        }
-                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : tempX + postionY - (eventArg.width / 2);
-                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : tempY - (eventArg.height / 2);
-                        if (maps.isTileMap) {
-                            tempX = location.x;
-                            tempY = location.y;
-                        } else {
-                            tempX = (((location.x + ((!isNullOrUndefined(maps.translatePoint) && maps.translatePoint.x !== 0 && !maps.isResize) ? maps.translatePoint.x : translatePoint.location.x)) * (isNullOrUndefined(maps.scale) ? translatePoint.scale : maps.scale)) + markerSetting.offset.x);
-                            tempY = (((location.y + ((!isNullOrUndefined(maps.translatePoint) && maps.translatePoint.y !== 0 && !maps.isResize) ? maps.translatePoint.y : translatePoint.location.y)) * (isNullOrUndefined(maps.scale) ? translatePoint.scale : maps.scale)) + markerSetting.offset.y);
-                        }
-                        const clusterID: string = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m);
-                        const labelID: string = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m) + '_datalabel_' + m;
-                        m++;
-                        const ele: Element = drawSymbols(
-                            shapeCustom['shape'], shapeCustom['imageUrl'], { x: 0, y: 0 },
-                            clusterID, shapeCustom, markerCollection, maps
-                        );
-                        ele.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
-                        if (eventArg.shape === 'Balloon') {
-                            (ele.children[0] as HTMLElement).textContent = indexCollection.toString();
-                        } else {
-                            (ele as HTMLElement).textContent = indexCollection.toString();
-                        }
-                        options = new TextOption(labelID, (0), postionY, 'middle', (colloideBounds.length + 1).toString(), '', '');
-                        textElement = renderTextElement(options, style, style.color, markerCollection);
-                        textElement.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
-                        const eleMarkerIndex: number = parseFloat(ele.id.split('_MarkerIndex_')[1]);
-                        if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
-                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
-                            clusterGroup.appendChild(ele);
-                            clusterGroup.appendChild(textElement);
-                        } else {
-                            clusterGroup.appendChild(textElement);
-                            clusterGroup.appendChild(ele);
-                        }
-                    }
-                }
-                colloideBounds = [];
-            } else {
-                markerClusterListHandler(maps, currentZoomFactor, layerIndex, o, indexCollection);
-            }
-            isClusteringCompleted = true;
-        });
-        layerElement.appendChild(clusterGroup);
-        maps.svgObject.appendChild(layerElement) as Element;
-        maps.element.appendChild(maps.svgObject) as Element;
-        if (clusters.allowDeepClustering && !allowInnerClusterSetting) {
-            Array.prototype.forEach.call(clusterGroup.childNodes, (clusterElement: Element, o: number) => {
-                if (clusterElement['style']['visibility'] !== 'hidden') {
-                    tempElement = clusterElement as Element;
-                    bounds1 = tempElement.getBoundingClientRect() as DOMRect;
-                    if (!isNullOrUndefined(bounds1) && !(tempElement.id.indexOf('_datalabel_') > -1)) {
-                        for (let p: number = o + 1; p < clusterGroup.childElementCount; p++) {
-                            if (clusterGroup.childNodes[p as number]['style']['visibility'] !== 'hidden') {
-                                tempElement1 = clusterGroup.childNodes[p as number] as Element;
-                                bounds2 = tempElement1.getBoundingClientRect() as DOMRect;
-                                if (!isNullOrUndefined(bounds2) && !(tempElement1.id.indexOf('_datalabel_') > -1)) {
-                                    if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
-                                        || bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
-                                        clusterColloideBounds.push(tempElement1);
-                                        clusterColloideBounds.push(clusterGroup.childNodes[p - 1] as Element);
-                                        clusterGroup.childNodes[p as number]['style']['visibility'] = 'hidden';
-                                        let eleMarkerIndex: number = !isNullOrUndefined(clusterGroup.childNodes[p + 1]) ?
-                                            parseFloat((clusterGroup.childNodes[p + 1] as HTMLElement).id.split('_MarkerIndex_')[1]) : null;
-                                        if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
-                                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
-                                            clusterGroup.childNodes[p + 1]['style']['visibility'] = 'hidden';
-                                        } else {
-                                            eleMarkerIndex = parseFloat((clusterGroup.childNodes[p - 1] as HTMLElement).id.split('_MarkerIndex_')[1]);
-                                            clusterGroup.childNodes[p - 1]['style']['visibility'] = (eleMarkerIndex === markerIndex) ? 'hidden' : clusterGroup.childNodes[p - 1]['style']['visibility'];
-                                        }
-                                        indexCollection.push(p);
-                                    }
-                                }
-                            }
-                        }
-                        if (clusterColloideBounds.length > 0) {
-                            tempElement = clusterElement as Element;
-                            for (let i: number = 0; i < clusterColloideBounds.length; i++) {
-                                if (tempElement.tagName === 'g') {
-                                    tempElement.childNodes[0].textContent = tempElement.childNodes[0].textContent + ',' +
-                                        clusterColloideBounds[i as number].textContent;
-                                } else {
-                                    tempElement.textContent = tempElement.textContent + ',' + clusterColloideBounds[i as number].textContent;
-                                }
-                                let eleMarkerIndex: number = parseFloat((clusterGroup.childNodes[o + 1] as HTMLElement).id.split('_MarkerIndex_')[1]);
-                                if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
-                                    (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
-                                    clusterGroup.childNodes[o + 1].textContent = ((+(clusterGroup.childNodes[o + 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
-                                } else {
-                                    eleMarkerIndex = parseFloat((clusterGroup.childNodes[o - 1] as HTMLElement).id.split('_MarkerIndex_')[1]);
-                                    clusterGroup.childNodes[o - 1].textContent = (eleMarkerIndex === markerIndex) ?
-                                        ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString() : clusterGroup.childNodes[o - 1].textContent;
-                                }
-                                i++;
-                            }
-                        }
-                        clusterColloideBounds = [];
-                    }
-                }
-            });
-        }
-        while (0 < clusterGroup.childNodes.length) {
-            const eleMarkerIndex: number = parseFloat((clusterGroup.childNodes[0] as HTMLElement).id.split('_MarkerIndex_')[1]);
-            if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
-                (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
-                markerCollection.insertBefore(clusterGroup.childNodes[0], null);
-            } else  {
-                if (eleMarkerIndex === markerIndex) {
-                    markerCollection.insertBefore(clusterGroup.childNodes[0], markerCollection.firstChild);
-                }
-            }
-        }
-        if (!check) {
-            getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
-        }
-        const element: HTMLElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
-        const polygonElement: HTMLElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
-        if (isNullOrUndefined(element) && !maps.isTileMap) {
-            layerElement.insertBefore(markerCollection, layerElement.firstChild);
-        } else if (!maps.isTileMap) {
-            layerElement.appendChild(markerCollection);
-        }
-        else {
-            if (!isNullOrUndefined(polygonElement)) {
-                polygonElement.insertAdjacentElement('afterend', markerCollection);
-            } else if (!isNullOrUndefined(element)) {
-                element.insertAdjacentElement('afterend', markerCollection);
-            } else {
-                layerElement.insertBefore(markerCollection, layerElement.firstChild);
-            }
-        }
-        const markerCluster: HTMLElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster');
-        if (!isNullOrUndefined(markerCluster)) {
-            markerCluster.remove();
-        }
-        if (zoomCheck) {
-            const layerGroupElement: HTMLElement = document.getElementById(maps.element.id + '_Layer_Collections');
-            const element: HTMLElement = document.getElementById(maps.element.id + '_LayerIndex_' + (layerIndex + 1));
-            if (!isNullOrUndefined(layerGroupElement) && !isNullOrUndefined(element)) {
-                layerGroupElement.insertBefore(layerElement, element);
-            } else if (!isNullOrUndefined(layerGroupElement)) {
-                layerGroupElement.appendChild(layerElement);
-            }
-        }
-    });
-    return isClusteringCompleted;
-}
-
-/**
- * @param {Maps} maps - Specifies the map control.
- * @param {number} currentZoomFactor - Specifies the current zoom factor.
- * @param {number} layerIndex - Specifies the layer index.
- * @param {number} index - Specifies the index.
- * @param {number} indexCollection - Specifies the index Collection.
- * @returns {void}
- * @private
- */
-export function markerClusterListHandler(maps: Maps, currentZoomFactor: number, layerIndex: number, index: number, indexCollection: number[]): void {
-    if (currentZoomFactor === 1) {
-        const initialMarkerClusterList: number[] = isNullOrUndefined(maps.markerModule.initialMarkerCluster[layerIndex as number][index as number]) ? [] : indexCollection.length > 1 ? indexCollection : [];
-        maps.markerModule.initialMarkerCluster[layerIndex as number][index as number] = initialMarkerClusterList;
-        const zoomedMarkerClusterList: number[] = isNullOrUndefined(maps.markerModule.zoomedMarkerCluster[layerIndex as number][index as number]) ? [] : indexCollection.length > 1 ? indexCollection : [];
-        maps.markerModule.zoomedMarkerCluster[layerIndex as number][index as number] = zoomedMarkerClusterList;
-    } else if (currentZoomFactor > 1) {
-        maps.markerModule.zoomedMarkerCluster[layerIndex as number][index as number] = indexCollection.length > 1 ? indexCollection : [];
-    }
-}
-
-/**
- * @param {Element} tempElement - Specifies the temp element.
- * @param {ClientRect} markerBounds - Specifies the marker bounds.
- * @param {ClientRect} colloideBounds - Specifies the colloide Bounds.
- * @param {number[]} indexCollection - Specifies the index collection.
- * @param {number} p - Specifies the p.
- * @returns {void}
- * @private
- */
-export function markerBoundsComparer(tempElement: Element, markerBounds: ClientRect, colloideBounds: ClientRect[], indexCollection: number[], p: number): void {
-    // eslint-disable-next-line @typescript-eslint/tslint/config
-    const currentMarkerBound = tempElement.getBoundingClientRect() as DOMRect;
-    if (!isNullOrUndefined(currentMarkerBound)) {
-        if (!(markerBounds.left > currentMarkerBound.right || markerBounds.right < currentMarkerBound.left
-            || markerBounds.top > currentMarkerBound.bottom || markerBounds.bottom < currentMarkerBound.top)) {
-            colloideBounds.push(currentMarkerBound);
-            tempElement['style']['visibility'] = 'hidden';
-            indexCollection.push(p);
-        }
-    }
-}
-
-/**
- *
- * @param {MarkerClusterData[]} sameMarkerData - Specifies the marker data
- * @param {Maps} maps - Specifies the instance of the maps
- * @returns {void}
- * @private
- */
-export function mergeSeparateCluster(sameMarkerData: MarkerClusterData[], maps: Maps): void {
-    const layerIndex: number = sameMarkerData[0].layerIndex;
-    const clusterIndex: number = sameMarkerData[0].targetClusterIndex;
-    const markerIndex: number = sameMarkerData[0].markerIndex;
-    const dataIndex: number = sameMarkerData[0].dataIndex;
-    const markerId: string = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
-    const clusterId: string = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    const clusterEle: Element = maps.layers[layerIndex as number].markerClusterSettings.shape === 'Balloon' ? getElement(clusterId + '_Group') : getElement(clusterId);
-    const clusterEleLabel: Element = getElement(clusterId + '_datalabel_' + clusterIndex);
-    clusterEle.setAttribute('visibility', 'visible');
-    clusterEleLabel.setAttribute('visibility', 'visible');
-    let markerEle: Element;
-    const markerDataLength: number = sameMarkerData[0].data.length;
-    for (let i: number = 0; i < markerDataLength; i++) {
-        markerEle = getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i as number]['index'] + '_Group') ? getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i as number]['index'] + '_Group') : getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i as number]['index']);
-        markerEle['style']['visibility'] = 'hidden';
-        if (markerEle.id.indexOf('Group') > -1) {
-            const marker: Element = getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i as number]['index']);
-            marker['style']['visibility'] = 'hidden';
-        }
-
-    }
-    removeElement(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine');
-}
-
-/**
- *
- * @param {MarkerClusterData[]} sameMarkerData - Specifies the marker data
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {Element | HTMLElement} markerElement - Specifies the marker element
- * @param {boolean} isDom - Specifies the boolean value
- * @returns {void}
- * @private
- */
-export function clusterSeparate(sameMarkerData: MarkerClusterData[], maps: Maps, markerElement: Element | HTMLElement, isDom?: boolean): void {
-    const layerIndex: number = sameMarkerData[0].layerIndex;
-    const markerIndex: number = sameMarkerData[0].markerIndex;
-    const clusterIndex: number = sameMarkerData[0].targetClusterIndex;
-    const dataIndex: number = sameMarkerData[0].dataIndex;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const getElementFunction: any = isDom ? getElement : markerElement.querySelector.bind(markerElement);
-    const getQueryConnect: string = isDom ? '' : '#';
-    const markerId: string = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
-    const layer: LayerSettingsModel = maps.layers[layerIndex as number];
-    const allowInnerClusterSetting: boolean = maps.markerModule.allowInnerClusterSetting(layer as LayerSettings);
-    const cluster: MarkerClusterSettingsModel = !allowInnerClusterSetting && layer.markerClusterSettings.allowClustering ?
-        layer.markerClusterSettings : layer.markerSettings[markerIndex as number].clusterSettings;
-    const marker: MarkerSettingsModel = layer.markerSettings[markerIndex as number];
-    const clusterId: string = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    const clusterEle: Element = cluster.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
-    const clusterEleLabel: Element = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
-    clusterEle.setAttribute('visibility', 'hidden');
-    clusterEleLabel.setAttribute('visibility', 'hidden');
-    let markerEle: Element = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
-    const height: number = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().height : marker.height;
-    let width: number = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
-    const centerX: number = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[0];
-    const centerY: number = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[1].split(')')[0].trim();
-    width = (typeof width === 'string' ? parseFloat(width) : width);
-    let radius: number = width + 5;
-    let area: number = 2 * 3.14 * radius;
-    let totalMarker: number = 0;
-    let numberOfMarker: number = Math.round(area / width);
-    totalMarker += numberOfMarker;
-    const markerDataLength: number = sameMarkerData[0].data.length;
-    let percent: number = Math.round((height / area) * 100);
-    percent = markerDataLength < numberOfMarker ? 100 / markerDataLength : percent;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let angle: any = (percent / 100) * 360;
-    let newAngle: number = markerDataLength < numberOfMarker ? 45 : 0;
-    let count: number = 1;
-    const start: string = 'M ' + centerX + ' ' + centerY + ' ';
-    let path: string = '';
-    for (let i: number = 0; i < markerDataLength; i++) {
-        if (totalMarker === i || Math.round(newAngle) >= 360) {
-            count++;
-            radius = (width + 5) * count;
-            newAngle = 0;
-            area = 2 * 3.14 * radius;
-            numberOfMarker = Math.round(area / height);
-            percent = Math.round((height / area) * 100);
-            while (percent * numberOfMarker < 100) {
-                numberOfMarker++;
-            }
-            angle = ((percent / 100) * 360);
-            totalMarker += numberOfMarker;
-        }
-        const x1: number = centerX + radius * Math.sin((Math.PI * 2 * newAngle) / 360);
-        const y1: number = centerY + radius * Math.cos((Math.PI * 2 * newAngle) / 360);
-        path += start + 'L ' + (x1) + ' ' + y1 + ' ';
-        markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i as number]['index'] + '_Group') ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i as number]['index'] + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i as number]['index']);
-        if (markerEle.parentElement.id.indexOf('Template_Group') > -1) {
-            markerEle['style']['transform'] = '';
-            markerEle['style']['left'] = maps.isTileMap ? x1 - (width / 2) + 'px' : (x1 - (width / 2) - 10) + 'px';
-            markerEle['style']['top'] = maps.isTileMap ? y1 - (height / 2) + 'px' : (y1 - (height / 2) - 10) + 'px';
-            markerEle.setAttribute('transform', 'translate( ' + x1 + ' ' + y1 + ')');
-        } else {
-            markerEle.setAttribute('transform', 'translate( ' + x1 + ' ' + y1 + ')');
-        }
-        markerEle['style']['visibility'] = 'visible';
-        if (markerEle.id.indexOf('Group') > -1) {
-            const marker: Element = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i as number]['index']);
-            marker['style']['visibility'] = 'visible';
-        }
-        newAngle += angle;
-    }
-    const connectorLine: ConnectorLineSettingsModel = cluster.connectorLineSettings;
-    const options: PathOption = {
-        d: path, id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_markerClusterConnectorLine', stroke: connectorLine.color,
-        'fill-opacity': connectorLine.opacity, 'stroke-opacity': connectorLine.opacity, 'stroke-width': connectorLine.width
-    } as PathOption;
-    markerElement = isDom ? getElementFunction(maps.element.id + '_Markers_Group') : markerElement;
-    const layerElement: Element = getElementFunction(maps.element.id + '_LayerIndex_' + layerIndex);
-    markerElement = layerElement.querySelector('#' + markerElement.id);
-    const groupEle: Element = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine' });
-    groupEle.appendChild(maps.renderer.drawPath(options));
-    if (marker.shape === 'Balloon') {
-        markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0_Group'));
-    } else {
-        markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0'));
-    }
-}
-
-/**
- *
- * @param {IMarkerRenderingEventArgs} eventArgs - Specifies the arguments
- * @param {MarkerSettings} markerSettings - Specifies the marker settings
- * @param {any[]} markerData - Specifies the marker data
- * @param {number} dataIndex - Specifies the data index
- * @param {Point} location - Specifies the location
- * @param {Point} transPoint - Specifies the translate point
- * @param {string} markerID - Specifies the marker id
- * @param {Point} offset - Specifies the offset value
- * @param {number} scale - Specifies the scale value
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {Element} markerCollection - Specifies the marker collection
- * @returns {Element} - Returns the element
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function marker(eventArgs: IMarkerRenderingEventArgs, markerSettings: MarkerSettings, markerData: any[], dataIndex: number,
-                       location: Point, transPoint: Point, markerID: string, offset: Point, scale: number, maps: Maps,
-                       markerCollection: Element): Element {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const shapeCustom: any = {
-        size: new Size(eventArgs.width, eventArgs.height),
-        fill: eventArgs.fill, borderColor: eventArgs.border.color,
-        borderWidth: eventArgs.border.width, opacity: markerSettings.opacity,
-        dashArray: markerSettings.dashArray, borderOpacity: isNullOrUndefined(eventArgs.border.opacity) ? markerSettings.opacity :
-            eventArgs.border.opacity
-    };
-    removeElement(markerID);
-    const ele: Element = drawSymbols(eventArgs.shape, eventArgs.imageUrl, { x: 0, y: 0 }, markerID, shapeCustom, markerCollection, maps);
-    const x: number = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + ((!isNullOrUndefined(offset) && !isNullOrUndefined(offset.x)) ? offset.x : 0);
-    const y: number = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + ((!isNullOrUndefined(offset) && !isNullOrUndefined(offset.y)) ? offset.y : 0);
-    ele.setAttribute('transform', 'translate( ' + x + ' ' + y + ' )');
-    maintainSelection(maps.selectedMarkerElementId, maps.markerSelectionClass, ele, 'MarkerselectionMapStyle');
-    if (maps.legendSettings.toggleLegendSettings.enable && maps.legendSettings.type === 'Markers') {
-        const layerIndex: number = parseInt(ele.id.split('_LayerIndex_')[1], 10);
-        maintainToggleSelection(maps.toggledElementId, ele.tagName === 'g' ? ele.children[0] : ele, maps.legendSettings.toggleLegendSettings.applyShapeSettings ?
-            maps.layers[layerIndex as number].shapeSettings : maps.legendSettings.toggleLegendSettings);
-    }
-    markerCollection.appendChild(ele);
-    const element: string = (markerData.length - 1) === dataIndex ? 'marker' : null;
-    const markerPoint: Point = new Point(x, y);
-    if (markerSettings.animationDuration > 0 || animationMode === 'Enable') {
-        elementAnimate(
-            ele, markerSettings.animationDelay, markerSettings.animationDuration, markerPoint, maps, element
-        );
-    }
-    return markerCollection;
-}
-
-/**
- *
- * @param {IMarkerRenderingEventArgs} eventArgs - Specifies the arguments
- * @param {any} templateFn - Specifies the template function
- * @param {string} markerID - Specifies the marker id
- * @param {any} data - Specifies the data
- * @param {number} markerIndex - Specifies the marker index
- * @param {HTMLElement} markerTemplate - Specifies the marker template element
- * @param {Point} location - Specifies the location
- * @param {Point} transPoint - Specifies the translate point.
- * @param {number} scale - Specifies the scale value
- * @param {Point} offset - Specifies the offset value
- * @param {Maps} maps - Specifies the instance of the maps
- * @returns {HTMLElement} - Returns the html element
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function markerTemplate(eventArgs: IMarkerRenderingEventArgs, templateFn: any, markerID: string, data: any,
-                               markerIndex: number, markerTemplate: HTMLElement, location: Point, transPoint: Point, scale: number, offset: Point, maps: Maps): HTMLElement {
-    templateFn = getTemplateFunction(eventArgs.template, maps);
-    if (templateFn && (templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false).length)) {
-        const templateElement: HTMLCollection = templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false);
-        const markerElement: HTMLElement = <HTMLElement>convertElement(
-            templateElement, markerID, data, markerIndex, maps, typeof eventArgs.template
-        );
-        for (let i: number = 0; i < markerElement.children.length; i++) {
-            (<HTMLElement>markerElement.children[i as number]).style.pointerEvents = 'auto';
-        }
-        markerElement.style.left = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x - (maps.isTileMap ? 0 : maps.mapAreaRect.x) + 'px';
-        markerElement.style.top = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y - (maps.isTileMap ? 0 : maps.mapAreaRect.y) + 'px';
-        markerElement.style.transform = 'translate(-50%, -50%)';
-        markerTemplate.appendChild(markerElement);
-
-    }
-    return markerTemplate;
-}
-
-/**
- * To maintain selection during page resize.
- *
- * @param {string[]} elementId - Specifies the element id
- * @param {Element} elementClass - Specifies the element class
- * @param {Element} element - Specifies the element
- * @param {string} className - Specifies the class name
- * @returns {void}
- * @private
- */
-export function maintainSelection(elementId: string[], elementClass: Element, element: Element, className: string): void {
-    if (elementId) {
-        for (let index: number = 0; index < elementId.length; index++) {
-            if (element.getAttribute('id') === elementId[index as number]) {
-                if (index === 0 || element.tagName === 'g') {
-                    if (!isNullOrUndefined(elementClass) && !isNullOrUndefined(elementClass.id)) {
-                        document.body.appendChild(elementClass);
-                    }
-                    if (element.id.indexOf('_MarkerIndex_') > -1 && element.childElementCount > 0) {
-                        element.children[0].setAttribute('class', className);
-                    }
-                }
-                element.setAttribute('class', className);
-            }
-        }
-    }
-}
-
-/**
- * To maintain toggle state during page resize.
- *
- * @param {string[]} toggledElements - Specifies the list of toggled elements
- * @param {Element} element - Specifies the element id
- * @param {any} styleProperty - Specifies the style properties
- * @returns {void}
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function maintainToggleSelection(toggledElements: string[], element: Element, styleProperty: any): void {
-    if (!isNullOrUndefined(toggledElements) && toggledElements.length > 0) {
-        for (let j: number = 0; j < toggledElements.length; j++) {
-            if (toggledElements[j as number] === element.id) {
-                element.setAttribute('fill', styleProperty.fill);
-                element.setAttribute('stroke', styleProperty.border.color);
-                element.setAttribute('fill-opacity', (styleProperty.opacity).toString());
-                element.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
-                element.setAttribute('stroke-width', (isNullOrUndefined(styleProperty.border.width) ? 0 : styleProperty.border.width).toString());
-            }
-        }
-    }
-}
-
-/**
- * To maintain selection style class.
- *
- * @param {string} id - Specifies the id
- * @param {string} idClass - Specifies the class id
- * @param {string} fill - Specifies the fill
- * @param {string} opacity - Specifies the opactiy
- * @param {string} borderColor - Specifies the border color
- * @param {string} borderWidth - Specifies the border width
- * @param {Maps} maps - Specifies the maps
- * @returns {void}
- * @private
- */
-export function maintainStyleClass(id: string, idClass: string, fill: string, opacity: string, borderColor: string,
-                                   borderWidth: string, maps: Maps): void {
-    if (!getElement(id)) {
-        const styleClass: Element = createElement('style', {
-            id: id
-        });
-        (styleClass as HTMLElement).innerText = '.' + idClass + '{fill:'
-            + fill + ';' + 'opacity:' + opacity + ';' +
-            'stroke-width:' + borderWidth + ';' +
-            'stroke:' + borderColor + ';' + '}';
-        maps.shapeSelectionClass = styleClass;
-        document.body.appendChild(styleClass);
-    }
-}
-
-/**
- * Internal use of append shape element.
- *
- * @param {Element} shape - Specifies the shape
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function appendShape(shape: Element, element: Element): Element {
-    if (element) { element.appendChild(shape); }
-    return shape;
-}
-/**
- * Internal rendering of Circle.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {CircleOption} options - Specifies the circle options
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawCircle(maps: Maps, options: CircleOption, element?: Element): Element {
-    return appendShape(maps.renderer.drawCircle(options), element);
-}
-/**
- * Internal rendering of Rectangle.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {RectOption} options - Specifies the rect options
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawRectangle(maps: Maps, options: RectOption, element?: Element): Element {
-    return appendShape(maps.renderer.drawRectangle(options), element);
-}
-/**
- * Internal rendering of Path.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PathOption} options - Specifies the polygon options
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawPath(maps: Maps, options: PathOption, element?: Element): Element {
-    return appendShape(maps.renderer.drawPath(options), element);
-}
-/**
- * Internal rendering of Polygon.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PolygonOption} options - Specifies the polygon options
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawPolygon(maps: Maps, options: PolygonOption, element?: Element): Element {
-    return appendShape(maps.renderer.drawPolygon(options), element);
-}
-/**
- * Internal rendering of Polyline.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PolylineOption} options - Specifies the poly line options
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawPolyline(maps: Maps, options: PolylineOption, element?: Element): Element {
-    return appendShape(maps.renderer.drawPolyline(options), element);
-}
-/**
- * Internal rendering of Line.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {LineOption} options - Specifies the line options
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawLine(maps: Maps, options: LineOption, element?: Element): Element {
-    return appendShape(maps.renderer.drawLine(options), element);
-}
-
-/**
- * Calculate marker shapes.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {MarkerType} shape - Specifies the marker type
- * @param {PathOption} options - Specifies the path options
- * @param {Size} size - Specifies the size
- * @param {MapLocation} location - Specifies the map location
- * @param {Element} markerEle - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function calculateShapes(
-    maps: Maps, shape: MarkerType, options: PathOption, size: Size, location: MapLocation, markerEle: Element
-): Element {
-    let tempGroup: Element;
-    switch (shape) {
-    case 'Balloon':
-        tempGroup = drawBalloon(maps, options, size, location, 'Marker', markerEle);
-        break;
-    case 'Cross':
-        options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height
-            / 2) + ' M ' + (location.x - size.width / 2) + ' ' + location.y + ' L ' + (location.x + size.width / 2) + ' ' + location.y;
-        break;
-    case 'Diamond':
-        options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + (location.x + size.width / 2) + ' '
-            + location.y + ' L ' + location.x + ' ' + (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2)
-            + ' ' + location.y + ' Z';
-        break;
-    case 'Star':
-        options.d = 'M ' + (location.x + size.width / 3) + ' ' + (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2)
-            + ' ' + (location.y - size.height / 6) + ' L ' + (location.x + size.width / 2) + ' ' + (location.y - size.height / 6)
-            + ' L ' + (location.x - size.width / 3) + ' ' + (location.y + size.height / 2) + ' L ' + location.x + ' ' +
-            (location.y - size.height / 2) + ' L ' + (location.x + size.width / 3) + ' ' + (location.y + size.height / 2) + ' Z';
-        break;
-    case 'Triangle':
-        options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + (location.x + size.width / 2) + ' ' +
-            (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2) + ' ' + (location.y + size.height / 2) + ' Z';
-        break;
-    case 'HorizontalLine':
-        options.d = ' M ' + (location.x - size.width / 2) + ' ' + location.y + ' L ' + (location.x + size.width / 2) + ' '
-            + location.y;
-        break;
-    case 'VerticalLine':
-        options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' +
-            (location.y + size.height / 2);
-        break;
-    case 'InvertedTriangle':
-        options.d = 'M ' + (location.x - size.width / 2) + ' ' + (location.y - size.height / 2) + ' L ' + (location.x + size.width / 2) + ' ' +
-            (location.y - size.height / 2) + ' L ' + (location.x) + ' ' + (location.y + size.height / 2) + ' Z';
-        break;
-    case 'Pentagon':
-        // eslint-disable-next-line no-case-declarations
-        const eq: number = 72; let xValue: number; let yValue: number;
-        for (let i: number = 0; i < 5; i++) {
-            xValue = (size.width / 2) * Math.cos((Math.PI / 180) * (i * eq));
-            yValue = (size.height / 2) * Math.sin((Math.PI / 180) * (i * eq));
-            options.d += (i === 0 ? 'M ' : 'L ') + (location.x + xValue) + ' ' + (location.y + yValue);
-        }
-        options.d += ' Z';
-        break;
-    }
-    if (shape === 'Cross' || shape === 'HorizontalLine' || shape === 'VerticalLine') {
-        options['stroke'] = (options['stroke'] === 'transparent') ? options['fill'] : options['stroke'];
-    }
-    return shape === 'Balloon' ? tempGroup : maps.renderer.drawPath(options);
-}
-
-
-/**
- * Internal rendering of Diamond.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PathOption} options - Specifies the path options
- * @param {Size} size - Specifies the size
- * @param {MapLocation} location - Specifies the map location
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawDiamond(maps: Maps, options: PathOption, size: Size, location: MapLocation, element?: Element): Element {
-    options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + (location.x + size.width / 2) + ' ' + location.y +
-        ' L ' + location.x + ' ' + (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2) + ' ' + location.y + ' Z';
-    return appendShape(maps.renderer.drawPath(options), element);
-}
-/**
- * Internal rendering of Triangle.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PathOption} options - Specifies the path options
- * @param {Size} size - Specifies the size
- * @param {MapLocation} location - Specifies the map location
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawTriangle(maps: Maps, options: PathOption, size: Size, location: MapLocation, element?: Element): Element {
-    options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + (location.x + size.width / 2) + ' ' +
-        (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2) + ' ' + (location.y + size.height / 2) + ' Z';
-    return appendShape(maps.renderer.drawPath(options), element);
-}
-/**
- * Internal rendering of Cross.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PathOption} options - Specifies the path options
- * @param {Size} size - Specifies the size
- * @param {MapLocation} location - Specifies the map location
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawCross(maps: Maps, options: PathOption, size: Size, location: MapLocation, element?: Element): Element {
-    options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height / 2) +
-        ' M ' + (location.x - size.width / 2) + ' ' + location.y + ' L ' + (location.x + size.width / 2) + ' ' + location.y;
-    return appendShape(maps.renderer.drawPath(options), element);
-}
-/**
- * Internal rendering of HorizontalLine.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PathOption} options - Specifies the path options
- * @param {Size} size - Specifies the size
- * @param {MapLocation} location - Specifies the map location
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawHorizontalLine(maps: Maps, options: PathOption, size: Size, location: MapLocation, element?: Element): Element {
-    options.d = ' M ' + (location.x - size.width / 2) + ' ' + location.y + ' L ' + (location.x + size.width / 2) + ' ' + location.y;
-    return appendShape(maps.renderer.drawPath(options), element);
-}
-/**
- * Internal rendering of VerticalLine.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PathOption} options - Specifies the path options
- * @param {Size} size - Specifies the size
- * @param {MapLocation} location - Specifies the map location
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawVerticalLine(maps: Maps, options: PathOption, size: Size, location: MapLocation, element?: Element): Element {
-    options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height / 2);
-    return appendShape(maps.renderer.drawPath(options), element);
-}
-/**
- * Internal rendering of Star.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PathOption} options - Specifies the path options
- * @param {Size} size - Specifies the size
- * @param {MapLocation} location - Specifies the map location
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawStar(maps: Maps, options: PathOption, size: Size, location: MapLocation, element?: Element): Element {
-    options.d = 'M ' + (location.x + size.width / 3) + ' ' + (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2)
-        + ' ' + (location.y - size.height / 6) + ' L ' + (location.x + size.width / 2) + ' ' + (location.y - size.height / 6)
-        + ' L ' + (location.x - size.width / 3) + ' ' + (location.y + size.height / 2) + ' L ' + location.x + ' ' +
-        (location.y - size.height / 2) + ' L ' + (location.x + size.width / 3) + ' ' + (location.y + size.height / 2) + ' Z';
-    return appendShape(maps.renderer.drawPath(options), element);
-}
-/**
- * Internal rendering of Balloon.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PathOption} options - Specifies the path options
- * @param {Size} size - Specifies the size
- * @param {MapLocation} location - Specifies the map location
- * @param {string} type - Specifies the type.
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawBalloon(maps: Maps, options: PathOption, size: Size, location: MapLocation, type: string, element?: Element): Element {
-    const width: number = size.width;
-    const height: number = size.height;
-    let pathElement: Element;
-    location.x -= width / 2;
-    location.y -= ((options.id.indexOf('cluster') > -1) ? (height / 2) :  options.id.indexOf('Legend') > -1 ? height / 1.25 : height);
-    options.d = 'M15,0C8.8,0,3.8,5,3.8,11.2C3.8,17.5,9.4,24.4,15,30c5.6-5.6,11.2-12.5,11.2-18.8C26.2,5,21.2,0,15,0z M15,16' +
-        'c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S17.8,16,15,16z';
-    const balloon: Element = maps.renderer.drawPath(options);
-    const x: number = size.width / 30;
-    const y: number = size.height / 30;
-    balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
-    if (type === 'Marker') {
-        const g: Element = maps.renderer.createGroup({ id: options.id + '_Group' });
-        appendShape(balloon, g);
-        pathElement = appendShape(g, element);
-    }
-    else {
-        pathElement = balloon;
-    }
-    return pathElement;
-}
-/**
- * Internal rendering of Pattern.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {PatternOptions} options - Specifies the pattern options
- * @param {Element[]} elements - Specifies the elements
- * @param {Element} element - Specifies the element
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawPattern(maps: Maps, options: PatternOptions, elements: Element[], element?: Element): Element {
-    const pattern: Element = maps.renderer.createPattern(options, 'pattern');
-    for (const ele of elements) {
-        appendShape(ele, pattern);
-    }
-    return appendShape(pattern, element);
-}
-/**
- * Method to get specific field and vaues from data.
- *
- * @param {any[]} dataSource - Specifies the data source
- * @param {string[]} fields - Specifies the fields
- * @returns {any[]} - Returns the object
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getFieldData(dataSource: any[], fields: string[]): any[] {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const newData: any[] = [];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let data: { [key: string]: any };
-    for (const temp of dataSource) {
-        data = {};
-        for (const field of fields) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            if ((<any>temp)[field as string]) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                data[field as string] = (<any>temp)[field as string];
-            }
-        }
-        newData.push(data);
-    }
-    return newData;
-}
-/**
- * To find the index of dataSource from shape properties.
- *
- * @param {any[]} dataSource - Specifies the data source
- * @param {any} properties - Specifies the properties
- * @param {string} dataPath - Specifies the data path
- * @param {string | string[]} propertyPath - Specifies the property path
- * @param {LayerSettingsModel} layer - Specifies the layer settings
- * @returns {number} - Returns the number
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function checkShapeDataFields(dataSource: any[], properties: any, dataPath: string, propertyPath: string | string[],
-                                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                     layer: LayerSettingsModel): number {
-    if (!(isNullOrUndefined(properties)) && !isNullOrUndefined(dataSource) && !isNullOrUndefined(dataPath)) {
-        for (let i: number = 0; i < dataSource.length; i++) {
-            const shapeDataPath: string = ((dataPath.indexOf('.') > -1) ? getValueFromObject(dataSource[i as number], dataPath) :
-                dataSource[i as number][dataPath as string]);
-            const shapePath: string = checkPropertyPath(shapeDataPath, propertyPath, properties);
-            const shapeDataPathValue: string = !isNullOrUndefined(shapeDataPath) && isNaN(properties[shapePath as string])
-                ? (typeof shapeDataPath === 'string' ? shapeDataPath.toLowerCase() : shapeDataPath) : shapeDataPath;
-            const propertiesShapePathValue: string = !isNullOrUndefined(properties[shapePath as string]) && isNaN(properties[shapePath as string])
-                ? properties[shapePath as string].toLowerCase() : properties[shapePath as string];
-            if (shapeDataPathValue === propertiesShapePathValue) {
-                return i;
-            }
-        }
-    }
-    return null;
-}
-/**
- *
- * @param {string} shapeData - Specifies the shape data
- * @param {string | string[]} shapePropertyPath -  Specifies the shape property path
- * @param {object} shape -  Specifies the shape
- * @returns {string} - Returns the string value
- */
-export function checkPropertyPath(shapeData: string, shapePropertyPath: string | string[], shape: object): string {
-    if (!isNullOrUndefined(shapeData) && !isNullOrUndefined(shape)) {
-        if (!isNullOrUndefined(shapePropertyPath)) {
-            const properties: string[] = (Object.prototype.toString.call(shapePropertyPath) === '[object Array]' ?
-                shapePropertyPath : [shapePropertyPath]) as string[];
-            for (let i: number = 0; i < properties.length; i++) {
-                const shapeDataValue: string = !isNullOrUndefined(shapeData) && typeof shapeData === 'string' ?
-                    shapeData.toLowerCase() : shapeData;
-                const shapePropertiesValue: string = !isNullOrUndefined(shape[properties[i as number]])
-                    && isNaN(shape[properties[i as number]])
-                    ? shape[properties[i as number]].toLowerCase() : shape[properties[i as number]];
-                if (shapeDataValue === shapePropertiesValue) {
-                    return properties[i as number];
-                }
-            }
-        }
-    }
-    return null;
-}
-
-/**
- *
- * @param {MapLocation[]} points - Specifies the location
- * @param {number} start - Specifies the start value
- * @param {number} end - Specifies the end value
- * @returns {MapLocation[]} - Returns the location
- * @private
- */
-export function filter(points: MapLocation[], start: number, end: number): MapLocation[] {
-    const pointObject: MapLocation[] = [];
-    for (let i: number = 0; i < points.length; i++) {
-        const point: MapLocation = points[i as number];
-        if (start <= point.y && end >= point.y) {
-            pointObject.push(point);
-        }
-    }
-    return pointObject;
-}
-
-/**
- *
- * @param {number} min - Specifies the min value
- * @param {number} max - Specifies the max value
- * @param {number} value - Specifies the value
- * @param {number} minValue - Specifies the minValue
- * @param {number} maxValue -Specifies the maxValue
- * @returns {number} - Returns the number
- * @private
- */
-export function getRatioOfBubble(min: number, max: number, value: number, minValue: number, maxValue: number): number {
-    const percent: number = (100 / (maxValue - minValue)) * (value - minValue);
-    let bubbleRadius: number = (((max - min) / 100) * percent) + min;
-    if (maxValue === minValue) {
-        bubbleRadius = (((max - min) / 100)) + min;
-    }
-    return bubbleRadius;
-}
-/**
- * To find the midpoint of the polygon from points.
- *
- * @param {MapLocation[]} points - Specifies the points
- * @param {string} type - Specifies the type
- * @param {string} geometryType - Specified the type of the geometry
- * @returns {any} - Specifies the object
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function findMidPointOfPolygon(points: MapLocation[], type: string, geometryType?: string): any {
-    if (!points.length) {
-        return null;
-    }
-    const min: number = 0;
-    const max: number = points.length;
-    let startX: number;
-    let startY: number;
-    let startX1: number;
-    let startY1: number;
-    let sum: number = 0;
-    let xSum: number = 0;
-    let ySum: number = 0;
-
-    for (let i: number = min; i <= max - 1; i++) {
-        startX = points[i as number].x;
-        startY = type === 'Mercator' || geometryType === 'Normal' ? points[i as number].y : -(points[i as number].y);
-        if (i === max - 1) {
-            startX1 = points[0].x;
-            startY1 = type === 'Mercator' || geometryType === 'Normal' ? points[0].y : -(points[0].y);
-        } else {
-            startX1 = points[i + 1].x;
-            startY1 = type === 'Mercator' || geometryType === 'Normal' ? points[i + 1].y : -(points[i + 1].y);
-        }
-        sum = sum + Math.abs(((startX * startY1)) - (startX1 * startY));
-        xSum = xSum + Math.abs(((startX + startX1) * (((startX * startY1) - (startX1 * startY)))));
-        ySum = ySum + Math.abs(((startY + startY1) * (((startX * startY1) - (startX1 * startY)))));
-    }
-    sum = 0.5 * sum;
-    // eslint-disable-next-line @typescript-eslint/tslint/config
-    const pointValue: number = points.some(point => point.x < 5 && point.y < 5) && geometryType === 'Normal' ? 6 : 4;
-    xSum = sum !== 0 ? (1 / (pointValue * sum)) * xSum : 0;
-    ySum = sum !== 0 ? (1 / (pointValue * sum)) * ySum : 0;
-
-    /* Code for finding nearest points in polygon related to midPoint*/
-    let rightMinPoint: MapLocation = { x: 0, y: 0 };
-    let rightMaxPoint: MapLocation = { x: 0, y: 0 };
-    let leftMinPoint: MapLocation = { x: 0, y: 0 };
-    let leftMaxPoint: MapLocation = { x: 0, y: 0 };
-    let bottomMinPoint: MapLocation = { x: 0, y: 0 };
-    let bottomMaxPoint: MapLocation = { x: 0, y: 0 };
-    let topMinPoint: MapLocation = { x: 0, y: 0 };
-    let topMaxPoint: MapLocation = { x: 0, y: 0 };
-    let height: number = 0;
-    for (let i: number = min; i <= max - 1; i++) {
-        const point: MapLocation = points[i as number];
-        point.y = type === 'Mercator' || geometryType === 'Normal' ? point.y : -(point.y);
-        if (point.y > ySum) {
-            if (point.x < xSum && xSum - point.x < xSum - bottomMinPoint.x) {
-                bottomMinPoint = { x: point.x, y: point.y };
-            } else if (point.x > xSum && (bottomMaxPoint.x === 0 || point.x - xSum < bottomMaxPoint.x - xSum)) {
-                bottomMaxPoint = { x: point.x, y: point.y };
-            }
-        } else {
-            if (point.x < xSum && xSum - point.x < xSum - topMinPoint.x) {
-                topMinPoint = { x: point.x, y: point.y };
-            } else if (point.x > xSum && (topMaxPoint.x === 0 || point.x - xSum < topMaxPoint.x - xSum)) {
-                topMaxPoint = { x: point.x, y: point.y };
-            }
-        }
-        height = (bottomMaxPoint.y - topMaxPoint.y) + ((bottomMaxPoint.y - topMaxPoint.y) / 4);
-        if (point.x > xSum) {
-            if (point.y < ySum && ySum - point.y < ySum - rightMinPoint.y) {
-                rightMinPoint = { x: point.x, y: point.y };
-            } else if (point.y > ySum && (rightMaxPoint.y === 0 || point.y - ySum < rightMaxPoint.y - ySum)) {
-                rightMaxPoint = { x: point.x, y: point.y };
-            }
-        } else {
-            if (point.y < ySum && ySum - point.y < ySum - leftMinPoint.y) {
-                leftMinPoint = { x: point.x, y: point.y };
-            } else if (point.y > ySum && (leftMaxPoint.y === 0 || point.y - ySum < leftMaxPoint.y - ySum)) {
-                leftMaxPoint = { x: point.x, y: point.y };
-            }
-        }
-    }
-
-    return {
-        x: xSum, y: ySum, rightMin: rightMinPoint, rightMax: rightMaxPoint,
-        leftMin: leftMinPoint, leftMax: leftMaxPoint, points: points, topMax: topMaxPoint, topMin: topMinPoint,
-        bottomMax: bottomMaxPoint, bottomMin: bottomMinPoint, height: height
-    };
-}
-/**
- * Check custom path.
- *
- * @param {any[]} layerData - Specifies the layer data
- * @returns {boolean} - Returns the boolean vlue
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isCustomPath(layerData: any[]): boolean {
-    let customPath: boolean = false;
-    if (Object.prototype.toString.call(layerData) === '[object Array]') {
-        Array.prototype.forEach.call(layerData, (layer: LayerSettings) => {
-            if (!isNullOrUndefined(layer['geometry']) && layer['geometry']['type'] === 'Path') {
-                customPath = true;
-            }
-        });
-    }
-    return customPath;
-}
-
-/**
- * Trim the title text.
- *
- * @param {number} maxWidth - Specifies the maximum width
- * @param {string} text - Specifies the text
- * @param {FontModel} font - Specifies the font
- * @param {number} width - Specifies the width of text
- * @param {boolean} isCanvasMeasure - checks the canvas measure
- * @param {number[]} widthList - Specifies the width list
- * @returns {string} - Returns the string
- * @private
- */
-export function textTrim(maxWidth: number, text: string, font: FontModel, width?: number, isCanvasMeasure?: boolean, widthList?: number[]): string {
-    let label: string = text;
-    if (isNullOrUndefined(width)) {
-        if (!isCanvasMeasure) {
-            width = measureText(text, font).width;
-        } else {
-            width = measureTextElement(text, font).width;
-        }
-    }
-    if (width > maxWidth) {
-        const textLength: number = text.length;
-        for (let i: number = textLength - 1; i >= 0; --i) {
-            label = text.substring(0, i) + '...';
-            if (!isCanvasMeasure) {
-                width = measureText(label, font).width;
-            } else {
-                width = measureTextElement(label, font).width;
-            }
-            if (width <= maxWidth || label.length < 4) {
-                if (label.length < 4) {
-                    label = ' ';
-                }
-                if (!isNullOrUndefined(widthList)) {
-                    widthList.push(width);
-                }
-                return label;
-            }
-        }
-    }
-    if (!isNullOrUndefined(widthList)) {
-        widthList.push(width);
-    }
-    return label;
-}
-
-/**
- * Method to calculate x position of title.
- *
- * @param {Rect} location - Specifies the location
- * @param {Alignment} alignment - Specifies the alignment
- * @param {Size} textSize - Specifies the text size
- * @param {string} type - Specifies the type
- * @returns {Point} - Returns the point values
- * @private
- */
-export function findPosition(location: Rect, alignment: Alignment, textSize: Size, type: string): Point {
-    let x: number;
-    switch (alignment) {
-    case 'Near':
-        x = location.x;
-        break;
-    case 'Center':
-        x = (type === 'title') ? (location.width / 2 - textSize.width / 2) :
-            ((location.x + (location.width / 2)) - textSize.width / 2);
-        break;
-    case 'Far':
-        x = (type === 'title') ? (location.width - location.y - textSize.width) :
-            ((location.x + location.width) - textSize.width);
-        break;
-    }
-    const y: number = (type === 'title') ? location.y + (textSize.height / 2) : ((location.y + location.height / 2) + textSize.height / 2);
-    return new Point(x, y);
-}
-/**
- * To remove element by id.
- *
- * @param {string} id - Specifies the id
- * @returns {void}
- * @private
- */
-export function removeElement(id: string): void {
-    const element: Element = document.getElementById(id);
-    return element ? remove(element) : null;
-}
-
-/**
- * To calculate map center position from pixel values.
- *
- * @param {Maps} mapObject - Specifies the map object
- * @param {LayerSettings} layer - Specifies the layer settings
- * @returns {Point} - Returns the x and y points
- * @private
- */
-export function calculateCenterFromPixel(mapObject: Maps, layer: LayerSettings): Point {
-    const point1: Point = convertGeoToPoint(
-        mapObject.minLatOfGivenLocation, mapObject.minLongOfGivenLocation, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-    const point2: Point = convertGeoToPoint(
-        mapObject.maxLatOfGivenLocation, mapObject.maxLongOfGivenLocation, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-    const x: number = (point1.x + point2.x) / 2;
-    const y: number = (point1.y + point2.y) / 2;
-    return new Point(x, y);
-}
-
-/**
- * @param {Maps} mapObject - Specifies the map object
- * @param {LayerSettings} layer - Specifies the layer settings
- * @param {boolean} animate - Specifies the boolean value
- * @returns {any} - Returns the object
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getTranslate(mapObject: Maps, layer: LayerSettings, animate?: boolean): any {
-    let zoomFactorValue: number = mapObject.zoomSettings.zoomFactor; let scaleFactor: number;
-    let center: CenterPositionModel = mapObject.centerPosition;
-    let centerLatitude: number = center.latitude;
-    let centerLongitude: number = center.longitude;
-    const checkMethodeZoom: boolean = !isNullOrUndefined(mapObject.centerLatOfGivenLocation) &&
-        !isNullOrUndefined(mapObject.centerLongOfGivenLocation) && mapObject.zoomNotApplied;
-    if (isNullOrUndefined(mapObject.mapScaleValue)) {
-        mapObject.mapScaleValue = zoomFactorValue;
-    }
-    if (mapObject.zoomSettings.shouldZoomInitially && mapObject.zoomSettings.enable) {
-        mapObject.mapScaleValue = scaleFactor = zoomFactorValue = ((mapObject.zoomSettings.shouldZoomInitially || mapObject.enablePersistence) && mapObject.scale === 1)
-        // eslint-disable-next-line radix
-            ? mapObject.scale : (isNullOrUndefined(mapObject.markerZoomFactor)) ? 1 : (mapObject.markerZoomedState ? mapObject.markerZoomFactor : parseInt(mapObject.scale.toString()));
-        if (mapObject.markerZoomedState && mapObject.mapScaleValue !== mapObject.markerZoomFactor && !mapObject.enablePersistence) {
-            mapObject.mapScaleValue = zoomFactorValue = mapObject.markerZoomFactor;
-        }
-        if (mapObject.markerZoomedState && !isNullOrUndefined(mapObject.markerCenterLatitude) && !isNullOrUndefined(mapObject.markerCenterLongitude)) {
-            centerLatitude = mapObject.markerCenterLatitude;
-            centerLongitude = mapObject.markerCenterLongitude;
-        }
-    }
-    if (checkMethodeZoom) {
-        mapObject.mapScaleValue = scaleFactor = zoomFactorValue = mapObject.scaleOfGivenLocation;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const min: any = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['min'] as any : null;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const max: any = !isNullOrUndefined(mapObject.baseMapRectBounds) ? mapObject.baseMapRectBounds['max'] as any : null;
-    const zoomFactor: number = animate ? 1 : mapObject.mapScaleValue;
-    if (isNullOrUndefined(mapObject.currentShapeDataLength) && !isNullOrUndefined(layer.shapeData)) {
-        mapObject.currentShapeDataLength = !isNullOrUndefined(layer.shapeData['features'])
-            ? layer.shapeData['features'].length : !isNullOrUndefined(layer.shapeData['geometries']) ? layer.shapeData['geometries'].length : 0;
-    }
-    const size: Rect = (mapObject.totalRect && mapObject.legendSettings.visible) ? mapObject.totalRect : mapObject.mapAreaRect;
-    const availSize: Size = mapObject.availableSize;
-    let x: number; let y: number;
-    if (!isNullOrUndefined(min) && !isNullOrUndefined(max)) {
-        let mapWidth: number = Math.abs(max['x'] - min['x']);
-        let mapHeight: number = Math.abs(min['y'] - max['y']);
-        const factor: number = animate ? 1 : mapObject.markerZoomFactor === 1 ? mapObject.mapScaleValue : zoomFactorValue;
-        center = mapObject.zoomSettings.shouldZoomInitially
-            && mapObject.markerZoomedState && !mapObject.zoomPersistence ? mapObject.markerZoomCenterPoint :
-            mapObject.centerPosition;
-        if (((!isNullOrUndefined(centerLongitude) && centerLongitude !== 0) && (!isNullOrUndefined(centerLatitude) && centerLatitude !== 0)) || checkMethodeZoom) {
-            const leftPosition: number = (((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) + mapObject.mapAreaRect.x) / factor;
-            const topPosition: number = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
-            const point: Point = checkMethodeZoom ? calculateCenterFromPixel(mapObject, layer) :
-                convertGeoToPoint(
-                    centerLatitude, centerLongitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType
-                || mapObject.isMarkerZoomCompleted) {
-                x = -point.x + leftPosition;
-                y = -point.y + topPosition;
-                scaleFactor = zoomFactor;
-            } else {
-                if (Math.floor(mapObject.scale) !== 1 && mapObject.zoomSettings.shouldZoomInitially || (mapObject.zoomNotApplied)) {
-                    x = -point.x + leftPosition;
-                    y = -point.y + topPosition;
-                } else {
-                    if (mapObject.zoomSettings.shouldZoomInitially || mapObject.zoomNotApplied) {
-                        x = -point.x + leftPosition;
-                        y = -point.y + topPosition;
-                        scaleFactor = zoomFactor;
-                    } else {
-                        x = mapObject.zoomTranslatePoint.x;
-                        y = mapObject.zoomTranslatePoint.y;
-                    }
-                }
-                scaleFactor = mapObject.mapScaleValue;
-            }
-        } else {
-            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
-                if (mapHeight === 0 || mapWidth === 0 || mapHeight === mapWidth) {
-                    mapWidth = size.width / 2;
-                    mapHeight = size.height;
-                }
-                scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
-                mapWidth *= scaleFactor;
-                mapHeight *= scaleFactor;
-                const widthDiff: number = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
-                x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))) - widthDiff;
-                y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
-                mapObject.previousTranslate = new Point(x, y);
-            } else {
-                if (!mapObject.zoomSettings.shouldZoomInitially && mapObject.markerZoomFactor === 1 && mapObject.mapScaleValue === 1) {
-                    scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                    mapHeight *= scaleFactor; mapWidth *= scaleFactor;
-                    y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
-                    x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
-                } else {
-                    scaleFactor = mapObject.mapScaleValue < 1 ? mapObject.mapScaleValue + 1 : mapObject.mapScaleValue;
-                    mapObject.mapScaleValue = mapObject.zoomSettings.enable && mapObject.mapScaleValue !== 1 ? mapObject.mapScaleValue : 1;
-                    if ((mapObject.currentShapeDataLength !== (!isNullOrUndefined(layer.shapeData['features'])
-                        ? layer.shapeData['features'].length : layer.shapeData['geometries'].length)) && layer.type !== 'SubLayer') {
-                        const scale: number = parseFloat(Math.min(size.height / mapHeight, size.width / mapWidth).toFixed(2));
-                        mapHeight *= scale; mapWidth *= scale;
-                        y = size.y + ((-(min['y'])) + ((size.height / 2)
-                            - (mapHeight / 2)));
-                        scaleFactor = scale;
-                        x = size.x + ((-(min['x']))
-                            + ((size.width / 2) - (mapWidth / 2)));
-                    } else if ((mapObject.availableSize.height !== mapObject.heightBeforeRefresh || mapObject.widthBeforeRefresh !== mapObject.availableSize.width)
-                               && !isNullOrUndefined(mapObject.translatePoint) && !isNullOrUndefined(mapObject.previousTranslate)) {
-                        const cscaleFactor: number = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                        let cmapWidth: number = mapWidth; cmapWidth *= cscaleFactor;
-                        let cmapHeight: number = mapHeight; cmapHeight *= cscaleFactor;
-                        const x1: number = size.x + ((-(min['x'])) + ((size.width / 2) - (cmapWidth / 2)));
-                        const y1: number = size.y + ((-(min['y'])) + ((size.height / 2) - (cmapHeight / 2)));
-                        const xdiff: number = (mapObject.translatePoint.x - mapObject.previousTranslate.x) / (mapObject.widthBeforeRefresh);
-                        const ydiff: number = (mapObject.translatePoint.y - mapObject.previousTranslate.y) / (mapObject.heightBeforeRefresh);
-                        const actxdiff: number = xdiff * (mapObject.availableSize.width);
-                        const actydiff: number = ydiff * (mapObject.availableSize.height);
-                        x = x1 + actxdiff;
-                        y = y1 + actydiff;
-                        mapObject.previousTranslate = new Point(x1, y1);
-                        mapObject.zoomTranslatePoint.x = x;
-                        mapObject.zoomTranslatePoint.y = y;
-                    } else {
-                        if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1
-                            || mapObject.mapScaleValue <= 1.05) && !mapObject.zoomModule.isDragZoom) {
-                            scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
-                            scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
-                            mapWidth *= scaleFactor;
-                            x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
-                            mapHeight *= scaleFactor;
-                            y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));
-                        } else {
-                            x = mapObject.zoomTranslatePoint.x;
-                            y = mapObject.zoomTranslatePoint.y;
-                            scaleFactor = mapObject.scale;
-                        }
-                    }
-                }
-            }
-        }
-        if (!isNullOrUndefined(mapObject.translatePoint)) {
-            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
-                mapObject.translatePoint.x : x;
-            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
-                mapObject.translatePoint.y : y;
-        }
-    }
-    scaleFactor = (mapObject.enablePersistence) ? ((mapObject.mapScaleValue >= 1) ? mapObject.mapScaleValue : 1) : scaleFactor;
-    mapObject.widthBeforeRefresh = mapObject.availableSize.width;
-    mapObject.heightBeforeRefresh = mapObject.availableSize.height;
-    return { scale: scaleFactor, location: new Point(x, y) };
-}
-
-/**
- * @param {Maps} mapObject - Specifies the map object
- * @param {LayerSettings} layer - Specifies the layer
- * @param {boolean} animate - Specifies the boolean value
- * @returns {any} - Returns the object.
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getZoomTranslate(mapObject: Maps, layer: LayerSettings, animate?: boolean): any {
-    let zoomFactorValue: number = mapObject.zoomSettings.zoomFactor;
-    let scaleFactor: number;
-    const center: CenterPositionModel = mapObject.centerPosition;
-    let latitude: number = center.latitude;
-    let longitude: number = center.longitude;
-    const checkZoomMethod: boolean = !isNullOrUndefined(mapObject.centerLongOfGivenLocation) &&
-        !isNullOrUndefined(mapObject.centerLatOfGivenLocation) && mapObject.zoomNotApplied;
-    if (isNullOrUndefined(mapObject.previousCenterLatitude) &&
-        isNullOrUndefined(mapObject.previousCenterLongitude)) {
-        mapObject.previousCenterLatitude = mapObject.centerPosition.latitude;
-        mapObject.previousCenterLongitude = mapObject.centerPosition.longitude;
-    }
-    else if (mapObject.previousCenterLatitude !==
-        mapObject.centerPosition.latitude && mapObject.previousCenterLongitude !==
-        mapObject.centerPosition.longitude) {
-        mapObject.centerPositionChanged = true;
-        mapObject.previousCenterLatitude = mapObject.centerPosition.latitude;
-        mapObject.previousCenterLongitude = mapObject.centerPosition.longitude;
-    }
-    else {
-        mapObject.centerPositionChanged = false;
-    }
-    if (isNullOrUndefined(mapObject.mapScaleValue) || (zoomFactorValue > mapObject.mapScaleValue)) {
-        if (mapObject.isReset && mapObject.mapScaleValue === 1) {
-            // eslint-disable-next-line no-self-assign
-            mapObject.mapScaleValue = mapObject.mapScaleValue;
-        } else if (!isNullOrUndefined(mapObject.mapScaleValue) && mapObject.mapScaleValue <= mapObject.scale) {
-            mapObject.mapScaleValue = mapObject.scale;
-        } else {
-            mapObject.mapScaleValue = zoomFactorValue;
-        }
-    }
-    mapObject.mapScaleValue = mapObject.zoomSettings.zoomFactor !== 1 &&
-        mapObject.zoomSettings.zoomFactor ===
-        mapObject.mapScaleValue ? mapObject.zoomSettings.zoomFactor :
-        mapObject.zoomSettings.zoomFactor !== mapObject.mapScaleValue && !mapObject.centerPositionChanged ?
-            mapObject.mapScaleValue : mapObject.zoomSettings.zoomFactor;
-    if (mapObject.zoomSettings.shouldZoomInitially && !mapObject.isZoomByPosition) {
-        mapObject.mapScaleValue = zoomFactorValue = scaleFactor = ((mapObject.enablePersistence
-                                                                    || mapObject.zoomSettings.shouldZoomInitially) && mapObject.scale === 1)
-            ? mapObject.scale : (isNullOrUndefined(mapObject.markerZoomFactor)) ? mapObject.mapScaleValue : mapObject.markerZoomFactor;
-        zoomFactorValue = mapObject.mapScaleValue;
-        if (!isNullOrUndefined(mapObject.markerCenterLatitude) && !isNullOrUndefined(mapObject.markerCenterLongitude)) {
-            latitude = mapObject.markerCenterLatitude;
-            longitude = mapObject.markerCenterLongitude;
-        }
-    }
-    if (checkZoomMethod) {
-        mapObject.mapScaleValue = scaleFactor = zoomFactorValue = mapObject.scaleOfGivenLocation;
-    }
-    const zoomFactor: number = animate ? 1 : mapObject.mapScaleValue;
-    const size: Rect = mapObject.mapAreaRect; let x: number; let y: number;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const min: any = mapObject.baseMapRectBounds['min'] as any;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const max: any = mapObject.baseMapRectBounds['max'] as any;
-    const factor: number = animate ? 1 : mapObject.mapScaleValue;
-    const mapWidth: number = Math.abs(max['x'] - min['x']); const mapHeight: number = Math.abs(min['y'] - max['y']);
-    if (((!isNullOrUndefined(longitude) && longitude !== 0) && (!isNullOrUndefined(latitude) && latitude !== 0)) || checkZoomMethod) {
-        const topPosition: number = ((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) / factor;
-        const leftPosition: number = ((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) / factor;
-        const point: Point = checkZoomMethod ? calculateCenterFromPixel(mapObject, layer) :
-            convertGeoToPoint(
-                latitude, longitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-        if ((!isNullOrUndefined(mapObject.zoomTranslatePoint) || !isNullOrUndefined(mapObject.previousProjection)) &&
-             !mapObject.zoomNotApplied) {
-            if (mapObject.previousProjection !== mapObject.projectionType) {
-                x = -point.x + leftPosition;
-                y = -point.y + topPosition;
-            } else {
-                if (mapObject.isZoomByPosition) {
-                    mapObject.zoomTranslatePoint.x = -point.x + leftPosition;
-                    mapObject.zoomTranslatePoint.y = -point.y + topPosition;
-                }
-                x = mapObject.zoomTranslatePoint.x;
-                y = mapObject.zoomTranslatePoint.y;
-                zoomFactorValue = zoomFactor;
-            }
-        } else {
-            x = -point.x + leftPosition + mapObject.mapAreaRect.x / zoomFactor;
-            y = -point.y + topPosition + mapObject.mapAreaRect.y / zoomFactor;
-        }
-        if (!isNullOrUndefined(mapObject.translatePoint)) {
-            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
-                mapObject.translatePoint.y : y;
-            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
-                mapObject.translatePoint.x : x;
-        }
-        scaleFactor = zoomFactorValue !== 0 ? zoomFactorValue : 1;
-    } else {
-        let zoomFact: number = mapObject.zoomSettings.zoomFactor === 0 ? 1 : mapObject.zoomSettings.zoomFactor;
-        const maxZoomFact: number = mapObject.zoomSettings.maxZoom;
-        zoomFact = zoomFact > maxZoomFact ? maxZoomFact : zoomFact;
-        scaleFactor = zoomFact;
-        const mapScale: number = mapObject.mapScaleValue === 0 ? 1 : mapObject.mapScaleValue > maxZoomFact
-            ? maxZoomFact : mapObject.mapScaleValue;
-        let leftPosition: number = (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))));
-        let topPosition: number = (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))));
-        if (!isNullOrUndefined(mapObject.zoomTranslatePoint) || !isNullOrUndefined(mapObject.previousProjection)) {
-            if (mapObject.previousProjection !== mapObject.projectionType) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const previousPositions: any[] = [];
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                let previousPoints: any = { x: leftPosition, y: topPosition };
-                previousPositions.push(previousPoints);
-                for (let i: number = 1; i < maxZoomFact; i++) {
-                    const translatePointX: number = previousPositions[i - 1]['x'] - (((size.width / (i)) - (size.width / (i + 1))) / 2);
-                    const translatePointY: number = previousPositions[i - 1]['y'] - (((size.height / (i)) - (size.height / (i + 1))) / 2);
-                    previousPoints = { x: translatePointX, y: translatePointY };
-                    previousPositions.push(previousPoints);
-                }
-                leftPosition = previousPositions[zoomFact - 1]['x'];
-                topPosition = previousPositions[zoomFact - 1]['y'];
-            } else {
-                leftPosition = mapObject.zoomTranslatePoint.x;
-                topPosition = mapObject.zoomTranslatePoint.y;
-                if (zoomFact !== mapScale) {
-                    scaleFactor = mapScale;
-                }
-            }
-        }
-        if (!isNullOrUndefined(mapObject.translatePoint)) {
-            x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
-                mapObject.translatePoint.x : leftPosition;
-            y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
-                mapObject.translatePoint.y : topPosition;
-        }
-    }
-    scaleFactor = (mapObject.enablePersistence) ? (mapObject.mapScaleValue === 0 ? 1 : mapObject.mapScaleValue) : scaleFactor;
-    mapObject.widthBeforeRefresh = mapObject.availableSize.width;
-    mapObject.heightBeforeRefresh = mapObject.availableSize.height;
-    return { scale: animate ? 1 : scaleFactor, location: new Point(x, y) };
-}
-
-/**
- * To get the html element by specified id.
- *
- * @param {Maps} map - Specifies the instance of the maps
- * @returns {void}
- * @private
- */
-export function fixInitialScaleForTile(map: Maps): void {
-    map.tileZoomScale = map.tileZoomLevel = Math.floor(map.availableSize.height / 512) + 1;
-    const padding: number = 20;
-    const totalSize: number = Math.pow(2, map.tileZoomLevel) * 256;
-    map.tileTranslatePoint.x = (map.availableSize.width / 2) - (totalSize / 2);
-    map.tileTranslatePoint.y = (map.availableSize.height / 2) - (totalSize / 2) + padding;
-    map.previousTileWidth = map.availableSize.width;
-    map.previousTileHeight = map.availableSize.height;
-}
-
-/**
- * To get the html element by specified id.
- *
- * @param {string} id - Specifies the id
- * @returns {Element} - Returns the element
- * @private
- */
-export function getElementByID(id: string): Element {
-    return document.getElementById(id);
-}
-
-/**
- * Function to return the number value for the string value.
- *
- * @param {string | number} marginValue - Specifies the margin value.
- * @returns {number} - Returns the number value.
- * @private
- */
-export function getProcessedMarginValue(marginValue: string | number): number {
-    return typeof marginValue === 'string' ? parseFloat(marginValue) : marginValue;
-}
-
-/**
- * To apply internalization.
- *
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {number} value - Specifies the value
- * @returns {string} - Returns the string
- * @private
- */
-export function Internalize(maps: Maps, value: number): string {
-    maps.formatFunction =
-        maps.intl.getNumberFormat({ format: maps.format, useGrouping: maps.useGroupingSeparator });
-    return maps.formatFunction(value);
-}
-
-/**
- * Function to compile the template function for maps.
- *
- * @param {string | Function} template - Specifies the template
- * @param {Maps} maps - Specifies the Maps instance.
- * @returns {any} - Returns the template function
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getTemplateFunction(template: string | Function, maps: Maps): any {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let templateFn: any = null;
-    try {
-        if (typeof template !== 'function' && document.querySelectorAll(template).length) {
-            templateFn = templateComplier(document.querySelector(template).innerHTML.trim());
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } else if ((maps as any).isVue || (maps as any).isVue3) {
-            templateFn = templateComplier(template);
-        } else if (typeof template === 'function') {
-            templateFn = templateComplier(template);
-        }
-    } catch (e) {
-        templateFn = templateComplier(template);
-    }
-    return templateFn;
-}
-/**
- * Function to get element from id.
- *
- * @param {string} id - Specifies the id
- * @returns {Element} - Returns the element
- * @private
- */
-export function getElement(id: string): Element {
-    return document.getElementById(id);
-}
-
-/**
- * Function to get shape data using target id.
- *
- * @param {string} targetId - Specifies the target id
- * @param {Maps} map - Specifies the instance of the maps
- * @returns {object} - Returns the object
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getShapeData(targetId: string, map: Maps): { shapeData: any, data: any } {
-    const layerIndex: number = parseInt(targetId.split('_LayerIndex_')[1].split('_')[0], 10);
-    const shapeIndex: number = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
-    const layer: LayerSettings = map.layersCollection[layerIndex as number] as LayerSettings;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const shapeData: any = layer.layerData[shapeIndex as number]['property'];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let data: any;
-    if (layer.dataSource) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        data = layer.dataSource[checkShapeDataFields(<any[]>layer.dataSource, shapeData, layer.shapeDataPath, layer.shapePropertyPath,
-                                                     layer)];
-    }
-    return { shapeData: shapeData, data: data };
-}
-/**
- * Function to trigger shapeSelected event.
- *
- * @param {string} targetId - Specifies the target id
- * @param {SelectionSettingsModel} selection - Specifies the selection
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {string} eventName - Specifies the event name
- * @returns {IShapeSelectedEventArgs} - Returns the event args
- * @private
- */
-export function triggerShapeEvent(
-    targetId: string, selection: SelectionSettingsModel, maps: Maps, eventName: string
-): IShapeSelectedEventArgs {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const shape: { shapeData: any, data: any } = getShapeData(targetId, maps);
-    const border: BorderModel = {
-        color: selection.border.color, opacity: selection.border.opacity,
-        width: selection.border.width
-    };
-    const eventArgs: IShapeSelectedEventArgs = (selection.enableMultiSelect) ? {
-        cancel: false,
-        name: eventName,
-        fill: selection.fill,
-        opacity: selection.opacity,
-        border: border,
-        shapeData: shape.shapeData,
-        data: shape.data,
-        target: targetId,
-        maps: maps,
-        shapeDataCollection: maps.shapeSelectionItem
-    } : {
-        cancel: false,
-        name: eventName,
-        fill: selection.fill,
-        opacity: selection.opacity,
-        border: border,
-        shapeData: shape.shapeData,
-        data: shape.data,
-        target: targetId,
-        maps: maps
-    };
-    maps.trigger(eventName, eventArgs, () => {
-        eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? eventArgs.opacity : eventArgs.border.opacity;
-    });
-    return eventArgs;
-}
-
-/**
- * Function to get elements using class name.
- *
- * @param {string} className - Specifies the class name
- * @returns {HTMLCollectionOf<Element>} - Returns the collection
- * @private
- */
-export function getElementsByClassName(className: string): HTMLCollectionOf<Element> {
-    return document.getElementsByClassName(className);
-}
-/**
- * Function to get elements using querySelectorAll
- */
-// export function querySelectorAll(args: string, element: Element): ArrayOf<Element> {
-//     return element.querySelectorAll('.' + args);
-// }
-/**
- * Function to get elements using querySelector.
- *
- * @param {string} args - Specifies the args
- * @param {string} elementSelector - Specifies the element selector
- * @returns {Element} - Returns the element
- * @private
- */
-export function querySelector(args: string, elementSelector: string): Element {
-    let targetEle: Element = null;
-    targetEle = document.querySelector('#' + args);
-    return targetEle;
-}
-/**
- * Function to get the element for selection and highlight using public method.
- *
- * @param {number} layerIndex - Specifies the layer index
- * @param {string} name - Specifies the layer name
- * @param {boolean} enable - Specifies the boolean value
- * @param {Maps} map - Specifies the instance of the maps
- * @returns {Element} - Returns the element
- * @private
- */
-export function getTargetElement(layerIndex: number, name: string, enable: boolean, map: Maps): Element {
-    let targetId: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const shapeData: any[] = <any[]>map.layers[layerIndex as number].shapeData['features'];
-    for (let i: number = 0; i < shapeData.length; i++) {
-        if (shapeData[i as number]['properties'].name === name) {
-            targetId = map.element.id + '_' + 'LayerIndex_' + layerIndex + '_shapeIndex_' + i + '_dataIndex_undefined';
-            break;
-        }
-    }
-    const targetEle: Element = getElement(targetId);
-    return targetEle;
-}
-/**
- * Function to create style element for highlight and selection.
- *
- * @param {string} id - Specifies the id
- * @param {string} className - Specifies the class name
- * @param {IShapeSelectedEventArgs | any} eventArgs - Specifies the event args
- * @returns {Element} - Returns the element
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function createStyle(id: string, className: string, eventArgs: IShapeSelectedEventArgs | any): Element {
-    const styleEle: HTMLElement = createElement('style', {
-        id: id
-    });
-    styleEle.innerText = '.' + className + '{fill:'
-            + eventArgs['fill'] + ';' + 'fill-opacity:' + (!isNullOrUndefined(eventArgs['opacity']) ? (eventArgs['opacity']).toString() : '1') + ';' +
-            'stroke-opacity:' + (!isNullOrUndefined(eventArgs['border']['opacity']) ? (eventArgs['border']['opacity']).toString() : '1') + ';' +
-            'stroke-width:' + (eventArgs['border']['width']).toString() + ';' +
-            'stroke:' + eventArgs['border']['color'] + ';' + '}';
-    return styleEle;
-}
-/**
- * Function to customize the style for highlight and selection.
- *
- * @param {string} id - Specifies the id
- * @param {string} className - Specifies the class name
- * @param {IShapeSelectedEventArgs | any} eventArgs - Specifies the event args
- * @returns {void}
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function customizeStyle(id: string, className: string, eventArgs: IShapeSelectedEventArgs | any): void {
-    const styleEle: Element = getElement(id);
-    if (!isNullOrUndefined(styleEle)) {
-        (styleEle as HTMLElement).innerText = '.' + className + '{fill:'
-            + eventArgs['fill'] + ';' + 'fill-opacity:' + (!isNullOrUndefined(eventArgs['opacity']) ? (eventArgs['opacity']).toString() : '1') + ';' +
-            'stroke-width:' + (eventArgs['border']['width']).toString() + ';' +
-            'stroke-opacity:' + (!isNullOrUndefined(eventArgs['border']['opacity']) ? (eventArgs['border']['opacity']).toString() : '1') + ';' +
-            'stroke:' + eventArgs['border']['color'] + '}';
-    }
-}
-
-/**
- * Function to trigger itemSelection event for legend selection and public method.
- *
- * @param {SelectionSettingsModel} selectionSettings - Specifies the selection settings
- * @param {Maps} map - Specifies the instance of the maps
- * @param {Element} targetElement - Specifies the target element
- * @param {object} shapeData - Specifies the shape data
- * @param {object} data - Specifies the data
- * @returns {void}
- * @private
- */
-export function triggerItemSelectionEvent(selectionSettings: SelectionSettingsModel, map: Maps, targetElement: Element,
-                                          shapeData: object, data: object): void {
-    const border: BorderModel = {
-        color: selectionSettings.border.color,
-        width: selectionSettings.border.width / map.scale,
-        opacity: selectionSettings.border.opacity
-    };
-    const eventArgs: ISelectionEventArgs = {
-        opacity: selectionSettings.opacity,
-        fill: selectionSettings.fill,
-        border: border,
-        name: itemSelection,
-        target: targetElement.id,
-        cancel: false,
-        shapeData: shapeData,
-        data: data,
-        maps: map
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    map.trigger('itemSelection', eventArgs, (observedArgs: ISelectionEventArgs) => {
-        eventArgs.border.opacity = isNullOrUndefined(selectionSettings.border.opacity) ? selectionSettings.opacity :
-            selectionSettings.border.opacity;
-        map.shapeSelectionItem.push(eventArgs.shapeData);
-        if (!getElement('ShapeselectionMap')) {
-            document.body.appendChild(createStyle('ShapeselectionMap',
-                                                  'ShapeselectionMapStyle', eventArgs));
-        } else {
-            customizeStyle('ShapeselectionMap', 'ShapeselectionMapStyle', eventArgs);
-        }
-    });
-}
-
-/**
- * Function to remove class from element.
- *
- * @param {Element} element - Specifies the element
- * @returns {void}
- * @private
- */
-export function removeClass(element: Element): void {
-    element.removeAttribute('class');
-}
-/**
- * Animation Effect Calculation End
- *
- * @param {Element} element - Specifies the element
- * @param {number} delay - Specifies the delay
- * @param {number} duration - Specifies the duration
- * @param {MapLocation} point - Specifies the location
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {string} ele - Specifies the element
- * @param {number} radius - Specifies the radius
- * @returns {void}
- * @private
- */
-export function elementAnimate(
-    element: Element, delay: number, duration: number, point: MapLocation, maps: Maps,
-    ele?: string, radius: number = 0
-): void {
-    const centerX: number = point.x;
-    const centerY: number = point.y;
-    let height: number = 0;
-    let transform: string = element.getAttribute('transform') || '';
-    new Animation({}).animate(<HTMLElement>element, {
-        duration: (duration === 0 && animationMode === 'Enable') ? 1000 : duration,
-        delay: delay,
-        progress: (args: AnimationOptions): void => {
-            if ((args.timeStamp > args.delay) && !maps.zoomModule.isPanningInProgress) {
-                if (maps.isTileMap && height === 0) {
-                    const layerGroupElement: HTMLElement = document.querySelector('.GroupElement') as HTMLElement;
-                    if (!isNullOrUndefined(layerGroupElement)) {
-                        layerGroupElement.style.display = 'block';
-                    }
-                }
-                height = ((args.timeStamp - args.delay) / args.duration);
-                element.setAttribute('transform', 'translate( ' + (centerX - (radius * height)) + ' ' + (centerY - (radius * height)) +
-                    ' ) scale(' + height + ')');
-            } else {
-                if (maps.zoomModule.isPanningInProgress) {
-                    transform = element.getAttribute('transform');
-                }
-            }
-        },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        end: (model: AnimationOptions) => {
-            if (!maps.zoomModule.isPanningInProgress) {
-                element.setAttribute('transform', transform);
-            }
-            maps.zoomModule.isPanningInProgress = false;
-            if (!ele) {
-                return;
-            }
-            const event: IAnimationCompleteEventArgs = {
-                cancel: false, name: animationComplete, element: ele, maps: maps
-            };
-            maps.trigger(animationComplete, event);
-        }
-    });
-}
-
-/**
- * @param {string} id - Specifies the id
- * @returns {void}
- * @private
- */
-export function timeout(id: string): void {
-    removeElement(id);
-}
-
-/**
- * @param {string} text - Specifies the text
- * @param {string} size - Specifies the size
- * @param {number} x - Specifies the x value
- * @param {number} y - Specifies the y value
- * @param {number} areaWidth - Specifies the area width
- * @param {number} areaHeight - Specifies the area height
- * @param {string} id - Specifies the id
- * @param {Element} element - Specifies the element
- * @param {boolean} isTouch - Specifies the boolean value
- * @returns {void}
- * @private
- */
-export function showTooltip(
-    text: string, size: string, x: number, y: number, areaWidth: number, areaHeight: number, id: string, element: Element,
-    isTouch?: boolean
-): void {
-    const location: MapLocation = getMousePosition(x, y, element);
-    if (!isNullOrUndefined(location)) {
-        x = location.x;
-        y = location.y;
-    }
-    let tooltip: HTMLElement = document.getElementById(id);
-    let width: number = measureText(text, {
-        fontFamily: 'Segoe UI', size: '8px',
-        fontStyle: 'Normal', fontWeight: 'Regular'
-    }).width;
-    const str: string[] = text.split(' ');
-    let demo: number = str[0].length;
-    for (let i: number = 1; i < str.length; i++) {
-        if (demo < str[i as number].length) {
-            demo = (str[i as number]).length;
-        }
-    }
-    if (!tooltip) {
-        tooltip = createElement('div', {
-            id: id
-        });
-        tooltip.style.cssText = 'background-color: rgb(255, 255, 255) !important; color:black !important; ' +
-                                'position:absolute;border:1px solid rgb(0, 0, 0); padding-left:5px;' +
-                                'font-size:12px; font-family: "Segoe UI"; text-align:center';
-    }
-    if (x < (areaWidth - width)) {
-        // eslint-disable-next-line no-self-assign
-        x = x;
-    } else if (x > (areaWidth - width) && x < areaWidth - (demo * 8)) {
-        width = (areaWidth - x);
-    } else if (x >= areaWidth - demo * 8) {
-        if (x > width) {
-            x = x - width;
-        } else {
-            width = x;
-            x = 0;
-        }
-    }
-    const size1: string[] = size.split('px');
-    wordWrap(tooltip, text, x, y, size1, width, areaWidth, element);
-    const height: number = tooltip.clientHeight;
-    if ((height + parseInt(size1[0], 10) * 2) > areaHeight) {
-        width = x;
-        x = 0;
-    }
-    wordWrap(tooltip, text, x, y, size1, width, areaWidth, element);
-    if (isTouch) {
-        setTimeout(timeout, 5000, id);
-    }
-}
-
-/**
- * @param {HTMLElement} tooltip - Specifies the tooltip element
- * @param {string} text - Specifies the text
- * @param {number} x - Specifies the x value
- * @param {number} y - Specifies the y value
- * @param {string[]} size1 - Specifies the size
- * @param {number} width - Specifies the width
- * @param {number} areaWidth - Specifies the area width
- * @param {Element} element - Specifies the element
- * @returns {void}
- * @private
- */
-export function wordWrap(
-    tooltip: HTMLElement, text: string, x: number, y: number, size1: string[], width: number,
-    areaWidth: number, element: Element
-): void {
-    tooltip.innerText = text;
-    tooltip.style.top = tooltip.id.indexOf('_Legend') !== -1 ?
-        (parseInt(size1[0], 10) + y).toString() + 'px' : (parseInt(size1[0], 10) * 2).toString() + 'px';
-    tooltip.style.left = (x).toString() + 'px';
-    tooltip.style.width = width.toString() + 'px';
-    tooltip.style.maxWidth = (areaWidth).toString() + 'px';
-    tooltip.style.wordWrap = 'break-word';
-    element.appendChild(tooltip);
-}
-// /**
-//  *
-//  * @param touchList
-//  * @param e
-//  * @param touches
-//  */
-// export function addTouchPointer(touchList: ITouches[], e: PointerEvent, touches: TouchList): ITouches[] {
-//     if (touches) {
-//         touchList = [];
-//         for (let i: number = 0, length: number = touches.length; i < length; i++) {
-//             touchList.push({ pageX: touches[i as number].clientX, pageY: touches[i as number].clientY, pointerId: null });
-//         }
-//     } else {
-//         touchList = touchList ? touchList : [];
-//         if (touchList.length === 0) {
-//             touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });
-//         } else {
-//             for (let i: number = 0, length: number = touchList.length; i < length; i++) {
-//                 if (touchList[i as number].pointerId === e.pointerId) {
-//                     touchList[i as number] = { pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId };
-//                 } else {
-//                     touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });
-//                 }
-//             }
-//         }
-//     }
-//     return touchList;
-// }
-
-/**
- * @param {string} id - Specifies the id
- * @param {string} text - Specifies the text
- * @param {number} top - Specifies the top
- * @param {number} left - Specifies the left
- * @param {ZoomToolbarTooltipSettingsModel} settings - Specifies the tooltip settings.
- * @returns {void}
- * @private
- */
-export function createTooltip(id: string, text: string, top: number, left: number, settings: ZoomToolbarTooltipSettingsModel): void {
-    let tooltip: HTMLElement = getElement(id) as HTMLElement;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const borderColor: any = getHexColor(settings.borderColor);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const fontColor: any = getHexColor(settings.fontColor);
-    const style: string = 'top:' + top.toString() + 'px;' +
-        'left:' + left.toString() + 'px;' +
-        'color:' + (fontColor ? 'rgba(' + fontColor.r + ',' + fontColor.g + ',' + fontColor.b + ',' + settings.fontOpacity + ')'
-        : settings.fontColor) + ';' +
-        'background:' + settings.fill + ';' +
-        'z-index: 2;' +
-        'position:absolute;border:' + settings.borderWidth + 'px solid ' +
-        (borderColor ? 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + settings.borderOpacity + ')'
-            : settings.borderColor) + ';font-family:' + settings.fontFamily +
-            ';font-style:' + settings.fontStyle + ';font-weight:' + settings.fontWeight +
-        ';font-size:' + settings.fontSize + ';border-radius:' + settings.borderWidth + 'px;';
-    if (!tooltip && settings.visible) {
-        tooltip = createElement('div', {
-            id: id
-        });
-        tooltip.innerHTML = SanitizeHtmlHelper.sanitize('&nbsp;' + text + '&nbsp;');
-        tooltip.style.cssText = style;
-        document.body.appendChild(tooltip);
-    } else if (settings.visible) {
-        tooltip.innerHTML = SanitizeHtmlHelper.sanitize('&nbsp;' + text + '&nbsp;');
-        tooltip.style.cssText = style;
-    }
-}
-
-/**
- * @param {string} color - Specifies the color
- * @returns {any} - Returns the color in rgb
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getHexColor(color: string): any {
-    if (color.indexOf('#') !== -1 && color.toLowerCase().indexOf('rgb') === -1) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const colorArray: any = (/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i).exec(color);
-        return colorArray ? { r: parseInt(colorArray[1], 16), g: parseInt(colorArray[2], 16), b: parseInt(colorArray[3], 16) } : null;
-    } else if (color.toLowerCase().indexOf('rgb') !== -1) {
-        const colorArray: number[] = color.match(/\d+/g).map((a: string) => { return parseInt(a, 10); });
-        return colorArray ? { r: colorArray[0], g: colorArray[1], b: colorArray[2] } : null;
-    } else {
-        const divElment: HTMLElement = document.createElement('div');
-        divElment.style.color = color;
-        // eslint-disable-next-line @typescript-eslint/tslint/config
-        const colorArray: number[] = window.getComputedStyle(document.body.appendChild(divElment)).color.match(/\d+/g).map((a) => { return parseInt(a, 10); });
-        document.body.removeChild(divElment);
-        return colorArray ? { r: colorArray[0], g: colorArray[1], b: colorArray[2] } : null;
-    }
-}
-
-/**
- * @param {Point} location - Specifies the location
- * @param {string} shape - Specifies the shape
- * @param {Size} size - Specifies the size
- * @param {string} url - Specifies the url
- * @param {PathOption} options - Specifies the options
- * @returns {Element} - Returns the element
- * @private
- */
-export function drawSymbol(location: Point, shape: string, size: Size, url: string, options: PathOption): Element {
-    const renderer: SvgRenderer = new SvgRenderer('');
-    const temp: IShapes = renderLegendShape(location, size, shape, options, url);
-    const htmlObject: Element = renderer['draw' + temp.functionName](temp.renderOption);
-    return htmlObject;
-}
-
-
-/**
- * @param {MapLocation} location - Specifies the location
- * @param {Size} size - Specifies the size
- * @param {string} shape - Specifies the shape
- * @param {PathOption} options - Specifies the path options
- * @param {string} url - Specifies the url
- * @returns {IShapes} - Returns the shapes
- * @private
- */
-export function renderLegendShape(location: MapLocation, size: Size, shape: string, options: PathOption, url: string): IShapes {
-    let renderPath: string;
-    let functionName: string = 'Path';
-    const shapeWidth: number = size.width;
-    const shapeHeight: number = size.height;
-    const shapeX: number = location.x;
-    const shapeY: number = location.y;
-    const x: number = location.x + (-shapeWidth / 2);
-    const y: number = location.y + (-shapeHeight / 2);
-    options['stroke'] = (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross') ? options['fill'] : options['stroke'];
-    options['stroke-width'] = (options['stroke-width'] === 0 && (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross')) ? 1 : options['stroke-width'];
-    switch (shape) {
-    case 'Circle':
-    case 'Bubble':
-        functionName = 'Ellipse';
-        merge(options, { 'rx': shapeWidth / 2, 'ry': shapeHeight / 2, 'cx': shapeX, 'cy': shapeY });
-        break;
-    case 'VerticalLine':
-        renderPath = 'M' + ' ' + shapeX + ' ' + (shapeY + (shapeHeight / 2)) + ' ' + 'L' + ' ' + shapeX + ' '
-            + (shapeY + (-shapeHeight / 2));
-        merge(options, { 'd': renderPath });
-        break;
-    case 'HorizontalLine':
-        renderPath = 'M' + ' ' + shapeX + ' ' + shapeY + ' ' + 'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' '
-            + shapeY;
-        merge(options, { 'd': renderPath });
-        break;
-    case 'Diamond':
-        renderPath = 'M' + ' ' + x + ' ' + shapeY + ' ' +
-            'L' + ' ' + shapeX + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
-            'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + shapeY + ' ' +
-            'L' + ' ' + shapeX + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
-            'L' + ' ' + x + ' ' + shapeY + ' z';
-        merge(options, { 'd': renderPath });
-        break;
-    case 'Rectangle':
-        renderPath = 'M' + ' ' + x + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
-            'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
-            'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
-            'L' + ' ' + x + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
-            'L' + ' ' + x + ' ' + (shapeY + (-shapeHeight / 2)) + ' z';
-        merge(options, { 'd': renderPath });
-        break;
-    case 'Triangle':
-        renderPath = 'M' + ' ' + x + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
-            'L' + ' ' + shapeX + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
-            'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
-            'L' + ' ' + x + ' ' + (shapeY + (shapeHeight / 2)) + ' z';
-        merge(options, { 'd': renderPath });
-        break;
-    case 'InvertedTriangle':
-        renderPath = 'M' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + (shapeY - (shapeHeight / 2)) + ' ' +
-            'L' + ' ' + shapeX + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
-            'L' + ' ' + (shapeX - (shapeWidth / 2)) + ' ' + (shapeY - (shapeHeight / 2)) + ' ' +
-            'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + (shapeY - (shapeHeight / 2)) + ' z';
-        merge(options, { 'd': renderPath });
-        break;
-    case 'Pentagon':
-        // eslint-disable-next-line no-case-declarations
-        const eq: number = 72; let xValue: number; let yValue: number;
-        for (let i: number = 0; i <= 5; i++) {
-            xValue = (shapeWidth / 2) * Math.cos((Math.PI / 180) * (i * eq));
-            yValue = (shapeWidth / 2) * Math.sin((Math.PI / 180) * (i * eq));
-            if (i === 0) {
-                renderPath = 'M' + ' ' + (shapeX + xValue) + ' ' + (shapeY + yValue) + ' ';
-            } else {
-                renderPath = renderPath.concat('L' + ' ' + (shapeX + xValue) + ' ' + (shapeY + yValue) + ' ');
-            }
-        }
-        renderPath = renderPath.concat('Z');
-        merge(options, { 'd': renderPath });
-        break;
-    case 'Star':
-        renderPath = 'M ' + (location.x + size.width / 3) + ' ' + (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2)
-            + ' ' + (location.y - size.height / 6) + ' L ' + (location.x + size.width / 2) + ' ' + (location.y - size.height / 6)
-            + ' L ' + (location.x - size.width / 3) + ' ' + (location.y + size.height / 2) + ' L ' + location.x + ' ' +
-            (location.y - size.height / 2) + ' L ' + (location.x + size.width / 3) + ' ' + (location.y + size.height / 2) + ' Z';
-        merge(options, { 'd': renderPath });
-        break;
-    case 'Cross':
-        renderPath = 'M' + ' ' + x + ' ' + shapeY + ' ' + 'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + shapeY + ' ' +
-            'M' + ' ' + shapeX + ' ' + (shapeY + (shapeHeight / 2)) + ' ' + 'L' + ' ' + shapeX + ' ' +
-            (shapeY + (-shapeHeight / 2));
-        merge(options, { 'd': renderPath });
-        break;
-    case 'Image':
-        functionName = 'Image';
-        merge(options, { 'href': url, 'height': shapeHeight, 'width': shapeWidth, x: x, y: y });
-        break;
-    }
-    return { renderOption: options, functionName: functionName };
-}
-/**
- * Animation Effect Calculation End
- *
- * @private
- */
-
-// export function markerTemplateAnimate(element: Element, delay: number, duration: number, point: MapLocation): void {
-//     let delta: number = 0;
-//     let top: string = (element as HTMLElement).style.top;
-//     let y: number = parseInt(top, 10);
-//     new Animation({}).animate(<HTMLElement>element, {
-//         duration: duration,
-//         delay: delay,
-//         progress: (args: AnimationOptions): void => {
-//             if (args.timeStamp > args.delay) {
-//                 delta = ((args.timeStamp - args.delay) / args.duration);
-//                 (element as HTMLElement).style.top = y - 100 + (delta * 100) + 'px';
-//             }
-//         },
-//         end: (model: AnimationOptions) => {
-//             (element as HTMLElement).style.top = top;
-//         }
-//     });
-// }
-
-/**
- * @param {HTMLElement} childElement - Specifies the child element
- * @param {HTMLElement} parentElement - Specifies the parent element
- * @returns {Size} - Returns the size
- * @private
- */
-export function getElementOffset(childElement: HTMLElement, parentElement: HTMLElement): Size {
-    parentElement.appendChild(childElement);
-    const width: number = childElement.offsetWidth;
-    const height: number = childElement.offsetHeight;
-    parentElement.removeChild(childElement);
-    return new Size(width, height);
-}
-
-/**
- * @param {Element} element - Specifies the element
- * @param {number} index - Specifies the element
- * @param {number} scale - Specifies the scale
- * @param {Maps} maps - Specifies the instance of the maps
- * @returns {void}
- * @private
- */
-export function changeBorderWidth(element: Element, index: number, scale: number, maps: Maps): void {
-    let childNode: HTMLElement;
-    for (let l: number = 0; l < element.childElementCount; l++) {
-        childNode = element.childNodes[l as number] as HTMLElement;
-        if (childNode.id.indexOf('_NavigationGroup') > -1) {
-            changeNavaigationLineWidth(childNode, index, scale, maps);
-        } else if (childNode.id.indexOf('_Polygons_Group') > -1) {
-            for (let i: number = 0; i < childNode.childElementCount; i++) {
-                // eslint-disable-next-line
-                const width: number = maps.layersCollection[index].polygonSettings.polygons[parseInt(childNode.children[i as number].id.split('_PolygonIndex_')[1])].borderWidth;
-                childNode.children[i as number].setAttribute('stroke-width', (width / scale).toString());
-            }
-        } else {
-            let currentStroke: number;
-            let value: number = 0;
-            const borderWidthValue: string = maps.layersCollection[index as number].shapeSettings.borderWidthValuePath;
-            const borderWidth: number = (<LayerSettingsModel>maps.layersCollection[index as number]).shapeSettings.border.width;
-            const circleRadius: number = (<LayerSettingsModel>maps.layersCollection[index as number]).shapeSettings.circleRadius;
-            if (maps.layersCollection[index as number].shapeSettings.borderWidthValuePath) {
-                value = checkShapeDataFields(
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    <any[]>maps.layersCollection[index as number].dataSource, maps.layersCollection[index as number].layerData[l as number]['property'],
-                    maps.layersCollection[index as number].shapeDataPath, maps.layersCollection[index as number].shapePropertyPath, maps.layersCollection[index as number]
-                );
-                if (value !== null) {
-                    if (maps.layersCollection[index as number].dataSource[value as number][borderWidthValue as string]) {
-                        currentStroke = maps.layersCollection[index as number].dataSource[value as number][borderWidthValue as string];
-                    } else {
-                        currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
-                    }
-                } else {
-                    currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
-                }
-            } else {
-                currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
-            }
-            childNode.setAttribute('stroke-width', (currentStroke / scale).toString());
-            if (element.id.indexOf('_Point') > -1 || element.id.indexOf('_MultiPoint') > -1) {
-                childNode.setAttribute('r', (circleRadius / scale).toString());
-            }
-        }
-    }
-}
-
-/**
- * @param {Element} element - Specifies the element
- * @param {number} index - Specifies the element
- * @param {number} scale - Specifies the scale
- * @param {Maps} maps - Specifies the instance of the maps
- * @returns {void}
- * @private
- */
-export function changeNavaigationLineWidth(element: Element, index: number, scale: number, maps: Maps): void {
-    let node: HTMLElement;
-    for (let m: number = 0; m < element.childElementCount; m++) {
-        node = element.childNodes[m as number] as HTMLElement;
-        if (node.tagName === 'path') {
-            const currentStroke: number = ((<LayerSettingsModel>maps.layersCollection[index as number])
-                .navigationLineSettings[parseFloat(node.id.split('_NavigationIndex_')[1].split('_')[0])].width);
-            node.setAttribute('stroke-width', (currentStroke / scale).toString());
-        }
-    }
-}
-
-// /** Pinch zoom helper methods */
-
-/**
- * @param {PointerEvent | TouchEvent} event - Specifies the pointer or touch event
- * @returns {ITouches[]} - Returns the target
- * @private
- */
-export function targetTouches(event: PointerEvent | TouchEvent): ITouches[] {
-    const targetTouches: ITouches[] = [];
-    const touches: TouchList = (<TouchEvent & PointerEvent>event).touches;
-    for (let i: number = 0; i < touches.length; i++) {
-        targetTouches.push({ pageX: touches[i as number].pageX, pageY: touches[i as number].pageY });
-    }
-    return targetTouches;
-}
-
-/**
- * @param {ITouches[]} startTouches - Specifies the start touches
- * @param {ITouches[]} endTouches - Specifies the end touches
- * @returns {number} - Returns the number
- * @private
- */
-export function calculateScale(startTouches: ITouches[], endTouches: ITouches[]): number {
-    const startDistance: number = getDistance(startTouches[0], startTouches[1]);
-    const endDistance: number = getDistance(endTouches[0], endTouches[1]);
-    return (endDistance / startDistance);
-}
-
-/**
- * @param {ITouches} a - Specifies the a value
- * @param {ITouches} b - Specifies the b value
- * @returns {number} - Returns the number
- * @private
- */
-export function getDistance(a: ITouches, b: ITouches): number {
-    const x: number = a.pageX - b.pageX;
-    const y: number = a.pageY - b.pageY;
-    return Math.sqrt(x * x + y * y);
-}
-
-/**
- * @param {ITouches[]} touches - Specifies the touches
- * @param {Maps} maps - Specifies the instance of the maps
- * @returns {any[]} - Returns the object
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getTouches(touches: ITouches[], maps: Maps): any[] {
-    const rect: ClientRect = maps.element.getBoundingClientRect();
-    const posTop: number = rect.top + document.defaultView.pageXOffset;
-    const posLeft: number = rect.left + document.defaultView.pageYOffset;
-    return Array.prototype.slice.call(touches).map((touch: ITouches) => {
-        return {
-            x: touch.pageX - posLeft,
-            y: touch.pageY - posTop
-        };
-    });
-}
-
-/**
- * @param {any[]} touches - Specifies the touches
- * @returns {Point} - Returns the point
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getTouchCenter(touches: any[]): Point {
-    return {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        x: touches.map((e: any) => { return e['x']; }).reduce(sum) / touches.length,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        y: touches.map((e: any) => { return e['y']; }).reduce(sum) / touches.length
-    };
-}
-
-/**
- * @param {number} a - Specifies a value
- * @param {number} b - Specifies b value
- * @returns {number} - Returns the sum of a and b
- * @private
- */
-export function sum(a: number, b: number): number {
-    return a + b;
-}
-
-/**
- * Animation Effect Calculation End.
- *
- * @param {Element} element - Specifies the element.
- * @param {number} delay - Specifies the delay.
- * @param {number} duration - Specifies the duration.
- * @param {MapLocation} point - Specifies the location.
- * @param {number} scale - Specifies the scale value.
- * @param {Size} size - Specifies the size.
- * @param {Maps} maps - Specifies the maps.
- * @returns {void}
- * @private
- */
-export function zoomAnimate(
-    element: Element, delay: number, duration: number, point: MapLocation, scale: number, size: Size,
-    maps: Maps
-): void {
-    let delta: number = 0;
-    const previousLocation: MapLocation = maps.previousPoint;
-    const preScale: number = maps.previousScale;
-    const diffScale: number = scale - preScale;
-    const currentLocation: MapLocation = new MapLocation(0, 0);
-    let currentScale: number = 1;
-    if (scale === preScale) {
-        element.setAttribute('transform', 'scale( ' + (scale) + ' ) translate( ' + point.x + ' ' + point.y + ' )');
-        return;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const slope: any = (previousLocation: MapLocation, point: MapLocation): number => {
-        if (previousLocation.x === point.x) {
-            return null;
-        }
-        return (point.y - previousLocation.y) / (point.x - previousLocation.x);
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const intercept: any = (point: MapLocation, slopeValue: number): number => {
-        if (slopeValue === null) {
-            return point.x;
-        }
-        return point.y - slopeValue * point.x;
-    };
-    const slopeFactor: number = slope(previousLocation, point);
-    const slopeIntersection: number = intercept(previousLocation, slopeFactor);
-    const horizontalDifference: number = point.x - previousLocation.x;
-    const verticalDifference: number = point.y - previousLocation.y;
-    animate(
-        <HTMLElement>element, delay, duration,
-        (args: AnimationOptions): void => {
-            if (args.timeStamp > args.delay) {
-                delta = ((args.timeStamp - args.delay) / args.duration);
-                currentScale = preScale + (delta * diffScale);
-                currentLocation.x = previousLocation.x + (delta * horizontalDifference) / (currentScale / scale);
-                if (slopeFactor == null) {
-                    currentLocation.y = previousLocation.y + (delta * verticalDifference);
-                } else {
-                    currentLocation.y = ((slopeFactor * currentLocation.x) + slopeIntersection);
-                }
-                args.element.setAttribute('transform', 'scale( ' + currentScale + ' ) ' +
-                    'translate( ' + currentLocation.x + ' ' + currentLocation.y + ' )');
-                maps.translatePoint = currentLocation;
-                maps.scale = currentScale;
-                maps.zoomModule.processTemplate(point.x, point.y, currentScale, maps);
-            }
-        },
-        () => {
-            maps.translatePoint = point;
-            maps.scale = scale;
-            element.setAttribute('transform', 'scale( ' + (scale) + ' ) translate( ' + point.x + ' ' + point.y + ' )');
-            maps.zoomModule.processTemplate(point.x, point.y, scale, maps);
-        }
-    );
-}
-/**
- * To process custom animation.
- *
- * @param {Element} element - Specifies the element
- * @param {number} delay - Specifies the delay
- * @param {number} duration - Specifies the duration
- * @param {Function} process - Specifies the process
- * @param {Function} end - Specifies the end
- * @returns {void}
- * @private
- */
-export function animate(element: Element, delay: number, duration: number, process: Function, end: Function): void {
-    let start: number = null;
-    // eslint-disable-next-line prefer-const
-    let clearAnimation: number;
-    const markerStyle: string = 'visibility:visible';
-    duration = animationMode === 'Disable' ? 0 : duration;
-    const startAnimation: FrameRequestCallback = (timestamp: number) => {
-        if (!start) { start = timestamp; }
-        const progress: number = timestamp - start;
-        if (progress < duration) {
-            process.call(this, { element: element, delay: 0, timeStamp: progress, duration: duration });
-            window.requestAnimationFrame(startAnimation);
-        } else {
-            window.cancelAnimationFrame(clearAnimation);
-            end.call(this, { element: element });
-            if (element.id.indexOf('Marker') > -1) {
-                const markerElement: Element = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
-                (markerElement as HTMLElement).style.cssText = markerStyle;
-            }
-        }
-    };
-    clearAnimation = window.requestAnimationFrame(startAnimation);
-}
-/**
- * Defines the options to get shape data file using Ajax request.
- */
-export class MapAjax {
-    /**
-     * Defines the data options for the Ajax.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    public dataOptions: string | any;
-    /**
-     * Defines type of the Ajax.
-     */
-    public type: string;
-    /**
-     * Defines whether the Ajax request is asynchronous or not.
-     */
-    public async: boolean;
-    /**
-     * Defines the type of the content in Ajax request.
-     */
-    public contentType: string;
-    /**
-     * Defines the data sent in the Ajax request.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    public sendData: string | any;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(options: string | any, type?: string, async?: boolean, contentType?: string, sendData?: string | any) {
-        this.dataOptions = options;
-        this.type = type || 'GET';
-        this.async = async || true;
-        this.contentType = contentType;
-        this.sendData = sendData;
-    }
-}
-
-/**
- * Animation Translate.
- *
- * @param {Element} element - Specifies the element
- * @param {number} delay - Specifies the delay
- * @param {number} duration - Specifies the duration
- * @param {MapLocation} point - Specifies the location
- * @returns {void}
- * @private
- */
-export function smoothTranslate(element: Element, delay: number, duration: number, point: MapLocation): void {
-    let delta: number = 0;
-    const transform: string[] = element.getAttribute('transform').split(' ');
-    if (transform.length === 2) { transform[2] = transform[1].split(')')[0]; transform[1] = transform[0].split('(')[1]; }
-    const previousLocation: MapLocation = new MapLocation(parseInt(transform[1], 10), parseInt(transform[2], 10));
-    const diffx: number = point.x - previousLocation.x;
-    const diffy: number = point.y - previousLocation.y;
-    const currentLocation: MapLocation = new MapLocation(0, 0);
-    animate(
-        <HTMLElement>element, delay, duration, (args: AnimationOptions): void => {
-            if (args.timeStamp > args.delay) {
-                delta = ((args.timeStamp - args.delay) / args.duration);
-                currentLocation.x = previousLocation.x + (delta * diffx);
-                currentLocation.y = previousLocation.y + (delta * diffy);
-                args.element.setAttribute('transform', 'translate( ' + currentLocation.x + ' ' + currentLocation.y + ' )');
-            }
-        },
-        () => {
-            element.setAttribute('transform', 'translate( ' + point.x + ' ' + point.y + ' )');
-        }
-    );
-}
-/**
- * To find compare should zoom factor with previous factor and current factor.
- *
- * @param {number} scaleFactor - Specifies the scale factor
- * @param {Maps} maps - Specifies the instance of the maps
- * @returns {void}
- * @private
- */
-export function compareZoomFactor(scaleFactor: number, maps: Maps): void {
-    const previous: number = isNullOrUndefined(maps.shouldZoomPreviousFactor) ?
-        null : maps.shouldZoomPreviousFactor;
-    const current: number = isNullOrUndefined(maps.shouldZoomCurrentFactor) ?
-        null : maps.shouldZoomCurrentFactor;
-    if (!isNullOrUndefined(current)) {
-        maps.shouldZoomCurrentFactor = null;
-        maps.shouldZoomPreviousFactor = null;
-    } else if (!isNullOrUndefined(previous)
-        && isNullOrUndefined(current)
-        && maps.shouldZoomPreviousFactor !== scaleFactor) {
-        maps.shouldZoomCurrentFactor = scaleFactor;
-    } else {
-        maps.shouldZoomPreviousFactor = scaleFactor;
-    }
-}
-/**
- * To find zoom level for the min and max latitude values.
- *
- * @param {number} minLat - Specifies the minimum latitude
- * @param {number} maxLat - Specifies the maximum latitude
- * @param {number} minLong - Specifies the minimum longitude
- * @param {number} maxLong - Specifies the maximum longitude
- * @param {number} mapWidth - Specifies the width of the maps
- * @param {number} mapHeight - Specifies the height of the maps
- * @param {Maps} maps - Specifies the instance of the maps
- * @param {boolean} isZoomToCoordinates - Checks for the zoom to coordinates
- * @returns {number} - Returns the scale factor
- * @private
- */
-export function calculateZoomLevel(minLat: number, maxLat: number, minLong: number, maxLong: number,
-                                   mapWidth: number, mapHeight: number, maps: Maps, isZoomToCoordinates: boolean): number {
-    let scaleFactor: number;
-    const maxZoomFact: number = maps.zoomSettings.maxZoom;
-    let applyMethodeZoom: number;
-    const maxLatSin: number = Math.sin(maxLat * Math.PI / 180);
-    const maxLatRad: number = Math.log((1 + maxLatSin) / (1 - maxLatSin)) / 2;
-    const maxLatValue: number = Math.max(Math.min(maxLatRad, Math.PI), -Math.PI) / 2;
-    const minLatSin: number = Math.sin(minLat * Math.PI / 180);
-    const minLatRad: number = Math.log((1 + minLatSin) / (1 - minLatSin)) / 2;
-    const minLatValue: number = Math.max(Math.min(minLatRad, Math.PI), -Math.PI) / 2;
-
-    if (maps.zoomNotApplied && !maps.isTileMap) {
-        const latiRatio: number = Math.abs((maps.baseMapBounds.latitude.max - maps.baseMapBounds.latitude.min) / (maxLat - minLat));
-        const longiRatio: number = Math.abs((maps.baseMapBounds.longitude.max - maps.baseMapBounds.longitude.min) / (maxLong - minLong));
-        applyMethodeZoom = isZoomToCoordinates ? (latiRatio + longiRatio) / 2 : Math.min(latiRatio, longiRatio);
-    }
-
-    const latRatio: number = (maxLatValue - minLatValue) / Math.PI;
-    const lngDiff: number = maxLong - minLong;
-    const lngRatio: number = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;
-    const WORLD_PX_HEIGHT: number = 256;
-    const WORLD_PX_WIDTH: number = 256;
-    const latZoom: number = (Math.log(mapHeight / WORLD_PX_HEIGHT / latRatio) / Math.LN2);
-    const lngZoom: number = (Math.log(mapWidth / WORLD_PX_WIDTH / lngRatio) / Math.LN2);
-    const result: number = (maps.zoomNotApplied && !maps.isTileMap) ? applyMethodeZoom :
-        isZoomToCoordinates && !maps.isTileMap ? (latZoom + lngZoom) / 2 : Math.min(latZoom, lngZoom);
-    scaleFactor = Math.min(result, maxZoomFact);
-    scaleFactor = maps.isTileMap || !maps.zoomNotApplied ? Math.floor(scaleFactor) : scaleFactor;
-    if (!maps.isTileMap) {
-        compareZoomFactor(scaleFactor, maps);
-    }
-    return scaleFactor;
-}
-
-/**
- * Method to get the result.
- *
- * @param {any} e - Specifies the any type value
- * @returns {any} - Returns the data value
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function processResult(e: any): any {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let dataValue: any;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const resultValue: any = !isNullOrUndefined(e['result']) ? e['result'] : e['actual'];
-    if (isNullOrUndefined(resultValue.length)) {
-        if (!isNullOrUndefined(resultValue['Items'])) {
-            dataValue = resultValue['Items'];
-        }
-    }
-    else {
-        dataValue = resultValue;
-    }
-    return dataValue;
-}