@syncfusion/ej2-maps 21.2.5 → 22.1.34

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

@@ -73,93 +73,103 @@ var Zoom = /** @class */ (function () {
         var scale = map.previousScale = map.scale;
         var maxZoom = map.zoomSettings.maxZoom;
         var minZoom = map.zoomSettings.minZoom;
-        newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
         newZoomFactor = maxZoom >= newZoomFactor ? newZoomFactor : maxZoom;
-        var prevTilePoint = map.tileTranslatePoint;
-        if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
-            || map.isReset)) {
-            var availSize = map.mapAreaRect;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var minBounds = map.baseMapRectBounds['min'];
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var maxBounds = map.baseMapRectBounds['max'];
-            var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
-            var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
-            var translatePointX = void 0;
-            var translatePointY = void 0;
-            if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
-                if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
-                    mapTotalWidth = availSize.width / 2;
-                    mapTotalHeight = availSize.height;
+        var isToolbarPerform = true;
+        switch (type.toLowerCase()) {
+            case 'zoomin':
+                isToolbarPerform = newZoomFactor <= this.maps.zoomSettings.maxZoom;
+                break;
+            case 'zoomout':
+                isToolbarPerform = newZoomFactor >= this.maps.zoomSettings.minZoom;
+                break;
+        }
+        if (isToolbarPerform) {
+            var prevTilePoint = map.tileTranslatePoint;
+            if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
+                || map.isReset)) {
+                var availSize = map.mapAreaRect;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var minBounds = map.baseMapRectBounds['min'];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var maxBounds = map.baseMapRectBounds['max'];
+                var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
+                var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
+                var translatePointX = void 0;
+                var translatePointY = void 0;
+                if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
+                    if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
+                        mapTotalWidth = availSize.width / 2;
+                        mapTotalHeight = availSize.height;
+                    }
+                    newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
+                    newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
+                    map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
+                }
+                else {
+                    var point = map.translatePoint;
+                    translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
+                    translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
+                    var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
+                    translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
+                    translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
+                    map.translatePoint = new Point(translatePointX, translatePointY);
+                }
+                map.scale = newZoomFactor;
+                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                    map.translatePoint = map.previousPoint;
+                    map.scale = map.mapScaleValue = map.previousScale;
+                }
+                else {
+                    this.applyTransform(map);
                 }
-                newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
-                newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
-                map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
-            }
-            else {
-                var point = map.translatePoint;
-                translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
-                translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
-                var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
-                translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
-                translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
-                map.translatePoint = new Point(translatePointX, translatePointY);
-            }
-            map.scale = newZoomFactor;
-            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
-                map.translatePoint = map.previousPoint;
-                map.scale = map.mapScaleValue = map.previousScale;
-            }
-            else {
-                this.applyTransform(map);
             }
-        }
-        else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
-            this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
-            map.tileZoomLevel = newZoomFactor;
-            map.zoomSettings.zoomFactor = newZoomFactor;
-            map.scale = Math.pow(2, newZoomFactor - 1);
-            if (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
-                map.initialCheck = true;
-                map.zoomPersistence = false;
-                map.tileTranslatePoint.x = map.initialTileTranslate.x;
-                map.tileTranslatePoint.y = map.initialTileTranslate.y;
-                newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+            else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
+                this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
+                map.tileZoomLevel = newZoomFactor;
+                map.zoomSettings.zoomFactor = newZoomFactor;
                 map.scale = Math.pow(2, newZoomFactor - 1);
-            }
-            map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
-            map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
-            if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
-                map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
-                map.scale = map.previousScale;
-                map.tileZoomLevel = prevLevel;
-                map.zoomSettings.zoomFactor = map.previousScale;
-            }
-            else {
-                if (document.querySelector('.GroupElement')) {
-                    document.querySelector('.GroupElement').style.display = 'none';
+                if (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
+                    map.initialCheck = true;
+                    map.zoomPersistence = false;
+                    map.tileTranslatePoint.x = map.initialTileTranslate.x;
+                    map.tileTranslatePoint.y = map.initialTileTranslate.y;
+                    newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
+                    map.scale = Math.pow(2, newZoomFactor - 1);
                 }
-                if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
+                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
+                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
+                    map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
+                    map.scale = map.previousScale;
+                    map.tileZoomLevel = prevLevel;
+                    map.zoomSettings.zoomFactor = map.previousScale;
                 }
-                this.markerLineAnimation(map);
-                map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
-                var element1 = document.getElementById(this.maps.element.id + '_tiles');
-                var animationDuration = this.maps.layersCollection[0].animationDuration;
-                setTimeout(function () {
-                    // if (type === 'ZoomOut') {
-                    //     element1.removeChild(element1.children[element1.childElementCount - 1]);
-                    //     if (element1.childElementCount) {
-                    //         element1.removeChild(element1.children[element1.childElementCount - 1]);
-                    //     } else {
-                    //         element1 = element1;
-                    //     }
-                    // }
-                    _this.applyTransform(_this.maps);
-                    if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
-                        document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                else {
+                    if (document.querySelector('.GroupElement')) {
+                        document.querySelector('.GroupElement').style.display = 'none';
                     }
-                }, animationDuration);
+                    if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                        document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
+                    }
+                    this.markerLineAnimation(map);
+                    map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
+                    var element1 = document.getElementById(this.maps.element.id + '_tiles');
+                    var animationDuration = this.maps.layersCollection[0].animationDuration;
+                    setTimeout(function () {
+                        // if (type === 'ZoomOut') {
+                        //     element1.removeChild(element1.children[element1.childElementCount - 1]);
+                        //     if (element1.childElementCount) {
+                        //         element1.removeChild(element1.children[element1.childElementCount - 1]);
+                        //     } else {
+                        //         element1 = element1;
+                        //     }
+                        // }
+                        _this.applyTransform(_this.maps);
+                        if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
+                            document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                        }
+                    }, animationDuration);
+                }
             }
         }
         this.maps.zoomNotApplied = false;
@@ -375,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);
@@ -390,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);
         }
@@ -783,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
@@ -1338,11 +1349,23 @@ var Zoom = /** @class */ (function () {
         e.stopImmediatePropagation();
         var isTouch = e.pointerType === 'touch' || e.pointerType === '2' || (e.type.indexOf('touch') > -1);
         var toolbar = target.id.split('_Zooming_ToolBar_')[1].split('_')[0];
-        if (isTouch) {
+        var isToolbarPerform = true;
+        switch (toolbar.toLowerCase()) {
+            case 'zoomin':
+                isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) + 1 <= this.maps.zoomSettings.maxZoom;
+                break;
+            case 'zoomout':
+                isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) - 1 >= this.maps.zoomSettings.minZoom;
+                break;
+            case 'reset':
+                isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) != this.maps.zoomSettings.minZoom;
+                break;
+        }
+        if (isTouch && isToolbarPerform) {
             this.handled = true;
             this.performZoomingByToolBar(toolbar);
         }
-        else if ((e.type === 'mousedown' || e.type === 'pointerdown') && !this.handled) {
+        else if ((e.type === 'mousedown' || e.type === 'pointerdown') && !this.handled && isToolbarPerform) {
             this.handled = false;
             this.performZoomingByToolBar(toolbar);
         }
@@ -1427,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);