@syncfusion/ej2-maps 19.3.44 → 19.4.42

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

@@ -348,7 +348,6 @@ export declare class ColorMappingSettings extends ChildProperty<ColorMappingSett
      *
      * @aspDefaultValueIgnore
      * @default null
-     * @isBlazorNullableType true
      */
     from: number;
     /**
@@ -356,7 +355,6 @@ export declare class ColorMappingSettings extends ChildProperty<ColorMappingSett
      *
      * @aspDefaultValueIgnore
      * @default null
-     * @isBlazorNullableType true
      */
     to: number;
     /**
@@ -729,7 +727,6 @@ export declare class ZoomSettings extends ChildProperty<ZoomSettings> {
      * Sets and gets the orientation of the zoom toolbar.
      *
      * @default Horizontal
-     * @blazorProperty 'ToolbarOrientation'
      */
     toolBarOrientation: Orientation;
     /**
@@ -770,7 +767,6 @@ export declare class ZoomSettings extends ChildProperty<ZoomSettings> {
      * Enables or disables the double click zooming in maps.
      *
      * @default false
-     * @blazorProperty 'ZoomOnDoubleClick'
      */
     doubleClickZoom: boolean;
     /**
@@ -849,6 +845,12 @@ export declare class ToggleLegendSettings extends ChildProperty<ToggleLegendSett
  * Sets and gets the options to customize the legend of the maps.
  */
 export declare class LegendSettings extends ChildProperty<LegendSettings> {
+    /**
+     * Enables or disables to render the legend item based on the shapes from the data source of markers.
+     *
+     * @default false
+     */
+    useMarkerShape: boolean;
     /**
      * Enables or disables the toggle visibility for legend in maps.
      *
@@ -987,7 +989,6 @@ export declare class LegendSettings extends ChildProperty<LegendSettings> {
      * Sets and gets the path for the legend from the data source to be shown.
      *
      * @default null
-     * @blazorProperty 'LegendPath'
      */
     showLegendPath: string;
     /**

package/src/maps/model/base.js

@@ -655,6 +655,9 @@ var LegendSettings = /** @class */ (function (_super) {
     function LegendSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    __decorate([
+        Property(false)
+    ], LegendSettings.prototype, "useMarkerShape", void 0);
     __decorate([
         Property(false)
     ], LegendSettings.prototype, "toggleVisibility", void 0);
@@ -707,7 +710,7 @@ var LegendSettings = /** @class */ (function (_super) {
         Complex({}, CommonTitleSettings)
     ], LegendSettings.prototype, "title", void 0);
     __decorate([
-        Complex({}, Font)
+        Complex(Theme.legendTitleFont, Font)
     ], LegendSettings.prototype, "titleStyle", void 0);
     __decorate([
         Property('Bottom')
@@ -807,7 +810,7 @@ var ShapeSettings = /** @class */ (function (_super) {
         Property(5)
     ], ShapeSettings.prototype, "circleRadius", void 0);
     __decorate([
-        Complex({ width: 0, color: '#000000' }, Border)
+        Complex({ width: null, color: '#000000' }, Border)
     ], ShapeSettings.prototype, "border", void 0);
     __decorate([
         Property('')

package/src/maps/model/export-pdf.js

@@ -42,7 +42,7 @@ var PdfExport = /** @class */ (function () {
             var exportElement = _this.control.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark')
+            if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark' || _this.control.theme === 'Bootstrap5' || _this.control.theme === 'Bootstrap5Dark')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }

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

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

package/src/maps/model/theme.js

@@ -26,15 +26,15 @@ export var Theme;
         fontWeight: 'Regular',
         color: null,
         fontStyle: 'Regular',
-        fontFamily: 'Roboto'
+        fontFamily: null
     };
     /** @private */
     Theme.legendTitleFont = {
-        size: '14px',
-        fontWeight: 'Regular',
+        size: '12px',
+        fontWeight: 'Medium',
         color: null,
-        fontStyle: 'Regular',
-        fontFamily: 'Roboto, Noto, Sans-serif'
+        fontStyle: 'Medium',
+        fontFamily: null
     };
     /** @private */
     Theme.legendLabelFont = {
@@ -164,7 +164,6 @@ export var BootstrapTheme;
  * @param {MapsTheme} theme Specifies the theme of the maps
  * @returns {string[]} Returns the shape color
  */
-// eslint-disable-next-line @typescript-eslint/no-namespace
 export function getShapeColor(theme) {
     var themePalette;
     switch (theme.toLowerCase()) {
@@ -176,6 +175,22 @@ export function getShapeColor(theme) {
             themePalette = ['#10B981', '#22D3EE', '#2DD4BF', '#4ADE80', '#8B5CF6',
                 '#E879F9', '#F472B6', '#F87171', '#F97316', '#FCD34D'];
             break;
+        case 'bootstrap5':
+            themePalette = ['#262E0B', '#668E1F', '#AF6E10', '#862C0B', '#1F2D50',
+                '#64680B', '#311508', '#4C4C81', '#0C7DA0', '#862C0B'];
+            break;
+        case 'bootstrap5dark':
+            themePalette = ['#5ECB9B', '#A860F1', '#EBA844', '#557EF7', '#E9599B',
+                '#BFC529', '#3BC6CF', '#7A68EC', '#74B706', '#EA6266'];
+            break;
+        case 'fluentui':
+            themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
+                '#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
+            break;
+        case 'fluentuidark':
+            themePalette = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C',
+                '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', '#BC4870'];
+            break;
         default:
             themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 '#D6D572', '#9178E3', '#A1E5B4', '#87A4B4', '#E4C16C'];
@@ -321,6 +336,7 @@ export function getThemeStyle(theme) {
                 tooltipFillColor: '#363F4C',
                 zoomFillColor: '#FFFFFF',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6'
@@ -338,6 +354,7 @@ export function getThemeStyle(theme) {
                 tooltipFontColor: '#000000',
                 tooltipFillColor: '#ffffff',
                 zoomFillColor: '#FFFFFF',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
@@ -413,6 +430,98 @@ export function getThemeStyle(theme) {
                 shapeFill: '#374151'
             };
             break;
+        case 'bootstrap5':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#212529',
+                subTitleFontColor: '#212529',
+                legendTitleFontColor: '#212529',
+                legendTextColor: '#212529',
+                dataLabelFontColor: '#212529',
+                tooltipFontColor: '#F9FAFB',
+                tooltipFillColor: '#212529',
+                zoomFillColor: '#6C757D',
+                fontFamily: 'Helvetica Neue',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Helvetica Neue',
+                titleFontWeight: 'normal',
+                zoomSelectionColor: '#343A40',
+                shapeFill: '#E9ECEF'
+            };
+            break;
+        case 'bootstrap5dark':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#FFFFFF',
+                subTitleFontColor: '#FFFFFF',
+                legendTitleFontColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                dataLabelFontColor: '#FFFFFF',
+                tooltipFontColor: '#212529',
+                tooltipFillColor: '#E9ECEF',
+                zoomFillColor: '#B5BABE',
+                fontFamily: 'Helvetica Neue',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Helvetica Neue',
+                titleFontWeight: 'normal',
+                zoomSelectionColor: '#DEE2E6',
+                shapeFill: '#495057'
+            };
+            break;
+        case 'fluentui':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#201F1E',
+                subTitleFontColor: '#201F1E',
+                legendTitleFontColor: '#201F1E',
+                legendTextColor: '#201F1E',
+                dataLabelFontColor: '#201F1E',
+                tooltipFontColor: '#323130',
+                tooltipFillColor: '#FFFFFF',
+                zoomFillColor: '#A19F9D',
+                fontFamily: 'Segoe UI',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#323130',
+                shapeFill: '#F3F2F1'
+            };
+            break;
+        case 'fluentuidark':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#F3F2F1',
+                subTitleFontColor: '#F3F2F1',
+                legendTitleFontColor: '#F3F2F1',
+                legendTextColor: '#F3F2F1',
+                dataLabelFontColor: '#F3F2F1',
+                tooltipFontColor: '#F3F2F1',
+                tooltipFillColor: '#252423',
+                zoomFillColor: '#484644',
+                fontFamily: 'Segoe UI',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#F3F2F1',
+                shapeFill: '#252423'
+            };
+            break;
         default:
             style = {
                 backgroundColor: '#FFFFFF',
@@ -426,6 +535,7 @@ export function getThemeStyle(theme) {
                 tooltipFillColor: '#000000',
                 zoomFillColor: '#737373',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
+                fontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6'

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable jsdoc/require-param */
 import { annotationRendering } from '../index';
-import { createElement, isNullOrUndefined, updateBlazorTemplate } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getTemplateFunction, getElementOffset, getElementByID } from '../utils/helper';
 /**
  * Represents the annotation elements for map.
@@ -24,9 +24,6 @@ var Annotations = /** @class */ (function () {
         });
         if (annotationGroup.childElementCount > 0 && !(isNullOrUndefined(getElementByID(secondaryID)))) {
             getElementByID(secondaryID).appendChild(annotationGroup);
-            for (var i = 0; i < this.map.annotations.length; i++) {
-                updateBlazorTemplate(this.map.element.id + '_ContentTemplate_' + i, 'ContentTemplate', this.map.annotations[i]);
-            }
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.map.renderReactTemplates();
@@ -56,10 +53,9 @@ var Annotations = /** @class */ (function () {
             if (argsData.cancel) {
                 return;
             }
-            var blazor = 'Blazor';
             templateFn = getTemplateFunction(argsData.content);
-            if (templateFn && (!window[blazor] ? templateFn(_this.map, _this.map, argsData.content, _this.map.element.id + '_ContentTemplate_' + annotationIndex).length : {})) {
-                templateElement = Array.prototype.slice.call(templateFn(!window[blazor] ? _this.map : {}, _this.map, argsData.content, _this.map.element.id + '_ContentTemplate_' + annotationIndex));
+            if (templateFn && templateFn(_this.map, _this.map, argsData.content, _this.map.element.id + '_ContentTemplate_' + annotationIndex).length) {
+                templateElement = Array.prototype.slice.call(templateFn(_this.map, _this.map, argsData.content, _this.map.element.id + '_ContentTemplate_' + annotationIndex));
                 var length_1 = templateElement.length;
                 for (var i = 0; i < length_1; i++) {
                     childElement.appendChild(templateElement[i]);

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

@@ -1,12 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 import { itemHighlight } from '../index';
 import { Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getElementsByClassName, getElement, removeClass, createStyle, customizeStyle, getTargetElement } from '../utils/helper';
@@ -158,14 +149,14 @@ var Highlight = /** @class */ (function () {
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker].highlightSettings.enable;
         }
         var border = {
-            color: this.highlightSettings.border.color,
-            width: this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale),
+            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.border.color || this.highlightSettings.fill),
+            width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
             opacity: this.highlightSettings.border.opacity
         };
         var eventArgs = {
             opacity: this.highlightSettings.opacity,
-            fill: targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
-                ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none',
+            fill: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
+                ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none') : 'transparent',
             border: border,
             name: itemHighlight,
             target: targetEle.id,
@@ -174,10 +165,6 @@ var Highlight = /** @class */ (function () {
             data: data,
             maps: this.maps
         };
-        if (this.maps.isBlazor) {
-            var shapeData_1 = eventArgs.shapeData, maps = eventArgs.maps, blazorEventArgs = __rest(eventArgs, ["shapeData", "maps"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger(itemHighlight, eventArgs, function () {
             eventArgs.border.opacity = isNullOrUndefined(_this.highlightSettings.border.opacity) ? _this.highlightSettings.opacity : _this.highlightSettings.border.opacity;
             _this.highlightMap(targetEle, eventArgs);

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

@@ -1,12 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 import { click, itemSelection } from '../index';
 import { getElement, createStyle, customizeStyle, removeClass, getTargetElement, getElementByID } from '../utils/helper';
 import { isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
@@ -131,18 +122,19 @@ var Selection = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Selection.prototype.selectMap = function (targetElement, shapeData, data) {
         var _this = this;
+        var layerIndex = parseInt(targetElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
         var parentElement;
         var children;
         var selectionClass;
         var selectionsettings = this.selectionsettings;
         var border = {
-            color: this.selectionsettings.border.color,
-            width: this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale),
+            color: (targetElement.parentElement.id.indexOf('LineString') === -1) ? this.selectionsettings.border.color : (this.selectionsettings.border.color || this.selectionsettings.fill),
+            width: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionsettings.border.width / (this.selectionType === 'Marker' ? 1 : this.maps.scale)) : (this.selectionsettings.border.width / this.maps.scale),
             opacity: this.selectionsettings.border.opacity
         };
         var eventArgs = {
             opacity: this.selectionsettings.opacity,
-            fill: this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none',
+            fill: (targetElement.parentElement.id.indexOf('LineString') === -1) ? (this.selectionType !== 'navigationline' ? this.selectionsettings.fill : 'none') : 'transparent',
             border: border,
             name: itemSelection,
             target: targetElement.id,
@@ -151,10 +143,6 @@ var Selection = /** @class */ (function () {
             data: data,
             maps: this.maps
         };
-        if (this.maps.isBlazor) {
-            var shapeData_1 = eventArgs.shapeData, maps = eventArgs.maps, blazorEventArgs = __rest(eventArgs, ["shapeData", "maps"]);
-            eventArgs = blazorEventArgs;
-        }
         this.maps.trigger('itemSelection', eventArgs, function (observedArgs) {
             eventArgs.border.opacity = isNullOrUndefined(_this.selectionsettings.border.opacity) ? _this.selectionsettings.opacity : _this.selectionsettings.border.opacity;
             if (!eventArgs.cancel) {
@@ -169,9 +157,9 @@ var Selection = /** @class */ (function () {
                     }
                     if (targetElement.id.indexOf('NavigationIndex') > -1) {
                         var index = parseInt(targetElement.id.split('_NavigationIndex_')[1].split('_')[0], 10);
-                        var layerIndex = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
-                        targetElement.setAttribute('stroke-width', _this.maps.layers[layerIndex].navigationLineSettings[index].width.toString());
-                        targetElement.setAttribute('stroke', _this.maps.layers[layerIndex].navigationLineSettings[index].color);
+                        var layerIndex_1 = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+                        targetElement.setAttribute('stroke-width', _this.maps.layers[layerIndex_1].navigationLineSettings[index].width.toString());
+                        targetElement.setAttribute('stroke', _this.maps.layers[layerIndex_1].navigationLineSettings[index].color);
                     }
                 }
                 else {
@@ -197,9 +185,9 @@ var Selection = /** @class */ (function () {
                         }
                         if (ele.id.indexOf('NavigationIndex') > -1) {
                             var index = parseInt(targetElement.id.split('_NavigationIndex_')[1].split('_')[0], 10);
-                            var layerIndex = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
-                            ele.setAttribute('stroke-width', _this.maps.layers[layerIndex].navigationLineSettings[index].width.toString());
-                            ele.setAttribute('stroke', _this.maps.layers[layerIndex].navigationLineSettings[index].color);
+                            var layerIndex_2 = parseInt(targetElement.parentElement.id.split('_LayerIndex_')[1].split('_')[0], 10);
+                            ele.setAttribute('stroke-width', _this.maps.layers[layerIndex_2].navigationLineSettings[index].width.toString());
+                            ele.setAttribute('stroke', _this.maps.layers[layerIndex_2].navigationLineSettings[index].color);
                         }
                     }
                     if (!getElement(_this.selectionType + 'selectionMap')) {

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

@@ -54,8 +54,6 @@ var MapsTooltip = /** @class */ (function () {
         if (istooltipRender) {
             if (targetId.indexOf('_shapeIndex_') > -1) {
                 option = layer.tooltipSettings;
-                option.textStyle.fontFamily = this.maps.themeStyle.fontFamily || option.textStyle.fontFamily;
-                option.textStyle.opacity = this.maps.themeStyle.tooltipTextOpacity || option.textStyle.opacity;
                 var shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);
                 if (isNullOrUndefined(layer.layerData) || isNullOrUndefined(layer.layerData[shape])) {
                     return;
@@ -172,9 +170,13 @@ var MapsTooltip = /** @class */ (function () {
                 option.template = option.template[Object.keys(option.template)[0]];
             }
             templateData = this.setTooltipContent(option, templateData);
+            var tooltipTextStyle = {
+                color: option.textStyle.color, fontFamily: option.textStyle.fontFamily, fontStyle: option.textStyle.fontStyle,
+                fontWeight: option.textStyle.fontWeight, opacity: option.textStyle.opacity, size: option.textStyle.size
+            };
             var tooltipOption = {
                 location: location, text: tooltipContent, data: templateData,
-                textStyle: option.textStyle,
+                textStyle: tooltipTextStyle,
                 template: option.template
             };
             tooltipArgs = {
@@ -184,132 +186,66 @@ var MapsTooltip = /** @class */ (function () {
                 maps: this.maps,
                 element: target, eventArgs: e
             };
-            if (this.maps.isBlazor) {
-                var tootipOption_1 = {
-                    location: location
-                };
-                var blazorArgs_1 = {
-                    name: tooltipRender,
-                    cancel: false,
-                    options: tootipOption_1,
-                    data: templateData,
-                    textStyle: tooltipArgs.options['textStyle'],
-                    fill: tooltipArgs.fill,
-                    element: target, eventArgs: e
-                };
-                this.maps.trigger(tooltipRender, blazorArgs_1, function (args) {
-                    if (!blazorArgs_1.cancel && option.visible && !isNullOrUndefined(currentData) &&
-                        (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
-                        var blazTooltipName = void 0;
-                        if (targetId.indexOf('MarkerIndex') > 0) {
-                            blazTooltipName = 'MarkerTooltipTemplate';
-                        }
-                        else if (targetId.indexOf('BubbleIndex') > 0) {
-                            blazTooltipName = 'BubbleTooltipTemplate';
-                        }
-                        else {
-                            blazTooltipName = 'LayerTooltipTemplate';
-                        }
-                        _this.maps['isProtectedOnChange'] = true;
-                        if (blazorArgs_1.cancel) {
-                            _this.svgTooltip = new Tooltip({
-                                enable: true,
-                                header: '',
-                                content: [currentData.toString()],
-                                shapes: [],
-                                location: tootipOption_1.location,
-                                palette: [markerFill],
-                                areaBounds: _this.maps.mapAreaRect,
-                                textStyle: tooltipArgs.options['textStyle'],
-                                availableSize: _this.maps.availableSize,
-                                fill: tooltipArgs.fill
-                            });
-                        }
-                        else {
-                            _this.svgTooltip = new Tooltip({
-                                enable: true,
-                                header: '',
-                                content: [currentData.toString()],
-                                shapes: [],
-                                location: tootipOption_1.location,
-                                palette: [markerFill],
-                                areaBounds: _this.maps.mapAreaRect,
-                                textStyle: blazorArgs_1.textStyle,
-                                availableSize: _this.maps.availableSize,
-                                fill: blazorArgs_1.fill
-                            });
-                        }
-                        var tooltipElement = tooltipEle;
-                        _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
-                        _this.svgTooltip.appendTo(tooltipElement);
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _this.maps.renderReactTemplates();
+            this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
+                if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
+                    (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
+                    _this.maps['isProtectedOnChange'] = true;
+                    tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
+                        || _this.maps.themeStyle.tooltipFontColor;
+                    tooltipArgs.options['textStyle']['fontFamily'] = tooltipArgs.options['textStyle']['fontFamily']
+                        || _this.maps.themeStyle.fontFamily;
+                    tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
+                        || _this.maps.themeStyle.tooltipTextOpacity;
+                    if (tooltipArgs.cancel) {
+                        _this.svgTooltip = new Tooltip({
+                            enable: true,
+                            header: '',
+                            data: option['data'],
+                            template: option['template'],
+                            content: [currentData.toString()],
+                            shapes: [],
+                            location: option['location'],
+                            palette: [markerFill],
+                            areaBounds: _this.maps.mapAreaRect,
+                            textStyle: option['textStyle'],
+                            availableSize: _this.maps.availableSize,
+                            fill: option.fill || _this.maps.themeStyle.tooltipFillColor
+                        });
                     }
                     else {
-                        _this.removeTooltip();
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _this.maps.clearTemplate();
+                        _this.svgTooltip = new Tooltip({
+                            enable: true,
+                            header: '',
+                            data: tooltipArgs.options['data'],
+                            template: tooltipArgs.options['template'],
+                            content: [currentData.toString()],
+                            shapes: [],
+                            location: tooltipArgs.options['location'],
+                            palette: [markerFill],
+                            areaBounds: _this.maps.mapAreaRect,
+                            textStyle: tooltipArgs.options['textStyle'],
+                            availableSize: _this.maps.availableSize,
+                            fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor
+                        });
                     }
-                });
-            }
-            else {
-                this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
-                    if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
-                        (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
-                        _this.maps['isProtectedOnChange'] = true;
-                        tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
-                            || _this.maps.themeStyle.tooltipFontColor;
-                        if (tooltipArgs.cancel) {
-                            _this.svgTooltip = new Tooltip({
-                                enable: true,
-                                header: '',
-                                data: option['data'],
-                                template: option['template'],
-                                content: [currentData.toString()],
-                                shapes: [],
-                                location: option['location'],
-                                palette: [markerFill],
-                                areaBounds: _this.maps.mapAreaRect,
-                                textStyle: option['textStyle'],
-                                availableSize: _this.maps.availableSize,
-                                fill: option.fill || _this.maps.themeStyle.tooltipFillColor
-                            });
-                        }
-                        else {
-                            _this.svgTooltip = new Tooltip({
-                                enable: true,
-                                header: '',
-                                data: tooltipArgs.options['data'],
-                                template: tooltipArgs.options['template'],
-                                content: [currentData.toString()],
-                                shapes: [],
-                                location: tooltipArgs.options['location'],
-                                palette: [markerFill],
-                                areaBounds: _this.maps.mapAreaRect,
-                                textStyle: tooltipArgs.options['textStyle'],
-                                availableSize: _this.maps.availableSize,
-                                fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor
-                            });
-                        }
-                        _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
-                        _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.setAttribute('style', templateStyle);
-                        }
-                    }
-                    else {
-                        _this.removeTooltip();
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _this.maps.clearTemplate();
+                    _this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
+                    _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.setAttribute('style', templateStyle);
                     }
-                });
-            }
+                }
+                else {
+                    _this.removeTooltip();
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    _this.maps.clearTemplate();
+                }
+            });
             if (this.svgTooltip) {
                 this.maps.trigger('tooltipRenderComplete', {
                     cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption,

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

@@ -102,6 +102,7 @@ export declare class Zoom {
     processTemplate(x: number, y: number, scale: number, maps: Maps): void;
     private dataLabelTranslate;
     private markerTranslate;
+    private markerLineAnimation;
     panning(direction: PanDirection, xDifference: number, yDifference: number, mouseLocation?: PointerEvent | TouchEvent): void;
     private toAlignSublayer;
     toolBarZooming(zoomFactor: number, type: string): void;