@syncfusion/ej2-maps 19.3.44 → 19.4.42

package/src/maps/maps.d.ts

@@ -233,56 +233,48 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * Triggers when the map is on load.
      *
      * @event load
-     * @blazorProperty 'OnLoad'
      */
     load: EmitType<ILoadEventArgs>;
     /**
      * Triggers before the print gets started.
      *
      * @event beforePrint
-     * @blazorProperty 'OnPrint'
      */
     beforePrint: EmitType<IPrintEventArgs>;
     /**
      * Triggers after the maps gets rendered.
      *
      * @event loaded
-     * @blazorProperty 'Loaded'
      */
     loaded: EmitType<ILoadedEventArgs>;
     /**
      * Triggers when clicking an element in maps.
      *
      * @event click
-     * @blazorProperty 'OnClick'
      */
     click: EmitType<IMouseEventArgs>;
     /**
      * Triggers when performing the double click operation on an element in maps.
      *
      * @event doubleClick
-     * @blazorProperty 'OnDoubleClick'
      */
     doubleClick: EmitType<IMouseEventArgs>;
     /**
      * Triggers when performing the right click operation on an element in maps.
      *
      * @event rightClick
-     * @blazorProperty 'OnRightClick'
      */
     rightClick: EmitType<IMouseEventArgs>;
     /**
      * Triggers when resizing the maps.
      *
      * @event resize
-     * @blazorProperty 'Resizing'
      */
     resize: EmitType<IResizeEventArgs>;
     /**
      * Triggers before the maps tooltip gets rendered.
      *
      * @event tooltipRender
-     * @blazorProperty 'TooltipRendering'
      */
     tooltipRender: EmitType<ITooltipRenderEventArgs>;
     /**
@@ -290,7 +282,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      *
      * @event legendRendering
 
-     * @blazorProperty 'LegendRendering'
      */
     legendRendering: EmitType<ILegendRenderingEventArgs>;
     /**
@@ -298,56 +289,48 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      *
 
      * @event tooltipRenderComplete
-     * @blazorProperty 'TooltipRenderComplete'
      */
     tooltipRenderComplete: EmitType<ITooltipRenderCompleteEventArgs>;
     /**
      * Triggers when clicking a shape in maps.
      *
      * @event shapeSelected
-     * @blazorProperty 'ShapeSelected'
      */
     shapeSelected: EmitType<IShapeSelectedEventArgs>;
     /**
      * Triggers when clicking the shape on maps and before the selection is applied.
      *
      * @event itemSelection
-     * @blazorProperty 'OnItemSelect'
      */
     itemSelection: EmitType<ISelectionEventArgs>;
     /**
      * Trigger when mouse move on the shape in maps and before the shape gets highlighted.
      *
      * @event itemHighlight
-     * @blazorProperty 'OnItemHighlight'
      */
     itemHighlight: EmitType<ISelectionEventArgs>;
     /**
      * Triggers when mouse move on the shape in maps and before the shape gets highlighted.
      *
      * @event shapeHighlight
-     * @blazorProperty 'ShapeHighlighted'
      */
     shapeHighlight: EmitType<IShapeSelectedEventArgs>;
     /**
      * Triggers before the maps layer gets rendered.
      *
      * @event layerRendering
-     * @blazorProperty 'LayerRendering'
      */
     layerRendering: EmitType<ILayerRenderingEventArgs>;
     /**
      * Triggers before the maps shape gets rendered.
      *
      * @event shapeRendering
-     * @blazorProperty 'ShapeRendering'
      */
     shapeRendering: EmitType<IShapeRenderingEventArgs>;
     /**
      * Triggers before the maps marker gets rendered.
      *
      * @event markerRendering
-     * @blazorProperty 'MarkerRendering'
      */
     markerRendering: EmitType<IMarkerRenderingEventArgs>;
     /**
@@ -360,7 +343,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * Triggers when clicking on the maps marker element.
      *
      * @event markerClick
-     * @blazorProperty 'OnMarkerClick'
      */
     markerClick: EmitType<IMarkerClickEventArgs>;
     /**
@@ -379,63 +361,54 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * Triggers when moving the mouse over the marker element in maps.
      *
      * @event markerMouseMove
-     * @blazorProperty 'OnMarkerMouseMove'
      */
     markerMouseMove: EmitType<IMarkerMoveEventArgs>;
     /**
      * Triggers before the data-label gets rendered.
      *
      * @event dataLabelRendering
-     * @blazorProperty 'DataLabelRendering'
      */
     dataLabelRendering: EmitType<ILabelRenderingEventArgs>;
     /**
      * Triggers before the bubble element gets rendered on the map.
      *
      * @event bubbleRendering
-     * @blazorProperty 'BubbleRendering'
      */
     bubbleRendering: EmitType<IBubbleRenderingEventArgs>;
     /**
      * Triggers when performing the click operation on the bubble element in maps.
      *
      * @event bubbleClick
-     * @blazorProperty 'OnBubbleClick'
      */
     bubbleClick: EmitType<IBubbleClickEventArgs>;
     /**
      * Triggers when hovering the mouse on the bubble element in maps.
      *
      * @event bubbleMouseMove
-     * @blazorProperty 'OnBubbleMouseMove'
      */
     bubbleMouseMove: EmitType<IBubbleMoveEventArgs>;
     /**
      * Triggers after the animation completed in the maps component.
      *
      * @event animationComplete
-     * @blazorProperty 'AnimationCompleted'
      */
     animationComplete: EmitType<IAnimationCompleteEventArgs>;
     /**
      * Triggers before rendering the annotation in maps.
      *
      * @event annotationRendering
-     * @blazorProperty 'AnnotationRendering'
      */
     annotationRendering: EmitType<IAnnotationRenderingEventArgs>;
     /**
      * Triggers before the zoom operations in the maps such as zoom in and zoom out.
      *
      * @event zoom
-     * @blazorProperty 'OnZoom'
      */
     zoom: EmitType<IMapZoomEventArgs>;
     /**
      * Triggers before performing the panning operation.
      *
      * @event pan
-     * @blazorProperty 'OnPan'
      */
     pan: EmitType<IMapPanEventArgs>;
     /**
@@ -628,8 +601,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
     mouseDownEvent: Object;
     mouseClickEvent: Object;
     /** @private */
-    isBlazor: boolean;
-    /** @private */
     shapeSelectionClass: Element;
     /** @private */
     selectedElementId: string[];
@@ -711,6 +682,7 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @returns {void}
      */
     protected preRender(): void;
+    private renderElements;
     /**
      * To Initialize the control rendering.
      *
@@ -753,13 +725,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @private
      */
     markerInitialSelection(layerIndex: number, markerIndex: number, markerSettings: MarkerSettingsModel, latitude: number, longitude: number): void;
-    /**
-     * To append blazor templates
-     *
-     * @returns {void}
-     * @private
-     */
-    blazorTemplates(): void;
     /**
      * Render the map area border
      *
@@ -848,7 +813,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * This method is used to perform the operations when a click operation is performed on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
-     * @blazorProperty 'PerformClick'
      */
     mapsOnClick(e: PointerEvent): void;
     private getClickLocation;
@@ -877,7 +841,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
-     * @blazorProperty 'PerformDoubleClick'
      */
     mapsOnDoubleClick(e: PointerEvent): void;
     /**
@@ -1023,6 +986,10 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * To find navigation line visibility
      */
     private isNavigationVisible;
+    /**
+     * To find space between the secondary element and svg element.
+     */
+    private getExtraPosition;
     /**
      * To find marker visibility
      */

package/src/maps/maps.js

@@ -27,10 +27,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  */
 import { Component, NotifyPropertyChanges, Property, Ajax } from '@syncfusion/ej2-base';
 import { EventHandler, Browser, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';
-import { Event, remove, L10n, Collection, Internationalization, Complex, isBlazor } from '@syncfusion/ej2-base';
-import { updateBlazorTemplate, resetBlazorTemplate } from '@syncfusion/ej2-base';
+import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';
 import { SvgRenderer } from '@syncfusion/ej2-svg-base';
-import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, getMousePosition } from './utils/helper';
+import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, getMousePosition, calculateSize } from './utils/helper';
 import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle } from './utils/helper';
 import { createStyle } from './utils/helper';
 import { ZoomSettings, LegendSettings } from './model/base';
@@ -215,20 +214,14 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.preRender = function () {
         this.isDevice = Browser.isDevice;
-        this.isBlazor = isBlazor();
         this.initPrivateVariable();
         this.allowServerDataBinding = false;
         this.unWireEVents();
         this.wireEVents();
         this.setCulture();
     };
-    /**
-     * To Initialize the control rendering.
-     *
-     * @returns {void}
-     */
-    Maps.prototype.render = function () {
-        this.trigger(load, this.isBlazor ? {} : { maps: this });
+    Maps.prototype.renderElements = function () {
+        this.trigger(load, { maps: this });
         this.createSVG();
         this.findBaseAndSubLayers();
         this.createSecondaryElement();
@@ -240,6 +233,14 @@ var Maps = /** @class */ (function (_super) {
         this.processRequestJsonData();
         this.renderComplete();
     };
+    /**
+     * To Initialize the control rendering.
+     *
+     * @returns {void}
+     */
+    Maps.prototype.render = function () {
+        this.renderElements();
+    };
     Maps.prototype.processRequestJsonData = function () {
         var _this = this;
         var length = this.layersCollection.length - 1;
@@ -252,7 +253,7 @@ var Maps = /** @class */ (function (_super) {
             if (layer.shapeData instanceof DataManager) {
                 _this.serverProcess['request']++;
                 dataModule = layer.shapeData;
-                queryModule = layer.query instanceof Query ? layer.query : _this.isBlazor ? (new Query().requiresCount()) : new Query();
+                queryModule = layer.query instanceof Query ? layer.query : new Query();
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var dataManager = dataModule.executeQuery(queryModule);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -268,7 +269,7 @@ var Maps = /** @class */ (function (_super) {
             if (layer.dataSource instanceof DataManager) {
                 _this.serverProcess['request']++;
                 dataModule = layer.dataSource;
-                queryModule = layer.query instanceof Query ? layer.query : _this.isBlazor ? (new Query().requiresCount()) : new Query();
+                queryModule = layer.query instanceof Query ? layer.query : new Query();
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var dataManager = dataModule.executeQuery(queryModule);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -282,8 +283,7 @@ var Maps = /** @class */ (function (_super) {
                     if (layer.markerSettings[i].dataSource instanceof DataManager) {
                         _this.serverProcess['request']++;
                         dataModule = layer.markerSettings[i].dataSource;
-                        queryModule = layer.markerSettings[i].query instanceof Query ? layer.markerSettings[i].query : _this.isBlazor ?
-                            (new Query().requiresCount()) : new Query();
+                        queryModule = layer.markerSettings[i].query instanceof Query ? layer.markerSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -302,8 +302,7 @@ var Maps = /** @class */ (function (_super) {
                     if (layer.bubbleSettings[i].dataSource instanceof DataManager) {
                         _this.serverProcess['request']++;
                         dataModule = layer.bubbleSettings[i].dataSource;
-                        queryModule = layer.bubbleSettings[i].query instanceof Query ? layer.bubbleSettings[i].query : _this.isBlazor ?
-                            (new Query().requiresCount()) : new Query();
+                        queryModule = layer.bubbleSettings[i].query instanceof Query ? layer.bubbleSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -396,7 +395,15 @@ var Maps = /** @class */ (function (_super) {
         }
         this.mapLayerPanel.measureLayerPanel();
         this.element.appendChild(this.svgObject);
+        var position = this.getExtraPosition();
         for (var i = 0; i < this.layers.length; i++) {
+            if (position.x !== 0 || position.y !== 0) {
+                var markerTemplate = document.getElementById(this.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                if (!isNullOrUndefined(markerTemplate)) {
+                    markerTemplate.style.top = this.mapAreaRect.y + position.y + 'px';
+                    markerTemplate.style.left = this.mapAreaRect.x + position.x + 'px';
+                }
+            }
             if (this.layers[i].selectionSettings && this.layers[i].selectionSettings.enable &&
                 this.layers[i].initialShapeSelection.length > 0 && this.checkInitialRender) {
                 var checkSelection = this.layers[i].selectionSettings.enableMultiSelect;
@@ -465,7 +472,6 @@ var Maps = /** @class */ (function (_super) {
             tileElement1.style.left = left + 'px';
         }
         this.arrangeTemplate();
-        var blazor = this.isBlazor ? this.blazorTemplates() : null;
         if (this.annotationsModule) {
             if (this.width !== '0px' && this.height !== '0px' && this.width !== '0%' && this.height !== '0%') {
                 this.annotationsModule.renderAnnotationElements();
@@ -478,7 +484,7 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.zoomingChange();
-        this.trigger(loaded, this.isBlazor ? { isResized: this.isResize } : { maps: this, isResized: this.isResize });
+        this.trigger(loaded, { maps: this, isResized: this.isResize });
         this.isResize = false;
     };
     /**
@@ -544,37 +550,6 @@ var Maps = /** @class */ (function (_super) {
             }
         }
     };
-    /**
-     * To append blazor templates
-     *
-     * @returns {void}
-     * @private
-     */
-    Maps.prototype.blazorTemplates = function () {
-        var _this = this;
-        for (var i = 0; i < this.layers.length; i++) {
-            var markerLength = this.layers[i].markerSettings.length - 1;
-            if (markerLength >= 0) {
-                if (this.layers[i].dataLabelSettings.visible || this.layers[i].markerSettings[markerLength].template) {
-                    updateBlazorTemplate(this.element.id + '_LabelTemplate', 'LabelTemplate', this.layers[i].dataLabelSettings);
-                    for (var j = 0; j < this.layers[i].markerSettings.length; j++) {
-                        var markerRendered = function () {
-                            for (var x = 0; x < _this.layers.length; x++) {
-                                var markerTemplateEle = document.getElementById(_this.element.id + '_LayerIndex_' + x + '_Markers_Template_Group');
-                                if (!isNullOrUndefined(markerTemplateEle)) {
-                                    for (var z = 0; z < markerTemplateEle.childElementCount; z++) {
-                                        var markerTemplate = markerTemplateEle.childNodes[z];
-                                        markerTemplate['style']['transform'] = 'translate(-50%, -50%)';
-                                    }
-                                }
-                            }
-                        };
-                        updateBlazorTemplate(this.element.id + '_MarkerTemplate' + j, 'MarkerTemplate', this.layers[i].markerSettings[j], undefined, markerRendered);
-                    }
-                }
-            }
-        }
-    };
     /**
      * Render the map area border
      *
@@ -851,12 +826,6 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.createSVG = function () {
-        resetBlazorTemplate(this.element.id + '_LabelTemplate', 'LabelTemplate');
-        for (var i = 0; i < this.layers.length; i++) {
-            for (var j = 0; j < this.layers[i].markerSettings.length; j++) {
-                resetBlazorTemplate(this.element.id + '_MarkerTemplate' + j, 'MarkerTemplate');
-            }
-        }
         this.removeSvg();
         createSvg(this);
     };
@@ -866,9 +835,6 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.removeSvg = function () {
-        for (var i = 0; i < this.annotations.length; i++) {
-            resetBlazorTemplate(this.element.id + '_ContentTemplate_' + i, 'ContentTemplate');
-        }
         removeElement(this.element.id + '_Secondary_Element');
         removeElement(this.element.id + '_tile_parent');
         removeElement(this.element.id + '_tiles');
@@ -946,7 +912,6 @@ var Maps = /** @class */ (function (_super) {
      * This method is used to perform the operations when a click operation is performed on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
-     * @blazorProperty 'PerformClick'
      */
     Maps.prototype.mapsOnClick = function (e) {
         var _this = this;
@@ -1098,7 +1063,9 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        e.preventDefault();
+        if (e.cancelable) {
+            e.preventDefault();
+        }
         return false;
     };
     /**
@@ -1150,7 +1117,6 @@ var Maps = /** @class */ (function (_super) {
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
-     * @blazorProperty 'PerformDoubleClick'
      */
     Maps.prototype.mapsOnDoubleClick = function (e) {
         this.notify('dblclick', e);
@@ -1176,9 +1142,7 @@ var Maps = /** @class */ (function (_super) {
             }
             var doubleClickArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
                 target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
-            var doubleClickBlazorArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
-                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
-            this.trigger('doubleClick', this.isBlazor ? doubleClickBlazorArgs : doubleClickArgs);
+            this.trigger('doubleClick', doubleClickArgs);
         }
     };
     /**
@@ -1277,26 +1241,28 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.mapsOnResize = function (e) {
         var _this = this;
-        this.isResize = true;
+        this.isResize = this.isReset = true;
         var args = {
+            cancel: false,
             name: resize,
             previousSize: this.availableSize,
-            currentSize: new Size(0, 0),
-            maps: !this.isBlazor ? this : null
+            currentSize: calculateSize(this),
+            maps: this
         };
-        if (this.resizeTo) {
-            clearTimeout(this.resizeTo);
-        }
-        if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
-            this.resizeTo = setTimeout(function () {
-                _this.unWireEVents();
-                _this.createSVG();
-                _this.refreshing = true;
-                _this.wireEVents();
-                args.currentSize = _this.availableSize;
-                _this.trigger(resize, args);
-                _this.render();
-            }, 500);
+        this.trigger(resize, args);
+        if (!args.cancel) {
+            if (this.resizeTo) {
+                clearTimeout(this.resizeTo);
+            }
+            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
+                this.resizeTo = setTimeout(function () {
+                    _this.unWireEVents();
+                    _this.createSVG();
+                    _this.refreshing = true;
+                    _this.wireEVents();
+                    _this.render();
+                }, 500);
+            }
         }
         return false;
     };
@@ -1556,7 +1522,7 @@ var Maps = /** @class */ (function (_super) {
         this.zoomNotApplied = true;
         this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
         var zoomArgs = {
-            cancel: false, name: 'zoom', type: zoomIn, maps: !this.isBlazor ? this : null,
+            cancel: false, name: 'zoom', type: zoomIn, maps: this,
             tileTranslatePoint: {}, translatePoint: {},
             tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
             scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
@@ -1706,19 +1672,21 @@ var Maps = /** @class */ (function (_super) {
                     render = true;
                     break;
                 case 'zoomSettings':
-                    if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor) {
-                        render = false;
-                    }
-                    else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
-                        this.zoomSettings.zoomFactor = 1;
-                        render = true;
-                    }
-                    else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
-                        this.zoomSettings.zoomFactor = 1;
-                        render = true;
-                    }
-                    else {
-                        render = true;
+                    if (!isNullOrUndefined(oldProp.zoomSettings)) {
+                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor) {
+                            render = false;
+                        }
+                        else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
+                            this.zoomSettings.zoomFactor = 1;
+                            render = true;
+                        }
+                        else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
+                            this.zoomSettings.zoomFactor = 1;
+                            render = true;
+                        }
+                        else {
+                            render = true;
+                        }
                     }
                     break;
                 case 'locale':
@@ -1731,12 +1699,7 @@ var Maps = /** @class */ (function (_super) {
             if (newProp.layers && isMarker) {
                 removeElement(this.element.id + '_Markers_Group');
                 if (this.isTileMap) {
-                    if (this.isBlazor) {
-                        this.render();
-                    }
-                    else {
-                        this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
-                    }
+                    this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
                 }
                 else {
                     this.render();
@@ -1747,7 +1710,7 @@ var Maps = /** @class */ (function (_super) {
             }
             else {
                 this.createSVG();
-                this.render();
+                this.renderElements();
             }
         }
     };
@@ -1887,6 +1850,21 @@ var Maps = /** @class */ (function (_super) {
         });
         return isVisible;
     };
+    /**
+     * To find space between the secondary element and svg element.
+     */
+    Maps.prototype.getExtraPosition = function () {
+        var top;
+        var left;
+        var svgElement = getElement(this.element.id + '_svg');
+        if (!isNullOrUndefined(svgElement)) {
+            var svgClientRect = svgElement.getClientRects()[0];
+            var mapsClientRect = (getElement(this.element.id + '_Secondary_Element')).getClientRects()[0];
+            top = svgClientRect.top - mapsClientRect.top;
+            left = svgClientRect.left - mapsClientRect.left;
+        }
+        return new Point(left, top);
+    };
     /**
      * To find marker visibility
      */

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

@@ -375,7 +375,6 @@ export interface ColorMappingSettingsModel {
      *
      * @aspDefaultValueIgnore
      * @default null
-     * @isBlazorNullableType true
      */
     from?: number;
 
@@ -384,7 +383,6 @@ export interface ColorMappingSettingsModel {
      *
      * @aspDefaultValueIgnore
      * @default null
-     * @isBlazorNullableType true
      */
     to?: number;
 
@@ -834,7 +832,6 @@ export interface ZoomSettingsModel {
      * Sets and gets the orientation of the zoom toolbar.
      *
      * @default Horizontal
-     * @blazorProperty 'ToolbarOrientation'
      */
     toolBarOrientation?: Orientation;
 
@@ -883,7 +880,6 @@ export interface ZoomSettingsModel {
      * Enables or disables the double click zooming in maps.
      *
      * @default false
-     * @blazorProperty 'ZoomOnDoubleClick'
      */
     doubleClickZoom?: boolean;
 
@@ -979,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.
      *
@@ -1142,7 +1145,6 @@ export interface LegendSettingsModel {
      * Sets and gets the path for the legend from the data source to be shown.
      *
      * @default null
-     * @blazorProperty 'LegendPath'
      */
     showLegendPath?: string;