@syncfusion/ej2-maps 23.2.7 → 24.1.47

package/src/maps/model/base.js

@@ -357,6 +357,9 @@ var MarkerClusterSettings = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], MarkerClusterSettings.prototype, "allowClustering", void 0);
+    __decorate([
+        Property(true)
+    ], MarkerClusterSettings.prototype, "allowDeepClustering", void 0);
     __decorate([
         Complex({ color: 'transparent', width: 1 }, Border)
     ], MarkerClusterSettings.prototype, "border", void 0);
@@ -527,6 +530,56 @@ var HighlightSettings = /** @class */ (function (_super) {
     return HighlightSettings;
 }(ChildProperty));
 export { HighlightSettings };
+/**
+ * Defines the properties for a single polygon shape to render over the Maps, such as coordinates, fill, border, and opacity.
+ */
+var PolygonSetting = /** @class */ (function (_super) {
+    __extends(PolygonSetting, _super);
+    function PolygonSetting() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(1)
+    ], PolygonSetting.prototype, "borderWidth", void 0);
+    __decorate([
+        Property(1)
+    ], PolygonSetting.prototype, "borderOpacity", void 0);
+    __decorate([
+        Property(1)
+    ], PolygonSetting.prototype, "opacity", void 0);
+    __decorate([
+        Property('#FF471A')
+    ], PolygonSetting.prototype, "borderColor", void 0);
+    __decorate([
+        Property('#FF471A')
+    ], PolygonSetting.prototype, "fill", void 0);
+    __decorate([
+        Property([])
+    ], PolygonSetting.prototype, "points", void 0);
+    return PolygonSetting;
+}(ChildProperty));
+export { PolygonSetting };
+/**
+ * Defines the properties of the polygon shapes that will be rendered on a map layer.
+ * The selection and highlight settings for polygon shapes can also be defined.
+ */
+var PolygonSettings = /** @class */ (function (_super) {
+    __extends(PolygonSettings, _super);
+    function PolygonSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Collection([], PolygonSetting)
+    ], PolygonSettings.prototype, "polygons", void 0);
+    __decorate([
+        Complex({}, SelectionSettings)
+    ], PolygonSettings.prototype, "selectionSettings", void 0);
+    __decorate([
+        Complex({}, HighlightSettings)
+    ], PolygonSettings.prototype, "highlightSettings", void 0);
+    return PolygonSettings;
+}(ChildProperty));
+export { PolygonSettings };
 /**
  * Gets or sets the options to customize the navigation lines in maps which is used to connect different locations.
  */
@@ -1150,6 +1203,9 @@ var LayerSettings = /** @class */ (function (_super) {
     __decorate([
         Collection([], NavigationLineSettings)
     ], LayerSettings.prototype, "navigationLineSettings", void 0);
+    __decorate([
+        Complex({}, PolygonSettings)
+    ], LayerSettings.prototype, "polygonSettings", void 0);
     __decorate([
         Complex({}, TooltipSettings)
     ], LayerSettings.prototype, "tooltipSettings", void 0);

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

@@ -25,10 +25,31 @@ export interface IPrintEventArgs extends IMapsEventArgs {
      */
     htmlContent: Element;
 }
+/**
+ * This class contains the minimum and maximum latitude and longitude coordinates of the map's visible area
+ */
+export interface IMinMaxLatitudeLongitude {
+    /**
+     * Gets the minimum latitude value from the visible map area.
+     */
+    minLatitude: number;
+    /**
+     * Gets the maximum latitude value from the visible map area.
+     */
+    maxLatitude: number;
+    /**
+     * Gets the minimum longitude value from the visible map area.
+     */
+    minLongitude: number;
+    /**
+     * Gets the maximum longitude value from the visible map area.
+     */
+    maxLongitude: number;
+}
 /**
  * Specifies the event arguments for the loaded event in maps.
  */
-export interface ILoadedEventArgs extends IMapsEventArgs {
+export interface ILoadedEventArgs extends IMinMaxLatitudeLongitude, IMapsEventArgs {
     /**
      * Defines the current maps instance.
      *
@@ -692,7 +713,7 @@ export interface IAnnotationRenderingEventArgs extends IMapsEventArgs {
 /**
  * Specifies the event arguments for the pan event in maps.
  */
-export interface IMapPanEventArgs extends IMapsEventArgs {
+export interface IMapPanEventArgs extends IMinMaxLatitudeLongitude, IMapsEventArgs {
     /**
      * Defines the current maps instance.
      *
@@ -727,7 +748,7 @@ export interface IMapPanEventArgs extends IMapsEventArgs {
 /**
  * Specifies the event arguments for zoom event in maps.
  */
-export interface IMapZoomEventArgs extends IMapsEventArgs {
+export interface IMapZoomEventArgs extends IMinMaxLatitudeLongitude, IMapsEventArgs {
     /**
      * Defines the current maps instance.
      *

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

@@ -56,6 +56,7 @@ var Highlight = /** @class */ (function () {
             targetEle.getAttribute('class') !== 'MarkerselectionMapStyle' &&
             targetEle.getAttribute('class') !== 'BubbleselectionMapStyle' &&
             targetEle.getAttribute('class') !== 'navigationlineselectionMapStyle' &&
+            targetEle.getAttribute('class') !== 'PolygonselectionMapStyle' &&
             targetEle.getAttribute('class') !== 'LineselectionMapStyle') {
             layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -85,6 +86,11 @@ var Highlight = /** @class */ (function () {
                 data = this.maps.layers[layerIndex].markerSettings[marker].dataSource[dataIndex];
                 this.highlightSettings = this.maps.layers[layerIndex].markerSettings[marker].highlightSettings;
             }
+            else if (targetEle.id.indexOf('_PolygonIndex_') > -1) {
+                dataIndex = parseInt(targetEle.id.split('_PolygonIndex_')[1].split('_')[0], 10);
+                data = this.maps.layers[layerIndex].polygonSettings.polygons[dataIndex].points;
+                this.highlightSettings = this.maps.layers[layerIndex].polygonSettings.highlightSettings;
+            }
             else {
                 var index = parseInt(targetEle.id.split('_NavigationIndex_')[1].split('_')[0], 10);
                 layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);

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

@@ -71,6 +71,12 @@ var Selection = /** @class */ (function () {
                 this.selectionsettings = this.maps.layers[layerIndex].markerSettings[markerIndex].selectionSettings;
                 this.selectionType = 'Marker';
             }
+            else if (targetElement.id.indexOf('_PolygonIndex_') > -1) {
+                dataIndex = parseInt(targetElement.id.split('_PolygonIndex_')[1].split('_')[0], 10);
+                data = this.maps.layers[layerIndex].polygonSettings.polygons[dataIndex].points;
+                this.selectionsettings = this.maps.layers[layerIndex].polygonSettings.selectionSettings;
+                this.selectionType = 'Polygon';
+            }
             else if (targetElement.id.indexOf('NavigationIndex') > -1) {
                 var index = parseInt(targetElement.id.split('_NavigationIndex_')[1].split('_')[0], 10);
                 shapeData = null;
@@ -249,6 +255,10 @@ var Selection = /** @class */ (function () {
                         _this.maps.navigationSelectionClass = getElement(_this.selectionType + 'selectionMap');
                         _this.maps.selectedNavigationElementId.push(targetElement.getAttribute('id'));
                     }
+                    if (targetElement.getAttribute('class') === 'PolygonselectionMapStyle') {
+                        _this.maps.polygonSelectionClass = getElement(_this.selectionType + 'selectionMap');
+                        _this.maps.selectedPolygonElementId.push(targetElement.getAttribute('id'));
+                    }
                 }
             }
         });
@@ -288,6 +298,9 @@ var Selection = /** @class */ (function () {
         if (this.selectionType === 'navigationline') {
             this.maps.selectedBubbleElementId.splice(this.maps.selectedBubbleElementId.indexOf(targetElement.getAttribute('id')), 1);
         }
+        if (this.selectionType === 'Polygon') {
+            this.maps.selectedPolygonElementId.splice(this.maps.selectedPolygonElementId.indexOf(targetElement.getAttribute('id')), 1);
+        }
     };
     /**
      * Get module name.

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

@@ -1,8 +1,7 @@
 import { tooltipRender } from '../index';
 import { Tooltip } from '@syncfusion/ej2-svg-base';
-import { createElement, Browser, isNullOrUndefined, extend, remove, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
+import { createElement, Browser, isNullOrUndefined, extend, remove } from '@syncfusion/ej2-base';
 import { getMousePosition, Internalize, checkPropertyPath, getValueFromObject, formatValue, convertStringToValue } from '../utils/helper';
-import { click } from '../model/constants';
 /**
  * Map Tooltip
  */
@@ -22,7 +21,6 @@ var MapsTooltip = /** @class */ (function () {
         var target;
         var touchArg;
         var tooltipArgs;
-        var tooltipTemplateElement;
         if (e.type.indexOf('touch') !== -1) {
             this.isTouch = true;
             touchArg = e;
@@ -173,7 +171,12 @@ var MapsTooltip = /** @class */ (function () {
                     id: this.maps.element.id + '_mapsTooltip',
                     className: 'EJ2-maps-Tooltip'
                 });
-                tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
+                if (isNullOrUndefined(option.template) || option.template === '' || this.maps.tooltipDisplayMode === 'MouseMove') {
+                    tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
+                }
+                else {
+                    tooltipEle.style.position = 'absolute';
+                }
                 document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
             }
             if (typeof option.template !== 'function' && option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
@@ -217,8 +220,8 @@ var MapsTooltip = /** @class */ (function () {
                             header: '',
                             data: option['data'],
                             template: option['template'],
-                            content: tooltipArgs.content.toString() !== currentData.toString() ? [SanitizeHtmlHelper.sanitize(tooltipArgs.content.toString())] :
-                                [SanitizeHtmlHelper.sanitize(currentData.toString())],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                [currentData.toString()],
                             shapes: [],
                             location: option['location'],
                             palette: [markerFill],
@@ -235,8 +238,8 @@ var MapsTooltip = /** @class */ (function () {
                             header: '',
                             data: tooltipArgs.options['data'],
                             template: tooltipArgs.options['template'],
-                            content: tooltipArgs.content.toString() !== currentData.toString() ? [SanitizeHtmlHelper.sanitize(tooltipArgs.content.toString())] :
-                                [SanitizeHtmlHelper.sanitize(currentData.toString())],
+                            content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
+                                [currentData.toString()],
                             shapes: [],
                             location: tooltipArgs.options['location'],
                             palette: [markerFill],
@@ -255,13 +258,6 @@ var MapsTooltip = /** @class */ (function () {
                     _this.svgTooltip.appendTo(tooltipEle);
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     _this.maps.renderReactTemplates();
-                    tooltipTemplateElement = document.getElementById(_this.maps.element.id + '_mapsTooltip');
-                    if (tooltipTemplateElement !== null && tooltipTemplateElement.innerHTML.indexOf('href') !== -1
-                        && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
-                        var templateStyle = tooltipTemplateElement.getAttribute('style');
-                        templateStyle = templateStyle.replace('pointer-events: none;', 'position-events:all;');
-                        tooltipTemplateElement.style.cssText = templateStyle;
-                    }
                 }
                 else {
                     _this.clearTooltip(e.target);
@@ -283,12 +279,8 @@ var MapsTooltip = /** @class */ (function () {
             }
         }
         else {
-            tooltipTemplateElement = document.getElementById(this.maps.element.id + '_mapsTooltip');
-            if (tooltipTemplateElement !== null && tooltipTemplateElement.innerHTML.indexOf('href') !== -1
-                && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
-                this.maps.notify(click, this);
-            }
-            else {
+            var tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
+            if (isNullOrUndefined(tooltipElement)) {
                 this.clearTooltip(e.target);
             }
         }