@syncfusion/ej2-maps 21.2.10 → 22.1.39

package/src/maps/model/theme.js

@@ -191,6 +191,14 @@ export 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'];
@@ -339,9 +347,14 @@ export 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':
@@ -358,10 +371,15 @@ export 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':
@@ -377,6 +395,8 @@ export function getThemeStyle(theme) {
                 tooltipFillColor: '#000000',
                 zoomFillColor: '#5B6269',
                 fontFamily: 'HelveticaNeue-Medium',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '16px',
                 legendFontSize: '14px',
                 tooltipFillOpacity: 1,
@@ -384,7 +404,10 @@ export function getThemeStyle(theme) {
                 labelFontFamily: 'HelveticaNeue-Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
-                shapeFill: '#A6A6A6'
+                shapeFill: '#A6A6A6',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'tailwind':
@@ -400,6 +423,8 @@ export function getThemeStyle(theme) {
                 tooltipFillColor: '#111827',
                 zoomFillColor: '#6b7280',
                 fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -407,7 +432,10 @@ export function getThemeStyle(theme) {
                 labelFontFamily: 'Inter',
                 titleFontWeight: '500',
                 zoomSelectionColor: '#374151',
-                shapeFill: '#E5E7EB'
+                shapeFill: '#E5E7EB',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'tailwinddark':
@@ -423,6 +451,8 @@ export function getThemeStyle(theme) {
                 tooltipFillColor: '#F9FAFB',
                 zoomFillColor: '#D1D5DB',
                 fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -430,7 +460,10 @@ export function getThemeStyle(theme) {
                 labelFontFamily: 'Inter',
                 titleFontWeight: '500',
                 zoomSelectionColor: '#F3F4F6',
-                shapeFill: '#374151'
+                shapeFill: '#374151',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'bootstrap5':
@@ -446,6 +479,8 @@ export function getThemeStyle(theme) {
                 tooltipFillColor: '#212529',
                 zoomFillColor: '#6C757D',
                 fontFamily: 'Helvetica Neue',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -453,7 +488,10 @@ export function getThemeStyle(theme) {
                 labelFontFamily: 'Helvetica Neue',
                 titleFontWeight: 'normal',
                 zoomSelectionColor: '#343A40',
-                shapeFill: '#E9ECEF'
+                shapeFill: '#E9ECEF',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'bootstrap5dark':
@@ -469,6 +507,8 @@ export function getThemeStyle(theme) {
                 tooltipFillColor: '#E9ECEF',
                 zoomFillColor: '#B5BABE',
                 fontFamily: 'Helvetica Neue',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -476,7 +516,10 @@ export function getThemeStyle(theme) {
                 labelFontFamily: 'Helvetica Neue',
                 titleFontWeight: 'normal',
                 zoomSelectionColor: '#DEE2E6',
-                shapeFill: '#495057'
+                shapeFill: '#495057',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'fluent':
@@ -492,6 +535,8 @@ export function getThemeStyle(theme) {
                 tooltipFillColor: '#FFFFFF',
                 zoomFillColor: '#A19F9D',
                 fontFamily: 'Segoe UI',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -499,7 +544,10 @@ export function getThemeStyle(theme) {
                 labelFontFamily: 'Segoe UI',
                 titleFontWeight: '600',
                 zoomSelectionColor: '#323130',
-                shapeFill: '#F3F2F1'
+                shapeFill: '#F3F2F1',
+                rectangleZoomFillColor: '#d3d3d3',
+                rectangleZoomFillOpacity: 0.5,
+                rectangleZoomBorderColor: "#009900"
             };
             break;
         case 'fluentdark':
@@ -515,6 +563,8 @@ export function getThemeStyle(theme) {
                 tooltipFillColor: '#252423',
                 zoomFillColor: '#484644',
                 fontFamily: 'Segoe UI',
+                fontSize: '12px',
+                fontWeight: 'Medium',
                 titleFontSize: '14px',
                 legendFontSize: '12px',
                 tooltipFillOpacity: 1,
@@ -522,7 +572,68 @@ export 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:
@@ -540,9 +651,14 @@ export 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;
     }

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

@@ -127,7 +127,7 @@ var MapsTooltip = /** @class */ (function () {
                         currentData = this.formatter(marker.tooltipSettings.format, marker.dataSource[dataIndex]);
                     }
                     else {
-                        if (marker.template && !marker.tooltipSettings.valuePath) {
+                        if (typeof marker.template !== 'function' && marker.template && !marker.tooltipSettings.valuePath) {
                             currentData = marker.template.split('>')[1].split('<')[0];
                         }
                         else {
@@ -170,7 +170,7 @@ var MapsTooltip = /** @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);
@@ -195,10 +195,14 @@ var MapsTooltip = /** @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) {

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

@@ -385,7 +385,7 @@ var Zoom = /** @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);
@@ -400,7 +400,7 @@ var Zoom = /** @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);
         }
@@ -793,6 +793,7 @@ var Zoom = /** @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
@@ -1449,7 +1450,7 @@ var Zoom = /** @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) {

package/src/maps/utils/enum.d.ts

@@ -44,7 +44,11 @@ export declare type MapsTheme =
 /** Renders a map with Fluent theme. */
 'Fluent' | 
 /**  Render a map with Fluent dark theme. */
-'FluentDark';
+'FluentDark' | 
+/** Renders a map with material3 theme. */
+'Material3' | 
+/** Renders a map with material3dark theme. */
+'Material3Dark';
 /**
  * Defines the position of the legend.
  */

package/src/maps/utils/helper.d.ts

@@ -884,7 +884,7 @@ export declare function Internalize(maps: Maps, value: number): string;
  * @returns {Function} - Returns the function
  * @private
  */
-export declare function getTemplateFunction(template: string, maps: Maps): any;
+export declare function getTemplateFunction(template: string | Function, maps: Maps): any;
 /**
  * Function to get element from id.
  *

package/src/maps/utils/helper.js

@@ -846,7 +846,7 @@ export function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, ma
     }
     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);
     }
@@ -2393,13 +2393,16 @@ export 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 = templateComplier(document.querySelector(template).innerHTML.trim());
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
         else if (maps.isVue || maps.isVue3) {
             templateFn = templateComplier(template);
         }
+        else if (typeof template === 'function') {
+            templateFn = templateComplier(template);
+        }
     }
     catch (e) {
         templateFn = templateComplier(template);