@syncfusion/ej2-maps 19.4.38 → 19.4.52

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

@@ -975,6 +975,13 @@ export interface ToggleLegendSettingsModel {
  */
 export interface LegendSettingsModel {
 
+    /**
+     * Enables or disables to render the legend item based on the shapes from the data source of markers.
+     *
+     * @default false
+     */
+    useMarkerShape?: boolean;
+
     /**
      * Enables or disables the toggle visibility for legend in maps.
      *

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

@@ -845,6 +845,12 @@ export declare class ToggleLegendSettings extends ChildProperty<ToggleLegendSett
  * Sets and gets the options to customize the legend of the maps.
  */
 export declare class LegendSettings extends ChildProperty<LegendSettings> {
+    /**
+     * Enables or disables to render the legend item based on the shapes from the data source of markers.
+     *
+     * @default false
+     */
+    useMarkerShape: boolean;
     /**
      * Enables or disables the toggle visibility for legend in maps.
      *

package/src/maps/model/base.js

@@ -655,6 +655,9 @@ var LegendSettings = /** @class */ (function (_super) {
     function LegendSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    __decorate([
+        Property(false)
+    ], LegendSettings.prototype, "useMarkerShape", void 0);
     __decorate([
         Property(false)
     ], LegendSettings.prototype, "toggleVisibility", void 0);

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

@@ -109,9 +109,7 @@ export interface ITooltipRenderCompleteEventArgs extends IMapsEventArgs {
 /**
  * Specifies the event arguments for the resize event in maps.
  */
-export interface IResizeEventArgs {
-    /** Defines the name of the event. */
-    name: string;
+export interface IResizeEventArgs extends IMapsEventArgs {
     /** Defines the previous size of the maps before the resize event. */
     previousSize: Size;
     /** Defines the current size of the maps after the resize event. */

package/src/maps/user-interaction/highlight.d.ts

@@ -1,10 +1,14 @@
 import { Maps } from '../../index';
+import { HighlightSettingsModel } from '../index';
 /**
  * Highlight module class
  */
 export declare class Highlight {
     private maps;
-    private highlightSettings;
+    /**
+     * @private
+     */
+    highlightSettings: HighlightSettingsModel;
     constructor(maps: Maps);
     /**
      * To bind events for highlight module
@@ -23,6 +27,10 @@ export declare class Highlight {
      */
     addHighlight(layerIndex: number, name: string, enable: boolean): void;
     private mouseMove;
+    /**
+     * @private
+     */
+    handleHighlight(targetElement: Element, layerIndex: number, data: any, shapeData: any): void;
     private mapHighlight;
     private highlightMap;
     /**

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

@@ -93,14 +93,7 @@ var Highlight = /** @class */ (function () {
                 this.highlightSettings = this.maps.layers[layerIndex].navigationLineSettings[index].highlightSettings;
             }
             if (this.highlightSettings.enable) {
-                if (this.maps.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1) {
-                    this.maps.legendModule.shapeHighLightAndSelection(targetEle, data, this.highlightSettings, 'highlight', layerIndex);
-                }
-                var selectHighLight = targetEle.id.indexOf('shapeIndex') > -1 && this.maps.legendSettings.visible ?
-                    this.maps.legendModule.shapeToggled : true;
-                if (selectHighLight) {
-                    this.mapHighlight(targetEle, shapeData, data);
-                }
+                this.handleHighlight(targetEle, layerIndex, data, shapeData);
             }
             else {
                 var element = document.getElementsByClassName('highlightMapStyle')[0];
@@ -124,21 +117,35 @@ var Highlight = /** @class */ (function () {
                 targetEle.setAttribute('stroke', this.maps.layers[layerIndex].navigationLineSettings[index].color);
             }
             removeClass(targetEle);
-            if (this.maps.legendSettings.visible) {
+            if (this.maps.legendSettings.visible && this.maps.legendModule) {
                 this.maps.legendModule.removeShapeHighlightCollection();
             }
         }
         else if ((targetEle.id.indexOf(this.maps.element.id + '_Legend_Shape_Index') !== -1 ||
-            targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) &&
+            targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendModule &&
             this.maps.legendSettings.visible && targetEle.id.indexOf('_Text') === -1) {
             this.maps.legendModule.legendHighLightAndSelection(targetEle, 'highlight');
         }
         else {
-            if (this.maps.legendSettings.visible) {
+            if (this.maps.legendSettings.visible && this.maps.legendModule) {
                 this.maps.legendModule.removeLegendHighlightCollection();
             }
         }
     };
+    /**
+     * @private
+     */
+    // 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) {
+            this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.highlightSettings, 'highlight', layerIndex);
+        }
+        var selectHighLight = targetElement.id.indexOf('shapeIndex') > -1 && (this.maps.legendSettings.visible && this.maps.legendModule) ?
+            this.maps.legendModule.shapeToggled : true;
+        if (selectHighLight) {
+            this.mapHighlight(targetElement, shapeData, data);
+        }
+    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Highlight.prototype.mapHighlight = function (targetEle, shapeData, data) {
         var _this = this;

package/src/maps/user-interaction/selection.d.ts

@@ -1,10 +1,14 @@
 import { Maps } from '../../index';
+import { SelectionSettingsModel } from '../index';
 /**
  * Selection module class
  */
 export declare class Selection {
     private maps;
-    private selectionsettings;
+    /**
+     * @private
+     */
+    selectionsettings: SelectionSettingsModel;
     /**
      * @private
      */
@@ -23,6 +27,10 @@ export declare class Selection {
      */
     private removeEventListener;
     private mouseClick;
+    /**
+     * @private
+     */
+    selectElement(targetElement: Element, layerIndex: number, data: any, shapeData: any): void;
     /**
      * Public method for selection
      */

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

@@ -80,24 +80,31 @@ var Selection = /** @class */ (function () {
                 this.selectionType = 'navigationline';
             }
             if (this.selectionsettings.enable) {
-                this.maps.mapSelect = targetElement ? true : false;
-                if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1) {
-                    this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.selectionsettings, 'selection', layerIndex);
-                }
-                var shapeToggled = (targetElement.id.indexOf('shapeIndex') > -1 && this.maps.legendSettings.visible) ?
-                    this.maps.legendModule.shapeToggled : true;
-                if (shapeToggled) {
-                    this.selectMap(targetElement, shapeData, data);
-                }
+                this.selectElement(targetElement, layerIndex, data, shapeData);
             }
         }
-        else if (this.maps.legendSettings.visible && !this.maps.legendSettings.toggleLegendSettings.enable &&
+        else if ((this.maps.legendSettings.visible && !this.maps.legendSettings.toggleLegendSettings.enable && this.maps.legendModule) &&
             !isNullOrUndefined(targetElement.id) && targetElement.id.indexOf('_Text') === -1 &&
             (targetElement.id.indexOf(this.maps.element.id + '_Legend_Shape_Index') > -1 ||
                 targetElement.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1)) {
             this.maps.legendModule.legendHighLightAndSelection(targetElement, 'selection');
         }
     };
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Selection.prototype.selectElement = function (targetElement, layerIndex, data, shapeData) {
+        this.maps.mapSelect = targetElement ? true : false;
+        if (this.maps.legendModule && this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1) {
+            this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.selectionsettings, 'selection', layerIndex);
+        }
+        var shapeToggled = (targetElement.id.indexOf('shapeIndex') > -1 && this.maps.legendSettings.visible && this.maps.legendModule) ?
+            this.maps.legendModule.shapeToggled : true;
+        if (shapeToggled) {
+            this.selectMap(targetElement, shapeData, data);
+        }
+    };
     // eslint-disable-next-line valid-jsdoc
     /**
      * Public method for selection

package/src/maps/user-interaction/zoom.d.ts

@@ -103,7 +103,10 @@ export declare class Zoom {
     private dataLabelTranslate;
     private markerTranslate;
     private markerLineAnimation;
-    panning(direction: PanDirection, xDifference: number, yDifference: number, mouseLocation?: PointerEvent | TouchEvent): void;
+    /**
+     * @private
+     */
+    panning(direction: PanDirection, xDifference: number, yDifference: number, mouseLocation?: PointerEvent | TouchEvent | KeyboardEvent): void;
     private toAlignSublayer;
     toolBarZooming(zoomFactor: number, type: string): void;
     createZoomingToolbars(): void;

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

@@ -847,6 +847,9 @@ var Zoom = /** @class */ (function () {
             }
         }
     };
+    /**
+     * @private
+     */
     Zoom.prototype.panning = function (direction, xDifference, yDifference, mouseLocation) {
         var map = this.maps;
         var panArgs;
@@ -865,6 +868,8 @@ var Zoom = /** @class */ (function () {
         yDifference = !isNullOrUndefined(yDifference) ? yDifference : (down.y - move.y);
         this.maps.mergeCluster();
         if (!map.isTileMap) {
+            var legendElement = document.getElementById(map.element.id + '_Legend_Group');
+            var legendHeight = !isNullOrUndefined(legendElement) ? legendElement.getClientRects()[0].height : 0;
             x = translatePoint.x - xDifference / scale;
             y = translatePoint.y - yDifference / scale;
             var layerRect = getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
@@ -872,7 +877,7 @@ var Zoom = /** @class */ (function () {
             var panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
                 ((layerRect.left + layerRect.width) >= (elementRect.left + elementRect.width) + map.mapAreaRect.x + map.margin.left)));
             var panningYDirection = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
-                ((layerRect.top + layerRect.height + map.margin.top) >= (elementRect.top + elementRect.height))));
+                ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var location_3 = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, mouseLocation['layerX'], mouseLocation['layerY']);
             panArgs = {
@@ -1285,8 +1290,9 @@ var Zoom = /** @class */ (function () {
                 x = (size.width - toolBarSize.width) - padding;
                 break;
         }
-        element.style.left = x + 'px';
-        element.style.top = y + 'px';
+        var extraPosition = map.getExtraPosition();
+        element.style.left = x + extraPosition.x + 'px';
+        element.style.top = y + extraPosition.y + 'px';
         var color = this.maps.zoomSettings.highlightColor || this.maps.themeStyle.zoomSelectionColor;
         var css = ' .e-maps-toolbar:hover > circle { stroke:' + color + '; } .e-maps-toolbar:hover > path { fill: ' + color + ' ;  stroke: ' + color + '; }' +
             '.e-maps-toolbar:hover { cursor: pointer; } .e-maps-cursor-disable:hover { cursor: not-allowed; } .e-maps-panning:hover { cursor: pointer; } ' +

package/src/maps/utils/enum.d.ts

@@ -245,7 +245,9 @@ export declare type LegendShape =
 /** Specifies the legend shape as a pentagon. */
 'Pentagon' | 
 /** Specifies the legend shape as a inverted triangle. */
-'InvertedTriangle';
+'InvertedTriangle' | 
+/** Specifies to render the marker shape as balloon on maps. */
+'Balloon';
 /**
  * Defines the legend arrangement in the maps component.
  */

package/src/maps/utils/helper.d.ts

@@ -31,7 +31,7 @@ export declare function stringToNumber(value: string, containerSize: number): nu
  * @param {Maps} maps Specifies the maps instance
  * @returns {void}
  */
-export declare function calculateSize(maps: Maps): void;
+export declare function calculateSize(maps: Maps): Size;
 /**
  * Method to create svg for maps.
  *
@@ -678,7 +678,7 @@ export declare function drawStar(maps: Maps, options: PathOption, size: Size, lo
  * @returns {Element} - Returns the element
  * @private
  */
-export declare function drawBalloon(maps: Maps, options: PathOption, size: Size, location: MapLocation, element?: Element): Element;
+export declare function drawBalloon(maps: Maps, options: PathOption, size: Size, location: MapLocation, type: string, element?: Element): Element;
 /**
  * Internal rendering of Pattern
  *

package/src/maps/utils/helper.js

@@ -61,13 +61,15 @@ export function calculateSize(maps) {
     var containerHeight = maps.element.clientHeight;
     var containerElementWidth = stringToNumber(maps.element.style.width, containerWidth);
     var containerElementHeight = stringToNumber(maps.element.style.height, containerHeight);
+    var availableSize = new Size(0, 0);
     if (maps.width === '0px' || maps.width === '0%' || maps.height === '0%' || maps.height === '0px') {
-        maps.availableSize = new Size(0, 0);
+        availableSize = new Size(0, 0);
     }
     else {
-        maps.availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
+        availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
             Math.min(window.innerWidth, window.innerHeight) : 450));
     }
+    return availableSize;
 }
 /**
  * Method to create svg for maps.
@@ -77,7 +79,7 @@ export function calculateSize(maps) {
  */
 export function createSvg(maps) {
     maps.renderer = new SvgRenderer(maps.element.id);
-    calculateSize(maps);
+    maps.availableSize = calculateSize(maps);
     maps.svgObject = maps.renderer.createSvg({
         id: maps.element.id + '_svg',
         width: maps.availableSize.width,
@@ -876,7 +878,7 @@ export function markerShapeChoose(eventArgs, data) {
         var shape = ((eventArgs.shapeValuePath.indexOf('.') > -1) ?
             (getValueFromObject(data, eventArgs.shapeValuePath).toString()) :
             data[eventArgs.shapeValuePath]);
-        eventArgs.shape = shape;
+        eventArgs.shape = (shape.toString() !== "") ? shape : eventArgs.shape;
         if (data[eventArgs.shapeValuePath] === 'Image') {
             eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
                 ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
@@ -885,7 +887,7 @@ export function markerShapeChoose(eventArgs, data) {
     }
     else {
         var shapes = (!isNullOrUndefined(eventArgs.shapeValuePath)) ? ((eventArgs.shapeValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.shapeValuePath).toString() : eventArgs.shape) : eventArgs.shape;
-        eventArgs.shape = shapes;
+        eventArgs.shape = (shapes.toString() !== "") ? shapes : eventArgs.shape;
         var shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
             ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
                 data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
@@ -1448,7 +1450,7 @@ export function calculateShapes(maps, shape, options, size, location, markerEle)
     var tempGroup;
     switch (shape) {
         case 'Balloon':
-            tempGroup = drawBalloon(maps, options, size, location, markerEle);
+            tempGroup = drawBalloon(maps, options, size, location, 'Marker', markerEle);
             break;
         case 'Cross':
             options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height
@@ -1606,9 +1608,10 @@ export function drawStar(maps, options, size, location, element) {
  * @returns {Element} - Returns the element
  * @private
  */
-export function drawBalloon(maps, options, size, location, element) {
+export function drawBalloon(maps, options, size, location, type, element) {
     var width = size.width;
     var height = size.height;
+    var pathElement;
     location.x -= width / 2;
     location.y -= height;
     options.d = 'M15,0C8.8,0,3.8,5,3.8,11.2C3.8,17.5,9.4,24.4,15,30c5.6-5.6,11.2-12.5,11.2-18.8C26.2,5,21.2,0,15,0z M15,16' +
@@ -1617,9 +1620,15 @@ export function drawBalloon(maps, options, size, location, element) {
     var x = size.width / 30;
     var y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
-    var g = maps.renderer.createGroup({ id: options.id });
-    appendShape(balloon, g);
-    return appendShape(g, element);
+    if (type === 'Marker') {
+        var g = maps.renderer.createGroup({ id: options.id });
+        appendShape(balloon, g);
+        pathElement = appendShape(g, element);
+    }
+    else {
+        pathElement = balloon;
+    }
+    return pathElement;
 }
 /**
  * Internal rendering of Pattern
@@ -2744,6 +2753,8 @@ export function renderLegendShape(location, size, shape, options, url) {
     var shapeY = location.y;
     var x = location.x + (-shapeWidth / 2);
     var y = location.y + (-shapeHeight / 2);
+    options['stroke'] = (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross') ? options['fill'] : options['stroke'];
+    options['stroke-width'] = (options['stroke-width'] === 0 && (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross')) ? 1 : options['stroke-width'];
     switch (shape) {
         case 'Circle':
         case 'Bubble':
@@ -2755,6 +2766,11 @@ export function renderLegendShape(location, size, shape, options, url) {
                 + (shapeY + (-shapeHeight / 2));
             merge(options, { 'd': renderPath });
             break;
+        case 'HorizontalLine':
+            renderPath = 'M' + ' ' + shapeX + ' ' + shapeY + ' ' + 'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' '
+                + shapeY;
+            merge(options, { 'd': renderPath });
+            break;
         case 'Diamond':
             renderPath = 'M' + ' ' + x + ' ' + shapeY + ' ' +
                 'L' + ' ' + shapeX + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +