@syncfusion/ej2-maps 21.2.10 → 22.1.34

package/dist/es6/ej2-maps.es5.js

@@ -1,4 +1,4 @@
-import { Ajax, Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove, setValue } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Fetch, Internationalization, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove, setValue } from '@syncfusion/ej2-base';
 import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
@@ -828,7 +828,7 @@ function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCol
     }
     else if (shape === 'Image') {
         x = location.x - (size.width / 2);
-        y = location.y - (size.height / 2);
+        y = location.y - (markerID.indexOf('cluster') > -1 ? (size.height / 2) : size.height);
         merge(pathOptions, { 'href': imageUrl, 'height': size.height, 'width': size.width, x: x, y: y });
         markerEle = maps.renderer.drawImage(pathOptions);
     }
@@ -2375,13 +2375,16 @@ function getTemplateFunction(template, maps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var templateFn = null;
     try {
-        if (document.querySelectorAll(template).length) {
+        if (typeof template !== 'function' && document.querySelectorAll(template).length) {
             templateFn = compile(document.querySelector(template).innerHTML.trim());
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
         else if (maps.isVue || maps.isVue3) {
             templateFn = compile(template);
         }
+        else if (typeof template === 'function') {
+            templateFn = compile(template);
+        }
     }
     catch (e) {
         templateFn = compile(template);
@@ -3576,6 +3579,14 @@ function getShapeColor(theme) {
             themePalette = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C',
                 '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', '#BC4870'];
             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:
             themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 '#D6D572', '#9178E3', '#A1E5B4', '#87A4B4', '#E4C16C'];
@@ -3724,9 +3735,14 @@ function getThemeStyle(theme) {
                 zoomFillColor: '#FFFFFF',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 fontFamily: 'Roboto, Noto, Sans-serif',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'highcontrast':
@@ -3743,10 +3759,15 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#ffffff',
                 zoomFillColor: '#FFFFFF',
                 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"
             };
             break;
         case 'bootstrap4':
@@ -3762,6 +3783,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#000000',
                 zoomFillColor: '#5B6269',
                 fontFamily: 'HelveticaNeue-Medium',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '16px',
                 legendFontSize: '14px',
                 tooltipFillOpacity: 1,
@@ -3769,7 +3792,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'HelveticaNeue-Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'tailwind':
@@ -3785,6 +3811,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#111827',
                 zoomFillColor: '#6b7280',
                 fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3792,7 +3820,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Inter',
                 titleFontWeight: '500',
                 zoomSelectionColor: '#374151',
-                shapeFill: '#E5E7EB'
+                shapeFill: '#E5E7EB',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'tailwinddark':
@@ -3808,6 +3839,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#F9FAFB',
                 zoomFillColor: '#D1D5DB',
                 fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3815,7 +3848,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Inter',
                 titleFontWeight: '500',
                 zoomSelectionColor: '#F3F4F6',
-                shapeFill: '#374151'
+                shapeFill: '#374151',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'bootstrap5':
@@ -3831,6 +3867,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#212529',
                 zoomFillColor: '#6C757D',
                 fontFamily: 'Helvetica Neue',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3838,7 +3876,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Helvetica Neue',
                 titleFontWeight: 'normal',
                 zoomSelectionColor: '#343A40',
-                shapeFill: '#E9ECEF'
+                shapeFill: '#E9ECEF',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'bootstrap5dark':
@@ -3854,6 +3895,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#E9ECEF',
                 zoomFillColor: '#B5BABE',
                 fontFamily: 'Helvetica Neue',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3861,7 +3904,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Helvetica Neue',
                 titleFontWeight: 'normal',
                 zoomSelectionColor: '#DEE2E6',
-                shapeFill: '#495057'
+                shapeFill: '#495057',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'fluent':
@@ -3877,6 +3923,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#FFFFFF',
                 zoomFillColor: '#A19F9D',
                 fontFamily: 'Segoe UI',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3884,7 +3932,10 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Segoe UI',
                 titleFontWeight: '600',
                 zoomSelectionColor: '#323130',
-                shapeFill: '#F3F2F1'
+                shapeFill: '#F3F2F1',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'fluentdark':
@@ -3900,6 +3951,8 @@ function getThemeStyle(theme) {
                 tooltipFillColor: '#252423',
                 zoomFillColor: '#484644',
                 fontFamily: 'Segoe UI',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -3907,7 +3960,68 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Segoe UI',
                 titleFontWeight: '600',
                 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:
@@ -3925,9 +4039,14 @@ function getThemeStyle(theme) {
                 zoomFillColor: '#737373',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 fontFamily: 'Roboto, Noto, Sans-serif',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
     }
@@ -4217,7 +4336,7 @@ var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
         Complex({ color: 'transparent', width: 1 }, Border)
     ], TooltipSettings.prototype, "border", void 0);
     __decorate$1([
-        Complex(Theme.tooltipLabelFont, Font)
+        Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
     ], TooltipSettings.prototype, "textStyle", void 0);
     __decorate$1([
         Property(null)
@@ -4731,7 +4850,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
         Property('')
     ], LegendSettings.prototype, "height", void 0);
     __decorate$1([
-        Complex({ fontFamily: null }, Font)
+        Complex({ fontFamily: null, fontWeight: null }, Font)
     ], LegendSettings.prototype, "textStyle", void 0);
     __decorate$1([
         Property(15)
@@ -4752,7 +4871,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
         Complex({}, CommonTitleSettings)
     ], LegendSettings.prototype, "title", void 0);
     __decorate$1([
-        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$1([
         Property('Bottom')
@@ -4816,7 +4935,7 @@ var DataLabelSettings = /** @__PURE__ @class */ (function (_super) {
         Property(5)
     ], DataLabelSettings.prototype, "ry", void 0);
     __decorate$1([
-        Complex({}, Font)
+        Complex({ fontWeight: null }, Font)
     ], DataLabelSettings.prototype, "textStyle", void 0);
     __decorate$1([
         Property('')
@@ -6080,7 +6199,7 @@ var LayerPanel = /** @__PURE__ @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 () {
@@ -6319,14 +6438,13 @@ var LayerPanel = /** @__PURE__ @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'];
@@ -7362,8 +7480,8 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                         imgElement.setAttribute('height', '256px');
                         imgElement.setAttribute('width', '256px');
                         imgElement.setAttribute('src', tile.src);
-                        imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
                         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';
                         child.style.left = tile.left + 'px';
@@ -8007,11 +8125,11 @@ var Maps = /** @__PURE__ @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.
@@ -8027,10 +8145,10 @@ var Maps = /** @__PURE__ @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']) {
@@ -8262,8 +8380,8 @@ var Maps = /** @__PURE__ @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;
@@ -8486,8 +8604,8 @@ var Maps = /** @__PURE__ @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' });
@@ -9214,7 +9332,7 @@ var Maps = /** @__PURE__ @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,
@@ -9956,17 +10074,15 @@ var Maps = /** @__PURE__ @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;
@@ -10645,6 +10761,7 @@ var DataLabel = /** @__PURE__ @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]);
@@ -11635,6 +11752,7 @@ var Legend = /** @__PURE__ @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();
                 }
@@ -12403,6 +12521,8 @@ var Legend = /** @__PURE__ @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);
         }
@@ -14030,7 +14150,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                         currentData = this.formatter(marker$$1.tooltipSettings.format, marker$$1.dataSource[dataIndex]);
                     }
                     else {
-                        if (marker$$1.template && !marker$$1.tooltipSettings.valuePath) {
+                        if (typeof marker$$1.template !== 'function' && marker$$1.template && !marker$$1.tooltipSettings.valuePath) {
                             currentData = marker$$1.template.split('>')[1].split('<')[0];
                         }
                         else {
@@ -14073,7 +14193,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
                 document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
             }
-            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]];
             }
             templateData = this.setTooltipContent(option, templateData);
@@ -14098,10 +14218,14 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
                     (targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
                     _this.maps['isProtectedOnChange'] = true;
+                    tooltipArgs.options['textStyle']['size'] = tooltipArgs.options['textStyle']['size']
+                        || _this.maps.themeStyle.fontSize;
                     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']['fontWeight'] = tooltipArgs.options['textStyle']['fontWeight']
+                        || _this.maps.themeStyle.fontWeight;
                     tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
                         || _this.maps.themeStyle.tooltipTextOpacity;
                     if (tooltipArgs.cancel) {
@@ -14693,7 +14817,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
         var down = this.mouseDownPoints;
         var move = this.mouseMovePoints;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var border = { width: 1, color: '#009900' };
+        var border = { width: 1, color: this.maps.themeStyle.rectangleZoomBorderColor };
         var width = Math.abs(move.x - down.x);
         var height = Math.abs(move.y - down.y);
         var x = ((move.x > down.x) ? down.x : down.x - width);
@@ -14708,7 +14832,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 height: map.availableSize.height,
                 style: 'position: absolute;'
             });
-            var rectOption = new RectOption(map.element.id + '_ZoomRect', '#d3d3d3', border, 0.5, this.zoomingRect, 0, 0, '', '3');
+            var rectOption = new RectOption(map.element.id + '_ZoomRect', this.maps.themeStyle.rectangleZoomFillColor, border, this.maps.themeStyle.rectangleZoomFillOpacity, this.zoomingRect, 0, 0, '', '3');
             rectSVGObject.appendChild(map.renderer.drawRectangle(rectOption));
             getElementByID(map.element.id + '_Secondary_Element').appendChild(rectSVGObject);
         }
@@ -15096,6 +15220,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                     zoomtextSize = measureText(zoomtext, style);
                     var start = labelY - zoomtextSize['height'] / 4;
                     var end = labelY + zoomtextSize['height'] / 4;
+                    labelY = end;
                     var xpositionEnds = labelX + zoomtextSize['width'] / 2;
                     var xpositionStart = labelX - zoomtextSize['width'] / 2;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15745,7 +15870,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                 map.markerCenterLatitude = null;
                 map.markerCenterLongitude = null;
                 this.isZoomSelection = false;
-                this.isPan = this.isPanning = map.zoomSettings.enablePanning;
+                this.isPan = map.zoomSettings.enablePanning;
                 this.toolBarZooming(map.zoomSettings.minZoom, 'Reset');
                 if ((this.isPan && !this.isZoomSelection) || (!this.isPan && this.isZoomSelection)) {
                     if (!this.maps.zoomSettings.enablePanning) {
@@ -16406,6 +16531,19 @@ var Print = /** @__PURE__ @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') {
@@ -16502,9 +16640,17 @@ var ImageExport = /** @__PURE__ @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);
@@ -16543,6 +16689,7 @@ var ImageExport = /** @__PURE__ @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'));
@@ -16552,7 +16699,9 @@ var ImageExport = /** @__PURE__ @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');
@@ -16582,8 +16731,10 @@ var ImageExport = /** @__PURE__ @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);
                                     }
@@ -16663,6 +16814,9 @@ var PdfExport = /** @__PURE__ @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: {
@@ -16676,10 +16830,12 @@ var PdfExport = /** @__PURE__ @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();
@@ -16715,7 +16871,9 @@ var PdfExport = /** @__PURE__ @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');
@@ -16745,6 +16903,7 @@ var PdfExport = /** @__PURE__ @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();