@syncfusion/ej2-maps 20.1.59 → 20.2.43

package/src/maps/maps.js

@@ -35,8 +35,8 @@ import { createStyle } from './utils/helper';
 import { ZoomSettings, LegendSettings } from './model/base';
 import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';
 import { Marker } from './layers/marker';
-import { load, click, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
-import { getThemeStyle } from './model/theme';
+import { load, click, onclick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
+import { getThemeStyle, Theme } from './model/theme';
 import { BingMap } from './layers/bing-map';
 import { LayerPanel } from './layers/layer-panel';
 import { Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';
@@ -236,6 +236,7 @@ var Maps = /** @class */ (function (_super) {
         this.renderArea();
         this.processRequestJsonData();
         this.renderComplete();
+        this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
     };
     /**
      * To Initialize the control rendering.
@@ -378,16 +379,7 @@ var Maps = /** @class */ (function (_super) {
     };
     Maps.prototype.renderMap = function () {
         if (this.legendModule && this.legendSettings.visible) {
-            if (!this.isTileMap) {
-                this.legendModule.renderLegend();
-            }
-            else {
-                var layerCount = this.layersCollection.length - 1;
-                if (!this.layersCollection[layerCount].isBaseLayer) {
-                    this.isTileMapSubLayer = true;
-                    this.legendModule.renderLegend();
-                }
-            }
+            this.legendModule.renderLegend();
         }
         this.createTile();
         if (this.zoomSettings.enable && this.zoomModule) {
@@ -470,12 +462,16 @@ var Maps = /** @class */ (function (_super) {
                 bottom = svg.bottom - tile.bottom - element.offsetTop;
                 top_1 = parseFloat(tileElement.style.top) + element.offsetTop;
             }
-            top_1 = (bottom <= 11) ? top_1 : (top_1 * 2);
-            left = (bottom <= 11) ? left : (left * 2);
+            top_1 = (bottom <= 11) ? top_1 : (!isNullOrUndefined(this.legendModule) && this.legendSettings.position === 'Bottom') ? this.mapAreaRect.y : (top_1 * 2);
+            left = (bottom <= 11) ? left : !isNullOrUndefined(this.legendModule) ? left : (left * 2);
             tileElement.style.top = top_1 + 'px';
             tileElement.style.left = left + 'px';
             tileElement1.style.top = top_1 + 'px';
             tileElement1.style.left = left + 'px';
+            if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
+                tileElement.style.height = tileElement1.style.height = this.legendModule.legendTotalRect.height + 'px';
+                tileElement.style.width = tileElement1.style.width = this.legendModule.legendTotalRect.width + 'px';
+            }
         }
         this.arrangeTemplate();
         if (this.annotationsModule) {
@@ -601,12 +597,21 @@ var Maps = /** @class */ (function (_super) {
             this.zoomModule.layerCollectionEle = getElementByID(this.element.id + '_Layer_Collections');
         }
         if (this.isTileMap && getElementByID(this.element.id + '_Tile_SVG') && getElementByID(this.element.id + '_tile_parent')) {
-            var tileRect = getElementByID(this.element.id + '_tile_parent').getBoundingClientRect();
-            var tileSvgRect = getElementByID(this.element.id + '_Tile_SVG').getBoundingClientRect();
+            var tileElement = getElementByID(this.element.id + '_tile_parent');
+            var tileSvgElement = getElementByID(this.element.id + '_Tile_SVG');
+            var tileSvgParentElement = getElementByID(this.element.id + '_Tile_SVG_Parent');
+            var tileRect = tileElement.getBoundingClientRect();
+            var tileSvgRect = tileSvgElement.getBoundingClientRect();
             left = (tileRect.left - tileSvgRect.left);
             top = (tileRect.top - tileSvgRect.top);
-            getElementByID(this.element.id + '_Tile_SVG_Parent').style.left = left + 'px';
-            getElementByID(this.element.id + '_Tile_SVG_Parent').style.top = top + 'px';
+            tileSvgParentElement.style.left = left + 'px';
+            tileSvgParentElement.style.top = top + 'px';
+            if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
+                tileElement.style.width = tileSvgElement.style.width = this.legendModule.legendTotalRect.width.toString();
+                tileElement.style.height = tileSvgElement.style.height = this.legendModule.legendTotalRect.height.toString();
+                tileSvgParentElement.style.width = this.legendModule.legendTotalRect.width + 'px';
+                tileSvgParentElement.style.height = this.legendModule.legendTotalRect.height + 'px';
+            }
             var markerTemplateElements = document.getElementsByClassName('template');
             if (!isNullOrUndefined(markerTemplateElements) && markerTemplateElements.length > 0) {
                 for (var i = 0; i < markerTemplateElements.length; i++) {
@@ -624,7 +629,7 @@ var Maps = /** @class */ (function (_super) {
             if (!isNullOrUndefined(elements) && elements.childElementCount > 0) {
                 for (var i = 0; i < elements.childNodes.length; i++) {
                     var childElement = elements.childNodes[i];
-                    if (childElement.tagName === 'g') {
+                    if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') == -1) {
                         var layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                         for (var j = 0; j < childElement.childNodes.length; j++) {
                             var childNode = childElement.childNodes[j];
@@ -661,7 +666,7 @@ var Maps = /** @class */ (function (_super) {
         }
         var templateElements = document.getElementsByClassName(this.element.id + '_template');
         if (!isNullOrUndefined(templateElements) && templateElements.length > 0 &&
-            getElementByID(this.element.id + '_Layer_Collections') && this.layers[this.layers.length - 1].layerType !== 'OSM') {
+            getElementByID(this.element.id + '_Layer_Collections') && !this.isTileMap) {
             for (var i = 0; i < templateElements.length; i++) {
                 var offSetLetValue = 0;
                 var offSetTopValue = 0;
@@ -696,10 +701,7 @@ var Maps = /** @class */ (function (_super) {
         var mainLayer = this.layersCollection[0];
         var padding = 0;
         if (mainLayer.isBaseLayer && (mainLayer.layerType === 'OSM' || mainLayer.layerType === 'Bing' ||
-            mainLayer.layerType === 'GoogleStaticMap' || mainLayer.layerType === 'Google')) {
-            if (mainLayer.layerType === 'Google') {
-                mainLayer.urlTemplate = 'https://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level';
-            }
+            mainLayer.layerType === 'GoogleStaticMap' || mainLayer.layerType === 'Google' || (!isNullOrUndefined(mainLayer.urlTemplate) && mainLayer.urlTemplate !== ''))) {
             removeElement(this.element.id + '_tile_parent');
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
@@ -747,7 +749,7 @@ var Maps = /** @class */ (function (_super) {
             var baseLayer = mainLayers[i];
             if (baseLayer.visible && baseIndex === i) {
                 baseLayer.isBaseLayer = true;
-                this.isTileMap = (baseLayer.layerType === 'Geometry') ? false : true;
+                this.isTileMap = (baseLayer.layerType === 'Geometry' && !isNullOrUndefined(baseLayer.shapeData)) ? false : true;
                 this.layersCollection.push(baseLayer);
                 break;
             }
@@ -794,12 +796,19 @@ var Maps = /** @class */ (function (_super) {
      * @private
      */
     Maps.prototype.renderTitle = function (title, type, bounds, groupEle) {
-        var style = title.textStyle;
+        var style = {
+            size: title.textStyle.size,
+            color: title.textStyle.color,
+            fontFamily: title.textStyle.fontFamily,
+            fontWeight: title.textStyle.fontWeight,
+            fontStyle: title.textStyle.fontStyle,
+            opacity: title.textStyle.opacity
+        };
         var height;
         var width = Math.abs((this.margin.left + this.margin.right) - this.availableSize.width);
-        style.fontFamily = this.themeStyle.fontFamily || style.fontFamily;
+        style.fontFamily = !isNullOrUndefined(style.fontFamily) ? style.fontFamily : this.themeStyle.fontFamily;
         style.fontWeight = style.fontWeight || this.themeStyle.titleFontWeight;
-        style.size = this.themeStyle.titleFontSize || style.size;
+        style.size = type === 'title' ? (style.size || this.themeStyle.titleFontSize) : (style.size || Theme.mapsSubTitleFont.size);
         if (title.text) {
             if (isNullOrUndefined(groupEle)) {
                 groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
@@ -969,6 +978,7 @@ var Maps = /** @class */ (function (_super) {
             var id = event.target['id'];
             event.preventDefault();
             if (this.legendModule && (id.indexOf('_Left_Page_Rect') > -1 || id.indexOf('_Right_Page_Rect') > -1)) {
+                this.mapAreaRect = this.legendModule.initialMapAreaRect;
                 this.legendModule.currentPage = (id.indexOf('_Left_Page_') > -1) ? (this.legendModule.currentPage - 1) :
                     (this.legendModule.currentPage + 1);
                 this.legendModule.legendGroup = this.renderer.createGroup({ id: this.element.id + '_Legend_Group' });
@@ -1033,24 +1043,35 @@ var Maps = /** @class */ (function (_super) {
                 latitude: latitude, longitude: longitude,
                 isShapeSelected: this.SelectedElement(targetEle)
             };
-            this.trigger('click', eventArgs_1, function (mouseArgs) {
-                if (targetEle.id.indexOf('shapeIndex') > -1) {
-                    _this.mergeCluster();
-                    if (getElement(_this.element.id + '_mapsTooltip') &&
-                        _this.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_') > -1) {
-                        removeElement(_this.element.id + '_mapsTooltip');
-                    }
-                }
-                if (_this.markerModule) {
-                    _this.markerModule.markerClusterClick(e);
-                }
-                if (!eventArgs_1.cancel) {
-                    _this.notify(click, targetEle);
-                }
-                if (!eventArgs_1.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
-                    _this.triggerShapeSelection(targetEle);
-                }
-            });
+            if (this.onclick) {
+                eventArgs_1.name = onclick;
+                this.trigger('onclick', eventArgs_1, function (mouseArgs) {
+                    _this.clickHandler(e, eventArgs_1, targetEle);
+                });
+            }
+            else {
+                this.trigger('click', eventArgs_1, function (mouseArgs) {
+                    _this.clickHandler(e, eventArgs_1, targetEle);
+                });
+            }
+        }
+    };
+    Maps.prototype.clickHandler = function (e, eventArgs, targetEle) {
+        if (targetEle.id.indexOf('shapeIndex') > -1) {
+            this.mergeCluster();
+            if (getElement(this.element.id + '_mapsTooltip') &&
+                this.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_') > -1) {
+                removeElement(this.element.id + '_mapsTooltip');
+            }
+        }
+        if (this.markerModule) {
+            this.markerModule.markerClusterClick(e);
+        }
+        if (!eventArgs.cancel) {
+            this.notify(click, targetEle);
+        }
+        if (!eventArgs.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
+            this.triggerShapeSelection(targetEle);
         }
     };
     Maps.prototype.triggerShapeSelection = function (targetEle) {
@@ -1150,13 +1171,6 @@ var Maps = /** @class */ (function (_super) {
                     latitude = latLongValue.latitude;
                     longitude = latLongValue.longitude;
                 }
-                var eventArgs = {
-                    cancel: false, name: click, target: targetId, x: e.clientX, y: e.clientY,
-                    latitude: latitude, longitude: longitude, isShapeSelected: this.SelectedElement(targetEle)
-                };
-                // eslint-disable-next-line @typescript-eslint/no-empty-function
-                this.trigger('click', eventArgs, function (mouseArgs) {
-                });
             }
             this.titleTooltip(e, pageX, pageY, true);
             if (!isNullOrUndefined(this.legendModule)) {
@@ -1164,7 +1178,7 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        if (e.cancelable) {
+        if (e.cancelable && !this.isTouch) {
             e.preventDefault();
         }
         return false;
@@ -1330,7 +1344,7 @@ var Maps = /** @class */ (function (_super) {
             removeElement(this.element.id + '_EJ2_LegendTitle_Tooltip');
         }
         if ((targetId === (this.element.id + '_Map_title')) && (event.target.textContent.indexOf('...') > -1)) {
-            showTooltip(this.titleSettings.text, this.titleSettings.textStyle.size, x, y, this.element.offsetWidth, this.element.offsetHeight, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);
+            showTooltip(this.titleSettings.text, this.titleSettings.textStyle.size || this.themeStyle.titleFontSize, x, y, this.element.offsetWidth, this.element.offsetHeight, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);
         }
         else {
             removeElement(this.element.id + '_EJ2_Title_Tooltip');
@@ -1442,8 +1456,10 @@ var Maps = /** @class */ (function (_super) {
      * @param {Object} layer - Specifies the layer for the maps.
      */
     Maps.prototype.addLayer = function (layer) {
-        this.layers.push(new LayerSettings(this.layers[0], 'layers', layer));
-        this.refresh();
+        var mapsLayer = this.layers;
+        mapsLayer.push(layer);
+        this.isAddLayer = true;
+        this.layers = mapsLayer;
     };
     /**
      * This method is used to remove a layer from map.
@@ -1452,8 +1468,9 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.removeLayer = function (index) {
-        this.layers.splice(index, 1);
-        this.refresh();
+        var mapsLayer = this.layers;
+        mapsLayer.splice(index, 1);
+        this.layers = mapsLayer;
     };
     /**
      * This method is used to add markers dynamically in the maps.
@@ -1738,6 +1755,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.onPropertyChanged = function (newProp, oldProp) {
         var render = false;
         var isMarker = false;
+        var isLayer = false;
         var isStaticMapType = false;
         var layerEle;
         if (newProp['layers']) {
@@ -1758,13 +1776,15 @@ var Maps = /** @class */ (function (_super) {
                 case 'legendSettings':
                 case 'baseLayerIndex':
                     if (prop === 'layers') {
+                        isLayer = true;
                         var layerPropLength = Object.keys(newProp.layers).length;
                         for (var x = 0; x < layerPropLength; x++) {
                             if (!isNullOrUndefined(newProp.layers[x])) {
                                 var collection = Object.keys(newProp.layers[x]);
                                 for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
                                     var collectionProp = collection_1[_b];
-                                    if (collectionProp === 'layerType' && newProp.layers[x].layerType === 'OSM') {
+                                    if ((collectionProp === 'layerType' && newProp.layers[x].layerType !== 'Geometry') || (isNullOrUndefined(this.layers[x].shapeData)
+                                        && !isNullOrUndefined(this.layers[x].urlTemplate) && this.layers[x].urlTemplate !== '')) {
                                         this.isReset = true;
                                     }
                                     else if (collectionProp === 'markerSettings') {
@@ -1781,7 +1801,7 @@ var Maps = /** @class */ (function (_super) {
                     break;
                 case 'zoomSettings':
                     if (!isNullOrUndefined(oldProp.zoomSettings)) {
-                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor) {
+                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor && !isLayer) {
                             render = false;
                         }
                         else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
@@ -2047,6 +2067,28 @@ var Maps = /** @class */ (function (_super) {
         }
         return null;
     };
+    /**
+     * This method is used to get the Bing maps URL.
+     *
+     * @param {string} url - Specifies the URL of the maps.
+     * @returns {Promise<string>} - Returns the processed Bing URL as Promise.
+     */
+    Maps.prototype.getBingUrlTemplate = function (url) {
+        var promise = new Promise(function (resolve, reject) {
+            var ajax = new Ajax({
+                url: url
+            });
+            ajax.onSuccess = function (json) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var jsonObject = JSON.parse(json);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var resource = jsonObject['resourceSets'][0]['resources'][0];
+                resolve(resource['imageUrl']);
+            };
+            ajax.send();
+        });
+        return promise;
+    };
     /**
      * To find visibility of layers and markers for required modules load.
      *
@@ -2255,6 +2297,9 @@ var Maps = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Maps.prototype, "click", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "onclick", void 0);
     __decorate([
         Event()
     ], Maps.prototype, "doubleClick", void 0);

package/src/maps/model/base-model.d.ts

@@ -1559,6 +1559,7 @@ export interface LayerSettingsModel {
      * Sets and gets the Bing map type for the layer. If you use shape data with BingMapType without using layer type as Bing,
      * then the map will render based on shape data since default layer type will be set as Geometry.
      *
+
      * @default Aerial
      */
     bingMapType?: BingMapType;
@@ -1566,6 +1567,7 @@ export interface LayerSettingsModel {
     /**
      * Sets and gets the type of the static maps.
      *
+
      * @default RoadMap
      */
     staticMapType?: StaticMapType;
@@ -1573,6 +1575,7 @@ export interface LayerSettingsModel {
     /**
      * Sets and gets the key for the tile map layer in maps.
      *
+
      * @default ''
      */
     key?: string;
@@ -1581,6 +1584,7 @@ export interface LayerSettingsModel {
      * Sets and gets the type of the layer in maps. If we use layer type with shape data property in layer of the maps
      * then map will render based on the provided layer type.
      *
+
      * @default Geometry
      */
     layerType?: ShapeLayerType;
@@ -1588,7 +1592,7 @@ export interface LayerSettingsModel {
     /**
      * Sets and gets the template for the map using the url.
      *
-     * @default 'https://a.tile.openstreetmap.org/level/tileX/tileY.png'
+     * @default ''
      */
     urlTemplate?: string;
 

package/src/maps/model/base.d.ts

@@ -1333,18 +1333,21 @@ export declare class LayerSettings extends ChildProperty<LayerSettings> {
      * Sets and gets the Bing map type for the layer. If you use shape data with BingMapType without using layer type as Bing,
      * then the map will render based on shape data since default layer type will be set as Geometry.
      *
+
      * @default Aerial
      */
     bingMapType: BingMapType;
     /**
      * Sets and gets the type of the static maps.
      *
+
      * @default RoadMap
      */
     staticMapType: StaticMapType;
     /**
      * Sets and gets the key for the tile map layer in maps.
      *
+
      * @default ''
      */
     key: string;
@@ -1352,13 +1355,14 @@ export declare class LayerSettings extends ChildProperty<LayerSettings> {
      * Sets and gets the type of the layer in maps. If we use layer type with shape data property in layer of the maps
      * then map will render based on the provided layer type.
      *
+
      * @default Geometry
      */
     layerType: ShapeLayerType;
     /**
      * Sets and gets the template for the map using the url.
      *
-     * @default 'https://a.tile.openstreetmap.org/level/tileX/tileY.png'
+     * @default ''
      */
     urlTemplate: string;
     /**

package/src/maps/model/base.js

@@ -525,7 +525,7 @@ var SubTitleSettings = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate([
-        Complex({ size: Theme.mapsSubTitleFont.size, fontWeight: null }, Font)
+        Complex({ size: null, fontWeight: null, fontFamily: null }, Font)
     ], SubTitleSettings.prototype, "textStyle", void 0);
     __decorate([
         Property('Center')
@@ -542,7 +542,7 @@ var TitleSettings = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate([
-        Complex({ size: Theme.mapsTitleFont.size, fontWeight: null }, Font)
+        Complex({ size: null, fontWeight: null, fontFamily: null }, Font)
     ], TitleSettings.prototype, "textStyle", void 0);
     __decorate([
         Property('Center')
@@ -689,7 +689,7 @@ var LegendSettings = /** @class */ (function (_super) {
         Property('')
     ], LegendSettings.prototype, "height", void 0);
     __decorate([
-        Complex({}, Font)
+        Complex({ fontFamily: null }, Font)
     ], LegendSettings.prototype, "textStyle", void 0);
     __decorate([
         Property(15)
@@ -710,7 +710,7 @@ var LegendSettings = /** @class */ (function (_super) {
         Complex({}, CommonTitleSettings)
     ], LegendSettings.prototype, "title", void 0);
     __decorate([
-        Complex(Theme.legendTitleFont, Font)
+        Complex({ size: Theme.legendTitleFont.size, color: Theme.legendTitleFont.color, fontStyle: Theme.legendTitleFont.fontStyle, fontWeight: Theme.legendTitleFont.fontWeight, fontFamily: null }, Font)
     ], LegendSettings.prototype, "titleStyle", void 0);
     __decorate([
         Property('Bottom')
@@ -978,7 +978,7 @@ var LayerSettings = /** @class */ (function (_super) {
         Property('Geometry')
     ], LayerSettings.prototype, "layerType", void 0);
     __decorate([
-        Property('https://a.tile.openstreetmap.org/level/tileX/tileY.png')
+        Property('')
     ], LayerSettings.prototype, "urlTemplate", void 0);
     __decorate([
         Property(true)

package/src/maps/model/constants.d.ts

@@ -19,6 +19,12 @@ export declare const loaded: string;
  * @private
  */
 export declare const click: string;
+/**
+ * Specifies the maps onclick event name.
+ *
+ * @private
+ */
+export declare const onclick: string;
 /**
  * Specifies the maps right click event name.
  *

package/src/maps/model/constants.js

@@ -19,6 +19,12 @@ export var loaded = 'loaded';
  * @private
  */
 export var click = 'click';
+/**
+ * Specifies the maps onclick event name.
+ *
+ * @private
+ */
+export var onclick = 'onclick';
 /**
  * Specifies the maps right click event name.
  *

package/src/maps/model/theme.js

@@ -328,6 +328,7 @@ export function getThemeStyle(theme) {
                 backgroundColor: color,
                 areaBackgroundColor: color,
                 titleFontColor: '#FFFFFF',
+                titleFontSize: '14px',
                 subTitleFontColor: '#FFFFFF',
                 legendTitleFontColor: '#DADADA',
                 legendTextColor: '#DADADA',
@@ -347,6 +348,7 @@ export function getThemeStyle(theme) {
                 backgroundColor: '#000000',
                 areaBackgroundColor: '#000000',
                 titleFontColor: '#FFFFFF',
+                titleFontSize: '14px',
                 subTitleFontColor: '#FFFFFF',
                 legendTitleFontColor: '#FFFFFF',
                 legendTextColor: '#FFFFFF',
@@ -527,6 +529,7 @@ export function getThemeStyle(theme) {
                 backgroundColor: '#FFFFFF',
                 areaBackgroundColor: '#FFFFFF',
                 titleFontColor: '#424242',
+                titleFontSize: '14px',
                 subTitleFontColor: '#424242',
                 legendTitleFontColor: '#757575',
                 legendTextColor: '#757575',

package/src/maps/user-interaction/highlight.js

@@ -54,7 +54,8 @@ var Highlight = /** @class */ (function () {
             targetEle.getAttribute('class') !== 'ShapeselectionMapStyle' && !isTouch &&
             targetEle.getAttribute('class') !== 'MarkerselectionMapStyle' &&
             targetEle.getAttribute('class') !== 'BubbleselectionMapStyle' &&
-            targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle') {
+            targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle' &&
+            targetEle.getAttribute('class') !== 'LineselectionMapStyle') {
             layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var shapeData = void 0;
@@ -64,8 +65,9 @@ var Highlight = /** @class */ (function () {
             var dataIndex = void 0;
             if (targetEle.id.indexOf('shapeIndex') > -1) {
                 shapeIn = parseInt(targetEle.id.split('_shapeIndex_')[1].split('_')[0], 10);
-                shapeData = this.maps.layers[layerIndex].shapeData['features'] ?
-                    this.maps.layers[layerIndex].shapeData['features'][shapeIn]['properties'] : null;
+                shapeData = this.maps.layers[layerIndex].shapeData['features'] &&
+                    !isNullOrUndefined(this.maps.layersCollection[layerIndex].layerData[shapeIn]) ?
+                    this.maps.layersCollection[layerIndex].layerData[shapeIn]['property'] : null;
                 dataIndex = parseInt(targetEle.id.split('_dataIndex_')[1].split('_')[0], 10);
                 data = isNullOrUndefined(dataIndex) ? null : this.maps.layers[layerIndex].dataSource[dataIndex];
                 this.highlightSettings = this.maps.layers[layerIndex].highlightSettings;
@@ -137,7 +139,8 @@ var Highlight = /** @class */ (function () {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Highlight.prototype.handleHighlight = function (targetElement, layerIndex, data, shapeData) {
-        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule) {
+        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule
+            && this.maps.legendSettings.type === 'Layers') {
             this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.highlightSettings, 'highlight', layerIndex);
         }
         var selectHighLight = targetElement.id.indexOf('shapeIndex') > -1 && (this.maps.legendSettings.visible && this.maps.legendModule) ?
@@ -156,7 +159,7 @@ var Highlight = /** @class */ (function () {
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker].highlightSettings.enable;
         }
         var border = {
-            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.border.color || this.highlightSettings.fill),
+            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color),
             width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
             opacity: this.highlightSettings.border.opacity
         };