@syncfusion/ej2-maps 23.2.7 → 24.1.41

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

@@ -1,4 +1,4 @@
-import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { Alignment, LegendPosition, LegendType, LegendMode, ShapeLayerType, Type, MarkerType, Orientation, MapAjax } from '../../index';import { SmartLabelMode, IntersectAction } from '../../index';import { Theme } from './theme';import { Point, GeoLocation } from '../utils/helper';import { BingMapType, LegendArrangement, LegendShape, BubbleType, StaticMapType, ToolbarItem } from '../utils/enum';import { AnnotationAlignment, GeometryType, LabelPosition, LabelIntersectAction } from '../index';
+import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { Alignment, LegendPosition, LegendType, LegendMode, ShapeLayerType, Type, MarkerType, Orientation, MapAjax } from '../../index';import { SmartLabelMode, IntersectAction } from '../../index';import { Theme } from './theme';import { Point, GeoLocation, Coordinate } from '../utils/helper';import { BingMapType, LegendArrangement, LegendShape, BubbleType, StaticMapType, ToolbarItem } from '../utils/enum';import { AnnotationAlignment, GeometryType, LabelPosition, LabelIntersectAction } from '../index';
 
 /**
  * Interface for a class Annotation
@@ -7,7 +7,7 @@ export interface AnnotationModel {
 
     /**
      * Gets or sets the content for the annotation in maps.
-     * 
+     *
      * @default ''
      * @aspType string
      */
@@ -15,14 +15,14 @@ export interface AnnotationModel {
 
     /**
      * Gets or sets the x position of the annotation in pixel or percentage format.
-     * 
+     *
      * @default '0px'
      */
     x?: string;
 
     /**
      * Gets or sets the y position of the annotation in pixel or percentage format.
-     * 
+     *
      * @default '0px'
      */
     y?: string;
@@ -57,35 +57,35 @@ export interface ArrowModel {
 
     /**
      * Gets or sets the type of the position to place the arrow in navigation lines.
-     * 
+     *
      * @default 'Start'
      */
     position?: string;
 
     /**
      * Enables or disables the visibility of the arrow in navigation line.
-     * 
+     *
      * @default false
      */
     showArrow?: boolean;
 
     /**
      * Gets or sets the size of the arrow in navigation line in maps.
-     * 
+     *
      * @default 2
      */
     size?: number;
 
     /**
      * Gets or sets the color for the arrow in navigation line.
-     * 
+     *
      * @default 'black'
      */
     color?: string;
 
     /**
      * Gets or sets the offset value to position the arrow from the navigation line.
-     * 
+     *
      * @default 0
      */
     offSet?: number;
@@ -266,26 +266,26 @@ export interface ZoomToolbarTooltipSettingsModel {
      * Gets or sets the font family of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontFamily?: string;
 
     /**
      * Gets or sets the font style of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontStyle?: string;
 
     /**
      * Gets or sets the font weight of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontWeight?: string;
 
     /**
      * Gets or sets the size of the text in the tooltip of the zoom toolbar.
-     * 
+     *
      * @default ''
      */
     fontSize?: string;
@@ -294,7 +294,7 @@ export interface ZoomToolbarTooltipSettingsModel {
      * Gets or sets the font opacity of the text in the tooltip of the zoom toolbar.
      *
      * @default 1
-    */
+     */
     fontOpacity?: number;
 
 }
@@ -586,7 +586,7 @@ export interface MarkerClusterSettingsModel {
 
     /**
      * Gets or sets the URL path for the marker cluster when the cluster shape is set as image in maps.
-     * 
+     *
      * @default ''
      */
     imageUrl?: string;
@@ -804,6 +804,78 @@ export interface HighlightSettingsModel {
 
 }
 
+/**
+ * Interface for a class PolygonSetting
+ */
+export interface PolygonSettingModel {
+
+    /**
+     * Gets or sets the width of the border of the polygon shape.
+     *
+     * @default 1
+     */
+    borderWidth?: number;
+
+    /**
+     * Gets or sets the opacity of the border of the polygon shape.
+     *
+     * @default 1
+     */
+    borderOpacity?: number;
+
+    /**
+     * Gets or sets the opacity of the polygon shape.
+     *
+     * @default 1
+     */
+    opacity?: number;
+
+    /**
+     * Gets or sets the color to be used in the border of the polygon shape.
+     *
+     * @default 'black'
+     */
+    borderColor?: string;
+
+    /**
+     * Gets or sets the color to be filled in the polygon shape.
+     *
+     * @default 'black'
+     */
+    fill?: string;
+
+    /**
+     * Gets or sets the points that define the polygon shape.
+     * This property holds a collection of coordinates that define the polygon shape.
+     *
+     * @default []
+     */
+    points?: Coordinate[];
+
+}
+
+/**
+ * Interface for a class PolygonSettings
+ */
+export interface PolygonSettingsModel {
+
+    /**
+     * Gets or sets the properties of all the polygon shapes that will be displayed in a layer.
+     */
+    polygons?: PolygonSettingModel[];
+
+    /**
+     * Gets or sets the properties for selecting polygon shapes in a map layer.
+     */
+    selectionSettings?: SelectionSettingsModel;
+
+    /**
+     * Gets or sets the properties for highlighting polygon shapes in a map layer.
+     */
+    highlightSettings?: HighlightSettingsModel;
+
+}
+
 /**
  * Interface for a class NavigationLineSettings
  */
@@ -1098,7 +1170,7 @@ export interface ZoomSettingsModel {
 
     /**
      * Gets or sets the color for the toolbar in maps.
-     * 
+     *
      * @default null
 
      */
@@ -1106,7 +1178,7 @@ export interface ZoomSettingsModel {
 
     /**
      * Gets or sets the color for the zoom toolbar when the mouse has hovered on toolbar element in maps.
-     * 
+     *
      * @default null
 
      */
@@ -1114,7 +1186,7 @@ export interface ZoomSettingsModel {
 
     /**
      * Gets or sets the color for the zooming toolbar when clicking the zooming toolbar in maps.
-     * 
+     *
      * @default null
 
      */
@@ -1193,14 +1265,14 @@ export interface ZoomSettingsModel {
 
     /**
      * Enables or disables the ability to zoom based on the marker position while rendering the maps.
-     * 
+     *
      * @default false
      */
     shouldZoomInitially?: boolean;
 
     /**
      * Enables or disables the zoom to set to the initial State.
-     * 
+     *
      * @default true
      */
     resetToInitial?: boolean;
@@ -1294,7 +1366,7 @@ export interface LegendSettingsModel {
 
     /**
      * Enables or disables the visibility of the inverted pointer in interactive legend in maps.
-     * 
+     *
      * @default false
      */
     invertedPointer?: boolean;
@@ -1408,7 +1480,7 @@ export interface LegendSettingsModel {
 
     /**
      * Gets or sets the color of the legend in maps.
-     * 
+     *
      * @default null
      */
     fill?: string;
@@ -1474,14 +1546,14 @@ export interface DataLabelSettingsModel {
 
     /**
      * Gets or sets the background color for the data labels in maps.
-     * 
+     *
      * @default 'black'
      */
     fill?: string;
 
     /**
      * Gets or sets the opacity of the data labels in maps.
-     * 
+     *
      * @default 1
      */
     opacity?: number;
@@ -1962,6 +2034,12 @@ export interface LayerSettingsModel {
      */
     navigationLineSettings?: NavigationLineSettingsModel[];
 
+    /**
+     * Gets or sets 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.
+     */
+    polygonSettings?: PolygonSettingsModel;
+
     /**
      * Gets or sets the options for customizing the tooltip of the layers in maps.
      */
@@ -2004,7 +2082,7 @@ export interface MapsAreaSettingsModel {
 
     /**
      * Gets or sets the background color for the map area.
-     * 
+     *
      * @default null
      */
     background?: string;

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

@@ -5,12 +5,12 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Alignment, LegendPosition, LegendType, LegendMode, ShapeLayerType, Type, MarkerType, Orientation, MapAjax } from '../../index';
 import { SmartLabelMode, IntersectAction } from '../../index';
-import { BorderModel, ColorMappingSettingsModel, FontModel, CommonTitleSettingsModel, NavigationLineSettingsModel, ZoomToolbarTooltipSettingsModel } from './base-model';
+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 } from './base-model';
+import { DataLabelSettingsModel, TooltipSettingsModel, SubTitleSettingsModel, SelectionSettingsModel, PolygonSettingModel } from './base-model';
 import { HighlightSettingsModel, ToggleLegendSettingsModel, ConnectorLineSettingsModel } from './base-model';
 import { InitialShapeSelectionSettingsModel, InitialMarkerSelectionSettingsModel, ZoomToolbarSettingsModel, ZoomToolbarButtonSettingsModel } from './base-model';
-import { Point, GeoLocation } from '../utils/helper';
+import { Point, GeoLocation, Coordinate } from '../utils/helper';
 import { BingMapType, LegendArrangement, LegendShape, BubbleType, StaticMapType, ToolbarItem } from '../utils/enum';
 import { AnnotationAlignment, GeometryType, LabelPosition, LabelIntersectAction } from '../index';
 /**
@@ -236,19 +236,19 @@ export declare class ZoomToolbarTooltipSettings extends ChildProperty<ZoomToolba
      * Gets or sets the font family of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontFamily: string;
     /**
      * Gets or sets the font style of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontStyle: string;
     /**
      * Gets or sets the font weight of the text in the tooltip of the zoom toolbar.
      *
      * @default ''
-    */
+     */
     fontWeight: string;
     /**
      * Gets or sets the size of the text in the tooltip of the zoom toolbar.
@@ -260,7 +260,7 @@ export declare class ZoomToolbarTooltipSettings extends ChildProperty<ZoomToolba
      * Gets or sets the font opacity of the text in the tooltip of the zoom toolbar.
      *
      * @default 1
-    */
+     */
     fontOpacity: number;
 }
 /**
@@ -718,6 +718,66 @@ export declare class HighlightSettings extends ChildProperty<HighlightSettings>
      */
     border: BorderModel;
 }
+/**
+ * Defines the properties for a single polygon shape to render over the Maps, such as coordinates, fill, border, and opacity.
+ */
+export declare class PolygonSetting extends ChildProperty<PolygonSettings> {
+    /**
+     * Gets or sets the width of the border of the polygon shape.
+     *
+     * @default 1
+     */
+    borderWidth: number;
+    /**
+     * Gets or sets the opacity of the border of the polygon shape.
+     *
+     * @default 1
+     */
+    borderOpacity: number;
+    /**
+     * Gets or sets the opacity of the polygon shape.
+     *
+     * @default 1
+     */
+    opacity: number;
+    /**
+     * Gets or sets the color to be used in the border of the polygon shape.
+     *
+     * @default 'black'
+     */
+    borderColor: string;
+    /**
+     * Gets or sets the color to be filled in the polygon shape.
+     *
+     * @default 'black'
+     */
+    fill: string;
+    /**
+     * Gets or sets the points that define the polygon shape.
+     * This property holds a collection of coordinates that define the polygon shape.
+     *
+     * @default []
+     */
+    points: Coordinate[];
+}
+/**
+ * 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.
+ */
+export declare class PolygonSettings extends ChildProperty<PolygonSettings> {
+    /**
+     * Gets or sets the properties of all the polygon shapes that will be displayed in a layer.
+     */
+    polygons: PolygonSettingModel[];
+    /**
+     * Gets or sets the properties for selecting polygon shapes in a map layer.
+     */
+    selectionSettings: SelectionSettingsModel;
+    /**
+     * Gets or sets the properties for highlighting polygon shapes in a map layer.
+     */
+    highlightSettings: HighlightSettingsModel;
+}
 /**
  * Gets or sets the options to customize the navigation lines in maps which is used to connect different locations.
  */
@@ -1693,6 +1753,11 @@ export declare class LayerSettings extends ChildProperty<LayerSettings> {
      * Gets or sets the options for customizing the navigation lines in maps.
      */
     navigationLineSettings: NavigationLineSettingsModel[];
+    /**
+     * Gets or sets 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.
+     */
+    polygonSettings: PolygonSettingsModel;
     /**
      * Gets or sets the options for customizing the tooltip of the layers in maps.
      */

package/src/maps/model/base.js

@@ -527,6 +527,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 +1200,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);
             }
         }