@syncfusion/ej2-maps 19.3.46 → 19.4.47

package/src/maps/layers/marker.js

@@ -48,15 +48,9 @@ var Marker = /** @class */ (function () {
                     border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
                     shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
                 };
-                eventArgs = markerColorChoose(eventArgs, data);
-                eventArgs = markerShapeChoose(eventArgs, data);
                 _this.maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
-                    if (markerSettings.colorValuePath !== eventArgs.colorValuePath) {
-                        eventArgs = markerColorChoose(eventArgs, data);
-                    }
-                    if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
-                        eventArgs = markerShapeChoose(eventArgs, data);
-                    }
+                    eventArgs = markerColorChoose(eventArgs, data);
+                    eventArgs = markerShapeChoose(eventArgs, data);
                     var lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
                         parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : 0;

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

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Ajax } from '@syncfusion/ej2-base';import { EventHandler, Browser, EmitType, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';import { ModuleDeclaration } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition } from './utils/helper';import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle } from './utils/helper';import { createStyle } from './utils/helper';import { ZoomSettings, LegendSettings, Tile } from './model/base';import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';import { ZoomSettingsModel, LegendSettingsModel, LayerSettingsModel, BubbleSettingsModel } from './model/base-model';import { MarkerSettingsModel, SelectionSettingsModel , InitialMarkerSelectionSettingsModel} from './model/base-model';import { TitleSettingsModel, BorderModel, MarginModel, CenterPositionModel, InitialShapeSelectionSettingsModel } from './model/base-model';import { MapsAreaSettingsModel, AnnotationModel } from './model/base-model';import { Bubble } from './layers/bubble';import { Legend } from './layers/legend';import { Marker } from './layers/marker';import { Highlight } from './user-interaction/highlight';import { Selection } from './user-interaction/selection';import { MapsTooltip } from './user-interaction/tooltip';import { Zoom } from './user-interaction/zoom';import { load, click, rightClick, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle } from './model/theme';import { BingMap } from './layers/bing-map';import { ILoadEventArgs, ILoadedEventArgs, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';import { IMarkerClusterClickEventArgs, IMarkerClusterMoveEventArgs, IMarkerClusterRenderingEventArgs } from './model/interface';import { ISelectionEventArgs, IShapeSelectedEventArgs, IMapPanEventArgs, IMapZoomEventArgs } from './model/interface';import { IBubbleRenderingEventArgs, IAnimationCompleteEventArgs, IPrintEventArgs, IThemeStyle } from './model/interface';import { LayerPanel } from './layers/layer-panel';import { GeoLocation, Rect, RectOption, measureText, getElementByID, MapAjax, processResult } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, convertGeoToPoint, calculateZoomLevel } from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { DataManager, Query } from '@syncfusion/ej2-data';import { ExportType } from '../maps/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Print } from './model/print';import { PdfExport } from './model/export-pdf';import { ImageExport } from './model/export-image';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Ajax } from '@syncfusion/ej2-base';import { EventHandler, Browser, EmitType, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';import { ModuleDeclaration } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle } from './utils/helper';import { createStyle } from './utils/helper';import { ZoomSettings, LegendSettings, Tile } from './model/base';import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';import { ZoomSettingsModel, LegendSettingsModel, LayerSettingsModel, BubbleSettingsModel } from './model/base-model';import { MarkerSettingsModel, SelectionSettingsModel , InitialMarkerSelectionSettingsModel} from './model/base-model';import { TitleSettingsModel, BorderModel, MarginModel, CenterPositionModel, InitialShapeSelectionSettingsModel } from './model/base-model';import { MapsAreaSettingsModel, AnnotationModel } from './model/base-model';import { Bubble } from './layers/bubble';import { Legend } from './layers/legend';import { Marker } from './layers/marker';import { Highlight } from './user-interaction/highlight';import { Selection } from './user-interaction/selection';import { MapsTooltip } from './user-interaction/tooltip';import { Zoom } from './user-interaction/zoom';import { load, click, rightClick, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle } from './model/theme';import { BingMap } from './layers/bing-map';import { ILoadEventArgs, ILoadedEventArgs, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';import { IMarkerClusterClickEventArgs, IMarkerClusterMoveEventArgs, IMarkerClusterRenderingEventArgs } from './model/interface';import { ISelectionEventArgs, IShapeSelectedEventArgs, IMapPanEventArgs, IMapZoomEventArgs } from './model/interface';import { IBubbleRenderingEventArgs, IAnimationCompleteEventArgs, IPrintEventArgs, IThemeStyle } from './model/interface';import { LayerPanel } from './layers/layer-panel';import { GeoLocation, Rect, RectOption, measureText, getElementByID, MapAjax, processResult } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, convertGeoToPoint, calculateZoomLevel } from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { DataManager, Query } from '@syncfusion/ej2-data';import { ExportType } from '../maps/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Print } from './model/print';import { PdfExport } from './model/export-pdf';import { ImageExport } from './model/export-image';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

package/src/maps/maps.d.ts

@@ -986,6 +986,11 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * To find navigation line visibility
      */
     private isNavigationVisible;
+    /**
+     * To find space between the secondary element and svg element.
+     * @private
+     */
+    getExtraPosition(): Point;
     /**
      * To find marker visibility
      */

package/src/maps/maps.js

@@ -29,7 +29,7 @@ import { Component, NotifyPropertyChanges, Property, Ajax } from '@syncfusion/ej
 import { EventHandler, Browser, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';
 import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';
 import { SvgRenderer } from '@syncfusion/ej2-svg-base';
-import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, getMousePosition } from './utils/helper';
+import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, getMousePosition, calculateSize } from './utils/helper';
 import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle } from './utils/helper';
 import { createStyle } from './utils/helper';
 import { ZoomSettings, LegendSettings } from './model/base';
@@ -395,7 +395,15 @@ var Maps = /** @class */ (function (_super) {
         }
         this.mapLayerPanel.measureLayerPanel();
         this.element.appendChild(this.svgObject);
+        var position = this.getExtraPosition();
         for (var i = 0; i < this.layers.length; i++) {
+            if (position.x !== 0 || position.y !== 0) {
+                var markerTemplate = document.getElementById(this.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                if (!isNullOrUndefined(markerTemplate)) {
+                    markerTemplate.style.top = this.mapAreaRect.y + position.y + 'px';
+                    markerTemplate.style.left = this.mapAreaRect.x + position.x + 'px';
+                }
+            }
             if (this.layers[i].selectionSettings && this.layers[i].selectionSettings.enable &&
                 this.layers[i].initialShapeSelection.length > 0 && this.checkInitialRender) {
                 var checkSelection = this.layers[i].selectionSettings.enableMultiSelect;
@@ -1233,26 +1241,28 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.mapsOnResize = function (e) {
         var _this = this;
-        this.isResize = true;
+        this.isResize = this.isReset = true;
         var args = {
+            cancel: false,
             name: resize,
             previousSize: this.availableSize,
-            currentSize: new Size(0, 0),
+            currentSize: calculateSize(this),
             maps: this
         };
-        if (this.resizeTo) {
-            clearTimeout(this.resizeTo);
-        }
-        if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
-            this.resizeTo = setTimeout(function () {
-                _this.unWireEVents();
-                _this.createSVG();
-                _this.refreshing = true;
-                _this.wireEVents();
-                args.currentSize = _this.availableSize;
-                _this.trigger(resize, args);
-                _this.render();
-            }, 500);
+        this.trigger(resize, args);
+        if (!args.cancel) {
+            if (this.resizeTo) {
+                clearTimeout(this.resizeTo);
+            }
+            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
+                this.resizeTo = setTimeout(function () {
+                    _this.unWireEVents();
+                    _this.createSVG();
+                    _this.refreshing = true;
+                    _this.wireEVents();
+                    _this.render();
+                }, 500);
+            }
         }
         return false;
     };
@@ -1840,6 +1850,22 @@ var Maps = /** @class */ (function (_super) {
         });
         return isVisible;
     };
+    /**
+     * To find space between the secondary element and svg element.
+     * @private
+     */
+    Maps.prototype.getExtraPosition = function () {
+        var top;
+        var left;
+        var svgElement = getElement(this.element.id + '_svg');
+        if (!isNullOrUndefined(svgElement)) {
+            var svgClientRect = svgElement.getClientRects()[0];
+            var mapsClientRect = (getElement(this.element.id + '_Secondary_Element')).getClientRects()[0];
+            top = svgClientRect.top - mapsClientRect.top;
+            left = svgClientRect.left - mapsClientRect.left;
+        }
+        return new Point(left, top);
+    };
     /**
      * To find marker visibility
      */

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

@@ -975,6 +975,13 @@ export interface ToggleLegendSettingsModel {
  */
 export interface LegendSettingsModel {
 
+    /**
+     * Enables or disables to render the legend item based on the shapes from the data source of markers.
+     *
+     * @default false
+     */
+    useMarkerShape?: boolean;
+
     /**
      * Enables or disables the toggle visibility for legend in maps.
      *

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

@@ -845,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.
      *

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/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 = {
@@ -183,6 +183,14 @@ export function getShapeColor(theme) {
             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'];
@@ -328,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'
@@ -345,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',
@@ -466,6 +476,52 @@ export function getThemeStyle(theme) {
                 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',
@@ -479,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/highlight.js

@@ -149,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,

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

@@ -122,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,
@@ -156,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 {
@@ -184,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 = {
@@ -190,6 +192,10 @@ var MapsTooltip = /** @class */ (function () {
                     _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,

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;