@syncfusion/ej2-maps - npm Package Compare versions

Comparing version 21.2.10 to 22.1.34

.eslintrc.json

@@ -40,2 +40,3 @@ {
         "security/detect-new-buffer":"error",
+        "security/detect-bidi-characters":"error",
         "@typescript-eslint/no-inferrable-types": "off",
@@ -42,0 +43,0 @@ "@typescript-eslint/ban-types": ["warn", {

CHANGELOG.md

@@ -13,43 +13,2 @@ <!-- markdownlint-disable MD010 -->
 
-#### Bug fixes
-
-- `#I467601` - When the zoom factor is set to its initial value, the position of the marker template will now be correct when the zoom-out button is clicked.
-- `#I467777` - Tile images of the online maps will no longer be selected.
-
-## 21.2.5 (2023-05-16)
-
-### Maps
-
-#### Bug fixes
-
-- `#I457059` - Marker template will now be properly clustered in the Maps component.
-
-## 21.2.4 (2023-05-09)
-
-### Maps
-
-#### Bug fixes
-
-- `#F181587` - The click event will now be properly triggered in the button element in the tooltip template.
-
-## 21.1.41 (2023-04-18)
-
-### Maps
-
-#### Bug fixes
-
-- `#I441762` - The position of the data labels will now be proper when the `geometryType` is set as **Normal**.
-
-## 21.1.38 (2023-04-04)
-
-### Maps
-
-#### Bug Fixes
-
-- `#I425592` - The marker rendered in the custom map can now be dragged and dropped in the desired location based on the requirement.
-
-## 21.1.35 (2023-03-23)
-
-### Maps
-
 #### New Features
@@ -540,2 +499,2 @@
 - **Annotations** - Supports placing any HTML element on desired location in the map.
-- **User interaction** - Supports interactive features like zooming, panning, tooltip, highlight, selection and interactive legend.
+- **User interaction** - Supports interactive features like zooming, panning, tooltip, highlight, selection and interactive legend.

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 21.2.10
+*  version : 22.1.34
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "_from": "@syncfusion/ej2-maps@*",
-  "_id": "@syncfusion/ej2-maps@21.2.5",
+  "_id": "@syncfusion/ej2-maps@16.41.37",
   "_inBundle": false,
-  "_integrity": "sha512-Y9gEOgvl0qWaIIlYpBQp7w9xQI5d3bhqHv56MQU/W0kvmmL5uc6/9K7+KgOIVpr2OpQ63e67o3vSvSjIITHECA==",
+  "_integrity": "sha512-ehyxI+rCAsJUHDgK7+kGHLJMclAYfs4lCX3KpwSylUkvJGxS3hcFCjc6mdYvAZk9Mw1KkRczvUIWg9IfnsYXuA==",
   "_location": "/@syncfusion/ej2-maps",
@@ -26,4 +26,4 @@ "_phantomChildren": {},
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-21.2.5.tgz",
-  "_shasum": "2ffb4ec8a22e88bf01bc6aeb6f96e8d420a169ba",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-maps/-/ej2-maps-16.41.37.tgz",
+  "_shasum": "bebfe5cb6c48a1db118127f667bad801ee1dfd23",
   "_spec": "@syncfusion/ej2-maps@*",
@@ -39,9 +39,9 @@ "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.9",
-    "@syncfusion/ej2-buttons": "~21.2.10",
-    "@syncfusion/ej2-compression": "~21.2.3",
-    "@syncfusion/ej2-data": "~21.2.9",
-    "@syncfusion/ej2-file-utils": "~21.2.3",
-    "@syncfusion/ej2-pdf-export": "~21.2.10",
-    "@syncfusion/ej2-svg-base": "~21.2.3"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-buttons": "~22.1.34",
+    "@syncfusion/ej2-compression": "~22.1.34",
+    "@syncfusion/ej2-data": "~22.1.34",
+    "@syncfusion/ej2-file-utils": "~22.1.34",
+    "@syncfusion/ej2-pdf-export": "~22.1.34",
+    "@syncfusion/ej2-svg-base": "~22.1.34"
   },
@@ -98,4 +98,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "21.2.10",
+  "version": "22.1.34",
   "sideEffects": false
 }

src/maps/layers/data-label.js

 import { findMidPointOfPolygon, Rect, filter, getTemplateFunction, getZoomTranslate, getTranslate, RectOption, convertElementFromLabel, Point, TextOption, renderTextElement, textTrim, measureText, Internalize } from '../utils/helper';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import { dataLabelRendering } from '../model/constants';
+import { Theme } from '../model/theme';
 /**
@@ -83,2 +84,3 @@ * DataLabel Module used to render the maps datalabel
         style.fontFamily = this.maps.theme.toLowerCase() !== 'material' ? this.maps.themeStyle.labelFontFamily : style.fontFamily;
+        style.fontWeight = style.fontWeight || this.maps.themeStyle.fontWeight || Theme.dataLabelFont.fontWeight;
         shape = shapes['property'];
@@ -85,0 +87,0 @@ var properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?

src/maps/maps-model.d.ts

@@ -1,2 +0,2 @@
-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, querySelector } from './utils/helper';import { createStyle } from './utils/helper';import { ZoomSettings, LegendSettings } 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, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';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, getElementsByClassName } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel, convertTileLatLongToPoint, convertGeoToPoint} from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs, IMarkerDragEventArgs } 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, Fetch } 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, querySelector } from './utils/helper';import { createStyle } from './utils/helper';import { ZoomSettings, LegendSettings } 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, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';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, getElementsByClassName } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel, convertTileLatLongToPoint, convertGeoToPoint} from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs, IMarkerDragEventArgs } 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';
@@ -3,0 +3,0 @@

src/maps/maps.d.ts

@@ -526,2 +526,6 @@ /**
      * @private
+     */
+    isExportInitialTileMap: boolean;
+    /**
+     * @private
      * @hidden
@@ -528,0 +532,0 @@ */

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

@@ -12,4 +12,5 @@ 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';
      * @default ''
+     * @aspType string
      */
-    content?: string;
+    content?: string | Function;
 
@@ -429,4 +430,5 @@ /**
      * @default ''
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
@@ -1534,4 +1536,5 @@ /**
      * @default ''
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
@@ -1733,4 +1736,5 @@ }
      * @default null
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
@@ -1737,0 +1741,0 @@ /**

src/maps/model/base.d.ts

@@ -24,4 +24,5 @@ /**
      * @default ''
+     * @aspType string
      */
-    content: string;
+    content: string | Function;
     /**
@@ -371,4 +372,5 @@ * Gets or sets the x position of the annotation in pixel or percentage format.
      * @default ''
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
@@ -1332,4 +1334,5 @@ * Gets or sets the color of the tooltip in layers, markers, and bubbles of maps.
      * @default ''
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
 }
@@ -1499,4 +1502,5 @@ /**
      * @default null
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
@@ -1503,0 +1507,0 @@ * Gets or sets the data source for the marker.

src/maps/model/base.js

@@ -295,3 +295,3 @@ var __extends = (this && this.__extends) || (function () {
     __decorate([
-        Complex(Theme.tooltipLabelFont, Font)
+        Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
     ], TooltipSettings.prototype, "textStyle", void 0);
@@ -827,3 +827,3 @@ __decorate([
     __decorate([
-        Complex({ fontFamily: null }, Font)
+        Complex({ fontFamily: null, fontWeight: null }, Font)
     ], LegendSettings.prototype, "textStyle", void 0);
@@ -849,3 +849,3 @@ __decorate([
     __decorate([
-        Complex({ size: Theme.legendTitleFont.size, color: Theme.legendTitleFont.color, fontStyle: Theme.legendTitleFont.fontStyle, fontWeight: Theme.legendTitleFont.fontWeight, fontFamily: null }, Font)
+        Complex({ size: null, color: Theme.legendTitleFont.color, fontStyle: Theme.legendTitleFont.fontStyle, fontWeight: null, fontFamily: null }, Font)
     ], LegendSettings.prototype, "titleStyle", void 0);
@@ -915,3 +915,3 @@ __decorate([
     __decorate([
-        Complex({}, Font)
+        Complex({ fontWeight: null }, Font)
     ], DataLabelSettings.prototype, "textStyle", void 0);
@@ -918,0 +918,0 @@ __decorate([

src/maps/model/export-image.js

@@ -42,5 +42,13 @@ import { createElement, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
             var svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
+            var backgroundElement = svgObject.childNodes[0];
+            var backgroundColor = backgroundElement.getAttribute('fill');
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                svgObject.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
+            }
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                svgObject.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
+            }
             if (!maps.isTileMap) {
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
-                    maps.svgObject.outerHTML + '</svg>';
+                    svgObject.outerHTML + '</svg>';
             }
@@ -84,2 +92,3 @@ else {
                 else {
+                    maps.isExportInitialTileMap = true;
                     var svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
@@ -94,3 +103,5 @@ var top_1 = parseFloat(svgParentElement.getAttribute('y'));
                         exportTileImg.crossOrigin = 'Anonymous';
-                        ctxt_1.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                        var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
+                            (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
+                        ctxt_1.fillStyle = background;
                         ctxt_1.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
@@ -125,4 +136,6 @@ ctxt_1.font = maps.titleSettings.textStyle.size + ' Arial';
                                     localStorage.removeItem('local-canvasImage');
+                                    maps.isExportInitialTileMap = false;
                                 }
                                 else {
+                                    maps.isExportInitialTileMap = false;
                                     if (type === 'PNG') {
@@ -129,0 +142,0 @@ resolve(localBase64);

src/maps/model/export-pdf.js

@@ -30,2 +30,5 @@ import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
         var promise = new Promise(function (resolve, reject) {
+            if (maps.isTileMap) {
+                maps.isExportInitialTileMap = true;
+            }
             var canvasElement = createElement('canvas', {
@@ -44,6 +47,8 @@ id: 'ej2-canvas',
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((maps.theme === 'Tailwind' || maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5' || maps.theme === 'Bootstrap5Dark'
-                || maps.theme === 'Fluent' || maps.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
+            }
             var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
@@ -84,3 +89,5 @@ [(new XMLSerializer()).serializeToString(exportElement)], { type: 'image/svg+xml' }));
                     tileImg.crossOrigin = 'Anonymous';
-                    ctx.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                    var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
+                        (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
+                    ctx.fillStyle = background;
                     ctx.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
@@ -115,2 +122,3 @@ ctx.font = maps.titleSettings.textStyle.size + ' Arial';
                                 pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(x), 0, 0, (maps.availableSize.width - 60), maps.availableSize.height);
+                                maps.isExportInitialTileMap = false;
                                 if (allowDownload) {
@@ -117,0 +125,0 @@ pdfDocument.save(fileName + '.pdf');

src/maps/model/interface.d.ts

@@ -142,3 +142,3 @@ /**
     textStyle?: TextStyleModel;
-    template?: string;
+    template?: string | Function;
 }
@@ -363,4 +363,6 @@ /**
      * Defines the template of the marker.
+     *
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
     /**
@@ -555,4 +557,6 @@ * Defines the settings of the border for the marker.
      * Defines the template for the data-label.
+     *
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
@@ -682,4 +686,6 @@ * Defines the instance of the data-label.
      * Defines the content of the annotation which is being rendered.
+     *
+     * @aspType string
      */
-    content?: string;
+    content?: string | Function;
     /**
@@ -783,4 +789,10 @@ * Specifies the annotation instance.
     fontFamily?: string;
+    /** Specifies the font-family for the maps. */
+    fontSize?: string;
     /** Specifies the font size for the title in maps. */
     titleFontSize?: string;
+    /** Specifies the font size for the sub title and legend title in maps. */
+    subTitleFontSize?: string;
+    /** Specifies the font weight for the sub title and legend title in maps. */
+    fontWeight?: string;
     /** Specifies the opacity for the tooltip in maps. */
@@ -800,2 +812,8 @@ tooltipFillOpacity?: number;
     shapeFill?: string;
+    /** Specifies the color by using rectangle zoom fill color in maps. */
+    rectangleZoomFillColor?: string;
+    /** Specifies the color by using rectangle zoom fill color in maps. */
+    rectangleZoomFillOpacity?: number;
+    /** Specifies the color by using rectangle zoom fill color in maps. */
+    rectangleZoomBorderColor?: string;
 }
@@ -802,0 +820,0 @@ /**

src/maps/model/print.js

@@ -1,2 +0,2 @@
-import { print as printFunction, createElement } from '@syncfusion/ej2-base';
+import { print as printFunction, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getElement } from '../utils/helper';
@@ -50,2 +50,15 @@ import { beforePrint } from '../model/constants';
         var divElement = maps.element.cloneNode(true);
+        var backgroundElement = (!maps.isTileMap ? divElement.getElementsByTagName('svg')[0] : divElement.getElementsByTagName('svg')[1]);
+        if (!isNullOrUndefined(backgroundElement)) {
+            backgroundElement = backgroundElement.childNodes[0];
+            if (!isNullOrUndefined(backgroundElement)) {
+                var backgroundColor = backgroundElement.getAttribute('fill');
+                if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
+                }
+                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
+                }
+            }
+        }
         if (maps.isTileMap) {
@@ -52,0 +65,0 @@ for (var i = 0; i < divElement.childElementCount; i++) {

src/maps/model/theme.js

@@ -194,2 +194,10 @@ /**
             break;
+        case 'material3':
+            themePalette = ['#6200EE', '#E77A16', '#82C100', '#7107DC', '#05BB3D',
+                '#D21020', '#FAD200', '#0085FF', '#9204EA', '#08EE9B'];
+            break;
+        case 'material3dark':
+            themePalette = ['#4EAAFF', '#FA4EAB', '#FFF500', '#17EA58', '#38FFE7',
+                '#FF9E45', '#B3F32F', '#B93CE4', '#FC5664', '#9B55FF'];
+            break;
         default:
@@ -343,5 +351,10 @@ themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 fontFamily: 'Roboto, Noto, Sans-serif',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
@@ -363,6 +376,11 @@ break;
                 fontFamily: 'Roboto, Noto, Sans-serif',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
@@ -383,2 +401,4 @@ break;
                 fontFamily: 'HelveticaNeue-Medium',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '16px',
@@ -391,3 +411,6 @@ legendFontSize: '14px',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
@@ -408,2 +431,4 @@ break;
                 fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
@@ -416,3 +441,6 @@ legendFontSize: '12px',
                 zoomSelectionColor: '#374151',
-                shapeFill: '#E5E7EB'
+                shapeFill: '#E5E7EB',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
@@ -433,2 +461,4 @@ break;
                 fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
@@ -441,3 +471,6 @@ legendFontSize: '12px',
                 zoomSelectionColor: '#F3F4F6',
-                shapeFill: '#374151'
+                shapeFill: '#374151',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
@@ -458,2 +491,4 @@ break;
                 fontFamily: 'Helvetica Neue',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
@@ -466,3 +501,6 @@ legendFontSize: '12px',
                 zoomSelectionColor: '#343A40',
-                shapeFill: '#E9ECEF'
+                shapeFill: '#E9ECEF',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
@@ -483,2 +521,4 @@ break;
                 fontFamily: 'Helvetica Neue',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
@@ -491,3 +531,6 @@ legendFontSize: '12px',
                 zoomSelectionColor: '#DEE2E6',
-                shapeFill: '#495057'
+                shapeFill: '#495057',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
@@ -508,2 +551,4 @@ break;
                 fontFamily: 'Segoe UI',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
@@ -516,3 +561,6 @@ legendFontSize: '12px',
                 zoomSelectionColor: '#323130',
-                shapeFill: '#F3F2F1'
+                shapeFill: '#F3F2F1',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
@@ -533,2 +581,4 @@ break;
                 fontFamily: 'Segoe UI',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
@@ -541,5 +591,66 @@ legendFontSize: '12px',
                 zoomSelectionColor: '#F3F2F1',
-                shapeFill: '#252423'
+                shapeFill: '#252423',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
+        case 'material3':
+            style = {
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#1C1B1F',
+                subTitleFontColor: '#1C1B1F',
+                legendTitleFontColor: '#1C1B1F',
+                legendTextColor: '#49454E',
+                dataLabelFontColor: '#1C1B1F',
+                tooltipFontColor: '#F4EFF4',
+                tooltipFillColor: '#313033',
+                zoomFillColor: '#49454E',
+                fontFamily: 'Roboto',
+                fontSize: '14px',
+                titleFontSize: '16px',
+                subTitleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Roboto',
+                titleFontWeight: '500',
+                fontWeight: '400',
+                zoomSelectionColor: '#49454E',
+                shapeFill: '#E7E0EC',
+                rectangleZoomFillColor: '#6750A4',
+                rectangleZoomFillOpacity: 0.24,
+                rectangleZoomBorderColor: "#6750A4"
+            };
+            break;
+        case 'material3dark':
+            style = {
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#E6E1E5',
+                subTitleFontColor: '#E6E1E5',
+                legendTitleFontColor: '#E6E1E5',
+                legendTextColor: '#CAC4D0',
+                dataLabelFontColor: '#E6E1E5',
+                tooltipFontColor: '#313033',
+                tooltipFillColor: '#E6E1E5',
+                zoomFillColor: '#E6E1E5',
+                fontFamily: 'Roboto',
+                fontSize: '14px',
+                titleFontSize: '16px',
+                subTitleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Roboto',
+                titleFontWeight: '500',
+                fontWeight: '400',
+                zoomSelectionColor: '#E6E1E5',
+                shapeFill: '#49454F',
+                rectangleZoomFillColor: '#D0BCFF',
+                rectangleZoomFillOpacity: 0.24,
+                rectangleZoomBorderColor: "#D0BCFF"
+            };
+            break;
         default:
@@ -560,5 +671,10 @@ style = {
                 fontFamily: 'Roboto, Noto, Sans-serif',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
@@ -565,0 +681,0 @@ break;

src/maps/user-interaction/tooltip.js

@@ -130,3 +130,3 @@ import { tooltipRender } from '../index';
                     else {
-                        if (marker.template && !marker.tooltipSettings.valuePath) {
+                        if (typeof marker.template !== 'function' && marker.template && !marker.tooltipSettings.valuePath) {
                             currentData = marker.template.split('>')[1].split('<')[0];
@@ -174,3 +174,3 @@ }
             }
-            if (option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
+            if (typeof option.template !== 'function' && option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
                 option.template = option.template[Object.keys(option.template)[0]];
@@ -200,2 +200,4 @@ }
                     _this.maps['isProtectedOnChange'] = true;
+                    tooltipArgs.options['textStyle']['size'] = tooltipArgs.options['textStyle']['size']
+                        || _this.maps.themeStyle.fontSize;
                     tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
@@ -205,2 +207,4 @@ || _this.maps.themeStyle.tooltipFontColor;
                         || _this.maps.themeStyle.fontFamily;
+                    tooltipArgs.options['textStyle']['fontWeight'] = tooltipArgs.options['textStyle']['fontWeight']
+                        || _this.maps.themeStyle.fontWeight;
                     tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
@@ -207,0 +211,0 @@ || _this.maps.themeStyle.tooltipTextOpacity;

src/maps/utils/enum.d.ts

@@ -47,3 +47,7 @@ /**
 /**  Render a map with Fluent dark theme. */
-'FluentDark';
+'FluentDark' | 
+/** Renders a map with material3 theme. */
+'Material3' | 
+/** Renders a map with material3dark theme. */
+'Material3Dark';
 /**
@@ -50,0 +54,0 @@ * Defines the position of the legend.

src/maps/utils/helper.d.ts

@@ -887,3 +887,3 @@ import { Maps, FontModel, BorderModel, LayerSettings } from '../../index';
  */
-export declare function getTemplateFunction(template: string, maps: Maps): any;
+export declare function getTemplateFunction(template: string | Function, maps: Maps): any;
 /**
@@ -890,0 +890,0 @@ * Function to get element from id.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9854210

increased by1.11%

Lines of code

62991

increased by0.89%

Dependency changes

• + Added@syncfusion/ej2-base@22.1.38(transitive)

• + Added@syncfusion/ej2-buttons@22.1.39(transitive)

• + Added@syncfusion/ej2-compression@22.1.34(transitive)

• + Added@syncfusion/ej2-data@22.1.38(transitive)

• + Added@syncfusion/ej2-file-utils@22.1.34(transitive)

• + Added@syncfusion/ej2-icons@22.1.34(transitive)

• + Added@syncfusion/ej2-pdf-export@22.1.39(transitive)

• + Added@syncfusion/ej2-svg-base@22.1.39(transitive)

• - Removed@syncfusion/ej2-base@21.2.9(transitive)

• - Removed@syncfusion/ej2-buttons@21.2.10(transitive)

• - Removed@syncfusion/ej2-compression@21.2.3(transitive)

• - Removed@syncfusion/ej2-data@21.2.9(transitive)

• - Removed@syncfusion/ej2-file-utils@21.2.3(transitive)

• - Removed@syncfusion/ej2-icons@21.2.3(transitive)

• - Removed@syncfusion/ej2-pdf-export@21.2.10(transitive)

• - Removed@syncfusion/ej2-svg-base@21.2.3(transitive)

• Updated@syncfusion/ej2-base@~22.1.34

• Updated@syncfusion/ej2-buttons@~22.1.34

• Updated@syncfusion/ej2-compression@~22.1.34

• Updated@syncfusion/ej2-data@~22.1.34

• Updated@syncfusion/ej2-file-utils@~22.1.34

• Updated@syncfusion/ej2-pdf-export@~22.1.34

• Updated@syncfusion/ej2-svg-base@~22.1.34