@syncfusion/ej2-maps 25.2.4 → 26.1.35

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,36 @@ 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, 
+                /* eslint-disable-next-line max-len */
+                this.maps.layers[layerIndex].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, 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;
@@ -796,7 +834,7 @@ var Legend = /** @class */ (function () {
         collection.push({
             legendElement: targetElement, legendOldFill: oldElement['fill'], legendOldOpacity: oldElement['opacity'],
             legendOldBorderColor: oldElement['borderColor'], legendOldBorderWidth: oldElement['borderWidth'],
-            shapeOpacity: shapeSettings.opacity, shapeOldBorderColor: shapeSettings.border.color,
+            shapeOpacity: shapeSettings.opacity, shapeOldBorderColor: shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor,
             shapeOldBorderWidth: shapeSettings.border.width
         });
         var length = collection.length;
@@ -1273,7 +1311,8 @@ var Legend = /** @class */ (function () {
         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));
         var legendBorder = {
-            color: legend.border.color, width: legend.border.width, opacity: legend.border.opacity
+            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;
         var renderOptions = new RectOption(map.element.id + '_Legend_Border', legend.background, legendBorder, 1, this.legendBorderRect, null, null, '', '');
@@ -1438,7 +1477,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 });
                 }
@@ -1460,15 +1499,17 @@ var Legend = /** @class */ (function () {
                 legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.from + ' - ' + colorMap.to;
                 rangeData = [];
                 var colorMapProcess_1 = false;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
-                    var colorValue = (colorValuePath.indexOf('.') > -1) ? Number(getValueFromObject(data, colorValuePath)) :
-                        parseFloat(data[colorValuePath]);
-                    if (colorValue >= colorMap.from && colorValue <= colorMap.to) {
-                        colorMapProcess_1 = true;
-                        rangeData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, colorValue));
-                    }
-                });
+                if (!isNullOrUndefined(dataSource) && dataSource.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
+                        var colorValue = (colorValuePath.indexOf('.') > -1) ? Number(getValueFromObject(data, colorValuePath)) :
+                            parseFloat(data[colorValuePath]);
+                        if (colorValue >= colorMap.from && colorValue <= colorMap.to) {
+                            colorMapProcess_1 = true;
+                            rangeData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, colorValue));
+                        }
+                    });
+                }
                 if (!colorMapProcess_1) {
                     rangeData.push({
                         layerIndex: layerIndex, shapeIndex: null, dataIndex: null,
@@ -1556,23 +1597,25 @@ var Legend = /** @class */ (function () {
                 legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.value;
                 equalData = [];
                 var eqaulColorProcess_1 = false;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
-                    var equalValue = ((colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
-                        (data[colorValuePath]));
-                    if (equalValue === colorMap.value) {
-                        eqaulColorProcess_1 = true;
-                        if (equalValues.indexOf(equalValue) === -1) {
-                            equalValues.push(equalValue);
+                if (!isNullOrUndefined(dataSource) && dataSource.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
+                        var equalValue = ((colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, colorValuePath)) :
+                            (data[colorValuePath]));
+                        if (equalValue === colorMap.value) {
+                            eqaulColorProcess_1 = true;
+                            if (equalValues.indexOf(equalValue) === -1) {
+                                equalValues.push(equalValue);
+                            }
+                            equalData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, equalValue));
                         }
-                        equalData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, equalValue));
-                    }
-                    else {
-                        if (outOfRangeValues.indexOf(equalValue) === -1) {
-                            outOfRangeValues.push(equalValue);
+                        else {
+                            if (outOfRangeValues.indexOf(equalValue) === -1) {
+                                outOfRangeValues.push(equalValue);
+                            }
                         }
-                    }
-                });
+                    });
+                }
                 for (var x = 0; x < equalValues.length; x++) {
                     for (var y = 0; y < outOfRangeValues.length; y++) {
                         if (equalValues[x] === outOfRangeValues[y]) {
@@ -1699,11 +1742,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 +1833,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,10 +1878,11 @@ 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);
-                                    mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
+                                    mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     mapElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                     mapElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
@@ -1837,6 +1896,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);
@@ -1844,7 +1912,9 @@ var Legend = /** @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                             ? 0 : this.maps.layers[k].shapeSettings.border.width, 
                                         /* eslint-disable-next-line max-len */
                                         isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity)
@@ -1855,6 +1925,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 +1936,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,18 +1960,18 @@ 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);
                                     layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
-                                    layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
+                                    layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                     layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                         this.maps.layers[j].shapeSettings.opacity :
@@ -1918,7 +1991,9 @@ var Legend = /** @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, this.maps.layers[j].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width)
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width)
                                             ? 0 : this.maps.layers[j].shapeSettings.border.width, 
                                         /* eslint-disable-next-line max-len */
                                         isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity)
@@ -1932,7 +2007,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) ?
@@ -1940,7 +2015,7 @@ var Legend = /** @class */ (function () {
                                     this.maps.layers[j].shapeSettings.border.opacity).toString());
                                 layerElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                 layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
-                                layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
+                                layerElement.setAttribute('stroke', this.maps.layers[j].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);
@@ -1964,6 +2039,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,9 +2054,18 @@ 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);
+                                    LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     LegendInteractive.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     LegendInteractive.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
@@ -2001,7 +2086,9 @@ var Legend = /** @class */ (function () {
                                         this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                     }
                                     else {
-                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, 
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, 
                                         /* eslint-disable-next-line max-len */
                                         (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                             ? 0
@@ -2015,6 +2102,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 +2118,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,17 +2139,17 @@ 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);
-                                    mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
+                                    mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                     mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                     mapLegendElement.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                     mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
@@ -2080,7 +2170,9 @@ var Legend = /** @class */ (function () {
                                         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].shapeSettings.opacity, this.maps.layers[0].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
+                                        this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, 
+                                        /* eslint-disable-next-line max-len */
+                                        this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                             ? 0
                                             : this.maps.layers[k].shapeSettings.border.width, 
                                         /* eslint-disable-next-line max-len */
@@ -2095,12 +2187,12 @@ 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 :
                                     this.maps.layers[k].shapeSettings.border.width).toString());
-                                mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
+                                mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                 mapLegendElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                     this.maps.layers[k].shapeSettings.opacity :
                                     this.maps.layers[k].shapeSettings.border.opacity).toString());

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

@@ -31,7 +31,7 @@ export declare class Marker {
      */
     private calculateIndividualLayerMarkerZoomLevel;
     /**
-     * To calculate center position and factor value dynamically
+     * To calculate center position and factor value dynamically.
      *
      * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
      * @returns {void}
@@ -39,7 +39,7 @@ export declare class Marker {
      */
     calculateZoomCenterPositionAndFactor(layersCollection: LayerSettings[]): void;
     /**
-     * To check and trigger marker click event
+     * To check and trigger marker click event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -47,7 +47,7 @@ export declare class Marker {
      */
     markerClick(e: PointerEvent): void;
     /**
-     * To check and trigger Cluster click event
+     * To check and trigger Cluster click event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -55,14 +55,14 @@ export declare class Marker {
      */
     markerClusterClick(e: PointerEvent): void;
     /**
-     * To get marker from target id
+     * To get marker from target id.
      *
      * @param {string} target - Specifies the target
      * @returns {object} - Returns the marker, data, clusterCollection, markCollection
      */
     private getMarker;
     /**
-     * To check and trigger marker move event
+     * To check and trigger marker move event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
@@ -70,15 +70,15 @@ export declare class Marker {
      */
     markerMove(e: PointerEvent): void;
     /**
-     * To check and trigger cluster move event
+     * To check and trigger cluster move event.
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
      * @private
      */
     markerClusterMouseMove(e: PointerEvent): void;
-    /** @private
-     *
+    /**
+     * @private
      * @returns {void}
      */
     initializeMarkerClusterList(): void;