@syncfusion/ej2-maps 25.2.4 → 25.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.2.4
+*  version : 25.2.5
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-maps@*",
-  "_id": "@syncfusion/ej2-maps@25.1.41",
+  "_id": "@syncfusion/ej2-maps@25.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-f3i1agwk554peX5JwF25nYx4Spy6FhCaRvPuvbQq0PIslntofQeqvtJCh8uiodToSusmNixIvo5dr/+bmtUwjQ==",
+  "_integrity": "sha512-ou/s4tco99cxQJFBGlZthR96dOnuc+4td4nf+N4JO+WjxIWVvW0gCWi1ZjY6UEICS+9/lCcoRMDKMBQmBQ3r1Q==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-25.1.41.tgz",
-  "_shasum": "f7a46097b695e5576502c1e4508edfc587b91aa4",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-25.2.4.tgz",
+  "_shasum": "86b6edff8a231ab6d079e6d9a9e486faa4dbd315",
   "_spec": "@syncfusion/ej2-maps@*",
   "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~25.2.3",
+    "@syncfusion/ej2-base": "~25.2.5",
     "@syncfusion/ej2-buttons": "~25.2.4",
     "@syncfusion/ej2-compression": "~25.2.3",
     "@syncfusion/ej2-data": "~25.2.3",
     "@syncfusion/ej2-file-utils": "~25.2.3",
     "@syncfusion/ej2-pdf-export": "~25.2.3",
-    "@syncfusion/ej2-svg-base": "~25.2.3"
+    "@syncfusion/ej2-svg-base": "~25.2.5"
   },
   "deprecated": false,
   "description": "The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options",
@@ -93,6 +93,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "25.2.4",
+  "version": "25.2.5",
   "sideEffects": false
 }

package/src/maps/layers/bubble.d.ts

@@ -31,7 +31,6 @@ export declare class Bubble {
      * @param {Element} group - Specifies the element group
      * @param {string} bubbleID - Specifies the ID of the bubble
      * @returns {void}
-     *
      * @private
      */
     renderBubble(bubbleSettings: BubbleSettingsModel, shapeData: object, color: string, range: {
@@ -40,7 +39,7 @@ export declare class Bubble {
     }, bubbleIndex: number, dataIndex: number, layerIndex: number, layer: LayerSettings, group: Element, bubbleID?: string): void;
     private getPoints;
     /**
-     * To check and trigger bubble click event
+     * To check and trigger bubble click event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -48,14 +47,14 @@ export declare class Bubble {
      */
     bubbleClick(e: PointerEvent): void;
     /**
-     * To get bubble from target id
+     * To get bubble from target id.
      *
      * @param {string} target - Specifies the target
      * @returns {object} - Returns the object
      */
     private getbubble;
     /**
-     * To check and trigger bubble move event
+     * To check and trigger bubble move event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @retruns {void}

package/src/maps/layers/bubble.js

@@ -33,7 +33,6 @@ var Bubble = /** @class */ (function () {
      * @param {Element} group - Specifies the element group
      * @param {string} bubbleID - Specifies the ID of the bubble
      * @returns {void}
-     *
      * @private
      */
     Bubble.prototype.renderBubble = function (bubbleSettings, shapeData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, bubbleID) {
@@ -207,7 +206,7 @@ var Bubble = /** @class */ (function () {
         return points;
     };
     /**
-     * To check and trigger bubble click event
+     * To check and trigger bubble click event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -230,7 +229,7 @@ var Bubble = /** @class */ (function () {
         this.maps.trigger(bubbleClick, eventArgs);
     };
     /**
-     * To get bubble from target id
+     * To get bubble from target id.
      *
      * @param {string} target - Specifies the target
      * @returns {object} - Returns the object
@@ -254,7 +253,7 @@ var Bubble = /** @class */ (function () {
     };
     // eslint-disable-next-line valid-jsdoc
     /**
-     * To check and trigger bubble move event
+     * To check and trigger bubble move event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @retruns {void}

package/src/maps/layers/color-mapping.d.ts

@@ -11,12 +11,12 @@ export declare class ColorMapping {
      * @param { ShapeSettingsModel } shapeSettings - Specifies the shape settings.
      * @param { object } layerData - Specifies the layer data.
      * @param { string } color - Specifies the color.
-     * @returns {Object} - Returns the object.
+     * @returns {object} - Returns the object.
      * @private
      */
     getShapeColorMapping(shapeSettings: ShapeSettingsModel, layerData: object, color: string): any;
     /**
-     * To color by value and color mapping
+     * To color by value and color mapping.
      *
      * @param {ColorMappingSettingsModel[]} colorMapping - Specifies the color mapping instance.
      * @param {number} colorValue - Specifies the color value

package/src/maps/layers/color-mapping.js

@@ -17,7 +17,7 @@ var ColorMapping = /** @class */ (function () {
      * @param { ShapeSettingsModel } shapeSettings - Specifies the shape settings.
      * @param { object } layerData - Specifies the layer data.
      * @param { string } color - Specifies the color.
-     * @returns {Object} - Returns the object.
+     * @returns {object} - Returns the object.
      * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -31,7 +31,7 @@ var ColorMapping = /** @class */ (function () {
         return !isNullOrUndefined(shapeColor) ? shapeColor : color;
     };
     /**
-     * To color by value and color mapping
+     * To color by value and color mapping.
      *
      * @param {ColorMappingSettingsModel[]} colorMapping - Specifies the color mapping instance.
      * @param {number} colorValue - Specifies the color value

package/src/maps/layers/data-label.d.ts

@@ -15,7 +15,7 @@ export declare class DataLabel {
     constructor(maps: Maps);
     private getDataLabel;
     /**
-     * To render label for maps
+     * To render label for maps.
      *
      * @param {LayerSettings} layer - Specifies the layer settings
      * @param {number} layerIndex - Specifies the layer index.

package/src/maps/layers/data-label.js

@@ -32,7 +32,7 @@ var DataLabel = /** @class */ (function () {
         return text;
     };
     /**
-     * To render label for maps
+     * To render label for maps.
      *
      * @param {LayerSettings} layer - Specifies the layer settings
      * @param {number} layerIndex - Specifies the layer index.

package/src/maps/layers/layer-panel.d.ts

@@ -63,7 +63,7 @@ export declare class LayerPanel {
      */
     private layerFeatures;
     /**
-     * render datalabel
+     * render datalabel.
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {number} layerIndex - Specifies the layer index
@@ -76,14 +76,14 @@ export declare class LayerPanel {
      */
     private renderLabel;
     /**
-     * To render path for multipolygon
+     * To render path for multipolygon.
      *
      * @param {any[]} currentShapeData Specifies the current shape data
      * @returns {string} Returns the path
      */
     private generateMultiPolygonPath;
     /**
-     * To render bubble
+     * To render bubble.
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {object} bubbleData - Specifies the bubble data
@@ -100,7 +100,7 @@ export declare class LayerPanel {
      */
     private renderBubble;
     /**
-     * To get the shape color from color mapping module
+     * To get the shape color from color mapping module.
      *
      * @param {LayerSettingsModel} layer - Specifies the layer
      * @param {any} shape - Specifies the shape
@@ -118,7 +118,7 @@ export declare class LayerPanel {
     generateTiles(zoomLevel: number, tileTranslatePoint: Point, zoomType?: string, bing?: BingMap, position?: Point): void;
     arrangeTiles(type: string, x: number, y: number): void;
     /**
-     * Animation for tile layers and hide the group element until the tile layer rendering
+     * Animation for tile layers and hide the group element until the tile layer rendering.
      *
      * @param {string} zoomType - Specifies the zoom type
      * @param {number} translateX - Specifies the x translate point
@@ -127,7 +127,7 @@ export declare class LayerPanel {
      */
     private tileAnimation;
     /**
-     * Static map rendering
+     * Static map rendering.
      *
      * @param {string} apikey - Specifies the api key
      * @param {number} zoom - Specifies the zoom value
@@ -136,7 +136,7 @@ export declare class LayerPanel {
      */
     renderGoogleMap(apikey: string, zoom: number): void;
     /**
-     * To find the tile translate point
+     * To find the tile translate point.
      *
      * @param {number} factorX - Specifies the x factor
      * @param {number} factorY - Specifies the x factor

package/src/maps/layers/layer-panel.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-case-declarations */
 import { isNullOrUndefined, extend, createElement, Fetch, animationMode } from '@syncfusion/ej2-base';
 import { getShapeColor } from '../model/theme';
-import { GeoLocation, isCustomPath, convertGeoToPoint, Point, PathOption, Size, removeElement } from '../utils/helper';
+import { GeoLocation, isCustomPath, convertGeoToPoint, Point, PathOption, Size, removeElement, maintainToggleSelection } from '../utils/helper';
 import { getElementByID, maintainSelection, getValueFromObject } from '../utils/helper';
 import { RectOption, getTranslate, convertTileLatLongToPoint, checkShapeDataFields, CircleOption } from '../utils/helper';
 import { getZoomTranslate, fixInitialScaleForTile } from '../utils/helper';
@@ -643,18 +643,9 @@ var LayerPanel = /** @class */ (function () {
             pathEle.style.cssText = 'outline:none';
         }
         maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
-        if (this.mapObject.toggledShapeElementId) {
-            for (var j = 0; j < this.mapObject.toggledShapeElementId.length; j++) {
-                var styleProperty = this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ?
-                    this.currentLayer.shapeSettings : this.mapObject.legendSettings.toggleLegendSettings;
-                if (this.mapObject.toggledShapeElementId[j] === pathEle.id) {
-                    pathEle.setAttribute('fill', styleProperty.fill);
-                    pathEle.setAttribute('stroke', styleProperty.border.color);
-                    pathEle.setAttribute('fill-opacity', (styleProperty.opacity).toString());
-                    pathEle.setAttribute('stroke-opacity', (isNullOrUndefined(styleProperty.border.opacity) ? styleProperty.opacity : styleProperty.border.opacity).toString());
-                    pathEle.setAttribute('stroke-width', (isNullOrUndefined(styleProperty.border.width) ? 0 : styleProperty.border.width).toString());
-                }
-            }
+        if (this.mapObject.legendSettings.toggleLegendSettings.enable && this.mapObject.legendSettings.type === 'Layers') {
+            maintainToggleSelection(this.mapObject.toggledElementId, pathEle, this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ? this.currentLayer.shapeSettings
+                : this.mapObject.legendSettings.toggleLegendSettings);
         }
         groupElement.appendChild(pathEle);
     };
@@ -729,7 +720,7 @@ var LayerPanel = /** @class */ (function () {
         this.layerGroup.appendChild(this.layerObject);
     };
     /**
-     * render datalabel
+     * render datalabel.
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {number} layerIndex - Specifies the layer index
@@ -746,7 +737,7 @@ var LayerPanel = /** @class */ (function () {
         this.mapObject.dataLabelModule.renderLabel(layer, layerIndex, shape, layer.layerData, group, labelTemplateEle, shapeIndex, intersect);
     };
     /**
-     * To render path for multipolygon
+     * To render path for multipolygon.
      *
      * @param {any[]} currentShapeData Specifies the current shape data
      * @returns {string} Returns the path
@@ -768,7 +759,7 @@ var LayerPanel = /** @class */ (function () {
         return path;
     };
     /**
-     * To render bubble
+     * To render bubble.
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {object} bubbleData - Specifies the bubble data
@@ -795,7 +786,7 @@ var LayerPanel = /** @class */ (function () {
         this.mapObject.bubbleModule.renderBubble(bubbleSettings, bubbleData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, this.mapObject.bubbleModule.id);
     };
     /**
-     * To get the shape color from color mapping module
+     * To get the shape color from color mapping module.
      *
      * @param {LayerSettingsModel} layer - Specifies the layer
      * @param {any} shape - Specifies the shape
@@ -1363,7 +1354,7 @@ var LayerPanel = /** @class */ (function () {
         }
     };
     /**
-     * Animation for tile layers and hide the group element until the tile layer rendering
+     * Animation for tile layers and hide the group element until the tile layer rendering.
      *
      * @param {string} zoomType - Specifies the zoom type
      * @param {number} translateX - Specifies the x translate point
@@ -1392,7 +1383,7 @@ var LayerPanel = /** @class */ (function () {
         }
     };
     /**
-     * Static map rendering
+     * Static map rendering.
      *
      * @param {string} apikey - Specifies the api key
      * @param {number} zoom - Specifies the zoom value
@@ -1449,7 +1440,7 @@ var LayerPanel = /** @class */ (function () {
                 + eleHeight + 'px"><img src="' + staticMapString + '"' + 'alt="' + this.mapObject.getLocalizedLabel('ImageNotFound') + '"></div>';
     };
     /**
-     * To find the tile translate point
+     * To find the tile translate point.
      *
      * @param {number} factorX - Specifies the x factor
      * @param {number} factorY - Specifies the x factor

package/src/maps/layers/legend.d.ts

@@ -42,6 +42,7 @@ export declare class Legend {
     private heightIncrement;
     private widthIncrement;
     private textMaxWidth;
+    private arrowTimer;
     /**
      * @private
      */
@@ -110,6 +111,14 @@ export declare class Legend {
      * @private
      */
     drawLegendItem(page: number): void;
+    /**
+     * @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
+     */
+    maintainLegendToggle(legendIndex: number, legendShapeElement: Element, legendTextElement: Element): void;
     legendHighLightAndSelection(targetElement: Element, value: string): void;
     private setColor;
     pushCollection(targetElement: Element, collection: any[], oldElement: object, shapeSettings: ShapeSettings): void;

package/src/maps/layers/legend.js

@@ -440,10 +440,14 @@ var Legend = /** @class */ (function () {
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
                 textFont.fontFamily = !isNullOrUndefined(textFont.fontFamily) ? textFont.fontFamily : this.maps.themeStyle.fontFamily;
                 textFont.size = map.themeStyle.legendFontSize || textFont.size;
-                var element = renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
-                element.setAttribute('aria-label', item['text']);
-                element.setAttribute('role', 'region');
-                this.legendGroup.appendChild(render.drawRectangle(rectOptions));
+                var textElement = renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
+                textElement.setAttribute('aria-label', item['text']);
+                textElement.setAttribute('role', 'region');
+                var rectElement = 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();
             }
         }
@@ -517,10 +521,14 @@ var Legend = /** @class */ (function () {
                     legendText = trimmedText;
                 }
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
-                var element = renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
-                element.setAttribute('aria-label', legendText);
-                element.setAttribute('role', 'region');
+                var textElement = 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')) {
+                    var legendShapeElement = legendElement.childNodes[0];
+                    this.maintainLegendToggle(collection['idIndex'], legendShapeElement, textElement);
+                }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (i === (this.totalPages[page]['Collection'].length - 1)) {
                     var pagingGroup = void 0;
@@ -605,6 +613,34 @@ var Legend = /** @class */ (function () {
             }
         }
     };
+    /**
+     * @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
+     */
+    Legend.prototype.maintainLegendToggle = function (legendIndex, legendShapeElement, legendTextElement) {
+        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
+            var currentItem = this.legendCollection[legendIndex]['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 {
+                var layerIndex = currentItem[currentItem.length - 1].layerIndex;
+                this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.layers[layerIndex].shapeSettings.fill, this.maps.layers[layerIndex].shapeSettings.opacity, this.maps.layers[layerIndex].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.width)
+                    ? 0 : this.maps.layers[layerIndex].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.opacity)
+                    ? this.maps.layers[layerIndex].shapeSettings.opacity
+                    : this.maps.layers[layerIndex].shapeSettings.border.opacity, this.maps.layers[layerIndex].shapeSettings.fill);
+            }
+            currentItem['_isVisible'] = false;
+        }
+    };
     Legend.prototype.legendHighLightAndSelection = function (targetElement, value) {
         var shapeIndex;
         var layerIndex;
@@ -1438,7 +1474,7 @@ var Legend = /** @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Array.prototype.forEach.call(markerData, function (data, dataIndex) {
                 var marker = _this.maps.layers[layerIndex].markerSettings[markerIndex];
-                if ((text === data[marker.legendText] || text === '') && legendFill === data[marker.colorValuePath]) {
+                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 });
                 }
@@ -1699,11 +1735,22 @@ var Legend = /** @class */ (function () {
                     if (!isNullOrUndefined(currentData['data'])) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var data = currentData['data'];
-                        for (var j = 0; j < data.length; j++) {
+                        var _loop_3 = function (j) {
                             if (dataIndex === data[j]['dataIndex'] && layerIndex === data[j]['layerIndex']) {
-                                this.renderInteractivePointer(legend, fill, stroke, id, strokeWidth, rect);
-                                break;
+                                this_3.renderInteractivePointer(legend, fill, stroke, id, strokeWidth, rect);
+                                var arrowElement_1 = querySelector(id, this_3.maps.element.id);
+                                if (this_3.maps.isDevice && !(isNullOrUndefined(arrowElement_1))) {
+                                    clearTimeout(this_3.arrowTimer);
+                                    this_3.arrowTimer = setTimeout(function () { remove(arrowElement_1); }, 2000);
+                                }
+                                return "break";
                             }
+                        };
+                        var this_3 = this;
+                        for (var j = 0; j < data.length; j++) {
+                            var state_1 = _loop_3(j);
+                            if (state_1 === "break")
+                                break;
                         }
                     }
                 }
@@ -1779,6 +1826,10 @@ var Legend = /** @class */ (function () {
         mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[layerIndex].markerSettings[markerIndex].border.opacity) ?
             this.maps.layers[layerIndex].markerSettings[markerIndex].opacity :
             this.maps.layers[layerIndex].markerSettings[markerIndex].border.opacity).toString());
+        var indexToRemoveSelectedElement = this.maps.toggledElementId.indexOf(mapElement.id);
+        if (indexToRemoveSelectedElement !== -1) {
+            this.maps.toggledElementId.splice(indexToRemoveSelectedElement, 1);
+        }
     };
     Legend.prototype.bubbleToggleSelection = function (mapElement, layerIndex, bubbleIndex, legendIndex) {
         mapElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
@@ -1820,6 +1871,7 @@ var Legend = /** @class */ (function () {
                                     '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id);
                                 mapElement = mapElement.children[0];
                             }
+                            var toggledLegendIdIndex = this.maps.toggledLegendId.indexOf(legendIndex);
                             if (isVisible && mapElement !== null) {
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     mapElement.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
@@ -1837,6 +1889,15 @@ var Legend = /** @class */ (function () {
                                     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);
+                                    }
+                                    var index = 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);
@@ -1855,6 +1916,9 @@ var Legend = /** @class */ (function () {
                             }
                             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 {
@@ -1863,7 +1927,7 @@ var Legend = /** @class */ (function () {
                                 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]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], '#757575');
+                                    this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['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]['fill']);
                                     }
@@ -1887,13 +1951,13 @@ var Legend = /** @class */ (function () {
                         layerElement = querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                             '_shapeIndex_' + shape['shapeIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                         if (layerElement !== null) {
-                            var toggledShapeIdIndex = this.maps.toggledShapeElementId.indexOf(layerElement.id);
+                            var toggledShapeIdIndex = this.maps.toggledElementId.indexOf(layerElement.id);
                             if (isVisible) {
                                 if (i === 0) {
                                     this.maps.toggledLegendId.push(legendIndex);
                                 }
                                 if (toggledShapeIdIndex === -1) {
-                                    this.maps.toggledShapeElementId.push(layerElement.id);
+                                    this.maps.toggledElementId.push(layerElement.id);
                                 }
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     layerElement.setAttribute('fill', this.maps.layers[j].shapeSettings.fill);
@@ -1932,7 +1996,7 @@ var Legend = /** @class */ (function () {
                                     this.maps.toggledLegendId.splice(toggledLegendIdIndex, 1);
                                 }
                                 if (toggledShapeIdIndex !== -1) {
-                                    this.maps.toggledShapeElementId.splice(toggledShapeIdIndex, 1);
+                                    this.maps.toggledElementId.splice(toggledShapeIdIndex, 1);
                                 }
                                 layerElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
                                 layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
@@ -1964,6 +2028,7 @@ var Legend = /** @class */ (function () {
             var selectedItem = this.legendCollection[legendIndex]['data'];
             var isVisible = selectedItem['_isVisible'];
             if ((this.maps.legendSettings.type === 'Bubbles' || this.maps.legendSettings.type === 'Markers') && this.maps.legendSettings.toggleLegendSettings.enable) {
+                var toggledLegendIdIndex = this.maps.toggledLegendId.indexOf(legendIndex);
                 for (var k = 0; k < this.maps.layers.length; k++) {
                     for (var j = 0; j < (this.maps.legendSettings.type === 'Bubbles' ? this.maps.layers[k].bubbleSettings.length : this.maps.layers[k].markerSettings.length); j++) {
                         for (var i = 0; i < selectedItem.length; i++) {
@@ -1978,6 +2043,15 @@ var Legend = /** @class */ (function () {
                                 LegendInteractive = LegendInteractive.children[0];
                             }
                             if (isVisible && LegendInteractive !== null) {
+                                if (this.maps.legendSettings.type === 'Markers') {
+                                    if (toggledLegendIdIndex === -1) {
+                                        this.maps.toggledLegendId.push(legendIndex);
+                                    }
+                                    var index = 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].shapeSettings.fill);
                                     LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
@@ -2015,6 +2089,9 @@ var Legend = /** @class */ (function () {
                             }
                             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 {
@@ -2028,7 +2105,7 @@ var Legend = /** @class */ (function () {
                                     legendShapeId.setAttribute('stroke-width', this.legendCollection[legendIndex]['shapeBorder']['width']);
                                     legendShapeId.setAttribute('stroke-opacity', this.legendCollection[legendIndex]['shapeBorder']['opacity']);
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#757575');
+                                    legendTextId.setAttribute('fill', this.maps.legendSettings.textStyle.color);
                                 }
                             }
                         }
@@ -2049,13 +2126,13 @@ var Legend = /** @class */ (function () {
                         mapLegendElement = querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
                             '_shapeIndex_' + mapdata['shapeIndex'] + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id);
                         if (mapLegendElement !== null) {
-                            var toggledShapeIdIndex = this.maps.toggledShapeElementId.indexOf(mapLegendElement.id);
+                            var toggledShapeIdIndex = this.maps.toggledElementId.indexOf(mapLegendElement.id);
                             if (isVisible) {
                                 if (i === 0) {
                                     this.maps.toggledLegendId.push(legendIndex);
                                 }
                                 if (toggledShapeIdIndex === -1) {
-                                    this.maps.toggledShapeElementId.push(mapLegendElement.id);
+                                    this.maps.toggledElementId.push(mapLegendElement.id);
                                 }
                                 if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                     mapLegendElement.setAttribute('fill', this.maps.layers[0].shapeSettings.fill);
@@ -2095,7 +2172,7 @@ var Legend = /** @class */ (function () {
                                     this.maps.toggledLegendId.splice(toggleLegendIdIndex, 1);
                                 }
                                 if (toggledShapeIdIndex !== -1) {
-                                    this.maps.toggledShapeElementId.splice(toggledShapeIdIndex, 1);
+                                    this.maps.toggledElementId.splice(toggledShapeIdIndex, 1);
                                 }
                                 mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                 mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 :