@syncfusion/ej2-maps 24.2.4 → 25.1.35

package/src/maps/maps.js

@@ -235,6 +235,9 @@ var Maps = /** @class */ (function (_super) {
             this.trigger(load, { maps: this });
             this.createSVG();
             this.findBaseAndSubLayers();
+            if (!isNullOrUndefined(this.markerModule)) {
+                this.markerModule.initializeMarkerClusterList();
+            }
             this.createSecondaryElement();
             this.addTabIndex();
             this.themeStyle = getThemeStyle(this.theme);
@@ -695,55 +698,63 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.getMinMaxLatitudeLongitude = function () {
-        var element = document.getElementById(this.element.id).getBoundingClientRect();
-        var minPosition = this.isTileMap ? this.pointToLatLong((this.mapAreaRect.x - this.margin.left), -this.mapAreaRect.y) : this.getGeoLocation(0, (this.mapAreaRect.x + element.left), this.mapAreaRect.y);
-        var maxPosition = this.isTileMap ? this.pointToLatLong(this.mapAreaRect.width, (this.mapAreaRect.height - this.mapAreaRect.y)) :
-            this.getGeoLocation(0, (this.mapAreaRect.x + element.left + this.mapAreaRect.width), (this.mapAreaRect.y + this.mapAreaRect.height));
-        var MinMaxLatitudeLongitude = {
-            minLatitude: minPosition.latitude, maxLatitude: maxPosition.latitude, minLongitude: minPosition.longitude,
-            maxLongitude: maxPosition.longitude
-        };
-        return MinMaxLatitudeLongitude;
+        var mapsElement = document.getElementById(this.element.id);
+        if (!isNullOrUndefined(mapsElement)) {
+            var element = mapsElement.getBoundingClientRect();
+            var minPosition = this.isTileMap ? this.pointToLatLong((this.mapAreaRect.x - this.margin.left), -this.mapAreaRect.y) : this.getGeoLocation(0, (this.mapAreaRect.x + element.left), this.mapAreaRect.y);
+            var maxPosition = this.isTileMap ? this.pointToLatLong(this.mapAreaRect.width, (this.mapAreaRect.height - this.mapAreaRect.y)) :
+                this.getGeoLocation(0, (this.mapAreaRect.x + element.left + this.mapAreaRect.width), (this.mapAreaRect.y + this.mapAreaRect.height));
+            var MinMaxLatitudeLongitude = {
+                minLatitude: minPosition.latitude, maxLatitude: maxPosition.latitude, minLongitude: minPosition.longitude,
+                maxLongitude: maxPosition.longitude
+            };
+            return MinMaxLatitudeLongitude;
+        }
+        else {
+            return { minLatitude: 0, maxLatitude: 0, minLongitude: 0,
+                maxLongitude: 0 };
+        }
     };
     /**
      * @returns {void}
      * @private
      */
     Maps.prototype.arrangeTemplate = function () {
+        var _this = this;
         if (document.getElementById(this.element.id + '_Legend_Border')) {
             document.getElementById(this.element.id + '_Legend_Border').style.pointerEvents = 'none';
         }
         var templateElements = document.getElementsByClassName(this.element.id + '_template');
         if (!isNullOrUndefined(templateElements) && templateElements.length > 0 &&
             getElementByID(this.element.id + '_Layer_Collections') && !this.isTileMap) {
-            for (var i = 0; i < templateElements.length; i++) {
+            Array.prototype.forEach.call(templateElements, function (templateGroupEle, i) {
                 var offSetLetValue = 0;
                 var offSetTopValue = 0;
-                var templateGroupEle = templateElements[i];
                 if (!isNullOrUndefined(templateGroupEle) && templateGroupEle.childElementCount > 0) {
-                    var layerOffset = getElementByID(this.element.id + '_Layer_Collections').getBoundingClientRect();
+                    var layerOffset = getElementByID(_this.element.id + '_Layer_Collections').getBoundingClientRect();
                     var elementOffset = getElementByID(templateGroupEle.id).getBoundingClientRect();
                     if (templateGroupEle.id.indexOf('Marker') === -1) {
-                        offSetLetValue = this.isTileMap ? 0 : (layerOffset.left < elementOffset.left) ?
+                        offSetLetValue = _this.isTileMap ? 0 : (layerOffset.left < elementOffset.left) ?
                             -(Math.abs(elementOffset.left - layerOffset.left)) : (Math.abs(elementOffset.left - layerOffset.left));
-                        offSetTopValue = this.isTileMap ? 0 : (layerOffset.top < elementOffset.top) ?
+                        offSetTopValue = _this.isTileMap ? 0 : (layerOffset.top < elementOffset.top) ?
                             -(Math.abs(elementOffset.top - layerOffset.top)) : Math.abs(elementOffset.top - layerOffset.top);
                     }
-                    for (var j = 0; j < templateGroupEle.childElementCount; j++) {
-                        var currentTemplate = templateGroupEle.childNodes[j];
+                    Array.prototype.forEach.call(templateGroupEle.childNodes, function (currentTemplate, j) {
                         if (currentTemplate.id.indexOf('Marker') !== -1) {
-                            var elementOffset_1 = getElementByID(currentTemplate.id).getBoundingClientRect();
-                            currentTemplate.style.left = parseFloat(currentTemplate.style.left) - (this.isTileMap ? 0 : elementOffset_1.width / 2) + 'px';
-                            currentTemplate.style.top = parseFloat(currentTemplate.style.top) - (this.isTileMap ? 0 : elementOffset_1.height / 2) + 'px';
+                            if (currentTemplate.style.visibility != "hidden") {
+                                var elementOffset_1 = getElementByID(currentTemplate.id).getBoundingClientRect();
+                                currentTemplate.style.left = parseFloat(currentTemplate.style.left) - (_this.isTileMap ? 0 : elementOffset_1.width / 2) + 'px';
+                                currentTemplate.style.top = parseFloat(currentTemplate.style.top) - (_this.isTileMap ? 0 : elementOffset_1.height / 2) + 'px';
+                            }
                         }
                         else {
                             currentTemplate.style.left = parseFloat(currentTemplate.style.left) + offSetLetValue + 'px';
                             currentTemplate.style.top = parseFloat(currentTemplate.style.top) + offSetTopValue + 'px';
                             currentTemplate.style.transform = 'translate(-50%, -50%)';
                         }
-                    }
+                    });
                 }
-            }
+            });
         }
     };
     Maps.prototype.createTile = function () {
@@ -871,7 +882,8 @@ var Maps = /** @class */ (function (_super) {
             var options = new TextOption(this.element.id + '_Map_' + type, location_1.x, location_1.y, 'start', trimmedTitle);
             var titleBounds = new Rect(location_1.x, location_1.y, elementSize.width, elementSize.height);
             var element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
-            element.setAttribute('aria-label', this.description || title.text);
+            element.setAttribute('aria-label', title.text);
+            element.setAttribute('role', 'region');
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
                 height = Math.abs((titleBounds.y + this.margin.bottom) - this.availableSize.height);
                 this.mapAreaRect = new Rect(this.margin.left, titleBounds.y + 10, width, height - 10);
@@ -1022,7 +1034,7 @@ var Maps = /** @class */ (function (_super) {
         }
         else if (this.zoomSettings.enable && zoom && event['keyCode'] === 82) {
             zoom.performZoomingByToolBar('reset');
-            zoom.isPanning = false;
+            zoom.isPanModeEnabled = false;
         }
         else if (this.zoomSettings.enable && this.zoomSettings.enablePanning && zoom
             && (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
@@ -1186,12 +1198,12 @@ var Maps = /** @class */ (function (_super) {
         return latLongValue;
     };
     /** @private */
-    Maps.prototype.getClickLocation = function (targetId, pageX, pageY, targetElement, x, y) {
+    Maps.prototype.getClickLocation = function (targetId, pageX, pageY, targetElement, x, y, type) {
         var layerIndex = 0;
         var latLongValue;
-        if (targetId.indexOf('_LayerIndex_') !== -1 && !this.isTileMap &&
-            (parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
-            (parseInt(this.mouseDownEvent['y'], 10) === parseInt(this.mouseClickEvent['y'], 10))) {
+        if (targetId.indexOf('_LayerIndex_') !== -1 && !this.isTileMap && (!isNullOrUndefined(type) ||
+            ((parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
+                (parseInt(this.mouseDownEvent['y'], 10) === parseInt(this.mouseClickEvent['y'], 10))))) {
             layerIndex = parseFloat(targetId.split('_LayerIndex_')[1].split('_')[0]);
             if (this.layers[layerIndex].geometryType === 'Normal') {
                 if (targetId.indexOf('_shapeIndex_') > -1) {
@@ -1250,8 +1262,9 @@ var Maps = /** @class */ (function (_super) {
                 latLongValue = this.getGeoLocation(layerIndex, x, y);
             }
         }
-        else if (this.isTileMap && (parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
-            (parseInt(this.mouseDownEvent['y'], 10) === parseInt(this.mouseClickEvent['y'], 10))) {
+        else if (this.isTileMap && (!isNullOrUndefined(type) ||
+            ((parseInt(this.mouseDownEvent['x'], 10) === parseInt(this.mouseClickEvent['x'], 10)) &&
+                (parseInt(this.mouseDownEvent['y'], 10) === parseInt(this.mouseClickEvent['y'], 10))))) {
             latLongValue = this.getTileGeoLocation(x, y);
         }
         return latLongValue;
@@ -1994,13 +2007,51 @@ var Maps = /** @class */ (function (_super) {
         this.mouseDownEvent = { x: null, y: null };
         this.mouseClickEvent = { x: null, y: null };
         this.formatFunction = null;
-        //TODO: Calling the below code throws spec issue.
-        //this.renderer = null;
-        this.availableSize = new Size(0, 0);
+        this.localeObject = null;
+        this.defaultLocalConstants = null;
+        this.intl = null;
+        this.mapAreaRect = null;
+        this.layersCollection = null;
+        this.themeStyle = null;
+        this.totalRect = null;
+        this.baseSize = null;
+        this.baseMapBounds = null;
+        this.baseMapRectBounds = null;
+        this.baseTranslatePoint = null;
+        this.baseTileTranslatePoint = null;
+        this.markerZoomCenterPoint = null;
+        this.currentTiles = null;
+        this.serverProcess = null;
+        this.toolbarProperties = null;
+        this.zoomLabelPositions = null;
+        this.resizeEvent = null;
+        this.availableSize = null;
         if (document.getElementById('mapsmeasuretext')) {
             document.getElementById('mapsmeasuretext').remove();
         }
         this.removeSvg();
+        this.svgObject = null;
+        this.mapLayerPanel = null;
+        this.renderer = null;
+        this.translatePoint = null;
+        this.tileTranslatePoint = null;
+        this.previousPoint = null;
+        this.dataLabelShape = [];
+        this.zoomShapeCollection = [];
+        this.selectedElementId = [];
+        this.selectedMarkerElementId = [];
+        this.selectedBubbleElementId = [];
+        this.shapeSelectionClass = null;
+        this.markerSelectionClass = null;
+        this.bubbleSelectionClass = null;
+        this.navigationSelectionClass = null;
+        this.selectedNavigationElementId = [];
+        this.polygonSelectionClass = null;
+        this.selectedPolygonElementId = [];
+        this.legendSelectionClass = null;
+        this.previousTranslate = null;
+        this.initialTileTranslate = null;
+        this.markerDragArgument = null;
     };
     /**
      * Gets component name
@@ -2143,85 +2194,99 @@ var Maps = /** @class */ (function (_super) {
         if (this.isBubbleVisible()) {
             modules.push({
                 member: 'Bubble',
-                args: [this]
+                args: [this],
+                name: 'Bubble'
             });
         }
         if (isVisible.highlight) {
             modules.push({
                 member: 'Highlight',
-                args: [this]
+                args: [this],
+                name: 'Highlight'
             });
         }
         if (isVisible.selection) {
             modules.push({
                 member: 'Selection',
-                args: [this]
+                args: [this],
+                name: 'Selection'
             });
         }
         if (this.legendSettings.visible) {
             modules.push({
                 member: 'Legend',
-                args: [this]
+                args: [this],
+                name: 'Legend'
             });
         }
         if (this.zoomSettings.enable || this.zoomSettings.zoomFactor > this.zoomSettings.minZoom) {
             modules.push({
                 member: 'Zoom',
-                args: [this]
+                args: [this],
+                name: 'Zoom'
             });
         }
         if (this.isMarkersVisible()) {
             modules.push({
                 member: 'Marker',
-                args: [this]
+                args: [this],
+                name: 'Marker'
             });
         }
         if (this.isDataLabelVisible()) {
             modules.push({
                 member: 'DataLabel',
-                args: [this]
+                args: [this],
+                name: 'DataLabel'
             });
         }
         if (this.isNavigationVisible()) {
             modules.push({
                 member: 'NavigationLine',
-                args: [this]
+                args: [this],
+                name: 'NavigationLine'
             });
         }
         if (this.isPolygonVisible()) {
             modules.push({
                 member: 'Polygon',
-                args: [this]
+                args: [this],
+                name: 'Polygon'
             });
         }
         if (isVisible.tooltip) {
             modules.push({
                 member: 'MapsTooltip',
-                args: [this]
+                args: [this],
+                name: 'MapsTooltip'
             });
         }
         if (annotationEnable) {
             modules.push({
                 member: 'Annotations',
-                args: [this, Annotations]
+                args: [this, Annotations],
+                name: 'Annotations'
             });
         }
         if (this.allowPrint) {
             modules.push({
                 member: 'Print',
-                args: [this]
+                args: [this],
+                name: 'Print'
             });
         }
         if (this.allowImageExport) {
             modules.push({
                 member: 'ImageExport',
-                args: [this]
+                args: [this],
+                name: 'ImageExport'
             });
         }
         if (this.allowPdfExport) {
             modules.push({
                 member: 'PdfExport',
-                args: [this]
+                args: [this],
+                name: 'PdfExport'
             });
         }
         return modules;
@@ -2426,6 +2491,7 @@ var Maps = /** @class */ (function (_super) {
                     if (polygon.points.length > 0) {
                         isSelection = layer.polygonSettings.highlightSettings.enable || isSelection;
                         isHighlight = layer.polygonSettings.selectionSettings.enable || isHighlight;
+                        istooltipVisible = layer.polygonSettings.tooltipSettings.visible || istooltipVisible;
                     }
                 }
                 for (var _d = 0, markers_1 = markers; _d < markers_1.length; _d++) {
@@ -2703,6 +2769,12 @@ var Maps = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Maps.prototype, "pan", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "panComplete", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "zoomComplete", void 0);
     Maps = __decorate([
         NotifyPropertyChanges
     ], Maps);

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

@@ -464,6 +464,37 @@ export interface TooltipSettingsModel {
 
 }
 
+/**
+ * Interface for a class PolygonTooltipSettings
+ */
+export interface PolygonTooltipSettingsModel {
+
+    /**
+     * Shows or hides the tooltip of the polygon shapes. When this property is set as false, the tooltip for all the polygon shapes in a layer will not be visible.
+     *
+     * @default false
+     */
+    visible?: boolean;
+
+    /**
+     * Gets or sets the fill color for the tooltip of the polygon shape.
+     *
+     * @default ''
+     */
+    fill?: string;
+
+    /**
+     * Gets or sets the attributes such as width, color and opacity of the border of the tooltip element of the polygon shape.
+     */
+    border?: BorderModel;
+
+    /**
+     * Gets or sets the font properties of the text content of the tooltip element of the polygon shape.
+     */
+    textStyle?: FontModel;
+
+}
+
 /**
  * Interface for a class Margin
  */
@@ -861,6 +892,21 @@ export interface PolygonSettingModel {
      */
     points?: Coordinate[];
 
+    /**
+     * Specifies the tooltip text to be displayed for the polygon shape. If it is not set, the tooltip will not be displayed.
+     *
+     * @default ''
+     */
+    tooltipText?: string;
+
+    /**
+     * Specifies any HTML content as a tooltip on the polygon shape. If it is not set, the tooltip will not be displayed.
+     *
+     * @default ''
+     * @aspType string
+     */
+    tooltipTemplate?: string | Function;
+
 }
 
 /**
@@ -883,6 +929,11 @@ export interface PolygonSettingsModel {
      */
     highlightSettings?: HighlightSettingsModel;
 
+    /**
+     * Specifies the properties such as visibility, fill, border and text style to customize the tooltip. 
+     */
+    tooltipSettings?: PolygonTooltipSettingsModel;
+
 }
 
 /**

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

@@ -8,7 +8,7 @@ import { SmartLabelMode, IntersectAction } from '../../index';
 import { BorderModel, ColorMappingSettingsModel, FontModel, CommonTitleSettingsModel, NavigationLineSettingsModel, PolygonSettingsModel, ZoomToolbarTooltipSettingsModel } from './base-model';
 import { MarkerSettingsModel, MarkerClusterSettingsModel, ShapeSettingsModel, BubbleSettingsModel, ArrowModel } from './base-model';
 import { DataLabelSettingsModel, TooltipSettingsModel, SubTitleSettingsModel, SelectionSettingsModel, PolygonSettingModel } from './base-model';
-import { HighlightSettingsModel, ToggleLegendSettingsModel, ConnectorLineSettingsModel } from './base-model';
+import { HighlightSettingsModel, ToggleLegendSettingsModel, ConnectorLineSettingsModel, PolygonTooltipSettingsModel } from './base-model';
 import { InitialShapeSelectionSettingsModel, InitialMarkerSelectionSettingsModel, ZoomToolbarSettingsModel, ZoomToolbarButtonSettingsModel } from './base-model';
 import { Point, GeoLocation, Coordinate } from '../utils/helper';
 import { BingMapType, LegendArrangement, LegendShape, BubbleType, StaticMapType, ToolbarItem } from '../utils/enum';
@@ -399,6 +399,31 @@ export declare class TooltipSettings extends ChildProperty<TooltipSettings> {
      */
     valuePath: string;
 }
+/**
+ * Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
+ */
+export declare class PolygonTooltipSettings extends ChildProperty<PolygonTooltipSettings> {
+    /**
+     * Shows or hides the tooltip of the polygon shapes. When this property is set as false, the tooltip for all the polygon shapes in a layer will not be visible.
+     *
+     * @default false
+     */
+    visible: boolean;
+    /**
+     * Gets or sets the fill color for the tooltip of the polygon shape.
+     *
+     * @default ''
+     */
+    fill: string;
+    /**
+     * Gets or sets the attributes such as width, color and opacity of the border of the tooltip element of the polygon shape.
+     */
+    border: BorderModel;
+    /**
+     * Gets or sets the font properties of the text content of the tooltip element of the polygon shape.
+     */
+    textStyle: FontModel;
+}
 /**
  * Gets or sets the options to customize the margin of the maps.
  */
@@ -767,6 +792,19 @@ export declare class PolygonSetting extends ChildProperty<PolygonSettings> {
      * @default []
      */
     points: Coordinate[];
+    /**
+ * Specifies the tooltip text to be displayed for the polygon shape. If it is not set, the tooltip will not be displayed.
+ *
+ * @default ''
+ */
+    tooltipText: string;
+    /**
+ * Specifies any HTML content as a tooltip on the polygon shape. If it is not set, the tooltip will not be displayed.
+ *
+ * @default ''
+ * @aspType string
+ */
+    tooltipTemplate: string | Function;
 }
 /**
  * Defines the properties of the polygon shapes that will be rendered on a map layer.
@@ -785,6 +823,10 @@ export declare class PolygonSettings extends ChildProperty<PolygonSettings> {
      * Gets or sets the properties for highlighting polygon shapes in a map layer.
      */
     highlightSettings: HighlightSettingsModel;
+    /**
+     * Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
+     */
+    tooltipSettings: PolygonTooltipSettingsModel;
 }
 /**
  * Gets or sets the options to customize the navigation lines in maps which is used to connect different locations.

package/src/maps/model/base.js

@@ -303,6 +303,29 @@ var TooltipSettings = /** @class */ (function (_super) {
     return TooltipSettings;
 }(ChildProperty));
 export { TooltipSettings };
+/**
+ * Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
+ */
+var PolygonTooltipSettings = /** @class */ (function (_super) {
+    __extends(PolygonTooltipSettings, _super);
+    function PolygonTooltipSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(false)
+    ], PolygonTooltipSettings.prototype, "visible", void 0);
+    __decorate([
+        Property('')
+    ], PolygonTooltipSettings.prototype, "fill", void 0);
+    __decorate([
+        Complex({ color: 'transparent', width: 1 }, Border)
+    ], PolygonTooltipSettings.prototype, "border", void 0);
+    __decorate([
+        Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
+    ], PolygonTooltipSettings.prototype, "textStyle", void 0);
+    return PolygonTooltipSettings;
+}(ChildProperty));
+export { PolygonTooltipSettings };
 /**
  * Gets or sets the options to customize the margin of the maps.
  */
@@ -556,6 +579,12 @@ var PolygonSetting = /** @class */ (function (_super) {
     __decorate([
         Property([])
     ], PolygonSetting.prototype, "points", void 0);
+    __decorate([
+        Property('')
+    ], PolygonSetting.prototype, "tooltipText", void 0);
+    __decorate([
+        Property('')
+    ], PolygonSetting.prototype, "tooltipTemplate", void 0);
     return PolygonSetting;
 }(ChildProperty));
 export { PolygonSetting };
@@ -577,6 +606,9 @@ var PolygonSettings = /** @class */ (function (_super) {
     __decorate([
         Complex({}, HighlightSettings)
     ], PolygonSettings.prototype, "highlightSettings", void 0);
+    __decorate([
+        Complex({}, PolygonTooltipSettings)
+    ], PolygonSettings.prototype, "tooltipSettings", void 0);
     return PolygonSettings;
 }(ChildProperty));
 export { PolygonSettings };

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

@@ -184,6 +184,18 @@ export declare const annotationRendering: string;
  * @private
  */
 export declare const itemSelection: string;
+/**
+ * Specifies the maps pan complete event name.
+ *
+ * @private
+ */
+export declare const panComplete: string;
+/**
+ * Specifies the maps zoom complete event name.
+ *
+ * @private
+ */
+export declare const zoomComplete: string;
 /**
  * Specifies the maps item highlight event name.
  *

package/src/maps/model/constants.js

@@ -184,6 +184,18 @@ export var annotationRendering = 'annotationRendering';
  * @private
  */
 export var itemSelection = 'itemSelection';
+/**
+ * Specifies the maps pan complete event name.
+ *
+ * @private
+ */
+export var panComplete = 'panComplete';
+/**
+ * Specifies the maps zoom complete event name.
+ *
+ * @private
+ */
+export var zoomComplete = 'zoomComplete';
 /**
  * Specifies the maps item highlight event name.
  *

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

@@ -204,6 +204,14 @@ export interface ITooltipRenderEventArgs extends IMapsEventArgs {
      * Defines the original mouse event arguments.
      */
     eventArgs?: PointerEvent;
+    /**
+     * Defines the latitude value of the position of the mouse pointer.
+     */
+    latitude?: number;
+    /**
+     * Defines the longitude value of the position of the mouse pointer.
+     */
+    longitude?: number;
 }
 /**
  * Specifies the event arguments for item selection event in maps.