@syncfusion/ej2-maps 20.3.56 → 20.4.40

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

@@ -1,7 +1,4 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable jsdoc/require-param */
 /* eslint-disable no-case-declarations */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { isNullOrUndefined, extend, createElement, Ajax } from '@syncfusion/ej2-base';
 import { getShapeColor } from '../model/theme';
 import { GeoLocation, isCustomPath, convertGeoToPoint, Point, PathOption, Size, removeElement } from '../utils/helper';
@@ -200,7 +197,10 @@ var LayerPanel = /** @class */ (function () {
             panel.mapObject.previousZoomFactor = panel.mapObject.zoomSettings.zoomFactor;
         }
         if (panel.mapObject.navigationLineModule) {
-            panel.layerObject.appendChild(panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex));
+            var navigationLineElement = panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex);
+            if (!isNullOrUndefined(navigationLineElement)) {
+                panel.layerObject.appendChild(navigationLineElement);
+            }
         }
         if (panel.mapObject.markerModule) {
             panel.mapObject.markerModule.markerRender(this.mapObject, panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
@@ -268,7 +268,6 @@ var LayerPanel = /** @class */ (function () {
                             var imageUrl = resource['imageUrl'];
                             var subDomains = resource['imageUrlSubdomains'];
                             var maxZoom = resource['zoomMax'];
-                            var markerGroupElement = document.getElementById(proxy_1.mapObject.element.id + '_Markers_Group');
                             if (imageUrl !== null && imageUrl !== undefined && imageUrl !== bing_1.imageUrl) {
                                 bing_1.imageUrl = imageUrl;
                             }
@@ -433,8 +432,6 @@ var LayerPanel = /** @class */ (function () {
                 fill = Object.prototype.toString.call(getShapeColor_1) === '[object Object]' && !isNullOrUndefined(getShapeColor_1['fill'])
                     ? getShapeColor_1['fill'] : fill;
                 if (this_1.currentLayer.shapeSettings.borderColorValuePath || this_1.currentLayer.shapeSettings.borderWidthValuePath) {
-                    var borderColorValue = this_1.currentLayer.shapeSettings.borderColorValuePath;
-                    var borderWidthValue = this_1.currentLayer.shapeSettings.borderWidthValuePath;
                     k = checkShapeDataFields(
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this_1.currentLayer.dataSource, currentShapeData['property'], this_1.currentLayer.shapeDataPath, this_1.currentLayer.shapePropertyPath, this_1.currentLayer);
@@ -561,7 +558,9 @@ var LayerPanel = /** @class */ (function () {
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             var pointData = currentShapeData['point'];
-                            var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (_this.mapObject.isTileMap ? _this.mapObject.scale : _this.currentFactor);
+                            var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ?
+                                shapeSettings.circleRadius : shapeSettings.circleRadius / (_this.mapObject.isTileMap ?
+                                _this.mapObject.scale : _this.currentFactor);
                             circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                             pathEle = _this.mapObject.renderer.drawCircle(circleOptions);
                             break;
@@ -571,7 +570,7 @@ var LayerPanel = /** @class */ (function () {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 var pointData = multiPointData['point'];
                                 var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (_this.mapObject.isTileMap ? _this.mapObject.scale : _this.currentFactor);
-                                circleOptions = new CircleOption((shapeID + "_multiLine_" + index), eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
+                                circleOptions = new CircleOption((shapeID + '_multiLine_' + index), eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                                 pathEle = _this.mapObject.renderer.drawCircle(circleOptions);
                                 _this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData, i);
                             });
@@ -604,15 +603,16 @@ var LayerPanel = /** @class */ (function () {
     /**
      * layer features as bubble, marker, datalabel, navigation line.
      *
-     * @param {groupElement} Element - Specifies the element to append the group
-     * @param {pathEle} Element - Specifies the svg element
-     * @param {drawingType} string - Specifies the data type
-     * @param {currentShapeData} any - Specifies the layer of shapedata.
-     * @param {index} number - Specifies the tab index.
+     * @param {Element} groupElement - Specifies the element to append the group.
+     * @param {Element} pathEle - Specifies the svg element.
+     * @param {string} drawingType - Specifies the data type.
+     * @param {any} currentShapeData - Specifies the layer of shapedata.
+     * @param {number} index - Specifies the tab index.
      * @returns {void}
      */
+    LayerPanel.prototype.pathAttributeCalculate = function (groupElement, pathEle, drawingType, 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    LayerPanel.prototype.pathAttributeCalculate = function (groupElement, pathEle, drawingType, currentShapeData, index) {
+    currentShapeData, index) {
         var property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
             this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
         var properties;
@@ -639,7 +639,7 @@ var LayerPanel = /** @class */ (function () {
                     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', (styleProperty.border.width).toString());
+                    pathEle.setAttribute('stroke-width', (isNullOrUndefined(styleProperty.border.width) ? 0 : styleProperty.border.width).toString());
                 }
             }
         }
@@ -705,8 +705,8 @@ var LayerPanel = /** @class */ (function () {
             _this.layerObject.appendChild(element);
         });
         if (this.mapObject.markerModule) {
-            this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
-                : this.currentFactor), null);
+            this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor) :
+                this.currentFactor), null);
         }
         this.translateLayerElements(this.layerObject, layerIndex);
         this.layerGroup.appendChild(this.layerObject);
@@ -716,11 +716,11 @@ var LayerPanel = /** @class */ (function () {
      *
      * @param {LayerSettings} layer - Specifies the layer
      * @param {number} layerIndex - Specifies the layer index
-     * @param {object[]} shape - Specifies the shape
+     * @param {any[]} shape - Specifies the shape
      * @param {Element} group - Specifies the group
      * @param {number} shapeIndex - Specifies the shape index
      * @param {HTMLElement} labelTemplateEle - Specifies the label template element
-     * @param {object[]} intersect - Specifies the intersect
+     * @param {any[]} intersect - Specifies the intersect
      * @returns {void}
      */
     LayerPanel.prototype.renderLabel = function (layer, layerIndex, 
@@ -819,10 +819,12 @@ var LayerPanel = /** @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var multiPolygonDatas = [];
                 for (var i = 0; i < coordinates.length; i++) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    newData = this.calculatePolygonBox(coordinates[i][0], data, properties);
-                    if (newData.length > 0) {
-                        multiPolygonDatas.push(newData);
+                    for (var j = 0; j < coordinates[i].length; j++) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        newData = this.calculatePolygonBox(coordinates[i][j], data, properties);
+                        if (newData.length > 0) {
+                            multiPolygonDatas.push(newData);
+                        }
                     }
                 }
                 multiPolygonDatas['property'] = properties;
@@ -831,15 +833,15 @@ var LayerPanel = /** @class */ (function () {
                 this.currentLayer.layerData.push(multiPolygonDatas);
                 break;
             case 'linestring':
-                var extraSpace_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                var lineExtraSpace_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                     (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                         parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                coordinates.map(function (points, index) {
+                coordinates.map(function (points) {
                     latitude = points[1];
                     longitude = points[0];
                     var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
-                    _this.calculateBox(point, extraSpace_1);
+                    _this.calculateBox(point, lineExtraSpace_1);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -852,10 +854,12 @@ var LayerPanel = /** @class */ (function () {
                 var extraSpaces_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                     (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                         parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var multiLineData_1 = [];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map(function (multiPoints) {
                     newData = [];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     multiPoints.map(function (points) {
                         latitude = points[1];
                         longitude = points[0];
@@ -884,8 +888,8 @@ var LayerPanel = /** @class */ (function () {
                     point: point, type: type, lat: latitude, lng: longitude, property: properties
                 });
                 break;
-            case 'multipoint': {
-                var extraSpace_2 = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+            case 'multipoint':
+                var extraSpace_1 = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                     (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                         parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
                     (this.currentLayer.shapeSettings.circleRadius * 2);
@@ -895,7 +899,7 @@ var LayerPanel = /** @class */ (function () {
                     latitude = points[1];
                     longitude = points[0];
                     var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
-                    _this.calculateBox(point, extraSpace_2);
+                    _this.calculateBox(point, extraSpace_1);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -904,7 +908,6 @@ var LayerPanel = /** @class */ (function () {
                 newData['type'] = type;
                 this.currentLayer.layerData.push(newData);
                 break;
-            }
             case 'path':
                 this.currentLayer.layerData.push({
                     point: data['d'], type: type, property: properties
@@ -914,7 +917,8 @@ var LayerPanel = /** @class */ (function () {
     };
     LayerPanel.prototype.calculateBox = function (point, extraSpace) {
         if (isNullOrUndefined(this.rectBounds)) {
-            this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace, y: point.y + extraSpace } };
+            this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace,
+                    y: point.y + extraSpace } };
         }
         else {
             this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x - extraSpace);
@@ -1038,6 +1042,7 @@ var LayerPanel = /** @class */ (function () {
                     case 'multilinestring':
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map(function (multiPoint, index) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             multiPoint.map(function (point, index) {
                                 _this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
                             });
@@ -1053,6 +1058,7 @@ var LayerPanel = /** @class */ (function () {
                         _this.calculateRectBox(coordinates, 'point');
                         break;
                     case 'multipoint':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         coordinates.map(function (point, index) {
                             _this.calculateRectBox(point, 'multipoint', index === 0 ? true : false);
                         });
@@ -1068,7 +1074,7 @@ var LayerPanel = /** @class */ (function () {
         var newData = [];
         var bounds = this.mapObject.baseMapBounds;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        coordinates.map(function (currentPoint, index) {
+        coordinates.map(function (currentPoint) {
             var latitude = currentPoint[1];
             var longitude = currentPoint[0];
             if ((longitude >= bounds.longitude.min && longitude <= bounds.longitude.max)
@@ -1162,8 +1168,8 @@ var LayerPanel = /** @class */ (function () {
                             tileI = (tileI % ycount) + ycount;
                         }
                         var tile = new Tile(tileI % ycount, j);
-                        tile.left = x;
-                        tile.top = y;
+                        tile.left = Math.round(x);
+                        tile.top = Math.round(y);
                         if (baseLayer.layerType === 'Bing' || (bing && !isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '')) {
                             var key = baseLayer.key;
                             tile.src = bing.getBingMap(tile, key, baseLayer.bingMapType, userLang, bing.imageUrl, bing.subDomains);
@@ -1257,18 +1263,45 @@ var LayerPanel = /** @class */ (function () {
                         animateElement = element ? element.children[0] : null;
                     }
                 }
-                var id = 0;
-                var _loop_3 = function (tile) {
-                    var imgElement = createElement('img');
-                    imgElement.setAttribute('height', '256px');
-                    imgElement.setAttribute('width', '256px');
-                    imgElement.setAttribute('src', tile.src);
-                    imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
+                for (var id = 0; id < _this.tiles.length; id++) {
+                    var tile = _this.tiles[id];
+                    var imgElement = null;
                     var mapId = _this.mapObject.element.id;
-                    imgElement.onload = function () {
-                        if (document.getElementById(mapId + '_tile_' + id) && type === 'Pan') {
-                            removeElement(mapId + '_tile_' + id);
+                    if (type === 'Pan') {
+                        var child = document.getElementById(mapId + '_tile_' + id);
+                        var isNewTile = false;
+                        if (isNullOrUndefined(child)) {
+                            isNewTile = true;
+                            child = createElement('div', { id: mapId + '_tile_' + id });
+                            imgElement = createElement('img');
+                        }
+                        else {
+                            child.style.removeProperty('display');
+                            imgElement = child.children[0];
+                        }
+                        if (!isNewTile && imgElement && imgElement.src !== tile.src) {
+                            imgElement.src = tile.src;
                         }
+                        child.style.position = 'absolute';
+                        child.style.left = tile.left + 'px';
+                        child.style.top = tile.top + 'px';
+                        child.style.height = tile.height + 'px';
+                        child.style.width = tile.width + 'px';
+                        if (isNewTile) {
+                            imgElement.setAttribute('height', '256px');
+                            imgElement.setAttribute('width', '256px');
+                            imgElement.setAttribute('src', tile.src);
+                            imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
+                            child.appendChild(imgElement);
+                            animateElement.appendChild(child);
+                        }
+                    }
+                    else {
+                        imgElement = createElement('img');
+                        imgElement.setAttribute('height', '256px');
+                        imgElement.setAttribute('width', '256px');
+                        imgElement.setAttribute('src', tile.src);
+                        imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
                         var child = createElement('div', { id: mapId + '_tile_' + id });
                         child.style.position = 'absolute';
                         child.style.left = tile.left + 'px';
@@ -1279,15 +1312,27 @@ var LayerPanel = /** @class */ (function () {
                         if (animateElement) {
                             animateElement.appendChild(child);
                         }
-                        id++;
-                        if (id === _this.tiles.length && document.getElementById(_this.mapObject.element.id + '_animated_tiles_old')) {
-                            removeElement(_this.mapObject.element.id + '_animated_tiles_old');
+                    }
+                    if (id === (_this.tiles.length - 1) && document.getElementById(_this.mapObject.element.id + '_animated_tiles_old')) {
+                        removeElement(_this.mapObject.element.id + '_animated_tiles_old');
+                    }
+                }
+                if (!isNullOrUndefined(_this.mapObject.currentTiles)) {
+                    for (var l = _this.tiles.length; l < animateElement.childElementCount; l++) {
+                        var isExistingElement = false;
+                        for (var a = 0; a < _this.mapObject.currentTiles.childElementCount; a++) {
+                            if (!isExistingElement &&
+                                _this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
+                                isExistingElement = true;
+                            }
+                        }
+                        if (isExistingElement) {
+                            animateElement.children[l].style.display = 'none';
                         }
-                    };
-                };
-                for (var _i = 0, _a = _this.tiles; _i < _a.length; _i++) {
-                    var tile = _a[_i];
-                    _loop_3(tile);
+                        else {
+                            animateElement.removeChild(animateElement.children[l]);
+                        }
+                    }
                 }
             }, timeOut);
         }

package/src/maps/layers/legend.js

@@ -154,7 +154,6 @@ var Legend = /** @class */ (function () {
             var shapeLocation = [];
             var textLocation = [];
             var legendRectCollection = [];
-            var location_1;
             var position = legend.position;
             var labelAction = legend.labelDisplayMode;
             var arrangement = (legend.orientation === 'None') ? ((position === 'Top' || position === 'Bottom')
@@ -460,7 +459,6 @@ var Legend = /** @class */ (function () {
         var spacing = 10;
         var shapeSize = new Size(legend.shapeWidth, legend.shapeHeight);
         var textOptions;
-        var renderOptions;
         var render = map.renderer;
         var legendShape = legend.shape;
         if (page >= 0 && page < this.totalPages.length) {
@@ -486,15 +484,16 @@ var Legend = /** @class */ (function () {
                 var textId = map.element.id + '_Legend_Text_Index_' + collection['idIndex'];
                 var shapeLocation = new Point(collection['Shape']['x'], (collection['Shape']['y'] - pagingArrowPadding));
                 var textLocation = new Point(collection['Text']['x'], (collection['Text']['y'] - pagingArrowPadding));
-                var imageUrl = ((isNullOrUndefined(collection['ImageSrc'])) ? legend.shape : collection['ImageSrc']);
-                var renderOptions_1 = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
+                var renderOptions = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
                 var legendTextStyle = {
                     fontFamily: legend.textStyle.fontFamily, fontStyle: legend.textStyle.fontStyle,
-                    fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color, opacity: legend.textStyle.opacity
+                    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.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily :
+                    this.maps.themeStyle.fontFamily;
                 legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
                 if (i === 0) {
                     this.renderLegendBorder();
@@ -504,11 +503,11 @@ var Legend = /** @class */ (function () {
                     var marker = 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_1, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
+                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_1));
+                    legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions));
                 }
                 var legendRectSize = collection['Rect']['x'] + collection['Rect']['width'];
                 if (legendRectSize > this.legendBorderRect.width) {
@@ -982,8 +981,6 @@ var Legend = /** @class */ (function () {
                     }
                     if (selectionEle && (selectionEle['IsSelected'] && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
                         || targetElement.getAttribute('class') === 'LineselectionMapStyle'))) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var element = this.maps.legendSelectionCollection[selectionEle['SelectionIndex']];
                         var multiSelection = 0;
                         if (module.enableMultiSelect) {
                             for (var i = 0; i < shapeElement['Elements'].length; i++) {
@@ -1242,7 +1239,8 @@ var Legend = /** @class */ (function () {
         var legendTitle = legend.title.text;
         var textStyle = {
             fontFamily: legend.titleStyle.fontFamily, fontStyle: legend.titleStyle.fontStyle,
-            fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color, opacity: legend.titleStyle.opacity
+            fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color,
+            opacity: legend.titleStyle.opacity
         };
         var textOptions;
         var spacing = 10;
@@ -1303,7 +1301,8 @@ var Legend = /** @class */ (function () {
         var locationX = !isNullOrUndefined(legend.location.x) ? legend.location.x : 0;
         var locationY = !isNullOrUndefined(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.translate = map.isTileMap ? new Point(locationX, locationY + (spacing / 4)) :
+                new Point(locationX + map.mapAreaRect.x, locationY + map.mapAreaRect.y);
             this.legendTotalRect = map.mapAreaRect;
         }
         else {
@@ -1388,7 +1387,8 @@ var Legend = /** @class */ (function () {
                         _this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
                     else {
-                        newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
+                        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);
                     }
@@ -1577,7 +1577,6 @@ var Legend = /** @class */ (function () {
                 if (outOfRangeValues.length === 0) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var range_1 = false;
-                    var outRange = [];
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
                         range_1 = false;
@@ -1766,7 +1765,6 @@ var Legend = /** @class */ (function () {
     Legend.prototype.legendClick = function (targetEle) {
         var legendShapeId;
         var legendTextId;
-        var legendTextColor;
         var legendToggleFill = this.maps.legendSettings.toggleLegendSettings.fill;
         var legendToggleOpacity = this.maps.legendSettings.toggleLegendSettings.opacity;
         var legendToggleBorderColor = this.maps.legendSettings.toggleLegendSettings.border.color;
@@ -1814,12 +1812,25 @@ var Legend = /** @class */ (function () {
                                 }
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
-                                    legendShapeId.setAttribute('fill', '#E5E5E5');
-                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
-                                        legendShapeId.setAttribute('stroke', '#E5E5E5');
-                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#E5E5E5');
+                                    if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                        legendShapeId.setAttribute('fill', legendToggleFill);
+                                        legendShapeId.setAttribute('fill-opacity', (legendToggleOpacity).toString());
+                                        legendShapeId.setAttribute('stroke', legendToggleBorderColor);
+                                        legendShapeId.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
+                                        legendShapeId.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
+                                        legendTextId.setAttribute('fill', legendToggleFill);
+                                    }
+                                    else {
+                                        legendTextId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
+                                        legendShapeId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
+                                        legendShapeId.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
+                                        legendShapeId.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
+                                        legendShapeId.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
+                                        legendShapeId.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());
+                                    }
                                 }
                             }
                             else {
@@ -1832,6 +1843,10 @@ var Legend = /** @class */ (function () {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
+                                    legendShapeId.setAttribute('fill-opacity', this.legendCollection[legendIndex]['opacity']);
+                                    legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['shapeBorder']['color']);
+                                    legendShapeId.setAttribute('stroke-width', this.legendCollection[legendIndex]['shapeBorder']['width']);
+                                    legendShapeId.setAttribute('stroke-opacity', this.legendCollection[legendIndex]['shapeBorder']['opacity']);
                                     if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
                                         legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
                                     }
@@ -1958,9 +1973,25 @@ var Legend = /** @class */ (function () {
                                 }
                                 if (targetEle !== null) {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
-                                    legendTextId.setAttribute('fill', '#E5E5E5');
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
-                                    legendShapeId.setAttribute('fill', '#E5E5E5');
+                                    if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
+                                        legendTextId.setAttribute('fill', legendToggleFill);
+                                        legendShapeId.setAttribute('fill', legendToggleFill);
+                                        legendShapeId.setAttribute('fill-opacity', (legendToggleOpacity).toString());
+                                        legendShapeId.setAttribute('stroke', legendToggleBorderColor);
+                                        legendShapeId.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
+                                        legendShapeId.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
+                                    }
+                                    else {
+                                        legendTextId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
+                                        legendShapeId.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
+                                        legendShapeId.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
+                                        legendShapeId.setAttribute('stroke-width', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
+                                        legendShapeId.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());
+                                        legendShapeId.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
+                                    }
                                 }
                             }
                             else {
@@ -1973,6 +2004,10 @@ var Legend = /** @class */ (function () {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
+                                    legendShapeId.setAttribute('fill-opacity', this.legendCollection[legendIndex]['opacity']);
+                                    legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['shapeBorder']['color']);
+                                    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');
                                 }
@@ -2034,10 +2069,12 @@ var Legend = /** @class */ (function () {
                                     this.maps.toggledShapeElementId.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-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-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
-                                    this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity).toString());
+                                    this.maps.layers[k].shapeSettings.opacity :
+                                    this.maps.layers[k].shapeSettings.border.opacity).toString());
                                 mapLegendElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
                                 if (targetEle !== null) {
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
@@ -2101,7 +2138,7 @@ var Legend = /** @class */ (function () {
                     && isNaN(shapeData['properties'][shapePath]) ?
                     shapeData['properties'][shapePath].toLowerCase() : shapeData['properties'][shapePath];
                 if (shapeDataValueCase === dataPathValueCase) {
-                    if (shapeData['geometry']['type'] != 'MultiPoint') {
+                    if (shapeData['geometry']['type'] !== 'MultiPoint') {
                         legendData.push({
                             layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
                             name: data[dataPath], value: value, pointIndex: -1

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

@@ -25,14 +25,21 @@ export declare class Marker {
     private calculateIndividualLayerMarkerZoomLevel;
     /**
      * To calculate center position and factor value dynamically
+     *
+     * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
+     * @returns {void}
      */
     calculateZoomCenterPositionAndFactor(layersCollection: LayerSettings[]): void;
     /**
      * To check and trigger marker click event
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerClick(e: PointerEvent): void;
     /**
      * To check and trigger Cluster click event
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerClusterClick(e: PointerEvent): void;
     /**
@@ -44,10 +51,16 @@ export declare class Marker {
     private getMarker;
     /**
      * To check and trigger marker move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerMove(e: PointerEvent): void;
     /**
      * To check and trigger cluster move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     markerClusterMouseMove(e: PointerEvent): void;
     /**