@syncfusion/ej2-maps 21.2.5 → 22.1.34

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.2.5
+*  version : 22.1.34
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-maps@*",
-  "_id": "@syncfusion/ej2-maps@21.2.4",
+  "_id": "@syncfusion/ej2-maps@16.41.37",
   "_inBundle": false,
-  "_integrity": "sha512-chFGr5RHKzsoD0m4uHhhzZ3VXh16ZKdd9/1B2U9+dlFU1fiQhS3X8tb+zlHpX436ajWxRfPdiH7F5y8HqNhBMQ==",
+  "_integrity": "sha512-ehyxI+rCAsJUHDgK7+kGHLJMclAYfs4lCX3KpwSylUkvJGxS3hcFCjc6mdYvAZk9Mw1KkRczvUIWg9IfnsYXuA==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-21.2.4.tgz",
-  "_shasum": "7cf07ae680629ddbb80aec3011aa1c7c7c3439b5",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-maps/-/ej2-maps-16.41.37.tgz",
+  "_shasum": "bebfe5cb6c48a1db118127f667bad801ee1dfd23",
   "_spec": "@syncfusion/ej2-maps@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.3",
-    "@syncfusion/ej2-buttons": "~21.2.5",
-    "@syncfusion/ej2-compression": "~21.2.3",
-    "@syncfusion/ej2-data": "~21.2.4",
-    "@syncfusion/ej2-file-utils": "~21.2.3",
-    "@syncfusion/ej2-pdf-export": "~21.2.3",
-    "@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"
   },
   "deprecated": false,
   "description": "The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options",
@@ -93,6 +93,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "21.2.5",
+  "version": "22.1.34",
   "sideEffects": false
 }

package/src/maps/layers/data-label.js

@@ -1,6 +1,7 @@
 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';
 /**
  * DataLabel Module used to render the maps datalabel
  */
@@ -80,6 +81,7 @@ var DataLabel = /** @class */ (function () {
         var locationX;
         var locationY;
         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'];
         var properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?
             layer.shapePropertyPath : [layer.shapePropertyPath]);

package/src/maps/layers/layer-panel.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-import { isNullOrUndefined, extend, createElement, Ajax } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, extend, createElement, Fetch } from '@syncfusion/ej2-base';
 import { getShapeColor } from '../model/theme';
 import { GeoLocation, isCustomPath, convertGeoToPoint, Point, PathOption, Size, removeElement } from '../utils/helper';
 import { getElementByID, maintainSelection, getValueFromObject } from '../utils/helper';
@@ -18,7 +18,7 @@ var LayerPanel = /** @class */ (function () {
         this.horizontalPan = false;
         this.horizontalPanXCount = 0;
         this.mapObject = map;
-        this.ajaxModule = new Ajax();
+        this.ajaxModule = new Fetch();
         this.ajaxResponse = [];
     }
     LayerPanel.prototype.measureLayerPanel = function () {
@@ -257,14 +257,13 @@ var LayerPanel = /** @class */ (function () {
                         var bing_1 = new BingMap(_this.mapObject);
                         var bingType = layer.bingMapType === 'AerialWithLabel' ? 'AerialWithLabelsOnDemand' : layer.bingMapType;
                         var url = 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/' + bingType;
-                        var ajax = new Ajax({
+                        var ajax = new Fetch({
                             url: url + '?output=json&include=ImageryProviders&urischeme=https&key=' + layer.key
                         });
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         ajax.onSuccess = function (json) {
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            var jsonObject = JSON.parse(json);
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            var resource = jsonObject['resourceSets'][0]['resources'][0];
+                            var resource = json['resourceSets'][0]['resources'][0];
                             var imageUrl = resource['imageUrl'];
                             var subDomains = resource['imageUrlSubdomains'];
                             var maxZoom = resource['zoomMax'];
@@ -1293,6 +1292,7 @@ var LayerPanel = /** @class */ (function () {
                             imgElement.setAttribute('width', '256px');
                             imgElement.setAttribute('src', tile.src);
                             imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
+                            imgElement.style.setProperty('user-select', 'none');
                             child.appendChild(imgElement);
                             animateElement.appendChild(child);
                         }
@@ -1302,6 +1302,7 @@ var LayerPanel = /** @class */ (function () {
                         imgElement.setAttribute('height', '256px');
                         imgElement.setAttribute('width', '256px');
                         imgElement.setAttribute('src', tile.src);
+                        imgElement.style.setProperty('user-select', 'none');
                         imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
                         var child = createElement('div', { id: mapId + '_tile_' + id });
                         child.style.position = 'absolute';

package/src/maps/layers/legend.js

@@ -2,6 +2,7 @@ import { click, legendRendering } from '../index';
 import { Rect, measureText, PathOption, textTrim, drawBalloon, removeClass, querySelector, getTemplateFunction, maintainStyleClass, getValueFromObject } from '../utils/helper';
 import { RectOption, Size, TextOption, Point, renderTextElement, drawSymbol, checkPropertyPath, getElement } from '../utils/helper';
 import { isNullOrUndefined, Browser, EventHandler, remove, extend } from '@syncfusion/ej2-base';
+import { Theme } from '../model/theme';
 /**
  * Legend module is used to render legend for the maps
  */
@@ -497,6 +498,7 @@ var Legend = /** @class */ (function () {
                 legendTextStyle.fontFamily = !isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily :
                     this.maps.themeStyle.fontFamily;
                 legendTextStyle.size = map.themeStyle.legendFontSize || legendTextStyle.size;
+                legendTextStyle.fontWeight = legendTextStyle.fontWeight || map.themeStyle.fontWeight;
                 if (i === 0) {
                     this.renderLegendBorder();
                 }
@@ -1265,6 +1267,8 @@ var Legend = /** @class */ (function () {
         if (legendTitle) {
             textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
             textStyle.fontFamily = !isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily : this.maps.themeStyle.fontFamily;
+            textStyle.size = !isNullOrUndefined(textStyle.size) ? textStyle.size : this.maps.themeStyle.subTitleFontSize || Theme.legendTitleFont.size;
+            textStyle.fontWeight = !isNullOrUndefined(textStyle.fontWeight) ? textStyle.fontWeight : this.maps.themeStyle.titleFontWeight || Theme.legendTitleFont.fontWeight;
             textOptions = new TextOption(map.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - spacing / 2, 'middle', trimTitle, '');
             renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
         }

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, 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';
 
 /**

package/src/maps/maps.d.ts

@@ -521,6 +521,10 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @private
      */
     layersCollection: LayerSettings[];
+    /**
+     * @private
+     */
+    isExportInitialTileMap: boolean;
     /**
      * @private
      * @hidden

package/src/maps/maps.js

@@ -20,7 +20,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * Maps Component file
  */
-import { Component, NotifyPropertyChanges, Property, Ajax } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, Property, Fetch } from '@syncfusion/ej2-base';
 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';
@@ -338,11 +338,11 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.processAjaxRequest = function (layer, localAjax, type) {
         var _this = this;
         this.serverProcess['request']++;
-        var ajaxModule = new Ajax(localAjax.dataOptions, localAjax.type, localAjax.async, localAjax.contentType);
-        ajaxModule.onSuccess = function (args) {
-            _this.processResponseJsonData('Ajax', args, layer, type);
+        var fetchApiModule = new Fetch(localAjax.dataOptions, localAjax.type, localAjax.contentType);
+        fetchApiModule.onSuccess = function (args) {
+            _this.processResponseJsonData('Fetch', args, layer, type);
         };
-        ajaxModule.send(localAjax.sendData);
+        fetchApiModule.send(localAjax.sendData);
     };
     /**
      * This method is used to process the JSON data to render the maps.
@@ -358,10 +358,10 @@ var Maps = /** @class */ (function (_super) {
         this.serverProcess['response']++;
         if (processType) {
             if (dataType === 'ShapeData') {
-                layer.shapeData = (processType === 'DataManager') ? processResult(data) : JSON.parse(data);
+                layer.shapeData = (processType === 'DataManager') ? processResult(data) : data;
             }
             else {
-                layer.dataSource = (processType === 'DataManager') ? processResult(data) : JSON.parse('[' + data + ']')[0];
+                layer.dataSource = (processType === 'DataManager') ? processResult(data) : data;
             }
         }
         if (!isNullOrUndefined(processType) && this.serverProcess['request'] === this.serverProcess['response']) {
@@ -593,8 +593,8 @@ var Maps = /** @class */ (function (_super) {
         var element = getElementByID(this.element.id + '_Secondary_Element');
         var rect = this.element.getBoundingClientRect();
         var svgRect = getElementByID(this.element.id + '_svg').getBoundingClientRect();
-        element.style.marginLeft = Math.max(svgRect.left - rect.left, 0) + 'px';
-        element.style.marginTop = Math.max(svgRect.top - rect.top, 0) + 'px';
+        element.style.left = Math.max(svgRect.left - rect.left, 0) + 'px';
+        element.style.top = Math.max(svgRect.top - rect.top, 0) + 'px';
     };
     Maps.prototype.zoomingChange = function () {
         var left;
@@ -817,8 +817,8 @@ var Maps = /** @class */ (function (_super) {
         var height;
         var width = Math.abs((this.margin.left + this.margin.right) - this.availableSize.width);
         style.fontFamily = !isNullOrUndefined(style.fontFamily) ? style.fontFamily : this.themeStyle.fontFamily;
-        style.fontWeight = style.fontWeight || this.themeStyle.titleFontWeight;
-        style.size = type === 'title' ? (style.size || this.themeStyle.titleFontSize) : (style.size || Theme.mapsSubTitleFont.size);
+        style.fontWeight = type === 'title' ? style.fontWeight || this.themeStyle.titleFontWeight : style.fontWeight || this.themeStyle.titleFontWeight;
+        style.size = type === 'title' ? (style.size || this.themeStyle.titleFontSize) : (style.size || this.themeStyle.subTitleFontSize || Theme.mapsSubTitleFont.size);
         if (title.text) {
             if (isNullOrUndefined(groupEle)) {
                 groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
@@ -1555,7 +1555,7 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.mapsOnResize = function (e) {
         var _this = this;
-        if (!this.isDestroyed) {
+        if (!this.isDestroyed && !this.isExportInitialTileMap) {
             this.isResize = this.isReset = true;
             var args = {
                 cancel: false,
@@ -2297,17 +2297,15 @@ var Maps = /** @class */ (function (_super) {
         var promise;
         if (!this.isDestroyed) {
             promise = new Promise(function (resolve, reject) {
-                var ajax = new Ajax({
+                var fetchApi = new Fetch({
                     url: url
                 });
-                ajax.onSuccess = function (json) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var jsonObject = JSON.parse(json);
+                fetchApi.onSuccess = function (json) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var resource = jsonObject['resourceSets'][0]['resources'][0];
+                    var resource = json['resourceSets'][0]['resources'][0];
                     resolve(resource['imageUrl']);
                 };
-                ajax.send();
+                fetchApi.send();
             });
         }
         return promise;

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

@@ -9,8 +9,9 @@ export interface AnnotationModel {
      * Gets or sets the content for the annotation in maps.
      * 
      * @default ''
+     * @aspType string
      */
-    content?: string;
+    content?: string | Function;
 
     /**
      * Gets or sets the x position of the annotation in pixel or percentage format.
@@ -425,8 +426,9 @@ export interface TooltipSettingsModel {
      * Gets or sets the tooltip template of layers, markers, and bubbles in maps to display custom elements as tooltip.
      *
      * @default ''
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Gets or sets the color of the tooltip in layers, markers, and bubbles of maps.
@@ -1529,8 +1531,9 @@ export interface DataLabelSettingsModel {
      * Gets or sets the template for the data labels to render custom elements.
      *
      * @default ''
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
 }
 
@@ -1727,8 +1730,9 @@ export interface MarkerBaseModel {
      * Gets or sets the template for the marker to render custom elements.
      *
      * @default null
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Gets or sets the data source for the marker.

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

@@ -21,8 +21,9 @@ export declare class Annotation extends ChildProperty<Annotation> {
      * Gets or sets the content for the annotation in maps.
      *
      * @default ''
+     * @aspType string
      */
-    content: string;
+    content: string | Function;
     /**
      * Gets or sets the x position of the annotation in pixel or percentage format.
      *
@@ -367,8 +368,9 @@ export declare class TooltipSettings extends ChildProperty<TooltipSettings> {
      * Gets or sets the tooltip template of layers, markers, and bubbles in maps to display custom elements as tooltip.
      *
      * @default ''
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Gets or sets the color of the tooltip in layers, markers, and bubbles of maps.
      *
@@ -1327,8 +1329,9 @@ export declare class DataLabelSettings extends ChildProperty<DataLabelSettings>
      * Gets or sets the template for the data labels to render custom elements.
      *
      * @default ''
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
 }
 /**
  * Gets or sets the options to customize the shapes in the maps.
@@ -1493,8 +1496,9 @@ export declare class MarkerBase extends ChildProperty<MarkerBase> {
      * Gets or sets the template for the marker to render custom elements.
      *
      * @default null
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Gets or sets the data source for the marker.
      * The data source for the marker will contain latitude and longitude values to specify the location

package/src/maps/model/base.js

@@ -292,7 +292,7 @@ var TooltipSettings = /** @class */ (function (_super) {
         Complex({ color: 'transparent', width: 1 }, Border)
     ], TooltipSettings.prototype, "border", void 0);
     __decorate([
-        Complex(Theme.tooltipLabelFont, Font)
+        Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
     ], TooltipSettings.prototype, "textStyle", void 0);
     __decorate([
         Property(null)
@@ -823,7 +823,7 @@ var LegendSettings = /** @class */ (function (_super) {
         Property('')
     ], LegendSettings.prototype, "height", void 0);
     __decorate([
-        Complex({ fontFamily: null }, Font)
+        Complex({ fontFamily: null, fontWeight: null }, Font)
     ], LegendSettings.prototype, "textStyle", void 0);
     __decorate([
         Property(15)
@@ -844,7 +844,7 @@ var LegendSettings = /** @class */ (function (_super) {
         Complex({}, CommonTitleSettings)
     ], LegendSettings.prototype, "title", void 0);
     __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);
     __decorate([
         Property('Bottom')
@@ -909,7 +909,7 @@ var DataLabelSettings = /** @class */ (function (_super) {
         Property(5)
     ], DataLabelSettings.prototype, "ry", void 0);
     __decorate([
-        Complex({}, Font)
+        Complex({ fontWeight: null }, Font)
     ], DataLabelSettings.prototype, "textStyle", void 0);
     __decorate([
         Property('')

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

@@ -39,9 +39,17 @@ var ImageExport = /** @class */ (function () {
             var svgDataElement;
             var tileSvg;
             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>';
             }
             else {
                 tileSvg = getElementByID(maps.element.id + '_Tile_SVG').cloneNode(true);
@@ -80,6 +88,7 @@ var ImageExport = /** @class */ (function () {
                     image_1.src = url;
                 }
                 else {
+                    maps.isExportInitialTileMap = true;
                     var svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
                     var top_1 = parseFloat(svgParentElement.getAttribute('y'));
                     var left_1 = parseFloat(svgParentElement.getAttribute('x'));
@@ -89,7 +98,9 @@ var ImageExport = /** @class */ (function () {
                         var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                         var exportTileImg = new Image();
                         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);
                         ctxt_1.font = maps.titleSettings.textStyle.size + ' Arial';
                         var titleElement = document.getElementById(maps.element.id + '_Map_title');
@@ -119,8 +130,10 @@ var ImageExport = /** @class */ (function () {
                                 if (allowDownload) {
                                     triggerDownload(fileName, type, localBase64, isDownload);
                                     localStorage.removeItem('local-canvasImage');
+                                    maps.isExportInitialTileMap = false;
                                 }
                                 else {
+                                    maps.isExportInitialTileMap = false;
                                     if (type === 'PNG') {
                                         resolve(localBase64);
                                     }

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

@@ -27,6 +27,9 @@ var PdfExport = /** @class */ (function () {
     PdfExport.prototype.export = function (maps, type, fileName, allowDownload, orientation) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var promise = new Promise(function (resolve, reject) {
+            if (maps.isTileMap) {
+                maps.isExportInitialTileMap = true;
+            }
             var canvasElement = createElement('canvas', {
                 id: 'ej2-canvas',
                 attrs: {
@@ -40,10 +43,12 @@ var PdfExport = /** @class */ (function () {
             var exportElement = maps.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
             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] :
                 [(new XMLSerializer()).serializeToString(exportElement)], { type: 'image/svg+xml' }));
             var pdfDocument = new PdfDocument();
@@ -79,7 +84,9 @@ var PdfExport = /** @class */ (function () {
                     var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                     var tileImg = new Image();
                     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);
                     ctx.font = maps.titleSettings.textStyle.size + ' Arial';
                     var titleElement = document.getElementById(maps.element.id + '_Map_title');
@@ -109,6 +116,7 @@ var PdfExport = /** @class */ (function () {
                                 pdfDocument.pageSettings.orientation = orientation;
                                 x = x.slice(x.indexOf(',') + 1);
                                 pdfDocument.pages.add().graphics.drawImage(new PdfBitmap(x), 0, 0, (maps.availableSize.width - 60), maps.availableSize.height);
+                                maps.isExportInitialTileMap = false;
                                 if (allowDownload) {
                                     pdfDocument.save(fileName + '.pdf');
                                     pdfDocument.destroy();

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

@@ -139,7 +139,7 @@ export interface MapsTooltipOption {
     text?: string[];
     data?: Object;
     textStyle?: TextStyleModel;
-    template?: string;
+    template?: string | Function;
 }
 /**
  * Specifies the event arguments for tooltip render event in maps.
@@ -359,8 +359,10 @@ export interface IMarkerRenderingEventArgs extends IMapsEventArgs {
     imageUrl?: string;
     /**
      * Defines the template of the marker.
+     *
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
     /**
      * Defines the settings of the border for the marker.
      */
@@ -550,8 +552,10 @@ export interface ILabelRenderingEventArgs extends IMapsEventArgs {
     fill: string;
     /**
      * Defines the template for the data-label.
+     *
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Defines the instance of the data-label.
      */
@@ -676,8 +680,10 @@ export interface IAnnotationRenderingEventArgs extends IMapsEventArgs {
     maps?: Maps;
     /**
      * Defines the content of the annotation which is being rendered.
+     *
+     * @aspType string
      */
-    content?: string;
+    content?: string | Function;
     /**
      * Specifies the annotation instance.
      */
@@ -776,8 +782,14 @@ export interface IThemeStyle {
     zoomFillColor: string;
     /** Specifies the font-family for the maps. */
     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. */
     tooltipFillOpacity?: number;
     /** Specifies the text opacity for the tooltip in maps. */
@@ -792,6 +804,12 @@ export interface IThemeStyle {
     zoomSelectionColor?: string;
     /** Specifies the color for the shapes in the maps. */
     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;
 }
 /**
  * Defines the template for the marker.

package/src/maps/model/print.js

@@ -1,4 +1,4 @@
-import { print as printFunction, createElement } from '@syncfusion/ej2-base';
+import { print as printFunction, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getElement } from '../utils/helper';
 import { beforePrint } from '../model/constants';
 /**
@@ -47,6 +47,19 @@ var Print = /** @class */ (function () {
     Print.prototype.getHTMLContent = function (maps, elements) {
         var div = createElement('div');
         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) {
             for (var i = 0; i < divElement.childElementCount; i++) {
                 if (divElement.children[i].id === maps.element.id + '_tile_parent') {