@syncfusion/ej2-maps 19.3.46 → 19.4.47

package/dist/global/index.d.ts

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-maps@*",
-  "_id": "@syncfusion/ej2-maps@19.3.44",
+  "_id": "@syncfusion/ej2-maps@19.4.42",
   "_inBundle": false,
-  "_integrity": "sha512-LbgxW0wAlbWrML2ObYm3nXttmMjkI4Of/fgzKrZDEogTb5eS6jzVMs4lWAiskLxD8BuZIQ62Qvx+8RBsPWdHsQ==",
+  "_integrity": "sha512-6IogYAgkvC+yY7H06Uxil3SdTZuWzu2boQhnZA/djQSae2/fAdgMqnJqOMUYLodljc+O6wddpuilkmx2zAkLWg==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-maps/-/ej2-maps-19.3.44.tgz",
-  "_shasum": "b5e2577f13b3d71488189447fc8cad2fea6d8993",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-19.4.42.tgz",
+  "_shasum": "9aaa735f0d4d3574c0da6101157be9c1a6208652",
   "_spec": "@syncfusion/ej2-maps@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.43",
-    "@syncfusion/ej2-buttons": "~19.3.44",
-    "@syncfusion/ej2-compression": "~19.3.43",
-    "@syncfusion/ej2-data": "~19.3.46",
-    "@syncfusion/ej2-file-utils": "~19.3.43",
-    "@syncfusion/ej2-pdf-export": "~19.3.43",
-    "@syncfusion/ej2-svg-base": "~19.3.45"
+    "@syncfusion/ej2-base": "~19.4.42",
+    "@syncfusion/ej2-buttons": "~19.4.42",
+    "@syncfusion/ej2-compression": "~19.4.38",
+    "@syncfusion/ej2-data": "~19.4.47",
+    "@syncfusion/ej2-file-utils": "~19.4.38",
+    "@syncfusion/ej2-pdf-export": "~19.4.43",
+    "@syncfusion/ej2-svg-base": "~19.4.42"
   },
   "deprecated": false,
   "description": "The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options",
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.3.46",
+  "version": "19.4.47",
   "sideEffects": false
 }

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

@@ -14,6 +14,8 @@ export declare class Bubble {
     constructor(maps: Maps);
     /**
      * To render bubble
+     *
+     * @private
      */
     renderBubble(bubbleSettings: BubbleSettingsModel, shapeData: any, color: string, range: {
         min: number;
@@ -22,6 +24,8 @@ export declare class Bubble {
     private getPoints;
     /**
      * To check and trigger bubble click event
+     *
+     * @private
      */
     bubbleClick(e: PointerEvent): void;
     /**
@@ -33,6 +37,8 @@ export declare class Bubble {
     private getbubble;
     /**
      * To check and trigger bubble move event
+     *
+     * @private
      */
     bubbleMove(e: PointerEvent): void;
     /**

package/src/maps/layers/bubble.js

@@ -18,6 +18,8 @@ var Bubble = /** @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To render bubble
+     *
+     * @private
      */
     Bubble.prototype.renderBubble = function (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -63,7 +65,7 @@ var Bubble = /** @class */ (function () {
                 isNaN(shapeData[layer.shapeDataPath]) ? shapeData[layer.shapeDataPath].toLowerCase() : shapeData[layer.shapeDataPath];
             var shapePathValue = !isNullOrUndefined(shape[shapePath]) && isNaN(shape[shapePath])
                 ? shape[shapePath].toLowerCase() : shape[shapePath];
-            if (shapeDataLayerPathValue === shapePathValue) {
+            if (shapeDataLayerPathValue === shapePathValue && layerData[i].type !== 'LineString') {
                 if (layerData[i]['type'] === 'Point') {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shapePoints.push(this.getPoints(layerData[i], []));
@@ -194,6 +196,8 @@ var Bubble = /** @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble click event
+     *
+     * @private
      */
     Bubble.prototype.bubbleClick = function (e) {
         var target = e.target.id;
@@ -237,6 +241,8 @@ var Bubble = /** @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To check and trigger bubble move event
+     *
+     * @private
      */
     Bubble.prototype.bubbleMove = function (e) {
         var target = e.target.id;

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

@@ -267,6 +267,7 @@ var DataLabel = /** @class */ (function () {
                 }
                 else {
                     if (dataLabelSettings.smartLabelMode === 'Trim') {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var textType = typeof text === 'number' ? text.toString() : text;
                         trimmedLable = textTrim(width, textType, style);
                         elementSize = measureText(trimmedLable, style);

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

@@ -96,11 +96,12 @@ export declare class LayerPanel {
      */
     private getShapeColorMapping;
     generatePoints(type: string, coordinates: any[], data: any, properties: any): void;
+    calculateBox(point: Point, extraSpace: number): void;
     calculateFactor(layer: LayerSettings): number;
     translateLayerElements(layerElement: Element, index: number): void;
     calculateRectBounds(layerData: any[]): void;
     calculatePolygonBox(coordinates: any[], data: any, properties: any): any;
-    calculateRectBox(coordinates: any[]): void;
+    calculateRectBox(coordinates: any[], type?: string, isFirstItem?: boolean): void;
     generateTiles(zoomLevel: number, tileTranslatePoint: Point, zoomType?: string, bing?: BingMap, position?: Point): void;
     arrangeTiles(type: string, x: number, y: number): void;
     /**

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

@@ -4,7 +4,7 @@
 /* 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, PolylineOption, removeElement } from '../utils/helper';
+import { GeoLocation, isCustomPath, convertGeoToPoint, Point, PathOption, Size, removeElement } from '../utils/helper';
 import { getElementByID, maintainSelection, getValueFromObject } from '../utils/helper';
 import { RectOption, getTranslate, convertTileLatLongToPoint, checkShapeDataFields, CircleOption } from '../utils/helper';
 import { getZoomTranslate, fixInitialScaleForTile } from '../utils/helper';
@@ -178,7 +178,7 @@ var LayerPanel = /** @class */ (function () {
         if (this.mapObject.zoomSettings.resetToInitial && this.mapObject.initialCheck && !isNullOrUndefined(panel.mapObject.height)
             && this.mapObject.availableSize.height > 512) {
             this.mapObject.applyZoomReset = true;
-            this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512) + 1;
+            this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512);
             var padding = this.mapObject.layers[this.mapObject.baseLayerIndex].layerType !== 'GoogleStaticMap' ?
                 20 : 0;
             var totalSize = Math.pow(2, this.mapObject.initialZoomLevel) * 256;
@@ -260,6 +260,9 @@ var LayerPanel = /** @class */ (function () {
                             proxy_1.mapObject['bingMap'] = bing_1;
                             proxy_1.renderTileLayer(proxy_1, layer, layerIndex, bing_1);
                             _this.mapObject.arrangeTemplate();
+                            if (_this.mapObject.zoomModule && (_this.mapObject.previousScale !== _this.mapObject.scale)) {
+                                _this.mapObject.zoomModule.applyTransform(true);
+                            }
                         };
                         ajax.send();
                     }
@@ -338,9 +341,7 @@ var LayerPanel = /** @class */ (function () {
                 var data = geometryData['geometry'];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var properties = geometryData['properties'];
-                if (type !== 'LineString') {
-                    _this.generatePoints(type, coords, data, properties);
-                }
+                _this.generatePoints(type, coords, data, properties);
             }
         });
         this.currentLayer.rectBounds = this.rectBounds;
@@ -368,7 +369,7 @@ var LayerPanel = /** @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var currentShapeData = this_1.currentLayer.layerData[i];
                 var pathOptions;
-                var polyLineOptions;
+                var polyLineOptions = void 0;
                 var circleOptions;
                 var groupElement;
                 var drawObject = void 0;
@@ -437,7 +438,7 @@ var LayerPanel = /** @class */ (function () {
                         if (isNullOrUndefined(shapeSettings.borderColorValuePath)) {
                             _this.mapObject.layers[layerIndex].shapeSettings.border.color = eventArgs.border.color;
                         }
-                        else if (isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
+                        if (isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
                             _this.mapObject.layers[layerIndex].shapeSettings.border.width = eventArgs.border.width;
                         }
                     }
@@ -491,17 +492,21 @@ var LayerPanel = /** @class */ (function () {
                             }
                             break;
                         case 'LineString':
+                            path += 'M ' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             currentShapeData.map(function (lineData) {
-                                points += lineData['point']['x'] + ' , ' + lineData['point']['y'] + ' ';
+                                path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
                             });
-                            polyLineOptions = new PolylineOption(shapeID, points, eventArgs.fill, eventArgs.border.width, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray);
-                            pathEle = _this.mapObject.renderer.drawPolyline(polyLineOptions);
+                            if (path.length > 3) {
+                                pathOptions = new PathOption(shapeID, 'transparent', !isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
+                                pathEle = _this.mapObject.renderer.drawPath(pathOptions);
+                            }
                             break;
                         case 'Point':
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             var pointData = currentShapeData['point'];
-                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], shapeSettings.circleRadius, null);
+                            var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / _this.currentFactor;
+                            circleOptions = new CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, null);
                             pathEle = _this.mapObject.renderer.drawCircle(circleOptions);
                             break;
                         case 'Path':
@@ -523,6 +528,9 @@ var LayerPanel = /** @class */ (function () {
                         pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
                             (currentShapeData['property'][properties]) : ''));
                         pathEle.setAttribute('tabindex', (_this.mapObject.tabIndex + i + 2).toString());
+                        if (drawingType === 'LineString') {
+                            pathEle.setAttribute('style', 'outline:none');
+                        }
                         maintainSelection(_this.mapObject.selectedElementId, _this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
                         if (_this.mapObject.toggledShapeElementId) {
                             for (var j = 0; j < _this.mapObject.toggledShapeElementId.length; j++) {
@@ -741,11 +749,14 @@ var LayerPanel = /** @class */ (function () {
                 this.currentLayer.layerData.push(multiPolygonDatas);
                 break;
             case 'linestring':
+                var extraSpace_1 = !isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    this.currentLayer.shapeSettings.border.width : 1;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map(function (points, index) {
                     latitude = points[1];
                     longitude = points[0];
                     var point = convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
+                    _this.calculateBox(point, extraSpace_1);
                     newData.push({
                         point: point, lat: latitude, lng: longitude
                     });
@@ -756,6 +767,8 @@ var LayerPanel = /** @class */ (function () {
                 break;
             case 'point': {
                 var arrayCollections_1 = false;
+                var extraSpace_2 = (!isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
+                    this.currentLayer.shapeSettings.border.width : 1) + (this.currentLayer.shapeSettings.circleRadius * 2);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 coordinates.map(function (points, index) {
                     if (Object.prototype.toString.call(points) === '[object Array]') {
@@ -772,6 +785,7 @@ var LayerPanel = /** @class */ (function () {
                     latitude = coordinates[1];
                     longitude = coordinates[0];
                     var point = convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
+                    this.calculateBox(point, extraSpace_2);
                     this.currentLayer.layerData.push({
                         point: point, type: type, lat: latitude, lng: longitude, property: properties
                     });
@@ -785,6 +799,17 @@ var LayerPanel = /** @class */ (function () {
                 break;
         }
     };
+    LayerPanel.prototype.calculateBox = function (point, extraSpace) {
+        if (isNullOrUndefined(this.rectBounds)) {
+            this.rectBounds = { min: { x: point.x, y: point.y - extraSpace }, max: { x: point.x, y: point.y + extraSpace } };
+        }
+        else {
+            this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x);
+            this.rectBounds['min']['y'] = Math.min(this.rectBounds['min']['y'], point.y - extraSpace);
+            this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x);
+            this.rectBounds['max']['y'] = Math.max(this.rectBounds['max']['y'], point.y + extraSpace);
+        }
+    };
     LayerPanel.prototype.calculateFactor = function (layer) {
         var horFactor;
         var verFactor = 1;
@@ -893,6 +918,15 @@ var LayerPanel = /** @class */ (function () {
                             _this.calculateRectBox(point[0]);
                         });
                         break;
+                    case 'linestring':
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        coordinates.map(function (point, index) {
+                            _this.calculateRectBox(point, 'LineString', index === 0 ? true : false);
+                        });
+                        break;
+                    case 'point':
+                        _this.calculateRectBox(coordinates, 'point');
+                        break;
                 }
             }
         });
@@ -929,20 +963,33 @@ var LayerPanel = /** @class */ (function () {
         return newData;
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    LayerPanel.prototype.calculateRectBox = function (coordinates) {
+    LayerPanel.prototype.calculateRectBox = function (coordinates, type, isFirstItem) {
         var _this = this;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Array.prototype.forEach.call(coordinates, function (currentCoords) {
-            if (isNullOrUndefined(_this.mapObject.baseMapBounds)) {
-                _this.mapObject.baseMapBounds = new GeoLocation({ min: currentCoords[1], max: currentCoords[1] }, { min: currentCoords[0], max: currentCoords[0] });
+        if (type !== 'LineString' && type !== 'point') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Array.prototype.forEach.call(coordinates, function (currentCoords) {
+                if (isNullOrUndefined(_this.mapObject.baseMapBounds)) {
+                    _this.mapObject.baseMapBounds = new GeoLocation({ min: currentCoords[1], max: currentCoords[1] }, { min: currentCoords[0], max: currentCoords[0] });
+                }
+                else {
+                    _this.mapObject.baseMapBounds.latitude.min = Math.min(_this.mapObject.baseMapBounds.latitude.min, currentCoords[1]);
+                    _this.mapObject.baseMapBounds.latitude.max = Math.max(_this.mapObject.baseMapBounds.latitude.max, currentCoords[1]);
+                    _this.mapObject.baseMapBounds.longitude.min = Math.min(_this.mapObject.baseMapBounds.longitude.min, currentCoords[0]);
+                    _this.mapObject.baseMapBounds.longitude.max = Math.max(_this.mapObject.baseMapBounds.longitude.max, currentCoords[0]);
+                }
+            });
+        }
+        else {
+            if ((isFirstItem || type === 'point') && isNullOrUndefined(this.mapObject.baseMapBounds)) {
+                this.mapObject.baseMapBounds = new GeoLocation({ min: coordinates[1], max: coordinates[1] }, { min: coordinates[0], max: coordinates[0] });
             }
             else {
-                _this.mapObject.baseMapBounds.latitude.min = Math.min(_this.mapObject.baseMapBounds.latitude.min, currentCoords[1]);
-                _this.mapObject.baseMapBounds.latitude.max = Math.max(_this.mapObject.baseMapBounds.latitude.max, currentCoords[1]);
-                _this.mapObject.baseMapBounds.longitude.min = Math.min(_this.mapObject.baseMapBounds.longitude.min, currentCoords[0]);
-                _this.mapObject.baseMapBounds.longitude.max = Math.max(_this.mapObject.baseMapBounds.longitude.max, currentCoords[0]);
+                this.mapObject.baseMapBounds.latitude.min = Math.min(this.mapObject.baseMapBounds.latitude.min, coordinates[1]);
+                this.mapObject.baseMapBounds.latitude.max = Math.max(this.mapObject.baseMapBounds.latitude.max, coordinates[1]);
+                this.mapObject.baseMapBounds.longitude.min = Math.min(this.mapObject.baseMapBounds.longitude.min, coordinates[0]);
+                this.mapObject.baseMapBounds.longitude.max = Math.max(this.mapObject.baseMapBounds.longitude.max, coordinates[0]);
             }
-        });
+        }
     };
     LayerPanel.prototype.generateTiles = function (zoomLevel, tileTranslatePoint, zoomType, bing, position) {
         var userLang = this.mapObject.locale;
@@ -1031,16 +1078,18 @@ var LayerPanel = /** @class */ (function () {
                 }
             }
         }
-        this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+        if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset) {
+            this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
+        }
     };
     LayerPanel.prototype.arrangeTiles = function (type, x, y) {
         var _this = this;
         var element = document.getElementById(this.mapObject.element.id + '_tile_parent');
         var element1 = document.getElementById(this.mapObject.element.id + '_tiles');
         var timeOut;
-        if (!isNullOrUndefined(type) && type !== 'Pan' && type !== 'Reset' && type.indexOf('ZoomOut') === -1) {
+        if (!isNullOrUndefined(type) && type !== 'Pan') {
             this.tileAnimation(type, x, y);
-            timeOut = 250;
+            timeOut = this.mapObject.layersCollection[0].animationDuration;
         }
         else {
             timeOut = 0;
@@ -1055,7 +1104,6 @@ var LayerPanel = /** @class */ (function () {
                 }
                 if (element1) {
                     element1.style.zIndex = '0';
-                    element1.style.visibility = 'hidden';
                 }
                 var animateElement;
                 if (!document.getElementById(_this.mapObject.element.id + '_animated_tiles') && element) {
@@ -1117,35 +1165,23 @@ var LayerPanel = /** @class */ (function () {
      * @returns {void}
      */
     LayerPanel.prototype.tileAnimation = function (zoomType, translateX, translateY) {
-        var element = document.getElementById(this.mapObject.element.id + '_tile_parent');
-        var element1 = document.getElementById('animated_tiles');
-        var ele = document.getElementById(this.mapObject.element.id + '_tiles');
+        var tileParent = document.getElementById(this.mapObject.element.id + '_tile_parent');
+        var animatedTiles = document.getElementById(this.mapObject.element.id + '_animated_tiles');
+        var tileElement = document.getElementById(this.mapObject.element.id + '_tiles');
         var scaleValue = '2';
-        if (zoomType.indexOf('ZoomOut') === 0) {
-            ele.style.zIndex = '1';
-            element.style.zIndex = '0';
-            // element1 = ele.children[ele.childElementCount - 1] as HTMLElement;
-            while (ele.childElementCount >= 1) {
-                ele.removeChild(ele.children[0]);
-            }
-            translateX = 0;
-            translateY = 128 - 23;
-            scaleValue = '0.5';
-        }
-        else if (zoomType === 'Reset') {
-            ele.style.zIndex = '1';
-            element.style.zIndex = '0';
-            while (!(ele.childElementCount === 1) && !(ele.childElementCount === 0)) {
-                ele.removeChild(ele.children[1]);
+        if (zoomType.indexOf('ZoomOut') === 0 || zoomType === 'Reset') {
+            tileElement.style.zIndex = '1';
+            tileParent.style.zIndex = '0';
+            while (tileElement.childElementCount >= 1) {
+                tileElement.removeChild(tileElement.children[0]);
             }
-            element1 = ele.children[0];
             translateX = 0;
-            translateY = 0;
-            scaleValue = '1';
+            translateY = document.getElementById(this.mapObject.element.id + '_tile_parent').getClientRects()[0].height / 4;
+            scaleValue = zoomType.indexOf('ZoomOut') === 0 ? '0.5' : '0.2';
         }
-        if (!isNullOrUndefined(element1)) {
-            element1.style.transition = '250ms';
-            element1.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleValue + ')';
+        if (!isNullOrUndefined(animatedTiles)) {
+            animatedTiles.style.transition = this.mapObject.layersCollection[0].animationDuration + 'ms';
+            animatedTiles.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleValue + ')';
         }
     };
     /**

package/src/maps/layers/legend.js

@@ -1,5 +1,5 @@
 import { click, legendRendering } from '../index';
-import { Rect, measureText, PathOption, textTrim, removeClass, querySelector, getTemplateFunction, maintainStyleClass, getValueFromObject } from '../utils/helper';
+import { Rect, measureText, PathOption, textTrim, drawBalloon, removeClass, querySelector, getTemplateFunction, maintainStyleClass, getValueFromObject } from '../utils/helper';
 import { RectOption, Size, TextOption, Point, renderTextElement, drawSymbol, checkPropertyPath, getElement } from '../utils/helper';
 import { isNullOrUndefined, Browser, EventHandler, remove, extend } from '@syncfusion/ej2-base';
 /**
@@ -422,6 +422,7 @@ var Legend = /** @class */ (function () {
         var textOptions;
         var renderOptions;
         var render = map.renderer;
+        var legendShape = legend.shape;
         if (page >= 0 && page < this.totalPages.length) {
             if (querySelector(this.legendGroup.id, this.maps.element.id)) {
                 remove(querySelector(this.legendGroup.id, this.maps.element.id));
@@ -446,21 +447,35 @@ var Legend = /** @class */ (function () {
                 var textLocation = collection['Text'];
                 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, '');
-                legend.textStyle.color = (legend.textStyle.color !== null) ? legend.textStyle.color :
+                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
+                };
+                legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
                     this.maps.themeStyle.legendTextColor;
-                legend.textStyle.fontFamily = map.themeStyle.fontFamily || legend.textStyle.fontFamily;
-                legend.textStyle.size = map.themeStyle.legendFontSize || legend.textStyle.size;
+                legendTextStyle.fontFamily = map.themeStyle.fontFamily || legendTextStyle.fontFamily;
+                legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
                 if (i === 0) {
                     this.renderLegendBorder();
                 }
-                legendElement.appendChild(drawSymbol(shapeLocation, shape, shapeSize, collection['ImageSrc'], renderOptions_1));
+                if (legend.type === 'Markers' && legend.useMarkerShape) {
+                    var legendShapeData = this.legendCollection[collection['idIndex']].data[0];
+                    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'));
+                }
+                else {
+                    legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions_1));
+                }
                 var legendRectSize = collection['Rect']['x'] + collection['Rect']['width'];
                 if (legendRectSize > this.legendBorderRect.width) {
-                    var trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legend.textStyle, legendRectSize);
+                    var trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legendTextStyle, legendRectSize);
                     legendText = trimmedText;
                 }
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
-                renderTextElement(textOptions, legend.textStyle, legend.textStyle.color, legendElement);
+                renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
                 this.legendGroup.appendChild(legendElement);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (i === (this.totalPages[page]['Collection'].length - 1)) {
@@ -1141,7 +1156,10 @@ var Legend = /** @class */ (function () {
         var map = this.maps;
         var legend = map.legendSettings;
         var legendTitle = legend.title.text;
-        var textStyle = legend.titleStyle;
+        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
+        };
         var textOptions;
         var spacing = 10;
         var trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
@@ -1160,6 +1178,7 @@ var Legend = /** @class */ (function () {
         map.svgObject.appendChild(this.legendGroup);
         if (legendTitle) {
             textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
+            textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily : this.maps.themeStyle.fontFamily;
             textOptions = new TextOption(map.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - spacing / 2, 'middle', trimTitle, '');
             renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
         }
@@ -1268,21 +1287,25 @@ var Legend = /** @class */ (function () {
                     }
                     else {
                         newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
-                            shape: !isNullOrUndefined(marker.shapeValuePath) ? data[marker.shapeValuePath] : marker.shape });
+                            shape: (!isNullOrUndefined(marker.shapeValuePath) && !isNullOrUndefined(data[marker.shapeValuePath]) && data[marker.shapeValuePath] !== '') ? data[marker.shapeValuePath] : (_this.maps.legendSettings.useMarkerShape ? marker.shape : _this.maps.legendSettings.shape) });
                         _this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
                 }
             });
         });
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Legend.prototype.getMarkerLegendData = function (layerIndex, text, legendFill) {
         var _this = this;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var legendData = [];
         this.maps.layers[layerIndex].markerSettings.map(function (markerSettings, markerIndex) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
+            // 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]) {
                     legendData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
                         shape: !isNullOrUndefined(marker.shapeValuePath) ? data[marker.shapeValuePath] : marker.shape });
                 }
@@ -1650,7 +1673,7 @@ var Legend = /** @class */ (function () {
                             shape = this.legendCollection[legendIndex]['data'][i];
                             mapElement = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                 '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
-                                '_MarkerIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
+                                '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                             if (!isNullOrUndefined(shape['shape']) && shape['shape'] === 'Balloon') {
                                 mapElement = mapElement.children[0];
                             }
@@ -1659,7 +1682,7 @@ var Legend = /** @class */ (function () {
                                     mapElement.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
                                     mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color);
                                     mapElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                    mapElement.setAttribute('stroke-width', (this.maps.layers[k].shapeSettings.border.width).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) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -1674,6 +1697,9 @@ 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');
                                 }
@@ -1688,6 +1714,9 @@ 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']);
+                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
+                                        legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
+                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId.setAttribute('fill', '#757575');
                                 }
@@ -1722,7 +1751,7 @@ var Legend = /** @class */ (function () {
                                     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-width', (this.maps.layers[j].shapeSettings.border.width).toString());
+                                    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 :
                                         this.maps.layers[j].shapeSettings.border.opacity).toString());
@@ -1752,7 +1781,7 @@ var Legend = /** @class */ (function () {
                                 layerElement.setAttribute('stroke-opacity', (isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                     this.maps.layers[j].shapeSettings.opacity :
                                     this.maps.layers[j].shapeSettings.border.opacity).toString());
-                                layerElement.setAttribute('stroke-width', (this.maps.layers[j].shapeSettings.border.width).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);
                                 if (targetEle !== null) {
@@ -1772,7 +1801,7 @@ var Legend = /** @class */ (function () {
             targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendSettings.visible &&
             targetEle.id.indexOf('_Text') === -1) {
             var LegendInteractive = void 0;
-            var legendIndex = parseFloat(targetEle.id.substr((this.maps.element.id + '_Legend_Index_').length));
+            var legendIndex = parseFloat(targetEle.id.split(this.maps.element.id + '_Legend_Index_')[1]);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var mapdata = void 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1793,7 +1822,7 @@ var Legend = /** @class */ (function () {
                                 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-width', (this.maps.layers[k].shapeSettings.border.width).toString());
+                                    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 :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -1857,7 +1886,7 @@ var Legend = /** @class */ (function () {
                                     mapLegendElement.setAttribute('fill', this.maps.layers[0].shapeSettings.fill);
                                     mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color);
                                     mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
-                                    mapLegendElement.setAttribute('stroke-width', (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-opacity', (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                         this.maps.layers[k].shapeSettings.opacity :
                                         this.maps.layers[k].shapeSettings.border.opacity).toString());
@@ -1884,7 +1913,7 @@ 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', (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());