@syncfusion/ej2-maps 30.2.4 → 31.1.17

package/dist/ts/maps/layers/legend.ts

@@ -0,0 +1,2465 @@
+import { Maps } from '../../index';
+import {
+    LayerSettings, ColorMappingSettings, BorderModel, LegendPosition, FontModel, LegendSettingsModel,
+    click, ILegendRenderingEventArgs, legendRendering,
+    MarkerSettingsModel, MarkerSettings, LegendShape, LabelPosition, LabelIntersectAction
+} from '../index';
+import { LegendArrangement, LegendMode } from '../index';
+import {
+    Rect, measureText, PathOption, textTrim, drawBalloon,
+    removeClass, querySelector, maintainStyleClass, getValueFromObject, getTemplateFunction
+} from '../utils/helper';
+import { RectOption, Size, TextOption, Point, renderTextElement, drawSymbol, checkPropertyPath, getElement } from '../utils/helper';
+import { isNullOrUndefined, Browser, EventHandler, remove, extend } from '@syncfusion/ej2-base';
+import { SvgRenderer } from '@syncfusion/ej2-svg-base';
+import { LayerSettingsModel, HighlightSettingsModel, SelectionSettingsModel } from '../model/base-model';
+import { ShapeSettings } from '../model/base';
+import { Theme } from '../model/theme';
+/**
+ * Legend module is used to render legend for the maps
+ */
+export class Legend {
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public legendCollection: any[];
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public legendRenderingCollections: any[];
+    private translate: Point;
+    /**
+     * @private
+     */
+    public legendBorderRect: Rect = new Rect(0, 0, 0, 0);
+    /**
+     * @private
+     */
+    public initialMapAreaRect: Rect = new Rect(0, 0, 0, 0);
+    /**
+     * @private
+     */
+    public legendTotalRect: Rect = new Rect(0, 0, 0, 0);
+    private maps: Maps;
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public totalPages: any[] = [];
+    private page: number = 0;
+    /**
+     * @private
+     */
+    public currentPage: number = 0;
+    private legendItemRect: Rect = new Rect(0, 0, 0, 0);
+    private heightIncrement: number = 0;
+    private widthIncrement: number = 0;
+    private textMaxWidth: number = 0;
+    private arrowTimer: number;
+    /**
+     * @private
+     */
+    public legendGroup: Element;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private shapeHighlightCollection: any[] = [];
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public legendHighlightCollection: any[] = [];
+    /**
+     * @private
+     */
+    public shapePreviousColor: string[] = [];
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public selectedNonLegendShapes: any[] = [];
+    /**
+     * @private
+     */
+    public shapeToggled: boolean = true;
+    private legendLinearGradient: Element;
+    private currentLayer: LayerSettings;
+    private defsElement: Element;
+    /**
+     * @private
+     */
+    public legendElement: Element[] = null;
+    /**
+     * @private
+     */
+    public oldShapeElement: Element;
+    constructor(maps: Maps) {
+        this.maps = maps;
+        this.addEventListener();
+    }
+    /**
+     * To calculate legend bounds and draw the legend shape and text.
+     *
+     * @returns {void}
+     * @private
+     */
+    public renderLegend(): void {
+        this.legendRenderingCollections = [];
+        this.legendCollection = [];
+        this.totalPages = [];
+        this.widthIncrement = 0;
+        this.heightIncrement = 0;
+        this.defsElement = this.maps.renderer.createDefs();
+        this.maps.svgObject.appendChild(this.defsElement);
+        this.initialMapAreaRect = this.maps.mapAreaRect;
+        this.calculateLegendBounds();
+        this.drawLegend();
+    }
+
+    public calculateLegendBounds(): void {
+        const map: Maps = this.maps;
+        const legend: LegendSettingsModel = <LegendSettingsModel>map.legendSettings;
+        this.legendCollection = [];
+        const spacing: number = 10;
+        const leftPadding: number = 10; const topPadding: number = map.mapAreaRect.y;
+        this.legendRenderingCollections = [];
+        Array.prototype.forEach.call(map.layersCollection, (layer: LayerSettings, layerIndex: number) => {
+            if (!isNullOrUndefined(layer.shapeData)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const layerData: any[] = layer.shapeData['features'];
+                const dataPath: string = layer.shapeDataPath;
+                const propertyPath: string | string[] = layer.shapePropertyPath;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                let dataSource: any[] = layer.dataSource as any[];
+                let colorValuePath: string;
+                let colorMapping: ColorMappingSettings[];
+                if (legend.type === 'Layers' && layer.visible) {
+                    colorValuePath = layer.shapeSettings.colorValuePath;
+                    colorMapping = <ColorMappingSettings[]>layer.shapeSettings.colorMapping;
+                    this.getLegends(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
+                } else if (legend.type === 'Bubbles') {
+                    for (const bubble of layer.bubbleSettings) {
+                        if (bubble.visible) {
+                            colorValuePath = bubble.colorValuePath;
+                            colorMapping = <ColorMappingSettings[]>bubble.colorMapping;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            dataSource = bubble.dataSource as any[];
+                            this.getLegends(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
+                        }
+                    }
+                }
+            }
+            if (legend.type === 'Markers') {
+                this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
+            }
+        });
+        if (this.legendCollection.length > 0) {
+            for (let i: number = 0; i < this.legendCollection.length; i++) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const legendItem: any = this.legendCollection[i as number];
+                const eventArgs: ILegendRenderingEventArgs = {
+                    name: legendRendering, cancel: false, fill: legendItem['fill'], shape: legend.shape,
+                    shapeBorder: legend.shapeBorder,
+                    text: typeof legendItem['text'] === 'number' ? legendItem['text'].toString() : legendItem['text']
+                };
+                map.trigger('legendRendering', eventArgs);
+                legendItem['fill'] = eventArgs.fill;
+                legendItem['shape'] = eventArgs.shape;
+                legendItem['shapeBorder'] = eventArgs.shapeBorder;
+                legendItem['text'] = eventArgs.text;
+                if (eventArgs.cancel) {
+                    this.legendCollection.splice(i, 1);
+                    i--;
+                }
+            }
+        }
+        const defaultSize: number = 25;
+        const legendTitle: string = map.legendSettings.title.text;
+        const titleTextStyle: FontModel = map.legendSettings.titleStyle;
+        if (this.legendCollection.length > 0) {
+            const legendMode: LegendMode = legend.mode;
+            let shapeX: number = 0; let shapeY: number = 0;
+            let textX: number = 0; let textY: number = 0;
+            const shapePadding: number = legend.shapePadding;
+            const textPadding: number = 10;
+            const shapeHeight: number = legend.shapeHeight; const shapeWidth: number = legend.shapeWidth;
+            let shapeLocation: Point[] = []; let textLocation: Rect[] = [];
+            const position: LegendPosition = legend.position;
+            const labelAction: LabelIntersectAction = legend.labelDisplayMode;
+            const arrangement: LegendArrangement = (legend.orientation === 'None') ? ((position === 'Top' || position === 'Bottom')
+                ? 'Horizontal' : 'Vertical') : legend.orientation;
+            let legendWidth: number = (legend.width.length > 1) ? (legend.width.indexOf('%') > -1) ? (map.availableSize.width / 100)
+                * parseInt(legend.width, 10) : parseInt(legend.width, 10) : null;
+            let legendHeight: number = (legend.height.length > 1) ? (legend.height.indexOf('%') > -1) ? (map.availableSize.height / 100) *
+                parseInt(legend.height, 10) : parseInt(legend.height, 10) : null;
+            let legendItemStartX: number; let legendItemStartY: number;
+            let startX: number = 0; let startY: number = 0;
+            const legendtitleSize: Size = measureText(legendTitle, titleTextStyle);
+            if (legendMode === 'Interactive') {
+                const itemTextStyle: FontModel = legend.textStyle;
+                const legendLength: number = this.legendCollection.length;
+                const rectWidth: number = (arrangement === 'Horizontal') ? (isNullOrUndefined(legendWidth)) ? (map.mapAreaRect.width / legendLength) :
+                    (legendWidth / legendLength) : (isNullOrUndefined(legendWidth)) ? defaultSize : legendWidth;
+                const rectHeight: number = (arrangement === 'Horizontal') ? (isNullOrUndefined(legendHeight)) ? defaultSize : legendHeight :
+                    (isNullOrUndefined(legendHeight)) ? (map.mapAreaRect.height / legendLength) : (legendHeight / legendLength);
+                startX = 0; startY = legendtitleSize.height + spacing;
+                const position: LabelPosition = legend.labelPosition;
+                let textX: number = 0; let textY: number = 0; const textPadding: number = 10;
+                let itemStartX: number = 0; let itemStartY: number = 0;
+                let maxTextHeight: number = 0; let maxTextWidth: number = 0;
+                for (let i: number = 0; i < this.legendCollection.length; i++) {
+                    startX = (arrangement === 'Horizontal') ? (startX + rectWidth) : startX;
+                    startY = (arrangement === 'Horizontal') ? startY : (startY + rectHeight);
+                    let legendText: string = this.legendCollection[i as number]['text'];
+                    let itemTextSize: Size = new Size(0, 0);
+                    if (labelAction === 'None') {
+                        itemTextSize = measureText(legendText, itemTextStyle);
+                    } else if (labelAction === 'Trim') {
+                        legendText = textTrim((arrangement === 'Horizontal' ? rectWidth : rectHeight), legendText, itemTextStyle);
+                        itemTextSize = measureText(legendText, itemTextStyle);
+                    } else {
+                        legendText = '';
+                    }
+                    if (legend.position === 'Left' || legend.position === 'Right' || legend.position === 'Float') {
+                        for (let i: number = 0; i < this.legendCollection.length; i++) {
+                            const legendItem: object = this.legendCollection[i as number];
+                            const legendTextSize: Size = measureText(legendItem['text'], legend.textStyle);
+                            this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
+                        }
+                    }
+                    maxTextHeight = Math.max(maxTextHeight, itemTextSize.height);
+                    maxTextWidth = Math.max(maxTextWidth, itemTextSize.width);
+                    if (itemTextSize.width > 0 && itemTextSize.height > 0) {
+                        if (arrangement === 'Horizontal') {
+                            textX = startX + (rectWidth / 2);
+                            textY = (position === 'After') ? (startY + rectHeight + (itemTextSize.height / 2)) + textPadding :
+                                (startY - textPadding);
+                        } else {
+                            textX = (position === 'After') ? startX - (this.textMaxWidth / 2) - textPadding
+                                : (startX + rectWidth + this.textMaxWidth / 2) + textPadding;
+                            textY = startY + (rectHeight / 2) + (itemTextSize.height / 4);
+                        }
+                    }
+                    if (i === 0) {
+                        itemStartX = (arrangement === 'Horizontal') ? startX : (position === 'After') ?
+                            textX - (this.textMaxWidth / 2) : startX;
+                        itemStartY = (arrangement === 'Horizontal') ? (position === 'After') ? startY :
+                            textY - (itemTextSize.height / 2) : startY;
+                        if (this.legendCollection.length === 1) {
+                            legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
+                                (rectWidth + this.textMaxWidth + textPadding);
+                            legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding) :
+                                Math.abs((startY + rectHeight) - itemStartY);
+                        }
+                    } else if (i === this.legendCollection.length - 1) {
+                        legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
+                            (rectWidth + this.textMaxWidth + textPadding);
+                        legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding) :
+                            Math.abs((startY + rectHeight) - itemStartY);
+                    }
+                    this.legendRenderingCollections.push({
+                        fill: this.legendCollection[i as number]['fill'], x: startX, y: startY,
+                        width: rectWidth, height: rectHeight,
+                        text: legendText, textX: textX, textY: textY,
+                        textWidth: itemTextSize.width, textHeight: itemTextSize.height,
+                        shapeBorder: this.legendCollection[i as number]['shapeBorder']
+                    });
+                }
+                if (this.legendCollection.length === 1 ) {
+                    legendHeight = maxTextHeight + textPadding;
+                    legendWidth = rectWidth;
+                }
+                this.legendItemRect = { x: itemStartX, y: itemStartY, width: legendWidth, height: legendHeight };
+            } else {
+                legendWidth = (isNullOrUndefined(legendWidth)) ? map.mapAreaRect.width : legendWidth;
+                legendHeight = (isNullOrUndefined(legendHeight)) ? map.mapAreaRect.height : legendHeight;
+                let j: number = 0;
+                this.page = 0;
+                for (let i: number = 0; i < this.legendCollection.length; i++) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const legendItem: any = this.legendCollection[i as number];
+                    if (isNullOrUndefined(this.totalPages[this.page])) {
+                        this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
+                    }
+                    const legendTextSize: Size = measureText(legendItem['text'], legend.textStyle);
+                    this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
+                    if (i === 0) {
+                        startX = shapeX = (leftPadding + (shapeWidth / 2));
+                        startY = shapeY = topPadding + legendtitleSize.height + (shapeHeight > legendTextSize.height ? shapeHeight / 2
+                            : (legendTextSize.height / 4));
+                    } else {
+                        const maxSize: number = (legendTextSize.height > shapeHeight) ? legendTextSize.height : shapeHeight;
+                        if (arrangement === 'Horizontal') {
+                            const prvePositionX: number = (textLocation[j - 1].x + textLocation[j - 1].width) + textPadding + shapeWidth;
+                            if ((prvePositionX + shapePadding + legendTextSize.width) > legendWidth) {
+                                const nextPositionY: number = (textLocation[j - 1].y > (shapeLocation[j - 1].y + (shapeHeight / 2)) ?
+                                    textLocation[j - 1].y : (shapeLocation[j - 1].y + (shapeHeight / 2))) + topPadding;
+                                if ((nextPositionY + maxSize) > legendHeight) {
+                                    this.getPageChanged();
+                                    j = 0;
+                                    shapeLocation = [];
+                                    textLocation = [];
+                                    shapeX = startX;
+                                    shapeY = startY;
+                                } else {
+                                    shapeX = (shapeLocation[0].x);
+                                    shapeY = (nextPositionY + (maxSize / 2));
+                                }
+                            } else {
+                                shapeX = (prvePositionX - (shapeWidth / 2));
+                                shapeY = (shapeLocation[j - 1]).y;
+                            }
+                        } else {
+                            const prevPositionY: number = textLocation[j - 1].y > shapeLocation[j - 1].y + (shapeHeight / 2) ?
+                                textLocation[j - 1].y : shapeLocation[j - 1].y + (shapeHeight / 2);
+                            if ((prevPositionY + topPadding + maxSize) > legendHeight) {
+                                const nextPositionX: number = (textLocation[j - 1].x + this.textMaxWidth + textPadding);
+                                if ((nextPositionX + shapePadding + legendTextSize.width) > legendWidth) {
+                                    shapeX = startX;
+                                    shapeY = startY;
+                                    textLocation = [];
+                                    shapeLocation = [];
+                                    this.getPageChanged();
+                                    j = 0;
+                                } else {
+                                    shapeX = nextPositionX + (shapeWidth / 2);
+                                    shapeY = (shapeLocation[0].y);
+                                }
+                            } else {
+                                const padding: number = 10;
+                                shapeX = shapeLocation[j - 1].x;
+                                shapeY = prevPositionY + padding + (shapeHeight / 2);
+                            }
+                        }
+                    }
+                    textX = shapeX + (shapeWidth / 2) + shapePadding;
+                    textY = shapeY + (legendTextSize.height / 4);
+                    shapeLocation.push({ x: shapeX, y: shapeY });
+                    textLocation.push({ x: textX, y: textY, width: legendTextSize.width, height: (legendTextSize.height / 2) });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    (<any[]>this.totalPages[this.page]['Collection']).push({
+                        DisplayText: legendItem['text'],
+                        ImageSrc: legendItem['imageSrc'],
+                        Shape: { x: shapeX, y: shapeY },
+                        Text: { x: textX, y: textY },
+                        Fill: legendItem['fill'],
+                        legendShape: legendItem['shape'],
+                        shapeBorder: legendItem['shapeBorder'],
+                        idIndex: i,
+                        Rect: {
+                            x: shapeLocation[j as number].x - (shapeWidth / 2),
+                            y: (shapeLocation[j as number].y - (shapeHeight / 2)) < (textY - legendTextSize.height) ?
+                                (shapeLocation[j as number].y - (shapeHeight / 2)) : (textY - legendTextSize.height),
+                            width: Math.abs((shapeLocation[j as number].x - (shapeWidth / 2)) - (textX + legendTextSize.width)),
+                            height: ((shapeHeight > legendTextSize.height) ? shapeHeight : legendTextSize.height)
+                        }
+                    });
+                    j++;
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const collection: any[] = (<any[]>this.totalPages[0]['Collection']);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                Array.prototype.forEach.call(collection, (legendObj: any, index: number) => {
+                    const legendRect: Rect = new Rect(
+                        legendObj['Rect']['x'], legendObj['Rect']['y'],
+                        legendObj['Rect']['width'], legendObj['Rect']['height']
+                    );
+                    if (index === 0) {
+                        legendItemStartX = legendRect.x;
+                        legendItemStartY = legendRect.y;
+                    }
+                    this.widthIncrement = Math.max(this.widthIncrement, Math.abs(legendItemStartX - (legendRect.x + legendRect.width)));
+                    this.heightIncrement = Math.max(this.heightIncrement, Math.abs(legendItemStartY - (legendRect.y + legendRect.height)));
+                });
+                legendWidth = ((this.widthIncrement < legendWidth) ? this.widthIncrement : legendWidth);
+                legendHeight = ((this.heightIncrement < legendHeight) ? this.heightIncrement : legendHeight);
+                this.legendItemRect = {
+                    x: collection[0]['Rect']['x'], y: collection[0]['Rect']['y'],
+                    width: legendWidth, height: legendHeight
+                };
+            }
+        }
+    }
+    /**
+     * Get the legend collections
+     *
+     * @param {number} layerIndex - Specifies the layer index
+     * @param {any[]} layerData - Specifies the layer data
+     * @param {ColorMappingSettings[]} colorMapping - Specifies the color mapping
+     * @param {any[]} dataSource - Specifies the data source
+     * @param {string} dataPath - Specifies the data path
+     * @param {string} colorValuePath - Specifies the color value path
+     * @param {string | string[]} propertyPath - Specifies the property path
+     * @returns {void}
+     */
+    private getLegends(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        layerIndex: number, layerData: any[], colorMapping: ColorMappingSettings[], dataSource: any[],
+        dataPath: string, colorValuePath: string, propertyPath: string | string[]
+    ): void {
+        this.getRangeLegendCollection(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
+        this.getEqualLegendCollection(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
+        this.getDataLegendCollection(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
+    }
+    private getPageChanged(): void {
+        this.page++;
+        if (isNullOrUndefined(this.totalPages[this.page])) {
+            this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
+        }
+    }
+
+    private legendTextTrim(maxWidth: number, text: string, font: FontModel, legendRectSize: number): string {
+        let label: string = text;
+        let size: number = measureText(text, font).width;
+        const legendWithoutTextSize : number = legendRectSize - size;
+        if (legendRectSize > maxWidth) {
+            const textLength: number = text.length;
+            for (let i: number = textLength - 1; i >= 0; --i) {
+                label = text.substring(0, i) + '...';
+                size = measureText(label, font).width;
+                const totalSize : number = legendWithoutTextSize + size;
+                if (totalSize <= maxWidth || label.length < 4) {
+                    if (label.length < 4) {
+                        label = ' ';
+                    }
+                    return label;
+                }
+            }
+        }
+        return label;
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * To draw the legend shape and text.
+     *
+     * @private
+     */
+    public drawLegend(): void {
+        const map: Maps = this.maps;
+        const legend: LegendSettingsModel = <LegendSettingsModel>map.legendSettings;
+        const render: SvgRenderer = map.renderer;
+        let textOptions: TextOption;
+        const textFont: FontModel = {
+            size: legend.textStyle.size,
+            color: legend.textStyle.color,
+            fontFamily: legend.textStyle.fontFamily,
+            fontWeight: legend.textStyle.fontWeight,
+            fontStyle: legend.textStyle.fontStyle,
+            opacity: legend.textStyle.opacity
+        };
+        this.legendGroup = render.createGroup({ id: map.element.id + '_Legend_Group' });
+        if (legend.mode === 'Interactive') {
+            for (let i: number = 0; i < this.legendRenderingCollections.length; i++) {
+                const itemId: string = map.element.id + '_Legend_Index_' + i;
+                const textId: string = map.element.id + '_Legend_Index_' + i + '_Text';
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const item: any = this.legendRenderingCollections[i as number];
+                const bounds: Rect = new Rect(item['x'], item['y'], item['width'], item['height']);
+                if (i === 0) {
+                    this.renderLegendBorder();
+                }
+                const textLocation: Point = new Point(item['textX'], item['textY']);
+                textFont.color = (textFont.color !== null) ? textFont.color : this.maps.themeStyle.legendTextColor;
+                const rectOptions: RectOption = new RectOption(itemId, item['fill'], item['shapeBorder'], legend.opacity, bounds);
+                textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
+                textFont.fontFamily = !isNullOrUndefined(textFont.fontFamily) ? textFont.fontFamily : this.maps.themeStyle.fontFamily;
+                textFont.size = textFont.size || map.themeStyle.legendFontSize;
+                const textElement : Element = renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
+                textElement.setAttribute('aria-label', item['text']);
+                textElement.setAttribute('role', 'region');
+                const rectElement: Element = render.drawRectangle(rectOptions);
+                this.legendGroup.appendChild(rectElement);
+                if (map.legendSettings.toggleLegendSettings.enable && (legend.type === 'Layers' || legend.type === 'Markers')) {
+                    this.maintainLegendToggle(i, rectElement, textElement);
+                }
+                this.legendToggle();
+            }
+        } else {
+            this.drawLegendItem(this.currentPage);
+        }
+    }
+    /**
+     * @param {number} page - Specifies the legend page.
+     * @returns {void}
+     * @private
+     */
+    public drawLegendItem(page: number): void {
+        const map: Maps = this.maps;
+        const legend: LegendSettingsModel = <LegendSettingsModel>map.legendSettings; const spacing: number = 10;
+        const shapeSize: Size = new Size(legend.shapeWidth, legend.shapeHeight);
+        let textOptions: TextOption;
+        const render: SvgRenderer = map.renderer;
+        let legendShape: LegendShape = legend.shape;
+        if (page >= 0 && page < this.totalPages.length) {
+            if (querySelector(this.legendGroup.id, this.maps.element.id)) {
+                remove(querySelector(this.legendGroup.id, this.maps.element.id));
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            for (let i: number = 0; i < (<any[]>this.totalPages[page as number]['Collection']).length; i++) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const collection: any = <any[]>this.totalPages[page as number]['Collection'][i as number];
+                const shapeBorder: BorderModel = collection['shapeBorder'];
+                const legendElement: Element = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
+                let legendText: string = collection['DisplayText'];
+                const pagingArrowPadding: number = 4;
+                const strokeColor: string = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
+                    || legend.shape === 'Cross') ? isNullOrUndefined(legend.fill) ? '#000000' : legend.fill : shapeBorder.color;
+                const strokeWidth: number = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
+                    || legend.shape === 'Cross') ? (shapeBorder.width === 0) ?
+                        1 : shapeBorder.width : shapeBorder.width;
+                const shapeId: string = map.element.id + '_Legend_Shape_Index_' + collection['idIndex'];
+                const textId: string = map.element.id + '_Legend_Text_Index_' + collection['idIndex'];
+                const shapeLocation: Point = new Point(collection['Shape']['x'], (collection['Shape']['y'] - pagingArrowPadding));
+                const textLocation: Point = new Point(collection['Text']['x'], (collection['Text']['y'] - pagingArrowPadding));
+                const renderOptions: PathOption = new PathOption(
+                    shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity,
+                    isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, ''
+                );
+                const legendTextStyle: FontModel = {
+                    fontFamily: legend.textStyle.fontFamily, fontStyle: legend.textStyle.fontStyle,
+                    fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color,
+                    opacity: legend.textStyle.opacity
+                };
+                legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
+                    this.maps.themeStyle.legendTextColor;
+                legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily :
+                    this.maps.themeStyle.fontFamily;
+                legendTextStyle.size = legendTextStyle.size || map.themeStyle.legendFontSize;
+                legendTextStyle.fontWeight = legendTextStyle.fontWeight || map.themeStyle.fontWeight;
+                if (i === 0) {
+                    this.renderLegendBorder();
+                }
+                if (legend.type === 'Markers' && legend.useMarkerShape) {
+                    const legendShapeData: object = this.legendCollection[collection['idIndex']].data[0];
+                    const marker: MarkerSettingsModel = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
+                    legendShape = !isNullOrUndefined(marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']]) && marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']] !== '' ? marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']] : marker.shape;
+                }
+                if (legendShape === 'Balloon') {
+                    legendElement.appendChild(drawBalloon(map, renderOptions, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5)}, 'Legend'));
+                }
+                else {
+                    legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions));
+                }
+                const legendRectSize : number = collection['Rect']['x'] + collection['Rect']['width'];
+                if (legendRectSize > this.legendBorderRect.width) {
+                    const trimmedText: string = this.legendTextTrim(this.legendBorderRect.width, legendText,
+                                                                    legendTextStyle, legendRectSize);
+                    legendText = trimmedText;
+                }
+                textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
+                const textElement : Element = renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
+                textElement.setAttribute('aria-label', legendText);
+                textElement.setAttribute('role', 'region');
+                this.legendGroup.appendChild(legendElement);
+                if (map.legendSettings.toggleLegendSettings.enable && (legend.type === 'Layers' || legend.type === 'Markers')) {
+                    const legendShapeElement: Element = legendElement.childNodes[0] as Element;
+                    this.maintainLegendToggle(collection['idIndex'], legendShapeElement, textElement);
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (i === ((<any[]>this.totalPages[page as number]['Collection']).length - 1)) {
+                    let pagingGroup: Element; const width: number = spacing; const height: number = (spacing / 2);
+                    if (this.page !== 0) {
+                        const pagingText: string = (page + 1) + '/' + this.totalPages.length;
+                        const pagingFont: FontModel = legend.textStyle;
+                        const pagingTextSize: Size = measureText(pagingText, pagingFont);
+                        const leftPageX: number = (this.legendItemRect.x + this.legendItemRect.width) - pagingTextSize.width -
+                        (width * 2) - (spacing * 2) + (pagingArrowPadding / 2);
+                        const rightPageX: number = (this.legendItemRect.x + this.legendItemRect.width);
+                        const pageTextX: number = rightPageX - width - (pagingTextSize.width / 2) - (spacing / 2) - pagingArrowPadding;
+                        const locY: number = (this.legendItemRect.y + this.legendItemRect.height) + (height / 2) + spacing;
+                        pagingGroup = render.createGroup({ id: map.element.id + '_Legend_Paging_Group' });
+                        const leftPageElement: Element = render.createGroup({ id: map.element.id + '_Legend_Left_Paging_Group' });
+                        const rightPageElement: Element = render.createGroup({ id: map.element.id + '_Legend_Right_Paging_Group' });
+                        const rightPath: string = ' M ' + rightPageX + ' ' + locY + ' L ' + (rightPageX - width) + ' ' + (locY - height) +
+                            ' L ' + (rightPageX - width) + ' ' + (locY + height) + ' z ';
+                        const leftPath: string = ' M ' + leftPageX + ' ' + locY + ' L ' + (leftPageX + width) + ' ' + (locY - height) +
+                            ' L ' + (leftPageX + width) + ' ' + (locY + height) + ' z ';
+                        const leftPageOptions: PathOption = new PathOption(
+                            map.element.id + '_Left_Page', this.maps.themeStyle.legendTextColor, 0, this.maps.themeStyle.legendTextColor, ((page + 1) === 1 ? 0.5 : 1), 1, '', leftPath
+                        );
+                        leftPageElement.appendChild(render.drawPath(leftPageOptions));
+                        const leftRectPageOptions: RectOption = new RectOption(
+                            map.element.id + '_Left_Page_Rect', 'transparent', {}, 1,
+                            new Rect(leftPageX - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', ''
+                        );
+                        let pathEle: Element = render.drawRectangle(leftRectPageOptions);
+                        pathEle.setAttribute('aria-label', 'Navigate to the previous legend items');
+                        pathEle.setAttribute('role', 'button');
+                        (pathEle as HTMLElement).tabIndex = (page + 1) === 1 ? -1 : map.tabIndex;
+                        if ((page + 1) === 1) {
+                            (pathEle as HTMLElement).style.cursor = 'default';
+                            (pathEle as HTMLElement).style.setProperty('outline', 'none');
+                        } else {
+                            (pathEle as HTMLElement).style.cursor = 'pointer';
+                            (pathEle as HTMLElement).style.removeProperty('outline');
+                        }
+                        leftPageElement.appendChild(pathEle);
+                        this.wireEvents(leftPageElement);
+                        const rightPageOptions: PathOption = new PathOption(
+                            map.element.id + '_Right_Page', this.maps.themeStyle.legendTextColor, 0, this.maps.themeStyle.legendTextColor, ((page + 1) === this.totalPages.length ? 0.5 : 1), 1, '', rightPath
+                        );
+                        rightPageElement.appendChild(render.drawPath(rightPageOptions));
+                        const rightRectPageOptions: RectOption = new RectOption(
+                            map.element.id + '_Right_Page_Rect', 'transparent', {}, 1,
+                            new Rect(rightPageX - spacing - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', ''
+                        );
+                        pathEle = render.drawRectangle(rightRectPageOptions);
+                        pathEle.setAttribute('aria-label', 'Navigate to the next legend items');
+                        pathEle.setAttribute('role', 'button');
+                        (pathEle as HTMLElement).tabIndex = (page + 1) === this.totalPages.length ? -1 : map.tabIndex;
+                        if ((page + 1) === this.totalPages.length) {
+                            (pathEle as HTMLElement).style.cursor = 'default';
+                            (pathEle as HTMLElement).style.setProperty('outline', 'none');
+                        } else {
+                            (pathEle as HTMLElement).style.cursor = 'pointer';
+                            (pathEle as HTMLElement).style.removeProperty('outline');
+                        }
+                        rightPageElement.appendChild(pathEle);
+                        this.wireEvents(rightPageElement);
+                        pagingGroup.appendChild(leftPageElement);
+                        pagingGroup.appendChild(rightPageElement);
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const pageTextOptions: any = {
+                            'id': map.element.id + '_Paging_Text',
+                            'x': pageTextX,
+                            'y': locY + (pagingTextSize.height / 4),
+                            'fill': this.maps.themeStyle.legendTextColor,
+                            'font-size': '14px',
+                            'font-style': pagingFont.fontStyle,
+                            'font-family': pagingFont.fontFamily,
+                            'font-weight': pagingFont.fontWeight,
+                            'text-anchor': 'middle',
+                            'transform': '',
+                            'opacity': 1,
+                            'dominant-baseline': ''
+                        };
+                        const pagingTextElement: HTMLElement = <HTMLElement>render.createText(pageTextOptions, pagingText);
+                        pagingTextElement.style.cssText = 'user-select: none;';
+                        pagingTextElement.setAttribute('aria-label', pagingText);
+                        pagingTextElement.setAttribute('role', 'region');
+                        pagingGroup.appendChild(pagingTextElement);
+                        this.legendGroup.appendChild(pagingGroup);
+                    }
+                    this.legendToggle();
+                }
+            }
+        }
+    }
+    /**
+     * @param {number} legendIndex - Specifies the legend index.
+     * @param {Element} legendShapeElement - Specifies the legend shape element.
+     * @param {Element} legendTextElement - Specifies the legend text element.
+     * @returns {void}
+     * @private
+     */
+    public maintainLegendToggle(legendIndex: number, legendShapeElement: Element, legendTextElement: Element): void {
+        if (this.maps.legendSettings.toggleLegendSettings.enable &&
+            !isNullOrUndefined(this.maps.toggledLegendId) && this.maps.toggledLegendId.indexOf(legendIndex) > -1 &&
+            !isNullOrUndefined(this.maps.toggledElementId) && this.maps.toggledElementId.length > 0) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const currentItem: any[] = this.legendCollection[legendIndex as number]['data'];
+            if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.legendSettings.toggleLegendSettings.fill,
+                                         this.maps.legendSettings.toggleLegendSettings.opacity,
+                                         this.maps.legendSettings.toggleLegendSettings.border.color,
+                                         this.maps.legendSettings.toggleLegendSettings.border.width,
+                                         isNullOrUndefined(this.maps.legendSettings.toggleLegendSettings.border.opacity) ?
+                                             this.maps.legendSettings.toggleLegendSettings.opacity :
+                                             this.maps.legendSettings.toggleLegendSettings.border.opacity,
+                                         this.maps.legendSettings.toggleLegendSettings.fill);
+            } else if (currentItem[currentItem.length - 1].length > 0) {
+                const layerIndex: number = currentItem[currentItem.length - 1].layerIndex;
+                this.setToggleAttributes(legendTextElement, legendShapeElement,
+                                         this.maps.layers[layerIndex as number].shapeSettings.fill,
+                                         this.maps.layers[layerIndex as number].shapeSettings.opacity,
+                                         /* eslint-disable-next-line max-len */
+                                         this.maps.layers[layerIndex as number].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor,
+                                         isNullOrUndefined(this.maps.layers[layerIndex as number].shapeSettings.border.width)
+                                             ? 0 : this.maps.layers[layerIndex as number].shapeSettings.border.width,
+                                         isNullOrUndefined(this.maps.layers[layerIndex as number].shapeSettings.border.opacity)
+                                             ? this.maps.layers[layerIndex as number].shapeSettings.opacity
+                                             : this.maps.layers[layerIndex as number].shapeSettings.border.opacity,
+                                         this.maps.layers[layerIndex as number].shapeSettings.fill);
+            }
+            currentItem['_isVisible'] = false;
+        }
+    }
+    public legendHighLightAndSelection(targetElement: Element, value: string): void {
+        let shapeIndex: number;
+        let layerIndex: number;
+        let dataIndex: number;
+        let pointIndex: number;
+        const legend: LegendSettingsModel = this.maps.legendSettings;
+        const textEle: Element = legend.mode === 'Default' ? document.getElementById(targetElement.id.replace('Shape', 'Text')) :
+            document.getElementById(targetElement.id + '_Text');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const collection: any[] = this.maps.legendModule.legendCollection;
+        let length: number;
+        const multiSelectEnable: boolean = !isNullOrUndefined(collection[0]['data'][0]['layerIndex']) ? this.maps.layers[collection[0]['data'][0]['layerIndex']].selectionSettings.enableMultiSelect : false;
+        let selectLength: number = 0;
+        let interactProcess: boolean = true;
+        const idIndex: number = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
+        this.updateLegendElement();
+        const toggleLegendCheck: number = this.maps.toggledLegendId.indexOf(idIndex);
+        if (this.maps.legendSettings.toggleLegendSettings.enable && value === 'highlight' && toggleLegendCheck !== -1) {
+            const collectionIndex: number = this.getIndexofLegend(this.legendHighlightCollection, targetElement);
+            if (collectionIndex !== -1) {
+                this.legendHighlightCollection.splice(collectionIndex, 1);
+            }
+            this.removeLegendHighlightCollection();
+            return null;
+        }
+        if (value === 'selection') {
+            this.shapeHighlightCollection = [];
+            if (!this.maps.shapeSelections && !multiSelectEnable) {
+                this.removeAllSelections();
+                this.maps.shapeSelections = true;
+            }
+            if (this.maps.legendSelectionCollection.length > 0 && (!multiSelectEnable ? this.maps.shapeSelections : true)) {
+                for (let k: number = 0; k < this.maps.legendSelectionCollection.length; k++) {
+                    if (targetElement === this.maps.legendSelectionCollection[k as number]['legendElement']) {
+                        this.maps.legendSelectionCollection[k as number]['legendElement'] = targetElement;
+                        interactProcess = false;
+                        this.removeLegendSelectionCollection(this.maps.legendSelectionCollection[k as number]['legendElement']);
+
+                        this.maps.selectedLegendElementId.splice(this.maps.selectedLegendElementId.indexOf(idIndex), 1);
+                        this.maps.legendSelectionCollection.splice(k, 1);
+                        this.maps.legendSelection = this.maps.legendSelectionCollection.length > 0 ? false : true;
+                        break;
+                    } else if (!multiSelectEnable) {
+                        if (this.maps.legendSelectionCollection.length > 1) {
+                            for (let z : number = 0; z < this.maps.legendSelectionCollection.length; z++) {
+                                this.removeLegendSelectionCollection(this.maps.legendSelectionCollection[z as number]['legendElement']);
+                            }
+                            this.maps.legendSelectionCollection = [];
+                        } else {
+                            this.removeLegendSelectionCollection(this.maps.legendSelectionCollection[k as number]['legendElement']);
+                            this.maps.legendSelectionCollection.splice(k, 1);
+                        }
+                    }
+                }
+            }
+        } else {
+            if (this.maps.legendSelectionCollection.length > 0) {
+                for (let k: number = 0; k < this.maps.legendSelectionCollection.length; k++) {
+                    if ((targetElement.id.indexOf('_Legend_Shape') > -1 || targetElement.id.indexOf('_Legend_Index')) &&
+                        targetElement === this.maps.legendSelectionCollection[k as number]['legendElement']) {
+                        interactProcess = false;
+                        break;
+                    } else {
+                        this.removeLegendHighlightCollection();
+                    }
+                }
+            }
+            this.removeLegendHighlightCollection();
+        }
+        if (interactProcess) {
+            for (let i: number = 0; i < collection.length; i++) {
+                const idIndex: number = this.maps.legendSettings.mode === 'Interactive' ?
+                    parseFloat(targetElement.id.split('_Legend_Index_')[1]) :
+                    parseFloat(targetElement.id.split('_Legend_Shape_Index_')[1]);
+                if (textEle.textContent === collection[i as number]['text'] && collection[i as number]['data'].length > 0
+                && idIndex === i) {
+                    const layer: LayerSettingsModel = this.maps.layers[collection[i as number]['data'][0]['layerIndex']];
+                    let enable: boolean; let legendModule: HighlightSettingsModel | SelectionSettingsModel;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    let data: any[];
+                    if (!isNullOrUndefined(layer)) {
+                        enable = (value === 'selection') ? layer.selectionSettings.enable : layer.highlightSettings.enable;
+                        legendModule = void 0;
+                        legendModule = (value === 'selection') ? layer.selectionSettings : layer.highlightSettings;
+                        data = collection[i as number]['data'];
+                    }
+
+                    if (enable) {
+                        for (let j: number = 0; j < data.length; j++) {
+                            let shapeElement: Element;
+                            shapeIndex = data[j as number]['shapeIndex'];
+                            layerIndex = data[j as number]['layerIndex'];
+                            dataIndex = data[j as number]['dataIndex'];
+                            pointIndex = data[j as number]['pointIndex'];
+                            if (pointIndex === -1) {
+                                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                                layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+                            } else {
+                                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                                layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+                            }
+                            if (shapeElement !== null) {
+                                let shapeMatch: boolean = true;
+                                if (this.maps.legendSelectionCollection !== null) {
+                                    for (let i: number = 0; i < this.maps.legendSelectionCollection.length; i++) {
+                                        if (this.maps.legendSelectionCollection[i as number]['legendElement'] === targetElement) {
+                                            shapeMatch = false;
+                                            break;
+                                        }
+                                    }
+                                }
+                                if (value === 'highlight' && shapeMatch) {
+                                    if (j === 0) {
+                                        this.legendHighlightCollection = [];
+                                        this.pushCollection(
+                                            targetElement, this.legendHighlightCollection, collection[i as number],
+                                            layer.shapeSettings as ShapeSettings);
+                                    }
+                                    length = this.legendHighlightCollection.length;
+                                    const legendHighlightColor: string = this.legendHighlightCollection[length - 1]['legendOldFill'];
+                                    this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
+                                    const shapeItemCount: number = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
+                                    const shapeOldFillColor: string = shapeElement.getAttribute('fill');
+                                    const shapeOldOpacity: string = shapeElement.getAttribute('fill-opacity');
+                                    this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
+                                    this.legendHighlightCollection[length - 1]['shapeOldOpacity'] = shapeOldOpacity;
+                                    const shapeOldColor: string = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount as number];
+                                    const shapeOldFillOpacity: string = this.legendHighlightCollection[length - 1]['shapeOldOpacity'];
+                                    this.shapePreviousColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'];
+                                    this.setColor(
+                                        shapeElement, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : shapeOldColor,
+                                        isNullOrUndefined(legendModule.opacity) ? shapeOldFillOpacity : legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'highlight');
+                                    this.setColor(
+                                        targetElement, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendHighlightColor,
+                                        isNullOrUndefined(legendModule.opacity) ? shapeOldFillOpacity : legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'highlight');
+                                } else if (value === 'selection') {
+                                    this.legendHighlightCollection = [];
+                                    this.maps.legendSelectionClass = legendModule;
+                                    if (j === 0) {
+                                        this.pushCollection(
+                                            targetElement, this.maps.legendSelectionCollection, collection[i as number],
+                                            layer.shapeSettings as ShapeSettings);
+                                        if (multiSelectEnable) {
+                                            this.maps.selectedLegendElementId.push(i);
+                                        } else {
+                                            if (this.maps.selectedLegendElementId.length === 0) {
+                                                this.maps.selectedLegendElementId.push(i);
+                                            } else {
+                                                this.maps.selectedLegendElementId = [];
+                                                this.maps.selectedLegendElementId.push(i);
+                                            }
+                                        }
+                                    }
+                                    selectLength = this.maps.legendSelectionCollection.length;
+                                    const legendSelectionColor: string = this.maps.legendSelectionCollection[selectLength - 1]['legendOldFill'];
+                                    this.maps.legendSelectionCollection[selectLength - 1]['MapShapeCollection']['Elements'].push(shapeElement);
+                                    this.maps.legendSelectionCollection[selectLength - 1]['shapeOldFillColor'] = this.shapePreviousColor;
+                                    this.setColor(
+                                        targetElement, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendSelectionColor,
+                                        legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'selection');
+                                    this.setColor(
+                                        shapeElement, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendSelectionColor,
+                                        legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'selection');
+                                    if (this.maps.selectedElementId.indexOf(shapeElement.getAttribute('id')) === - 1) {
+                                        this.maps.selectedElementId.push(shapeElement.getAttribute('id'));
+                                    }
+                                    if (j === data.length - 1) {
+                                        this.maps.legendSelection = false;
+                                        this.removeLegend(this.maps.legendSelectionCollection);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    private setColor(element: Element, fill: string, opacity: string, borderColor: string, borderWidth: string, type: string): void {
+        const isLineStringShape: boolean = (element.parentElement.id.indexOf('LineString') > -1);
+        if (type === 'selection') {
+            maintainStyleClass((isLineStringShape ? 'LineselectionMap' : 'ShapeselectionMap'),
+                               (isLineStringShape ? 'LineselectionMapStyle' : 'ShapeselectionMapStyle'),
+                               (isLineStringShape ? 'transparent' : fill),
+                               opacity, (isLineStringShape ? fill : borderColor), borderWidth, this.maps);
+            element.setAttribute('class', isLineStringShape ? 'LineselectionMapStyle' : 'ShapeselectionMapStyle');
+        } else {
+            element.setAttribute('fill', isLineStringShape ? 'transparent' : fill);
+            element.setAttribute('fill-opacity', opacity);
+            element.setAttribute('stroke', isLineStringShape ? fill : borderColor);
+            element.setAttribute('stroke-width', (Number(borderWidth) / this.maps.scale).toString());
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public pushCollection(targetElement: Element, collection: any[], oldElement: object, shapeSettings: ShapeSettings): void {
+        collection.push({
+            legendElement: targetElement, legendOldFill: oldElement['fill'], legendOldOpacity: oldElement['opacity'],
+            legendOldBorderColor: oldElement['borderColor'], legendOldBorderWidth: oldElement['borderWidth'],
+            shapeOpacity: shapeSettings.opacity, shapeOldBorderColor: shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor,
+            shapeOldBorderWidth: shapeSettings.border.width
+        });
+        const length: number = collection.length;
+        collection[length - 1]['MapShapeCollection'] = { Elements: [] };
+        collection[length - 1]['shapeOldFillColor'] = [];
+        collection[length - 1]['shapeOldOpacity'] = null;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private removeLegend(collection: any[]): void {
+        for (let i: number = 0; i < collection.length; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const item: any = collection[i as number];
+            this.setColor(
+                item['legendElement'], item['legendOldFill'], item['legendOldOpacity'],
+                item['legendOldBorderColor'], item['legendOldBorderWidth'], 'highlight');
+            const dataCount: number = item['MapShapeCollection']['Elements'].length;
+            for (let j: number = 0; j < dataCount; j++) {
+                const shapeFillColor: string = item['legendOldFill'].indexOf('url') !== -1
+                    ? item['shapeOldFillColor'][j as number] : item['legendOldFill'];
+                const shapeOpacity: string = !isNullOrUndefined(item['shapeOldOpacity']) ? item['shapeOldOpacity'] : item['shapeOpacity'];
+                this.setColor(
+                    item['MapShapeCollection']['Elements'][j as number], shapeFillColor, shapeOpacity,
+                    item['shapeOldBorderColor'], item['shapeOldBorderWidth'], 'highlight');
+            }
+        }
+    }
+
+    public removeLegendHighlightCollection(): void {
+        if (this.legendHighlightCollection.length > 0) {
+            this.removeLegend(this.legendHighlightCollection);
+            this.legendHighlightCollection = [];
+        }
+    }
+
+    public removeLegendSelectionCollection(targetElement: Element): void {
+        if (this.maps.legendSelectionCollection.length > 0) {
+            removeClass(targetElement);
+            const shapeElements: string[] = this.shapesOfLegend(targetElement);
+            const dataCount: number = shapeElements.length;
+            for (let j: number = 0; j < dataCount; j++) {
+                const shapeElement: Element = getElement(shapeElements[j as number]);
+                if (shapeElement.getAttribute('class') === 'ShapeselectionMapStyle' ||
+                    shapeElement.getAttribute('class') === 'LineselectionMapStyle') {
+                    removeClass(shapeElement);
+                    const selectedElementIdIndex: number = this.maps.selectedElementId.indexOf(shapeElement.id);
+                    if (selectedElementIdIndex !== - 1) {
+                        this.maps.selectedElementId.splice(selectedElementIdIndex, 1);
+                    }
+                }
+            }
+        }
+    }
+
+    public removeShapeHighlightCollection(): void {
+        if (this.shapeHighlightCollection.length > 0) {
+            for (let i: number = 0; i < this.shapeHighlightCollection.length; i++) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const item: any = this.shapeHighlightCollection[i as number];
+                let removeFill: boolean = true;
+                for (let j: number = 0; j < this.maps.legendSelectionCollection.length; j++) {
+                    if (this.maps.legendSelectionCollection[j as number]['legendElement'] === item['legendElement']) {
+                        removeFill = false;
+                    }
+                }
+                if (removeFill) {
+                    this.setColor(
+                        item['legendElement'], item['legendOldFill'], item['legendOldOpacity'],
+                        item['legendOldBorderColor'], item['legendOldBorderWidth'], 'highlight');
+                }
+            }
+        }
+    }
+
+    public shapeHighLightAndSelection(
+        targetElement: Element, data: object, legendModule: SelectionSettingsModel | HighlightSettingsModel,
+        getValue: string, layerIndex: number): void {
+        if (data !== undefined) {
+            this.updateLegendElement();
+            this.shapeToggled = true;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const collection: any[] = this.maps.legendModule.legendCollection;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const indexes: any = this.legendIndexOnShape(data, layerIndex);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const shapeElement: any = this.shapeDataOnLegend(targetElement);
+            const toggleLegendCheck: number = this.maps.toggledLegendId.indexOf(indexes['actualIndex']);
+            if (this.maps.legendSettings.toggleLegendSettings.enable && toggleLegendCheck !== -1) {
+                this.shapeToggled = false;
+                this.legendHighlightCollection = [];
+                const collectionIndex: number = this.getIndexofLegend(this.shapeHighlightCollection, shapeElement['LegendEle']);
+                if (collectionIndex !== -1) {
+                    this.shapeHighlightCollection.splice(collectionIndex, 1);
+                }
+                this.removeShapeHighlightCollection();
+                return null;
+            }
+            if (indexes['currentIndex'] === undefined && indexes['actualIndex'] === undefined) {
+                this.removeShapeHighlightCollection();
+                return null;
+            }
+            if (indexes['currentIndex'] === undefined && getValue === 'selection'
+                && !this.maps.layers[layerIndex as number].selectionSettings.enableMultiSelect &&
+                targetElement.getAttribute('class') !== 'ShapeselectionMapStyle') {
+                this.maps.legendSelection = false;
+            }
+            if (getValue === 'selection' && !this.maps.layers[layerIndex as number].selectionSettings.enableMultiSelect &&
+                !this.maps.legendSelection) {
+                this.removeAllSelections();
+                this.maps.legendSelection = true;
+            }
+            if (indexes['currentIndex'] === undefined) {
+                if (getValue === 'selection' && indexes['actualIndex'] !== undefined) {
+                    let checkSelection: number = 0;
+                    for (let i: number = 0; i < shapeElement['Elements'].length; i++) {
+                        if (shapeElement['Elements'][i as number].getAttribute('class') === 'ShapeselectionMapStyle') {
+                            checkSelection++;
+                        }
+                    }
+                    const selectionIndex: number = this.maps.selectedLegendElementId.indexOf(indexes['actualIndex']);
+                    if (selectionIndex === -1) {
+                        this.maps.selectedLegendElementId.push(indexes['actualIndex']);
+                        this.maps.legendSelectionClass = <SelectionSettingsModel>legendModule;
+                    } else {
+                        if ((checkSelection <= 1) && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                            || targetElement.getAttribute('class') === 'LineselectionMapStyle')) {
+                            if (!this.maps.layers[layerIndex as number].selectionSettings.enableMultiSelect) {
+                                this.maps.selectedLegendElementId.splice(selectionIndex, 1);
+                            } else {
+                                if (checkSelection <= 1 && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                                    || targetElement.getAttribute('class') === 'LineselectionMapStyle')) {
+                                    this.maps.selectedLegendElementId.splice(selectionIndex, 1);
+                                }
+                            }
+                        }
+                    }
+                }
+                this.removeShapeHighlightCollection();
+                return null;
+            }
+            const text: string = collection[indexes['actualIndex']]['text'];
+            let content: string; let legendShape: Element;
+
+            if (this.maps.legendSettings.mode === 'Default') {
+                if (indexes['currentIndex'] !== undefined) {
+                    content = document.getElementById(this.maps.element.id + '_Legend_Text_Index_' + indexes['actualIndex']).textContent;
+                    legendShape = document.getElementById(this.maps.element.id + '_Legend_Shape_Index_' + indexes['actualIndex']);
+                }
+            } else {
+                content = document.getElementById(this.maps.element.id + '_Legend_Index_' + indexes['actualIndex']
+                    + '_Text').textContent;
+                legendShape = document.getElementById(this.maps.element.id + '_Legend_Index_' + indexes['actualIndex']);
+            }
+            this.oldShapeElement = shapeElement['LegendEle'];
+            const length: number = this.maps.legendSelectionCollection.length;
+            if (text === content) {
+                let shapeMatched: boolean = true;
+                if (this.maps.legendSelectionCollection) {
+                    for (let i: number = 0; i < this.maps.legendSelectionCollection.length; i++) {
+                        if (this.maps.legendSelectionCollection[i as number]['legendElement'] === shapeElement['LegendEle']) {
+                            shapeMatched = false;
+                            break;
+                        }
+                    }
+                }
+                if (getValue === 'highlight' && shapeMatched) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const selectionEle: any = this.isTargetSelected(shapeElement, this.shapeHighlightCollection);
+                    if (selectionEle === undefined || (selectionEle && !selectionEle['IsSelected'])) {
+                        this.pushCollection(
+                            legendShape, this.shapeHighlightCollection, collection[indexes['actualIndex']],
+                            this.maps.layers[layerIndex as number].shapeSettings as ShapeSettings
+                        );
+                    }
+                    for (let j: number = 0; j < this.shapeHighlightCollection.length; j++) {
+                        if (shapeElement['LegendEle'].id === this.shapeHighlightCollection[j as number]['legendElement'].id) {
+                            this.shapeHighlightCollection[j as number]['legendElement'] = shapeElement['LegendEle'];
+                        }
+                    }
+                    if (length > 0) {
+                        for (let j: number = 0; j < length; j++) {
+                            if (shapeElement['LegendEle'] === this.maps.legendSelectionCollection[j as number]['legendElement']) {
+                                this.maps.legendSelectionCollection[j as number]['legendElement'] = shapeElement['LegendEle'];
+                                this.removeShapeHighlightCollection();
+                                break;
+                            } else if (j === length - 1) {
+                                this.removeShapeHighlightCollection();
+                                this.setColor(
+                                    legendShape, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendShape.getAttribute('fill'),
+                                    legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'highlight');
+                            }
+                        }
+                    } else {
+                        this.removeShapeHighlightCollection();
+                        this.setColor(
+                            legendShape, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendShape.getAttribute('fill'),
+                            !isNullOrUndefined(legendModule.opacity) ? legendModule.opacity.toString() : '1', legendModule.border.color, legendModule.border.width.toString(), 'highlight');
+                    }
+                } else if (getValue === 'selection') {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const selectionEle: any = this.isTargetSelected(shapeElement, this.maps.legendSelectionCollection);
+                    if (length > 0) {
+                        let j: number = 0;
+                        while (j < this.maps.legendSelectionCollection.length) {
+                            if (shapeElement['LegendEle'] !== this.maps.legendSelectionCollection[j as number]['legendElement'] &&
+                                !(<SelectionSettingsModel>legendModule).enableMultiSelect) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                const element: any = this.maps.legendSelectionCollection[j as number];
+                                const selectedLegendIndex: number = this.maps.selectedLegendElementId.indexOf(indexes['actualIndex']);
+                                this.maps.selectedLegendElementId.splice(selectedLegendIndex, 1);
+                                this.maps.legendSelectionCollection.splice(j, 1);
+                                removeClass(element['legendElement']);
+                                this.maps.shapeSelections = true;
+                                j = 0;
+                            } else { j++; }
+                        }
+                    }
+                    if (selectionEle && (
+                        selectionEle['IsSelected'] && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
+                            || targetElement.getAttribute('class') === 'LineselectionMapStyle'))) {
+                        let multiSelection: number = 0;
+                        if ((<SelectionSettingsModel>legendModule).enableMultiSelect) {
+                            for (let i: number = 0; i < shapeElement['Elements'].length; i++) {
+                                if (targetElement.getAttribute('class') === shapeElement['Elements'][i as number].getAttribute('class')) {
+                                    multiSelection++;
+                                }
+                            }
+                        }
+                        if (multiSelection <= 1 && (!(<SelectionSettingsModel>legendModule).enableMultiSelect ?
+                            this.maps.legendSelection : true)) {
+                            this.maps.selectedLegendElementId.splice(this.maps.selectedLegendElementId.indexOf(indexes['actualIndex']), 1);
+                            if (!isNullOrUndefined(shapeElement['LegendEle'])) {
+                                removeClass(shapeElement['LegendEle']);
+                            }
+                            this.maps.legendSelectionCollection.splice(selectionEle['SelectionIndex'], 1);
+                            this.maps.shapeSelections = true;
+                        }
+                    } else {
+                        if ((selectionEle === undefined || (selectionEle && !selectionEle['IsSelected'])) &&
+                            !isNullOrUndefined(legendShape)) {
+                            const legendSelectionIndex: number = this.getIndexofLegend(this.maps.legendSelectionCollection, legendShape);
+                            if (legendSelectionIndex === -1) {
+                                this.pushCollection(
+                                    legendShape, this.maps.legendSelectionCollection, collection[indexes['actualIndex']],
+                                    this.maps.layers[layerIndex as number].shapeSettings as ShapeSettings
+                                );
+                            }
+                        }
+                        let addId: boolean = true;
+                        for (let i: number = 0; i < this.maps.selectedLegendElementId.length; i++) {
+                            if (indexes['actualIndex'] === this.maps.selectedLegendElementId[i as number]) {
+                                addId = false;
+                            }
+                        }
+                        if (addId) {
+                            this.maps.selectedLegendElementId.push(indexes['actualIndex']);
+                        }
+                        this.maps.legendSelectionClass = <SelectionSettingsModel>legendModule;
+                        this.removeLegend(this.shapeHighlightCollection);
+                        if (!isNullOrUndefined(legendShape)) {
+                            this.setColor(
+                                legendShape, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendShape.getAttribute('fill'),
+                                !isNullOrUndefined(legendModule.opacity) ? legendModule.opacity.toString() : '1', legendModule.border.color, legendModule.border.width.toString(), 'selection');
+                            const legendSelectionIndex: number = this.getIndexofLegend(this.maps.legendSelectionCollection, legendShape);
+                            this.maps.legendSelectionCollection[legendSelectionIndex as number]['MapShapeCollection']['Elements'].push(targetElement);
+                        }
+                        this.maps.shapeSelections = false;
+                    }
+                } else if (document.getElementsByClassName('highlightMapStyle').length > 0) {
+                    this.removeShapeHighlightCollection();
+                    removeClass(document.getElementsByClassName('highlightMapStyle')[0]);
+                }
+            }
+        } else {
+            this.removeShapeHighlightCollection();
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private isTargetSelected(target: any, collection: any[]): any {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let selectEle: any;
+        for (let i: number = 0; i < collection.length; i++) {
+            if (!isNullOrUndefined(target['LegendEle'].getAttribute('id')) &&
+                (target['LegendEle'].getAttribute('id') === collection[i as number]['legendElement'].getAttribute('id'))) {
+                selectEle = { IsSelected: true, SelectionIndex: i };
+            }
+        }
+        return selectEle;
+    }
+
+    private updateLegendElement(): void {
+        for (let i: number = 0; i < this.maps.legendSelectionCollection.length; i++) {
+            if (document.getElementById(this.maps.legendSelectionCollection[i as number]['legendElement'].id)) {
+                this.maps.legendSelectionCollection[i as number]['legendElement'] =
+                    document.getElementById(this.maps.legendSelectionCollection[i as number]['legendElement'].id);
+            }
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private getIndexofLegend(targetCollection: any[], targetElement: Element): number {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const legendIndex: number = targetCollection.map((e: any) => { return e['legendElement']; }).indexOf(targetElement);
+        return legendIndex;
+    }
+
+    private removeAllSelections(): void {
+        for (let i: number = 0; i < this.maps.selectedElementId.length; i++) {
+            const selectedElement: Element = document.getElementById(this.maps.selectedElementId[i as number]);
+            removeClass(selectedElement);
+        }
+        for (let j: number = 0; j < this.maps.selectedLegendElementId.length; j++) {
+            const idIndex: string = this.maps.legendSettings.mode === 'Interactive' ?
+                this.maps.element.id + '_Legend_Index_' : this.maps.element.id + '_Legend_Shape_Index_';
+            const selectedElement: string = idIndex + this.maps.selectedLegendElementId[j as number];
+            const legendElement: Element = document.getElementById(selectedElement);
+            if (!isNullOrUndefined(legendElement)) {
+                removeClass(document.getElementById(selectedElement));
+            }
+        }
+        this.maps.legendSelectionCollection = [];
+        this.maps.selectedLegendElementId = [];
+        this.maps.selectedElementId = [];
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public legendIndexOnShape(data: object, index: number): any {
+        let legendIndex: number;
+        let actualIndex: number;
+        const path: string = this.maps.layers[index as number].shapeDataPath;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const value: any = data[path as string];
+        const legendType: string = this.maps.legendSettings.mode;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const collection: any[] = this.maps.legendModule.legendCollection;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let currentCollection: any[];
+        if (legendType === 'Default' && !isNullOrUndefined(this.maps.legendModule.totalPages) && (this.maps.legendModule.totalPages.length > 0)) {
+            currentCollection = this.maps.legendModule.totalPages[this.maps.legendModule.currentPage]['Collection'];
+        }
+        const currentCollectionLength: number = (legendType === 'Default' && !isNullOrUndefined(currentCollection)) ? currentCollection['length'] : 1;
+        for (let i: number = 0; i < collection.length; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const dataValue: any[] = collection[i as number]['data'];
+            for (let k: number = 0; k < currentCollectionLength; k++) {
+                if (legendType !== 'Default' || collection[i as number]['text'] === currentCollection[k as number]['DisplayText']) {
+                    for (let j: number = 0; j < dataValue.length; j++) {
+                        if (value === dataValue[j as number]['name']) {
+                            legendIndex = k;
+                        }
+                    }
+                }
+            }
+            for (let j: number = 0; j < dataValue.length; j++) {
+                if (value === dataValue[j as number]['name']) {
+                    actualIndex = i;
+                }
+            }
+
+        }
+        return { currentIndex: legendIndex, actualIndex: actualIndex };
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private shapeDataOnLegend(targetElement: Element): any {
+        let shapeIndex: number;
+        let layerIndex: number;
+        let dataIndex: number;
+        let pointIndex: number;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const collection: any[] = this.maps.legendModule.legendCollection;
+        const legend: LegendSettingsModel = this.maps.legendSettings;
+        for (let i: number = 0; i < collection.length; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const data: any[] = collection[i as number]['data'];
+            let process: boolean = false;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const elements: any[] = [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const currentElement: any = { Elements: [] };
+            for (let j: number = 0; j < data.length; j++) {
+                let shapeElement: Element;
+                shapeIndex = data[j as number]['shapeIndex'];
+                layerIndex = data[j as number]['layerIndex'];
+                dataIndex = data[j as number]['dataIndex'];
+                pointIndex = data[j as number]['pointIndex'];
+                if (pointIndex === -1) {
+                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+                } else {
+                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+                }
+                if (targetElement === shapeElement) {
+                    process = true;
+                }
+                elements.push(shapeElement);
+            }
+            if (process) {
+                if (isNullOrUndefined(currentElement['LegendEle'])) {
+                    currentElement['LegendEle'] = legend.mode === 'Default' ?
+                        document.getElementById(this.maps.element.id + '_Legend_Shape_Index_' + i) :
+                        document.getElementById(this.maps.element.id + '_Legend_Index_' + i);
+                }
+                currentElement['Elements'] = elements;
+                return currentElement;
+            }
+        }
+        return null;
+    }
+
+    private shapesOfLegend(targetElement: Element): string[] {
+        let shapeIndex: number;
+        let layerIndex: number;
+        let dataIndex: number;
+        let pointIndex: number;
+        const idIndex: number = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const data: any[] = this.maps.legendModule.legendCollection[idIndex as number]['data'];
+        const legendShapeElements: string[] = [];
+        for (let i: number = 0; i < data.length; i++) {
+            let shapeElement: Element;
+            shapeIndex = data[i as number]['shapeIndex'];
+            layerIndex = data[i as number]['layerIndex'];
+            dataIndex = data[i as number]['dataIndex'];
+            pointIndex = data[i as number]['pointIndex'];
+            if (pointIndex === -1) {
+                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
+            } else {
+                shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
+                    layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
+            }
+            if (!isNullOrUndefined(shapeElement)) {
+                legendShapeElements.push(shapeElement.id);
+            }
+        }
+        return legendShapeElements;
+    }
+
+    private legendToggle(): void {
+        const map: Maps = this.maps;
+        const legend: LegendSettingsModel = <LegendSettingsModel>map.legendSettings;
+        if (this.maps.selectedLegendElementId) {
+            // To maintain the state of legend selection during page resize.
+            for (let j: number = 0; j < this.maps.selectedLegendElementId.length; j++) {
+                const idIndex: string = legend.mode === 'Interactive' ? this.maps.element.id + '_Legend_Index_' : this.maps.element.id + '_Legend_Shape_Index_';
+                const selectedElement: Element = map.svgObject.querySelector('#' + idIndex + this.maps.selectedLegendElementId[j as number]);
+                if (!isNullOrUndefined(selectedElement)) {
+                    const fill: string = !isNullOrUndefined(this.maps.legendSelectionClass.fill) ?
+                        this.maps.legendSelectionClass.fill : selectedElement.getAttribute('fill');
+                    this.setColor(
+                        selectedElement, fill, this.maps.legendSelectionClass.opacity.toString(),
+                        this.maps.legendSelectionClass.border.color, this.maps.legendSelectionClass.border.width.toString(), 'selection');
+                    for (let i: number = 0; i < this.maps.legendSelectionCollection.length; i++) {
+                        if (this.maps.legendSelectionCollection[i as number]['legendElement'].id === selectedElement.id) {
+                            this.maps.legendSelectionCollection[i as number]['legendElement'] = selectedElement;
+                        }
+                    }
+                    const legendSelectionIndex: number = this.getIndexofLegend(this.maps.legendSelectionCollection, selectedElement);
+                    if (legendSelectionIndex === -1) {
+                        const layerIndex: number = this.maps.legendModule.legendCollection[this.maps.selectedLegendElementId[j as number]]['data'][j as number]['layerIndex'];
+                        this.pushCollection(
+                            selectedElement, this.maps.legendSelectionCollection,
+                            this.maps.legendModule.legendCollection[this.maps.selectedLegendElementId[j as number]],
+                            this.maps.layers[layerIndex as number].shapeSettings as ShapeSettings
+                        );
+                    }
+                }
+            }
+        }
+        if (this.maps.toggledLegendId) {
+            for (let j: number = 0; j < this.maps.toggledLegendId.length; j++) {
+                const legendTextId: string = legend.mode === 'Interactive' ? ('#' + this.maps.element.id + '_Legend_Index_' + this.maps.toggledLegendId[j as number] + '_Text') : ('#' + this.maps.element.id + '_Legend_Text_Index_' + this.maps.toggledLegendId[j as number]);
+                const textElement: Element = map.svgObject.querySelector(legendTextId);
+                if (!isNullOrUndefined(textElement)) {
+                    textElement.setAttribute('fill', '#E5E5E5');
+                }
+                const legendShapeId: string = legend.mode === 'Interactive' ? ('#' + this.maps.element.id + '_Legend_Index_' + this.maps.toggledLegendId[j as number]) : ('#' + this.maps.element.id + '_Legend_Shape_Index_' + this.maps.toggledLegendId[j as number]);
+                const legendElement: Element = map.svgObject.querySelector(legendShapeId);
+                if (!isNullOrUndefined(legendElement)) {
+                    legendElement.setAttribute('fill', '#E5E5E5');
+                }
+            }
+        }
+    }
+
+    private renderLegendBorder(): void {
+        const map: Maps = this.maps;
+        const legend: LegendSettingsModel = <LegendSettingsModel>map.legendSettings;
+        const legendTitle: string = legend.title.text;
+        const textStyle: FontModel = {
+            fontFamily: legend.titleStyle.fontFamily, fontStyle: legend.titleStyle.fontStyle,
+            fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color,
+            opacity: legend.titleStyle.opacity
+        };
+        let textOptions: TextOption;
+        const spacing: number = 10;
+        const trimTitle: string = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
+        const textSize: Size = measureText(trimTitle, textStyle);
+        this.legendBorderRect = new Rect(
+            (this.legendItemRect.x - spacing),
+            (this.legendItemRect.y - spacing - textSize.height),
+            (this.legendItemRect.width) + (spacing * 2),
+            (this.legendItemRect.height) + (spacing * 2) + textSize.height +
+            (legend.mode === 'Interactive' ? 0 : (this.page !== 0) ? spacing : 0)
+        );
+        const legendBorder: BorderModel = {
+            color: legend.border.color || this.maps.themeStyle.legendBorderColor, opacity: legend.border.opacity,
+            width: legend.border.width || this.maps.themeStyle.legendBorderWidth
+        };
+        legendBorder.opacity = isNullOrUndefined(legendBorder.opacity) ? 1 : legendBorder.opacity;
+        const renderOptions: RectOption = new RectOption(
+            map.element.id + '_Legend_Border', legend.background, legendBorder, 1,
+            this.legendBorderRect, null, null, '', ''
+        );
+        this.legendGroup.appendChild(map.renderer.drawRectangle(renderOptions));
+        this.getLegendAlignment(map, this.legendBorderRect.width, this.legendBorderRect.height, legend);
+        this.legendGroup.setAttribute('transform', 'translate( ' + (this.translate.x + (-this.legendBorderRect.x)) + ' ' +
+            (this.translate.y + (-(this.legendBorderRect.y)) ) + ' )');
+        if (legend.position !== 'Float') {
+            map.svgObject.appendChild(this.legendGroup);
+        }
+        if (legendTitle) {
+            textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
+            textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily
+                : this.maps.themeStyle.fontFamily;
+            textStyle.size = !isNullOrUndefined(textStyle.size) ? textStyle.size
+                : this.maps.themeStyle.subTitleFontSize || Theme.legendTitleFont.size;
+            textStyle.fontWeight = !isNullOrUndefined(textStyle.fontWeight) ? textStyle.fontWeight
+                : this.maps.themeStyle.titleFontWeight || Theme.legendTitleFont.fontWeight;
+            textOptions = new TextOption(
+                map.element.id + '_LegendTitle',
+                (this.legendItemRect.x) + (this.legendItemRect.width / 2),
+                this.legendItemRect.y - (textSize.height / 2) - spacing / 2,
+                'middle', trimTitle, '');
+            const element : Element = renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
+            element.setAttribute('aria-label', legendTitle);
+            element.setAttribute('role', 'region');
+        }
+    }
+
+    public changeNextPage(e: PointerEvent): void {
+        this.currentPage = ((<Element>e.target).id.indexOf('_Left_Page_') > -1) ? (this.currentPage - 1) :
+            (this.currentPage + 1);
+        this.legendGroup = this.maps.renderer.createGroup({ id: this.maps.element.id + '_Legend_Group' });
+        this.maps.mapAreaRect = this.initialMapAreaRect;
+        this.drawLegendItem(this.currentPage);
+        if (!isNullOrUndefined(this.maps.legendModule) && this.maps.legendSettings.position === 'Float') {
+            if (this.maps.isTileMap) {
+                this.maps.mapLayerPanel.layerGroup.appendChild(this.maps.legendModule.legendGroup);
+            }
+            else {
+                this.maps.svgObject.appendChild(this.maps.legendModule.legendGroup);
+            }
+        }
+        if (querySelector(this.maps.element.id + '_Legend_Border', this.maps.element.id)) {
+            (<HTMLElement>querySelector(this.maps.element.id + '_Legend_Border', this.maps.element.id)).style.pointerEvents = 'none';
+        }
+    }
+
+    private getLegendAlignment(map: Maps, width: number, height: number, legend: LegendSettingsModel): void {
+        let x: number; let y: number;
+        const spacing: number = 10;
+        let totalRect: Rect;
+        // eslint-disable-next-line prefer-const
+        totalRect = extend({}, map.mapAreaRect, totalRect, true) as Rect;
+        const areaX: number = totalRect.x;
+        const areaY: number = totalRect.y;
+        const areaHeight: number = totalRect.height;
+        const areaWidth: number = totalRect.width;
+        const totalWidth: number = map.availableSize.width;
+        const totalHeight: number = map.availableSize.height;
+        const locationX: number = !isNullOrUndefined(legend.location.x) ? (typeof (legend.location.x) === 'string' &&
+            (legend.location.x as string).indexOf('%') > -1 ? (map.availableSize.width / 100) * parseFloat(legend.location.x) :
+            typeof (legend.location.x) === 'string' ? parseFloat(legend.location.x) : legend.location.x) : 0;
+        const locationY: number = !isNullOrUndefined(legend.location.y) ? (typeof (legend.location.y) === 'string' &&
+            (legend.location.y as string).indexOf('%') > -1 ? (map.availableSize.height / 100) * parseFloat(legend.location.y) :
+            typeof (legend.location.y) === 'string' ? parseFloat(legend.location.y) : legend.location.y) : 0;
+        if (legend.position === 'Float') {
+            this.translate = map.isTileMap ? new Point(locationX, locationY + (spacing / 4)) :
+                new Point(locationX + map.mapAreaRect.x, locationY + map.mapAreaRect.y);
+            this.legendTotalRect = map.mapAreaRect;
+        } else {
+            switch (legend.position) {
+            case 'Top':
+            case 'Bottom':
+                totalRect.height = (legend.position === 'Top') ? (areaHeight - height) : (areaHeight - height - (spacing * 2));
+                x = (totalWidth / 2) - (width / 2);
+                y = (legend.position === 'Top') ? areaY : (areaY + totalRect.height);
+                totalRect.y = (legend.position === 'Top') ? areaY + height + (map.isTileMap ? (spacing / 2) : spacing) : areaY - (spacing / 2);
+                break;
+            case 'Left':
+            case 'Right':
+                totalRect.width = (areaWidth - width - map.mapAreaRect.x);
+                x = (legend.position === 'Left') ? areaX + (spacing / 2) : (areaX + totalRect.width + spacing);
+                y = (totalHeight / 2) - (height / 2);
+                totalRect.x = (legend.position === 'Left') ? areaX + width + spacing : areaX;
+                break;
+            }
+            switch (legend.alignment) {
+            case 'Near':
+                if (legend.position === 'Top' || legend.position === 'Bottom') {
+                    x = totalRect.x - (legend.mode === 'Interactive' ? spacing : 0);
+                }
+                else {
+                    y = totalRect.y - (!(legend.height && legend.width) && legend.mode === 'Interactive' ? map.mapAreaRect.x : 0);
+                }
+                break;
+            case 'Far':
+                if (legend.position === 'Top' || legend.position === 'Bottom') {
+                    x = (totalWidth - width) - (legend.mode === 'Interactive' ? 0 : spacing);
+                }
+                else {
+                    y = totalHeight - height - (legend.mode === 'Default' ? spacing : 0);
+                }
+                break;
+            }
+            if ((legend.height || legend.width) && legend.mode !== 'Interactive') {
+                this.legendTotalRect = map.mapAreaRect = map.totalRect = totalRect;
+            } else {
+                map.totalRect = null;
+                if ((legend.height || legend.width) && legend.mode === 'Interactive')
+                {
+                    map.totalRect = totalRect;
+                }
+                this.legendTotalRect = map.mapAreaRect = totalRect;
+            }
+            if (legend.position === 'Left') {
+                map.mapAreaRect.width = totalRect.width;
+            }
+            this.translate = new Point(x, y);
+        }
+    }
+
+    private getMarkersLegendCollections(layerIndex: number, markers: MarkerSettingsModel[]): void {
+        Array.prototype.forEach.call(markers, (marker: MarkerSettings, markerIndex: number) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const dataSource: any[] = marker.dataSource as any[];
+            const field: string = marker.legendText;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let templateFn: any;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Array.prototype.forEach.call(dataSource, (data: any, dataIndex: number) => {
+                let imageSrc: string = null;
+                const showLegend: boolean = isNullOrUndefined(data[this.maps.legendSettings.showLegendPath]) ? true :
+                    data[this.maps.legendSettings.showLegendPath];
+                const latitude: boolean = !isNullOrUndefined(data['latitude']) || !isNullOrUndefined(data['Latitude']) || !isNullOrUndefined(data[marker.latitudeValuePath]);
+                const longitude: boolean = !isNullOrUndefined(data['longitude']) || !isNullOrUndefined(data['Longitude']) || !isNullOrUndefined(data[marker.longitudeValuePath]);
+                if (marker.visible && showLegend && latitude && longitude) {
+                    if (marker.template) {
+                        templateFn = getTemplateFunction(marker.template, this.maps);
+                        const templateElement: Element = templateFn(this.maps);
+                        const markerEle: Element = isNullOrUndefined(templateElement.childElementCount) ? templateElement[0] :
+                            templateElement;
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        imageSrc = markerEle.querySelector('img').src;
+                    }
+                    const text: string = isNullOrUndefined(data[field as string]) ? '' : data[field as string];
+                    const legendFill: string = !isNullOrUndefined(marker.colorValuePath) ? data[marker.colorValuePath] : marker.fill;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const newData: any[] = [];
+                    if (this.maps.legendSettings.removeDuplicateLegend) {
+                        newData.push(this.getMarkerLegendData(layerIndex, text, legendFill));
+                        this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
+                    } else {
+                        newData.push({layerIndex : layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill,
+                            name: text,
+                            shape: (!isNullOrUndefined(marker.shapeValuePath) && !isNullOrUndefined(data[marker.shapeValuePath]) && data[marker.shapeValuePath] !== '') ? data[marker.shapeValuePath] : (this.maps.legendSettings.useMarkerShape ? marker.shape : this.maps.legendSettings.shape)});
+                        this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
+                    }
+                }
+            });
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private getMarkerLegendData(layerIndex: number, text: string, legendFill: string): any[] {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const legendData: any[] = [];
+        this.maps.layers[layerIndex as number].markerSettings.map((markerSettings: MarkerSettings, markerIndex: number) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const markerData: any[] = <any[]>markerSettings.dataSource;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Array.prototype.forEach.call(markerData, (data: any, dataIndex: number) => {
+                const marker: MarkerSettingsModel = this.maps.layers[layerIndex as number].markerSettings[markerIndex as number];
+                if ((text === data[marker.legendText] || text === '') && legendFill === (data[marker.colorValuePath] || marker.fill)) {
+                    legendData.push({layerIndex : layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
+                        shape: !isNullOrUndefined(marker.shapeValuePath) ? data[marker.shapeValuePath] : marker.shape});
+                }
+            });
+        });
+        return legendData;
+    }
+
+    private getRangeLegendCollection(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        layerIndex: number, layerData: any[], colorMapping: ColorMappingSettings[], dataSource: any[],
+        dataPath: string, colorValuePath: string, propertyPath: string | string[]
+    ): void {
+        let legendText: string; let legendIndex: number = 0;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const fill: string = this.maps.legendSettings.fill; let rangeData: any[] = [];
+        for (const colorMap of colorMapping) {
+            if (!isNullOrUndefined(colorMap.from) && !isNullOrUndefined(colorMap.to)) {
+                legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.from + ' - ' + colorMap.to;
+                rangeData = [];
+                let colorMapProcess: boolean = false;
+                if (!isNullOrUndefined(dataSource) && dataSource.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    Array.prototype.forEach.call(dataSource, (data: any, dataIndex: number) => {
+                        const colorValue: number = (colorValuePath.indexOf('.') > -1) ? Number(getValueFromObject(data, colorValuePath)) :
+                            parseFloat(data[colorValuePath as string]);
+                        if (colorValue >= colorMap.from && colorValue <= colorMap.to) {
+                            colorMapProcess = true;
+                            rangeData.push(this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, colorValue));
+                        }
+                    });
+                }
+                if (!colorMapProcess) {
+                    rangeData.push({
+                        layerIndex: layerIndex, shapeIndex: null, dataIndex: null,
+                        name: null, value: null
+                    });
+                }
+                const legendFill: string = (isNullOrUndefined(fill)) ? Object.prototype.toString.call(colorMap.color) === '[object Array]' ?
+                    !isNullOrUndefined(colorMap.value) ? colorMap.color[0] : this.legendGradientColor(colorMap, legendIndex) :
+                    <string>colorMap.color : fill;
+                legendIndex++;
+                this.getOverallLegendItemsCollection(legendText, legendFill, rangeData, colorMap.showLegend);
+            }
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private getOverallLegendItemsCollection(legendText: string, legendFill: string, legendData: any[], showLegend: boolean): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const newColllection: any[] = [];
+        const legend: LegendSettingsModel = this.maps.legendSettings;
+        if (legendData.length > 0 && showLegend) {
+            for (let i: number = 0; i < legendData.length; i++) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const collection: any[] = <any[]>legendData[i as number];
+                if (collection.length > 0) {
+                    for (let j: number = 0; j < collection.length; j++) {
+                        newColllection.push(collection[j as number]);
+                    }
+                } else {
+                    newColllection.push(legendData[i as number]);
+                }
+                newColllection['_isVisible'] = true;
+            }
+            const isDuplicate: boolean = this.maps.legendSettings.removeDuplicateLegend ?
+                this.removeDuplicates(this.legendCollection, legendText, legendFill) : false;
+            if (!isDuplicate) {
+                this.legendCollection.push({
+                    text: legendText, fill: legendFill, data: newColllection, opacity: legend.opacity,
+                    borderColor: legend.shapeBorder.color, borderWidth: legend.shapeBorder.width
+                });
+            } else {
+                for (let i: number = 0; i < this.legendCollection.length; i++) {
+                    if (this.legendCollection[i as number]['text'] === legendText && this.legendCollection[i as number]['fill'] === legendFill) {
+                        this.legendCollection[i as number].data.push(newColllection[0]);
+                    }
+                }
+            }
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private removeDuplicates(legendCollection: any[], text: string, legendFill: string): boolean {
+        let isDuplicate: boolean = false;
+        for (let i: number = 0; i < legendCollection.length; i++) {
+            if ((legendCollection[i as number]['text'] === text || legendCollection[i as number]['text'] === '') && legendCollection[i as number]['fill'] === legendFill) {
+                isDuplicate = true;
+                break;
+            } else {
+                continue;
+            }
+        }
+        return isDuplicate;
+    }
+
+    private getEqualLegendCollection(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        layerIndex: number, layerData: any[], colorMapping: ColorMappingSettings[], dataSource: any[],
+        dataPath: string, colorValuePath: string, propertyPath: string | string[]
+    ): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const fill: string = this.maps.legendSettings.fill; const equalValues: any[] = [];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let legendText: string; let equalData: any[] = [];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const outOfRangeValues: any[] = []; const outOfRange: any[] = [];
+        for (const colorMap of colorMapping) {
+            if (!isNullOrUndefined(colorMap.value)) {
+                legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.value;
+                equalData = [];
+                let eqaulColorProcess: boolean = false;
+                if (!isNullOrUndefined(dataSource) && dataSource.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    Array.prototype.forEach.call(dataSource, (data: any, dataIndex: number) => {
+                        const equalValue: string = ((colorValuePath && colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
+                            (data[colorValuePath as string]));
+                        if (equalValue === colorMap.value) {
+                            eqaulColorProcess = true;
+                            if (equalValues.indexOf(equalValue) === -1) {
+                                equalValues.push(equalValue);
+                            }
+                            equalData.push(this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, equalValue));
+                        } else {
+                            if (outOfRangeValues.indexOf(equalValue) === -1) {
+                                outOfRangeValues.push(equalValue);
+                            }
+                        }
+                    });
+                }
+                for (let x: number = 0; x < equalValues.length; x++) {
+                    for (let y: number = 0; y < outOfRangeValues.length; y++) {
+                        if (equalValues[x as number] === outOfRangeValues[y as number]) {
+                            const equalIndex: number = outOfRangeValues.indexOf(equalValues[x as number]);
+                            outOfRangeValues.splice(equalIndex, 1);
+                        }
+                    }
+                }
+                if (!eqaulColorProcess) {
+                    equalData.push({
+                        layerIndex: layerIndex, shapeIndex: null, dataIndex: null,
+                        name: null, value: null
+                    });
+                }
+                const legendFill: string = (isNullOrUndefined(fill)) ? Object.prototype.toString.call(colorMap.color) === '[object Array]'
+                    ? colorMap.color[0] : <string>colorMap.color : fill;
+                this.getOverallLegendItemsCollection(legendText, legendFill, equalData, colorMap.showLegend);
+            } else if (isNullOrUndefined(colorMap.minOpacity) && isNullOrUndefined(colorMap.maxOpacity) && isNullOrUndefined(colorMap.value)
+                && isNullOrUndefined(colorMap.from) && isNullOrUndefined(colorMap.to) && !isNullOrUndefined(colorMap.color)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                Array.prototype.forEach.call(dataSource, (data: any, dataIndex: number) => {
+                    const equalValue: string = ((colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
+                        (data[colorValuePath as string]));
+                    for (let k: number = 0; k < outOfRangeValues.length; k++) {
+                        if (equalValue === outOfRangeValues[k as number]) {
+                            outOfRange.push(
+                                this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, equalValue));
+                        }
+                    }
+                });
+                if (outOfRangeValues.length === 0) {
+                    let range: boolean = false;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    Array.prototype.forEach.call(dataSource, (data: any, dataIndex: number) => {
+                        range = false;
+                        const rangeValue: number = data[colorValuePath as string];
+                        for (let z: number = 0; z < colorMapping.length; z++) {
+                            if (!isNullOrUndefined(rangeValue) && !isNaN(rangeValue)) {
+                                if (rangeValue >= colorMapping[z as number].from && rangeValue <= colorMapping[z as number].to) {
+                                    range = true;
+                                }
+                            } else if (!range) {
+                                range = false;
+                            }
+                        }
+                        if (!range) {
+                            outOfRange.push(this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, rangeValue));
+                        }
+                    });
+                }
+                legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : 'Others';
+                const outfill: string = ((Object.prototype.toString.call(colorMap.color) === '[object Array]'))
+                    ? colorMap.color[0] : <string>colorMap.color;
+                const legendOutFill: string = outfill;
+                this.getOverallLegendItemsCollection(legendText, legendOutFill, outOfRange, colorMap.showLegend);
+            }
+        }
+    }
+
+    private getDataLegendCollection(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        layerIndex: number, layerData: any[], colorMapping: ColorMappingSettings[], dataSource: any[],
+        dataPath: string, colorValuePath: string, propertyPath: string | string[]
+    ): void {
+        let legendText: string;
+        const fill: string = this.maps.legendSettings.fill;
+        const valuePath: string = this.maps.legendSettings.valuePath;
+        if (!isNullOrUndefined(colorValuePath) && !isNullOrUndefined(dataSource)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Array.prototype.forEach.call(dataSource, (data: any, dataIndex: number) => {
+                const showLegend: boolean = isNullOrUndefined(this.maps.legendSettings.showLegendPath) ?
+                    true : isNullOrUndefined(data[this.maps.legendSettings.showLegendPath]) ?
+                        false : data[this.maps.legendSettings.showLegendPath];
+                const dataValue: string = ((colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
+                    (data[colorValuePath as string]));
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const newData: any[] = [];
+                const legendFill: string = (isNullOrUndefined(fill)) ? dataValue : fill;
+                if (!isNullOrUndefined(dataValue) && colorMapping.length === 0 &&
+                    (!isNullOrUndefined(valuePath) || !isNullOrUndefined(dataPath))) {
+                    legendText = !isNullOrUndefined(data[valuePath as string]) ? ((valuePath.indexOf('.') > -1) ?
+                        getValueFromObject(data, valuePath) : data[valuePath as string]) : ((dataPath.indexOf('.') > -1) ?
+                        getValueFromObject(data, dataPath) : data[dataPath as string]);
+                    newData.push(this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, dataValue));
+                }
+                this.getOverallLegendItemsCollection(legendText, legendFill, newData, showLegend);
+            });
+        }
+    }
+
+    public interactiveHandler(e: PointerEvent): void {
+        const target: Element = <Element>e.target;
+        const legend: LegendSettingsModel = <LegendSettingsModel>this.maps.legendSettings;
+        const id: string = this.maps.element.id + '_Interactive_Legend';
+        const hoverId: string = legend.type === 'Layers' ? '_shapeIndex_' : (legend.type === 'Markers') ? '_MarkerIndex_' :
+            '_BubbleIndex_';
+        if (target.id.indexOf(hoverId) > 1) {
+            const layerIndex: number = parseFloat(target.id.split('_LayerIndex_')[1].split('_')[0]);
+            const dataIndex: number = parseFloat(target.id.split(/_dataIndex_/i)[1].split('_')[0]);
+            let fill: string; let stroke: string; let strokeWidth: number;
+            if (!(isNullOrUndefined(querySelector(id, this.maps.element.id)))) {
+                remove(querySelector(id, this.maps.element.id));
+            }
+            const layer: LayerSettings = (<LayerSettings>this.maps.layersCollection[layerIndex as number]);
+            const markerVisible: boolean = (legend.type === 'Layers' ? layer.visible :
+                legend.type === 'Markers' ? layer.markerSettings[parseFloat(target.id.split('_MarkerIndex_')[1].split('_')[0])].visible :
+                    (this.maps.getBubbleVisible(<LayerSettings>this.maps.layersCollection[layerIndex as number])));
+            if (legend.visible && this.legendRenderingCollections.length > 0
+                && legend.mode === 'Interactive' && markerVisible
+            ) {
+                const svgRect: ClientRect = this.maps.svgObject.getBoundingClientRect();
+                for (let i: number = 0; i < this.legendCollection.length; i++) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const currentData: any = this.legendCollection[i as number];
+                    const legendElement: Element = querySelector(this.maps.element.id + '_Legend_Index_' + i, this.maps.element.id);
+                    const legendRect: ClientRect = <ClientRect>legendElement.getBoundingClientRect();
+                    const rect: Rect = new Rect(
+                        Math.abs(legendRect.left - svgRect.left), Math.abs(legendRect.top - svgRect.top),
+                        legendRect.width, legendRect.height
+                    );
+                    fill = legendElement.getAttribute('fill');
+                    stroke = legend.shapeBorder.color;
+                    strokeWidth = legend.shapeBorder.width;
+                    if (!isNullOrUndefined(currentData['data'])) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const data: any[] = <any[]>currentData['data'];
+                        for (let j: number = 0; j < data.length; j++) {
+                            if (dataIndex === data[j as number]['dataIndex'] && layerIndex === data[j as number]['layerIndex']) {
+                                this.renderInteractivePointer(legend, fill, stroke, id, strokeWidth, rect);
+                                const arrowElement: Element = querySelector(id, this.maps.element.id);
+                                if (this.maps.isDevice && !(isNullOrUndefined(arrowElement))) {
+                                    clearTimeout(this.arrowTimer);
+                                    this.arrowTimer = setTimeout(() => {
+                                        if (!isNullOrUndefined(arrowElement.parentNode)) {
+                                            remove(arrowElement);
+                                        }
+                                    }, 2000);
+                                }
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+        } else {
+            if (!(isNullOrUndefined(querySelector(id, this.maps.element.id)))) {
+                remove(querySelector(id, this.maps.element.id));
+            }
+        }
+    }
+
+    private renderInteractivePointer(
+
+        legend: LegendSettingsModel, fill: string, stroke: string, id: string, strokeWidth: number, rect: Rect
+    ): void {
+        let path: string;
+        let locX: number; let locY: number;
+        const height: number = 10; const width: number = 10;
+        const direction: string = (legend.orientation === 'None') ? (legend.position === 'Top' || legend.position === 'Bottom')
+            ? 'Horizontal' : 'Vertical' : legend.orientation;
+        rect.y = legend.position === 'Float' && this.maps.isTileMap ? rect.y - this.maps.mapAreaRect.y : rect.y;
+        if (direction === 'Horizontal') {
+            if (!legend.invertedPointer) {
+                locX = rect.x + (rect.width / 2) - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
+                locY = rect.y;
+                path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
+                    ' L ' + (locX + width) + ' ' + (locY - height) + ' Z ';
+            } else {
+                locX = rect.x + (rect.width / 2) - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
+                locY = rect.y + (rect.height);
+                path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY + height) +
+                    ' L ' + (locX + width) + ' ' + (locY + height) + ' Z ';
+            }
+        } else {
+            if (!legend.invertedPointer) {
+                locX = rect.x + rect.width - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
+                locY = rect.y + (rect.height / 2);
+                path = ' M ' + locX + ' ' + locY + ' L ' + (locX + width) + ' ' + (locY - height) +
+                    ' L ' + (locX + width) + ' ' + (locY + height) + ' z ';
+            } else {
+                locX = rect.x - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
+                locY = rect.y + (rect.height / 2);
+                path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
+                    ' L ' + (locX - width) + ' ' + (locY + height) + ' z ';
+            }
+        }
+        const pathOptions: PathOption = new PathOption(id, fill, strokeWidth, stroke, 1, 1, '', path);
+        if (legend.position === 'Float' && this.maps.isTileMap) {
+            this.maps.mapLayerPanel.layerGroup.appendChild(this.maps.renderer.drawPath(pathOptions) as SVGPathElement);
+        } else {
+            this.maps.svgObject.appendChild(this.maps.renderer.drawPath(pathOptions) as SVGPathElement);
+        }
+    }
+
+    public wireEvents(element: Element): void {
+        EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
+    }
+
+    public addEventListener(): void {
+        if (this.maps.isDestroyed) {
+            return;
+        }
+        this.maps.on(Browser.touchMoveEvent, this.interactiveHandler, this);
+        this.maps.on(Browser.touchEndEvent, this.interactiveHandler, this);
+        this.maps.on(click, this.legendClick, this);
+    }
+
+    private markerToggleSelection(mapElement: Element, layerIndex: number, markerIndex: number, legendIndex: number): void {
+        mapElement.setAttribute('fill', this.legendCollection[legendIndex as number]['fill']);
+        mapElement.setAttribute('stroke', this.maps.layers[layerIndex as number].markerSettings[markerIndex as number].border.color);
+        mapElement.setAttribute('fill-opacity', (this.maps.layers[layerIndex as number].markerSettings[markerIndex as number].opacity).toString());
+        mapElement.setAttribute('stroke-width', (this.maps.layers[layerIndex as number].markerSettings[markerIndex as number].border.width).toString());
+        mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[layerIndex as number].markerSettings[markerIndex as number].border.opacity) ?
+            this.maps.layers[layerIndex as number].markerSettings[markerIndex as number].opacity :
+            this.maps.layers[layerIndex as number].markerSettings[markerIndex as number].border.opacity).toString());
+        const indexToRemoveSelectedElement: number = this.maps.toggledElementId.indexOf(mapElement.id);
+        if (indexToRemoveSelectedElement !== -1) {
+            this.maps.toggledElementId.splice(indexToRemoveSelectedElement, 1);
+        }
+    }
+
+    private bubbleToggleSelection(mapElement: Element, layerIndex: number, bubbleIndex: number, legendIndex: number): void {
+        mapElement.setAttribute('fill', this.legendCollection[legendIndex as number]['fill']);
+        mapElement.setAttribute('stroke', this.maps.layers[layerIndex as number].bubbleSettings[bubbleIndex as number].border.color);
+        mapElement.setAttribute('fill-opacity', (this.maps.layers[layerIndex as number].bubbleSettings[bubbleIndex as number].opacity).toString());
+        mapElement.setAttribute('stroke-width', (this.maps.layers[layerIndex as number].bubbleSettings[bubbleIndex as number].border.width).toString());
+        mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[layerIndex as number].bubbleSettings[bubbleIndex as number].border.opacity) ?
+            this.maps.layers[layerIndex as number].bubbleSettings[bubbleIndex as number].opacity :
+            this.maps.layers[layerIndex as number].bubbleSettings[bubbleIndex as number].border.opacity).toString());
+    }
+
+    private legendClick(targetEle: Element): void {
+        let legendShapeId: Element;
+        let legendTextId: Element;
+        const legendToggleFill: string = this.maps.legendSettings.toggleLegendSettings.fill;
+        const legendToggleOpacity: number = this.maps.legendSettings.toggleLegendSettings.opacity;
+        const legendToggleBorderColor: string = this.maps.legendSettings.toggleLegendSettings.border.color;
+        const legendToggleBorderWidth: number = this.maps.legendSettings.toggleLegendSettings.border.width;
+        const legendToggleBorderOpacity: number = isNullOrUndefined(this.maps.legendSettings.toggleLegendSettings.border.opacity) ?
+            this.maps.legendSettings.toggleLegendSettings.opacity : this.maps.legendSettings.toggleLegendSettings.border.opacity;
+        if (!isNullOrUndefined(targetEle.parentNode) && targetEle.parentNode['id'].indexOf(this.maps.element.id + '_Legend_Index_') > -1) {
+            let mapElement: Element;
+            const legendIndex: number = parseFloat(targetEle.parentElement.id.substr((this.maps.element.id + '_Legend_Index_').length));
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const selectedItem: any[] = this.legendCollection[legendIndex as number]['data'];
+            let isVisible: boolean = selectedItem['_isVisible'];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let shape: any;
+            if (this.maps.legendSettings.toggleLegendSettings.enable && (this.maps.legendSettings.type === 'Bubbles' || this.maps.legendSettings.type === 'Markers')) {
+                for (let k: number = 0; k < this.maps.layers.length; k++) {
+                    for (let j: number = 0; j < (this.maps.legendSettings.type === 'Bubbles' ? this.maps.layers[k as number].bubbleSettings.length : this.maps.layers[k as number].markerSettings.length); j++) {
+                        for (let i: number = 0; i < selectedItem.length; i++) {
+                            shape = this.legendCollection[legendIndex as number]['data'][i as number];
+                            mapElement = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
+                                '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
+                                '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
+                            if (!isNullOrUndefined(shape['shape']) && shape['shape'] === 'Balloon') {
+                                mapElement = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
+                                '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
+                                '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id);
+                                mapElement = mapElement.children[0];
+                            }
+                            const toggledLegendIdIndex: number = this.maps.toggledLegendId.indexOf(legendIndex);
+                            if (isVisible && mapElement !== null) {
+                                if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                    mapElement.setAttribute('fill', this.maps.layers[k as number].shapeSettings.fill);
+                                    mapElement.setAttribute('stroke', this.maps.layers[k as number].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
+                                    mapElement.setAttribute('fill-opacity', (this.maps.layers[k as number].shapeSettings.opacity).toString());
+                                    mapElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.width) ? 0 : this.maps.layers[k as number].shapeSettings.border.width).toString());
+                                    mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.opacity) ?
+                                        this.maps.layers[k as number].shapeSettings.opacity :
+                                        this.maps.layers[k as number].shapeSettings.border.opacity).toString());
+                                } else {
+                                    mapElement.setAttribute('fill', legendToggleFill);
+                                    mapElement.setAttribute('fill-opacity', (legendToggleOpacity).toString());
+                                    mapElement.setAttribute('stroke', legendToggleBorderColor);
+                                    mapElement.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
+                                    mapElement.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
+                                }
+                                if (this.maps.legendSettings.type === 'Markers') {
+                                    if (toggledLegendIdIndex === -1) {
+                                        this.maps.toggledLegendId.push(legendIndex);
+                                    }
+                                    const index: number = this.maps.toggledElementId.indexOf(mapElement.id);
+                                    if (index === -1) {
+                                        this.maps.toggledElementId.push(mapElement.id);
+                                    }
+                                }
+                                if (targetEle !== null) {
+                                    legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
+                                    legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
+                                    if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                        this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill,
+                                                                 legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth,
+                                                                 legendToggleBorderOpacity, legendToggleFill);
+                                    } else {
+                                        this.setToggleAttributes(legendTextId, legendShapeId,
+                                                                 this.maps.layers[k as number].shapeSettings.fill,
+                                                                 this.maps.layers[k as number].shapeSettings.opacity,
+                                                                 /* eslint-disable-next-line max-len */
+                                                                 this.maps.layers[k as number].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor,
+                                                                 isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.width)
+                                                                     ? 0 : this.maps.layers[k as number].shapeSettings.border.width,
+                                                                 /* eslint-disable-next-line max-len */
+                                                                 isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.opacity)
+                                                                     ? this.maps.layers[k as number].shapeSettings.opacity
+                                                                     : this.maps.layers[k as number].shapeSettings.border.opacity,
+                                                                 this.maps.layers[k as number].shapeSettings.fill);
+                                    }
+                                }
+                            } else {
+                                if (this.maps.legendSettings.type === 'Markers') {
+                                    if (toggledLegendIdIndex !== -1 && i === 0) {
+                                        this.maps.toggledLegendId.splice(toggledLegendIdIndex, 1);
+                                    }
+                                    this.markerToggleSelection(mapElement, k, j, legendIndex);
+                                } else {
+                                    this.bubbleToggleSelection(mapElement, k, j, legendIndex);
+                                }
+                                if (targetEle !== null) {
+                                    legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
+                                    legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
+                                    this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex as number]['fill'], this.legendCollection[legendIndex as number]['opacity'],
+                                                             this.legendCollection[legendIndex as number]['shapeBorder']['color'], this.legendCollection[legendIndex as number]['shapeBorder']['width'],
+                                                             this.legendCollection[legendIndex as number]['shapeBorder']['opacity'], this.maps.legendSettings.textStyle.color);
+                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
+                                        legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex as number]['fill']);
+                                    }
+                                }
+                            }
+                        }
+                        selectedItem['_isVisible'] = isVisible ? false : true;
+                    }
+                }
+            }
+            if (this.maps.legendSettings.type === 'Layers' && this.maps.legendSettings.toggleLegendSettings.enable) {
+                let layerElement: Element;
+                this.removeCollections(targetEle, legendIndex);
+                const toggledLegendIdIndex: number = this.maps.toggledLegendId.indexOf(legendIndex);
+                if (toggledLegendIdIndex !== -1) { isVisible = false; }
+                for (let j: number = 0; j < this.maps.layers.length; j++) {
+                    for (let i: number = 0; i < selectedItem.length; i++) {
+                        shape = this.legendCollection[legendIndex as number]['data'][i as number];
+                        layerElement = querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
+                            '_shapeIndex_' + shape['shapeIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
+                        if (layerElement !== null) {
+                            const toggledShapeIdIndex: number = this.maps.toggledElementId.indexOf(layerElement.id);
+                            if (isVisible) {
+                                if (i === 0) {
+                                    this.maps.toggledLegendId.push(legendIndex);
+                                }
+                                if (toggledShapeIdIndex === -1) {
+                                    this.maps.toggledElementId.push(layerElement.id);
+                                }
+                                if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                    layerElement.setAttribute('fill', this.maps.layers[j as number].shapeSettings.fill);
+                                    layerElement.setAttribute('fill-opacity', (this.maps.layers[j as number].shapeSettings.opacity).toString());
+                                    layerElement.setAttribute('stroke', this.maps.layers[j as number].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
+                                    layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j as number].shapeSettings.border.width) ? 0 : this.maps.layers[j as number].shapeSettings.border.width).toString());
+                                    layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j as number].shapeSettings.border.opacity) ?
+                                        this.maps.layers[j as number].shapeSettings.opacity :
+                                        this.maps.layers[j as number].shapeSettings.border.opacity).toString());
+                                } else {
+                                    layerElement.setAttribute('fill', legendToggleFill);
+                                    layerElement.setAttribute('fill-opacity', (legendToggleOpacity).toString());
+                                    layerElement.setAttribute('stroke', legendToggleBorderColor);
+                                    layerElement.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
+                                    layerElement.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
+                                }
+                                if (targetEle !== null) {
+                                    legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
+                                    legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
+                                    if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                        this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity,
+                                                                 legendToggleBorderColor, legendToggleBorderWidth,
+                                                                 legendToggleBorderOpacity, legendToggleFill);
+                                    } else {
+                                        this.setToggleAttributes(legendTextId, legendShapeId,
+                                                                 this.maps.layers[j as number].shapeSettings.fill,
+                                                                 this.maps.layers[j as number].shapeSettings.opacity,
+                                                                 /* eslint-disable-next-line max-len */
+                                                                 this.maps.layers[j as number].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor,
+                                                                 isNullOrUndefined(this.maps.layers[j as number].shapeSettings.border.width)
+                                                                     ? 0 : this.maps.layers[j as number].shapeSettings.border.width,
+                                                                 /* eslint-disable-next-line max-len */
+                                                                 isNullOrUndefined(this.maps.layers[j as number].shapeSettings.border.opacity)
+                                                                     ? this.maps.layers[j as number].shapeSettings.opacity
+                                                                     : this.maps.layers[j as number].shapeSettings.border.opacity,
+                                                                 this.maps.layers[j as number].shapeSettings.fill);
+                                    }
+                                }
+                            } else {
+                                if (toggledLegendIdIndex !== -1 && i === 0) {
+                                    this.maps.toggledLegendId.splice(toggledLegendIdIndex, 1);
+                                }
+                                if (toggledShapeIdIndex !== -1) {
+                                    this.maps.toggledElementId.splice(toggledShapeIdIndex, 1);
+                                }
+                                layerElement.setAttribute('fill', this.legendCollection[legendIndex as number]['fill']);
+                                layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j as number].shapeSettings.border.opacity) ?
+                                    this.maps.layers[j as number].shapeSettings.opacity :
+                                    this.maps.layers[j as number].shapeSettings.border.opacity).toString());
+                                layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j as number].shapeSettings.border.width) ? 0 : this.maps.layers[j as number].shapeSettings.border.width).toString());
+                                layerElement.setAttribute('fill-opacity', (this.maps.layers[j as number].shapeSettings.opacity).toString());
+                                layerElement.setAttribute('stroke', this.maps.layers[j as number].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
+                                if (targetEle !== null) {
+                                    legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
+                                    legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
+                                    this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex as number]['fill'], this.legendCollection[legendIndex as number]['opacity'],
+                                                             this.legendCollection[legendIndex as number]['shapeBorder']['color'], this.legendCollection[legendIndex as number]['shapeBorder']['width'],
+                                                             this.legendCollection[legendIndex as number]['shapeBorder']['opacity'], '#757575');
+                                }
+                            }
+                        }
+                    }
+                }
+                selectedItem['_isVisible'] = isVisible ? false : true;
+            }
+        } else if (!isNullOrUndefined(targetEle.id) && (targetEle.id.indexOf(this.maps.element.id + '_Legend_Shape_Index') > -1 ||
+            targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendSettings.visible &&
+            targetEle.id.indexOf('_Text') === -1) {
+            let LegendInteractive: Element;
+            const legendIndex: number = parseFloat(targetEle.id.split(this.maps.element.id + '_Legend_Index_')[1]);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let mapdata: any;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const selectedItem: any[] = this.legendCollection[legendIndex as number]['data'];
+            let isVisible: boolean = selectedItem['_isVisible'];
+            if ((this.maps.legendSettings.type === 'Bubbles' || this.maps.legendSettings.type === 'Markers') && this.maps.legendSettings.toggleLegendSettings.enable) {
+                const toggledLegendIdIndex: number = this.maps.toggledLegendId.indexOf(legendIndex);
+                for (let k: number = 0; k < this.maps.layers.length; k++) {
+                    for (let j: number = 0; j < (this.maps.legendSettings.type === 'Bubbles' ? this.maps.layers[k as number].bubbleSettings.length : this.maps.layers[k as number].markerSettings.length); j++) {
+                        for (let i: number = 0; i < selectedItem.length; i++) {
+                            mapdata = this.legendCollection[legendIndex as number]['data'][i as number];
+                            LegendInteractive = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
+                                '_BubbleIndex_' + j + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
+                                '_MarkerIndex_' + j + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id);
+                            if (!isNullOrUndefined(mapdata['shape']) && mapdata['shape'] === 'Balloon') {
+                                LegendInteractive = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
+                                '_BubbleIndex_' + j + '_dataIndex_' + mapdata['dataIndex'] + '_Group', this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
+                                '_MarkerIndex_' + j + '_dataIndex_' + mapdata['dataIndex'] + '_Group', this.maps.element.id);
+                                LegendInteractive = LegendInteractive.children[0];
+                            }
+                            if (isVisible && LegendInteractive !== null) {
+                                if (this.maps.legendSettings.type === 'Markers') {
+                                    if (toggledLegendIdIndex === -1) {
+                                        this.maps.toggledLegendId.push(legendIndex);
+                                    }
+                                    const index: number = this.maps.toggledElementId.indexOf(LegendInteractive.id);
+                                    if (index === -1) {
+                                        this.maps.toggledElementId.push(LegendInteractive.id);
+                                    }
+                                }
+                                if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                    LegendInteractive.setAttribute('fill', this.maps.layers[k as number].shapeSettings.fill);
+                                    LegendInteractive.setAttribute('stroke', this.maps.layers[k as number].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
+                                    LegendInteractive.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.width) ? 0 : this.maps.layers[k as number].shapeSettings.border.width).toString());
+                                    LegendInteractive.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.opacity) ?
+                                        this.maps.layers[k as number].shapeSettings.opacity :
+                                        this.maps.layers[k as number].shapeSettings.border.opacity).toString());
+                                    LegendInteractive.setAttribute('fill-opacity', (this.maps.layers[k as number].shapeSettings.opacity).toString());
+                                } else {
+                                    LegendInteractive.setAttribute('fill', legendToggleFill);
+                                    LegendInteractive.setAttribute('fill-opacity', (legendToggleOpacity).toString());
+                                    LegendInteractive.setAttribute('stroke', legendToggleBorderColor);
+                                    LegendInteractive.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
+                                    LegendInteractive.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
+                                }
+                                if (targetEle !== null) {
+                                    legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
+                                    legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
+                                    if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                        this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill,
+                                                                 legendToggleOpacity, legendToggleBorderColor,
+                                                                 legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
+                                    } else {
+                                        this.setToggleAttributes(legendTextId, legendShapeId,
+                                                                 this.maps.layers[k as number].shapeSettings.fill,
+                                                                 this.maps.layers[k as number].shapeSettings.opacity,
+                                                                 /* eslint-disable-next-line max-len */
+                                                                 this.maps.layers[k as number].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor,
+                                                                 /* eslint-disable-next-line max-len */
+                                                                 (isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.width)
+                                                                     ? 0
+                                                                     : this.maps.layers[k as number].shapeSettings.border.width),
+                                                                 /* eslint-disable-next-line max-len */
+                                                                 (isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.opacity)
+                                                                     ? this.maps.layers[k as number].shapeSettings.opacity
+                                                                     : this.maps.layers[k as number].shapeSettings.border.opacity),
+                                                                 this.maps.layers[k as number].shapeSettings.fill);
+                                    }
+                                }
+                            } else {
+                                if (this.maps.legendSettings.type === 'Markers') {
+                                    if (toggledLegendIdIndex !== -1 && i === 0) {
+                                        this.maps.toggledLegendId.splice(toggledLegendIdIndex, 1);
+                                    }
+                                    this.markerToggleSelection(LegendInteractive, k, j, legendIndex);
+                                } else {
+                                    this.bubbleToggleSelection(LegendInteractive, k, j, legendIndex);
+                                }
+                                if (targetEle !== null) {
+                                    legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
+                                    legendShapeId.setAttribute('fill', this.legendCollection[legendIndex as number]['fill']);
+                                    legendShapeId.setAttribute('fill-opacity', this.legendCollection[legendIndex as number]['opacity']);
+                                    legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex as number]['shapeBorder']['color']);
+                                    legendShapeId.setAttribute('stroke-width', this.legendCollection[legendIndex as number]['shapeBorder']['width']);
+                                    legendShapeId.setAttribute('stroke-opacity', this.legendCollection[legendIndex as number]['shapeBorder']['opacity']);
+                                    legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
+                                    legendTextId.setAttribute('fill', this.maps.legendSettings.textStyle.color);
+                                }
+                            }
+                        }
+                        selectedItem['_isVisible'] = isVisible ? false : true;
+                    }
+                }
+            }
+            if (this.maps.legendSettings.type === 'Layers' && this.maps.legendSettings.toggleLegendSettings.enable) {
+                let mapLegendElement: Element;
+                this.removeCollections(targetEle, legendIndex);
+                const toggleLegendIdIndex: number = this.maps.toggledLegendId.indexOf(legendIndex);
+                if (toggleLegendIdIndex !== -1) { isVisible = false; }
+                for (let k: number = 0; k < this.maps.layers.length; k++) {
+                    for (let i: number = 0; i < selectedItem.length; i++) {
+                        mapdata = this.legendCollection[legendIndex as number]['data'][i as number];
+                        mapLegendElement = querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
+                            '_shapeIndex_' + mapdata['shapeIndex'] + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id);
+                        if (mapLegendElement !== null) {
+                            const toggledShapeIdIndex: number = this.maps.toggledElementId.indexOf(mapLegendElement.id);
+                            if (isVisible) {
+                                if (i === 0) {
+                                    this.maps.toggledLegendId.push(legendIndex);
+                                }
+                                if (toggledShapeIdIndex === -1) {
+                                    this.maps.toggledElementId.push(mapLegendElement.id);
+                                }
+                                if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                    mapLegendElement.setAttribute('fill', this.maps.layers[0].shapeSettings.fill);
+                                    mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
+                                    mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k as number].shapeSettings.opacity).toString());
+                                    mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.width) ? 0 : this.maps.layers[k as number].shapeSettings.border.width).toString());
+                                    mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.opacity) ?
+                                        this.maps.layers[k as number].shapeSettings.opacity :
+                                        this.maps.layers[k as number].shapeSettings.border.opacity).toString());
+                                } else {
+                                    mapLegendElement.setAttribute('fill', legendToggleFill);
+                                    mapLegendElement.setAttribute('fill-opacity', (legendToggleOpacity).toString());
+                                    mapLegendElement.setAttribute('stroke', legendToggleBorderColor);
+                                    mapLegendElement.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
+                                    mapLegendElement.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
+                                }
+                                if (targetEle !== null) {
+                                    legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
+                                    legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
+                                    if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                        this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill,
+                                                                 legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth,
+                                                                 legendToggleBorderOpacity, legendToggleFill);
+                                    } else {
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill,
+                                                                 this.maps.layers[k as number].shapeSettings.opacity,
+                                                                 /* eslint-disable-next-line max-len */
+                                                                 this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor,
+                                                                 isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.width)
+                                                                     ? 0
+                                                                     : this.maps.layers[k as number].shapeSettings.border.width,
+                                                                 /* eslint-disable-next-line max-len */
+                                                                 isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.opacity)
+                                                                     ? this.maps.layers[k as number].shapeSettings.opacity
+                                                                     : this.maps.layers[k as number].shapeSettings.border.opacity,
+                                                                 this.maps.layers[0].shapeSettings.fill);
+                                    }
+                                }
+                            } else {
+                                if (toggleLegendIdIndex !== -1 && i === 0) {
+                                    this.maps.toggledLegendId.splice(toggleLegendIdIndex, 1);
+                                }
+                                if (toggledShapeIdIndex !== -1) {
+                                    this.maps.toggledElementId.splice(toggledShapeIdIndex, 1);
+                                }
+                                mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k as number].shapeSettings.opacity).toString());
+                                mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.width) ? 0 :
+                                    this.maps.layers[k as number].shapeSettings.border.width).toString());
+                                mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
+                                mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k as number].shapeSettings.border.opacity) ?
+                                    this.maps.layers[k as number].shapeSettings.opacity :
+                                    this.maps.layers[k as number].shapeSettings.border.opacity).toString());
+                                mapLegendElement.setAttribute('fill', this.legendCollection[legendIndex as number]['fill']);
+                                if (targetEle !== null) {
+                                    legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
+                                    legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
+                                    this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex as number]['fill'], this.legendCollection[legendIndex as number]['opacity'],
+                                                             this.legendCollection[legendIndex as number]['shapeBorder']['color'], this.legendCollection[legendIndex as number]['shapeBorder']['width'],
+                                                             this.legendCollection[legendIndex as number]['shapeBorder']['opacity'], '#757575');
+                                }
+                            }
+                        }
+                    }
+                }
+                selectedItem['_isVisible'] = isVisible ? false : true;
+            }
+        }
+    }
+
+    private removeCollections(targetEle: Element, legendIndex: number): void {
+        this.removeLegendSelectionCollection(targetEle);
+        const legendSelectionIndex: number = this.getIndexofLegend(this.maps.legendSelectionCollection, targetEle);
+        if (legendSelectionIndex !== -1) {
+            this.maps.legendSelectionCollection.splice(legendSelectionIndex, 1);
+        }
+        const legendHighlightIndex: number = this.getIndexofLegend(this.legendHighlightCollection, targetEle);
+        if (legendHighlightIndex !== -1) {
+            this.legendHighlightCollection.splice(legendSelectionIndex, 1);
+        }
+        const shapeHighlightIndex: number = this.getIndexofLegend(this.shapeHighlightCollection, targetEle);
+        if (shapeHighlightIndex !== -1) {
+            this.shapeHighlightCollection.splice(shapeHighlightIndex, 1);
+        }
+        const selectedIndex: number = this.maps.selectedLegendElementId.indexOf(legendIndex);
+        if (selectedIndex !== -1) { this.maps.selectedLegendElementId.splice(selectedIndex, 1); }
+    }
+
+    public removeEventListener(): void {
+        if (this.maps.isDestroyed) {
+            return;
+        }
+        this.maps.off(Browser.touchMoveEvent, this.interactiveHandler);
+        this.maps.off(Browser.touchEndEvent, this.interactiveHandler);
+        this.maps.off(click, this.legendClick);
+        const pagingElement: HTMLElement = document.getElementById(this.maps.element.id + '_Legend_Paging_Group');
+        if (pagingElement) {
+            for (let i: number = 0; i < pagingElement.childElementCount; i++) {
+                EventHandler.remove((pagingElement.childNodes[i as number] as HTMLElement), Browser.touchStartEvent,
+                                    this.changeNextPage);
+            }
+        }
+    }
+
+    private getLegendData(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        layerIndex: number, dataIndex: number, data: any, dataPath: string,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        layerData: any[], shapePropertyPath: string | string[], value: string | number
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ): any[] {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const legendData: any[] = [];
+        if (Object.prototype.toString.call(layerData) === '[object Array]') {
+            for (let i: number = 0; i < layerData.length; i++) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const shapeData: any = layerData[i as number];
+                const dataPathValue: string = (dataPath.indexOf('.') > -1 ) ? getValueFromObject(data, dataPath) : data[dataPath as string];
+                const shapePath: string = checkPropertyPath(data[dataPath as string], shapePropertyPath, shapeData['properties']);
+                const dataPathValueCase: string | number = !isNullOrUndefined(dataPathValue) &&
+                    typeof dataPathValue === 'string' ? dataPathValue.toLowerCase() : dataPathValue;
+                const shapeDataValueCase: string = !isNullOrUndefined(shapeData['properties'][shapePath as string])
+                    && isNaN(shapeData['properties'][shapePath as string]) ?
+                    shapeData['properties'][shapePath as string].toLowerCase() : shapeData['properties'][shapePath as string];
+                if (shapeDataValueCase === dataPathValueCase) {
+                    if (shapeData['geometry']['type'] !== 'MultiPoint') {
+                        legendData.push({
+                            layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
+                            name: data[dataPath as string], value: value, pointIndex: -1
+                        });
+                    } else {
+                        for (let j: number = 0; j < shapeData['geometry'].coordinates.length; j++) {
+                            legendData.push({
+                                layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
+                                name: data[dataPath as string], value: value, pointIndex: j
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        return legendData;
+    }
+
+    private setToggleAttributes(textElement: Element, shapeElement: Element, fillColor: string, fillOpacity: number,
+                                borderColor: string, borderWidth: number, borderOpacity: number, textColor: string): void {
+        textElement.setAttribute('fill', textColor);
+        shapeElement.setAttribute('fill', fillColor);
+        shapeElement.setAttribute('fill-opacity', (fillOpacity).toString());
+        shapeElement.setAttribute('stroke', borderColor);
+        shapeElement.setAttribute('stroke-width', (borderWidth).toString());
+        if (!isNullOrUndefined(borderOpacity)) {
+            shapeElement.setAttribute('stroke-opacity', (borderOpacity).toString());
+        }
+    }
+
+    public legendGradientColor(colorMap: ColorMappingSettings, legendIndex: number): string {
+        let legendFillColor: string;
+        const xmlns: string = 'http://www.w3.org/2000/svg';
+        if (!isNullOrUndefined(colorMap.color) && typeof (colorMap.color) === 'object') {
+            const linerGradientEle: Element = document.createElementNS(xmlns, 'linearGradient');
+            const opacity: number = 1; const position: LegendPosition = this.maps.legendSettings.position;
+            const x2: string = position === 'Top' || position === 'Bottom' ? '100' : '0';
+            const y2: string = position === 'Top' || position === 'Bottom' ? '0' : '100';
+            linerGradientEle.setAttribute('id', 'linear_' + legendIndex + '_' + this.maps.element.id);
+            linerGradientEle.setAttribute('x1', 0 + '%');
+            linerGradientEle.setAttribute('y1', 0 + '%');
+            linerGradientEle.setAttribute('x2', x2 + '%');
+            linerGradientEle.setAttribute('y2', y2 + '%');
+            for (let b: number = 0; b < colorMap.color.length; b++) {
+                const offsetColor: number = 100 / (colorMap.color.length - 1);
+                const stopEle: Element = document.createElementNS(xmlns, 'stop');
+                stopEle.setAttribute('offset', b * offsetColor + '%');
+                stopEle.setAttribute('stop-color', colorMap.color[b as number]);
+                stopEle.setAttribute('stop-opacity', opacity.toString());
+                linerGradientEle.appendChild(stopEle);
+            }
+            this.legendLinearGradient = linerGradientEle;
+            const color: string = 'url(' + '#linear_' + legendIndex + '_' + this.maps.element.id + ')';
+            this.defsElement.appendChild(linerGradientEle);
+            legendFillColor = color;
+        }
+        return legendFillColor;
+    }
+
+
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name
+     */
+    protected getModuleName(): string {
+        return 'Legend';
+    }
+
+    /**
+     * To destroy the legend.
+     *
+     * @returns {void}
+     * @private
+     */
+    public destroy(): void {
+        this.legendCollection = [];
+        this.legendRenderingCollections = [];
+        this.translate = null;
+        this.legendBorderRect = null;
+        this.initialMapAreaRect = null;
+        this.legendTotalRect = null;
+        this.totalPages = [];
+        this.legendItemRect = null;
+        this.legendGroup = null;
+        this.shapeHighlightCollection = [];
+        this.legendHighlightCollection = [];
+        this.shapePreviousColor = [];
+        this.selectedNonLegendShapes = [];
+        this.legendLinearGradient = null;
+        this.currentLayer = null;
+        this.defsElement = null;
+        this.legendElement = [];
+        this.oldShapeElement = null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!(this.maps as any).refreshing) {
+            this.maps = null;
+        }
+    }
+}