@syncfusion/ej2-maps 27.1.56 → 28.1.33

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.1.56
-*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
+*  version : 28.1.33
+*  Copyright Syncfusion Inc. 2001 - 2024. 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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-maps@*",
-  "_id": "@syncfusion/ej2-maps@27.1.48",
+  "_id": "@syncfusion/ej2-maps@16.42.7",
   "_inBundle": false,
-  "_integrity": "sha512-e/uUcXQfFkZoImZBrS5GO/Yudgwwm7IPwdp8tDxRSmTa9GjxVkwzkmu7ueYobIiS6za7pX0L/66LpgWAbeO5wQ==",
+  "_integrity": "sha512-hYdA8I18QpGdTInSRH3iZ3hdp6/U1dkGLMq7yFsKaEDDvCyl5rvajihb+XaUX1VmW8+eWdgjbI5rPTTfO219RQ==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-27.1.48.tgz",
-  "_shasum": "f1ba5d11b3af1626d8a508fa8685b5d9f0869264",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-maps/-/ej2-maps-16.42.7.tgz",
+  "_shasum": "36fc1e11aef49f674a3f00eeaa4618bd0aad2a95",
   "_spec": "@syncfusion/ej2-maps@*",
-  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.1.55",
-    "@syncfusion/ej2-buttons": "~27.1.53",
-    "@syncfusion/ej2-compression": "~27.1.53",
-    "@syncfusion/ej2-data": "~27.1.52",
-    "@syncfusion/ej2-file-utils": "~27.1.53",
-    "@syncfusion/ej2-pdf-export": "~27.1.51",
-    "@syncfusion/ej2-svg-base": "~27.1.50"
+    "@syncfusion/ej2-base": "~28.1.33",
+    "@syncfusion/ej2-buttons": "~28.1.33",
+    "@syncfusion/ej2-compression": "~28.1.33",
+    "@syncfusion/ej2-data": "~28.1.33",
+    "@syncfusion/ej2-file-utils": "~28.1.33",
+    "@syncfusion/ej2-pdf-export": "~28.1.33",
+    "@syncfusion/ej2-svg-base": "~28.1.33"
   },
   "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": "27.1.56",
+  "version": "28.1.33",
   "sideEffects": false
 }

package/src/maps/layers/legend.d.ts

@@ -126,7 +126,7 @@ export declare class Legend {
     removeLegendHighlightCollection(): void;
     removeLegendSelectionCollection(targetElement: Element): void;
     removeShapeHighlightCollection(): void;
-    shapeHighLightAndSelection(targetElement: Element, data: object, module: SelectionSettingsModel | HighlightSettingsModel, getValue: string, layerIndex: number): void;
+    shapeHighLightAndSelection(targetElement: Element, data: object, legendModule: SelectionSettingsModel | HighlightSettingsModel, getValue: string, layerIndex: number): void;
     private isTargetSelected;
     private updateLegendElement;
     private getIndexofLegend;

package/src/maps/layers/legend.js

@@ -200,6 +200,13 @@ var Legend = /** @class */ (function () {
                     else {
                         legendText = '';
                     }
+                    if (legend.position === 'Left' || legend.position === 'Right') {
+                        for (var i_1 = 0; i_1 < this.legendCollection.length; i_1++) {
+                            var legendItem = this.legendCollection[i_1];
+                            var legendTextSize = measureText(legendItem['text'], legend.textStyle);
+                            this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
+                        }
+                    }
                     maxTextHeight = Math.max(maxTextHeight, itemTextSize.height);
                     maxTextWidth = Math.max(maxTextWidth, itemTextSize.width);
                     if (itemTextSize.width > 0 && itemTextSize.height > 0) {
@@ -209,26 +216,26 @@ var Legend = /** @class */ (function () {
                                 (startY - textPadding_1);
                         }
                         else {
-                            textX_1 = (position_1 === 'After') ? startX - (itemTextSize.width / 2) - textPadding_1
-                                : (startX + rectWidth + itemTextSize.width / 2) + textPadding_1;
+                            textX_1 = (position_1 === 'After') ? startX - (this.textMaxWidth / 2) - textPadding_1
+                                : (startX + rectWidth + this.textMaxWidth / 2) + textPadding_1;
                             textY_1 = startY + (rectHeight / 2) + (itemTextSize.height / 4);
                         }
                     }
                     if (i === 0) {
                         itemStartX = (arrangement === 'Horizontal') ? startX : (position_1 === 'After') ?
-                            textX_1 - (itemTextSize.width / 2) : startX;
+                            textX_1 - (this.textMaxWidth / 2) : startX;
                         itemStartY = (arrangement === 'Horizontal') ? (position_1 === 'After') ? startY :
                             textY_1 - (itemTextSize.height / 2) : startY;
                         if (this.legendCollection.length === 1) {
                             legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
-                                (rectWidth + maxTextWidth + textPadding_1);
+                                (rectWidth + this.textMaxWidth + textPadding_1);
                             legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
                                 Math.abs((startY + rectHeight) - itemStartY);
                         }
                     }
                     else if (i === this.legendCollection.length - 1) {
                         legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
-                            (rectWidth + maxTextWidth + textPadding_1);
+                            (rectWidth + this.textMaxWidth + textPadding_1);
                         legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
                             Math.abs((startY + rectHeight) - itemStartY);
                     }
@@ -240,8 +247,8 @@ var Legend = /** @class */ (function () {
                         shapeBorder: this.legendCollection[i]['shapeBorder']
                     });
                 }
-                if (this.legendCollection.length === 1 && !(map.theme === 'Fluent2HighContrast' && legend.position === 'Bottom')) {
-                    legendHeight = rectHeight;
+                if (this.legendCollection.length === 1) {
+                    legendHeight = maxTextHeight + textPadding_1;
                     legendWidth = rectWidth;
                 }
                 this.legendItemRect = { x: itemStartX, y: itemStartY, width: legendWidth, height: legendHeight };
@@ -724,13 +731,13 @@ var Legend = /** @class */ (function () {
                     && idIndex_1 === i) {
                     var layer = this.maps.layers[collection[i]['data'][0]['layerIndex']];
                     var enable = void 0;
-                    var module = void 0;
+                    var legendModule = void 0;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var data = void 0;
                     if (!isNullOrUndefined(layer)) {
                         enable = (value === 'selection') ? layer.selectionSettings.enable : layer.highlightSettings.enable;
-                        module = void 0;
-                        module = (value === 'selection') ? layer.selectionSettings : layer.highlightSettings;
+                        legendModule = void 0;
+                        legendModule = (value === 'selection') ? layer.selectionSettings : layer.highlightSettings;
                         data = collection[i]['data'];
                     }
                     if (enable) {
@@ -751,8 +758,8 @@ var Legend = /** @class */ (function () {
                             if (shapeElement !== null) {
                                 var shapeMatch = true;
                                 if (this.maps.legendSelectionCollection !== null) {
-                                    for (var i_1 = 0; i_1 < this.maps.legendSelectionCollection.length; i_1++) {
-                                        if (this.maps.legendSelectionCollection[i_1]['legendElement'] === targetElement) {
+                                    for (var i_2 = 0; i_2 < this.maps.legendSelectionCollection.length; i_2++) {
+                                        if (this.maps.legendSelectionCollection[i_2]['legendElement'] === targetElement) {
                                             shapeMatch = false;
                                             break;
                                         }
@@ -774,12 +781,12 @@ var Legend = /** @class */ (function () {
                                     var shapeOldColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount];
                                     var shapeOldFillOpacity = this.legendHighlightCollection[length - 1]['shapeOldOpacity'];
                                     this.shapePreviousColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'];
-                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, isNullOrUndefined(module.opacity) ? shapeOldFillOpacity : module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
-                                    this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendHighlightColor, isNullOrUndefined(module.opacity) ? shapeOldFillOpacity : module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
+                                    this.setColor(shapeElement, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : shapeOldColor, isNullOrUndefined(legendModule.opacity) ? shapeOldFillOpacity : legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'highlight');
+                                    this.setColor(targetElement, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendHighlightColor, isNullOrUndefined(legendModule.opacity) ? shapeOldFillOpacity : legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'highlight');
                                 }
                                 else if (value === 'selection') {
                                     this.legendHighlightCollection = [];
-                                    this.maps.legendSelectionClass = module;
+                                    this.maps.legendSelectionClass = legendModule;
                                     if (j === 0) {
                                         this.pushCollection(targetElement, this.maps.legendSelectionCollection, collection[i], layer.shapeSettings);
                                         if (multiSelectEnable) {
@@ -799,8 +806,8 @@ var Legend = /** @class */ (function () {
                                     var legendSelectionColor = this.maps.legendSelectionCollection[selectLength - 1]['legendOldFill'];
                                     this.maps.legendSelectionCollection[selectLength - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     this.maps.legendSelectionCollection[selectLength - 1]['shapeOldFillColor'] = this.shapePreviousColor;
-                                    this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
-                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
+                                    this.setColor(targetElement, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendSelectionColor, legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'selection');
+                                    this.setColor(shapeElement, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendSelectionColor, legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'selection');
                                     if (this.maps.selectedElementId.indexOf(shapeElement.getAttribute('id')) === -1) {
                                         this.maps.selectedElementId.push(shapeElement.getAttribute('id'));
                                     }
@@ -898,7 +905,7 @@ var Legend = /** @class */ (function () {
             }
         }
     };
-    Legend.prototype.shapeHighLightAndSelection = function (targetElement, data, module, getValue, layerIndex) {
+    Legend.prototype.shapeHighLightAndSelection = function (targetElement, data, legendModule, getValue, layerIndex) {
         if (data !== undefined) {
             this.updateLegendElement();
             this.shapeToggled = true;
@@ -944,7 +951,7 @@ var Legend = /** @class */ (function () {
                     var selectionIndex = this.maps.selectedLegendElementId.indexOf(indexes['actualIndex']);
                     if (selectionIndex === -1) {
                         this.maps.selectedLegendElementId.push(indexes['actualIndex']);
-                        this.maps.legendSelectionClass = module;
+                        this.maps.legendSelectionClass = legendModule;
                     }
                     else {
                         if ((checkSelection <= 1) && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
@@ -1010,13 +1017,13 @@ var Legend = /** @class */ (function () {
                             }
                             else if (j === length_1 - 1) {
                                 this.removeShapeHighlightCollection();
-                                this.setColor(legendShape, !isNullOrUndefined(module.fill) ? module.fill : legendShape.getAttribute('fill'), module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
+                                this.setColor(legendShape, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendShape.getAttribute('fill'), legendModule.opacity.toString(), legendModule.border.color, legendModule.border.width.toString(), 'highlight');
                             }
                         }
                     }
                     else {
                         this.removeShapeHighlightCollection();
-                        this.setColor(legendShape, !isNullOrUndefined(module.fill) ? module.fill : legendShape.getAttribute('fill'), !isNullOrUndefined(module.opacity) ? module.opacity.toString() : '1', module.border.color, module.border.width.toString(), 'highlight');
+                        this.setColor(legendShape, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendShape.getAttribute('fill'), !isNullOrUndefined(legendModule.opacity) ? legendModule.opacity.toString() : '1', legendModule.border.color, legendModule.border.width.toString(), 'highlight');
                     }
                 }
                 else if (getValue === 'selection') {
@@ -1026,7 +1033,7 @@ var Legend = /** @class */ (function () {
                         var j = 0;
                         while (j < this.maps.legendSelectionCollection.length) {
                             if (shapeElement['LegendEle'] !== this.maps.legendSelectionCollection[j]['legendElement'] &&
-                                !module.enableMultiSelect) {
+                                !legendModule.enableMultiSelect) {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 var element = this.maps.legendSelectionCollection[j];
                                 var selectedLegendIndex = this.maps.selectedLegendElementId.indexOf(indexes['actualIndex']);
@@ -1044,14 +1051,14 @@ var Legend = /** @class */ (function () {
                     if (selectionEle && (selectionEle['IsSelected'] && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
                         || targetElement.getAttribute('class') === 'LineselectionMapStyle'))) {
                         var multiSelection = 0;
-                        if (module.enableMultiSelect) {
+                        if (legendModule.enableMultiSelect) {
                             for (var i = 0; i < shapeElement['Elements'].length; i++) {
                                 if (targetElement.getAttribute('class') === shapeElement['Elements'][i].getAttribute('class')) {
                                     multiSelection++;
                                 }
                             }
                         }
-                        if (multiSelection <= 1 && (!module.enableMultiSelect ?
+                        if (multiSelection <= 1 && (!legendModule.enableMultiSelect ?
                             this.maps.legendSelection : true)) {
                             this.maps.selectedLegendElementId.splice(this.maps.selectedLegendElementId.indexOf(indexes['actualIndex']), 1);
                             if (!isNullOrUndefined(shapeElement['LegendEle'])) {
@@ -1078,10 +1085,10 @@ var Legend = /** @class */ (function () {
                         if (addId) {
                             this.maps.selectedLegendElementId.push(indexes['actualIndex']);
                         }
-                        this.maps.legendSelectionClass = module;
+                        this.maps.legendSelectionClass = legendModule;
                         this.removeLegend(this.shapeHighlightCollection);
                         if (!isNullOrUndefined(legendShape)) {
-                            this.setColor(legendShape, !isNullOrUndefined(module.fill) ? module.fill : legendShape.getAttribute('fill'), !isNullOrUndefined(module.opacity) ? module.opacity.toString() : '1', module.border.color, module.border.width.toString(), 'selection');
+                            this.setColor(legendShape, !isNullOrUndefined(legendModule.fill) ? legendModule.fill : legendShape.getAttribute('fill'), !isNullOrUndefined(legendModule.opacity) ? legendModule.opacity.toString() : '1', legendModule.border.color, legendModule.border.width.toString(), 'selection');
                             var legendSelectionIndex = this.getIndexofLegend(this.maps.legendSelectionCollection, legendShape);
                             this.maps.legendSelectionCollection[legendSelectionIndex]['MapShapeCollection']['Elements'].push(targetElement);
                         }
@@ -1308,18 +1315,7 @@ var Legend = /** @class */ (function () {
         var spacing = 10;
         var trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
         var textSize = measureText(trimTitle, textStyle);
-        var sameTextWidth = false;
-        for (var i = 0; i < this.legendRenderingCollections.length; i++) {
-            if (this.legendRenderingCollections[i].textWidth !== this.legendRenderingCollections[0].textWidth) {
-                sameTextWidth = false;
-                break;
-            }
-            else {
-                sameTextWidth = true;
-            }
-        }
-        this.legendBorderRect = new Rect((map.theme === 'Fluent2HighContrast' && !sameTextWidth && (legend.position === 'Left' || legend.position === 'Right') && legend.mode === 'Interactive')
-            ? (this.legendItemRect.x - (spacing * 3)) : (this.legendItemRect.x - spacing), (this.legendItemRect.y - spacing - textSize.height), (this.legendItemRect.width) + (spacing * 2), (this.legendItemRect.height) + (spacing * 2) + textSize.height +
+        this.legendBorderRect = new Rect((this.legendItemRect.x - spacing), (this.legendItemRect.y - spacing - textSize.height), (this.legendItemRect.width) + (spacing * 2), (this.legendItemRect.height) + (spacing * 2) + textSize.height +
             (legend.mode === 'Interactive' ? 0 : (this.page !== 0) ? spacing : 0));
         var legendBorder = {
             color: legend.border.color || this.maps.themeStyle.legendBorderColor, opacity: legend.border.opacity,
@@ -2252,6 +2248,12 @@ var Legend = /** @class */ (function () {
         this.maps.off(Browser.touchMoveEvent, this.interactiveHandler);
         this.maps.off(Browser.touchEndEvent, this.interactiveHandler);
         this.maps.off(click, this.legendClick);
+        var pagingElement = document.getElementById(this.maps.element.id + '_Legend_Paging_Group');
+        if (pagingElement) {
+            for (var i = 0; i < pagingElement.childElementCount; i++) {
+                EventHandler.remove(pagingElement.childNodes[i], Browser.touchStartEvent, this.changeNextPage);
+            }
+        }
     };
     Legend.prototype.getLegendData = function (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/maps/layers/marker.d.ts

@@ -6,7 +6,6 @@ import { LayerSettings, MarkerClusterData } from '../index';
 export declare class Marker {
     private maps;
     private isMarkerExplode;
-    private trackElements;
     private markerSVGObject;
     initialMarkerCluster: number[][][];
     zoomedMarkerCluster: number[][][];
@@ -77,6 +76,14 @@ export declare class Marker {
      * @private
      */
     markerClusterMouseMove(e: PointerEvent): void;
+    /**
+     * This method is used to return whether the clustering is enabled in any marker settings.
+     *
+     * @param {LayerSettings} layer - Specifies the layer settings
+     * @returns {boolean}  - Specifies whether the clustering is enabled in any marker settings.
+     * @private
+     */
+    allowInnerClusterSetting(layer: LayerSettings): boolean;
     /**
      * @private
      * @returns {void}

package/src/maps/layers/marker.js

@@ -9,7 +9,6 @@ import { getElementByID, mergeSeparateCluster, clusterSeparate, removeElement, g
 var Marker = /** @class */ (function () {
     function Marker(maps) {
         this.maps = maps;
-        this.trackElements = [];
         this.sameMarkerData = [];
         this.initialMarkerCluster = [];
         this.zoomedMarkerCluster = [];
@@ -27,23 +26,43 @@ var Marker = /** @class */ (function () {
         var templateFn;
         var markerCount = 0;
         var nullCount = 0;
+        var isMarkerTemplateNewCreation = false;
         var markerTemplateCount = 0;
         maps.translateType = 'marker';
         var currentLayer = maps.layersCollection[layerIndex];
-        this.markerSVGObject = maps.renderer.createGroup({
-            id: maps.element.id + '_Markers_Group',
-            class: 'GroupElement'
-        });
+        var markerElement = layerElement.querySelectorAll('#' + maps.element.id + '_Markers_Group');
+        if (markerElement.length > 0) {
+            this.markerSVGObject = markerElement[0];
+            this.markerSVGObject.innerHTML = '';
+            isMarkerTemplateNewCreation = true;
+        }
+        else {
+            this.markerSVGObject = maps.renderer.createGroup({
+                id: maps.element.id + '_Markers_Group',
+                class: 'GroupElement'
+            });
+        }
         this.markerSVGObject.style.pointerEvents = 'auto';
-        var markerTemplateEle = createElement('div', {
-            id: maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
-            className: maps.element.id + '_template'
-        });
-        markerTemplateEle.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
-            'top:' + maps.mapAreaRect.y + 'px;' +
-            'left:' + maps.mapAreaRect.x + 'px;' +
-            'height:' + maps.mapAreaRect.height + 'px;' +
-            'width:' + maps.mapAreaRect.width + 'px;';
+        var secondaryElement = getElementByID(maps.element.id + '_Secondary_Element');
+        var markerTemplateElement = secondaryElement.querySelectorAll('#' + maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group');
+        var markerTemplateEle;
+        if (markerTemplateElement && markerTemplateElement.length > 0 && markerTemplateElement[0].childElementCount > 0) {
+            markerTemplateEle = getElementByID(maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group');
+            markerTemplateEle.innerHTML = '';
+            isMarkerTemplateNewCreation = true;
+        }
+        else {
+            markerTemplateEle = createElement('div', {
+                id: maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
+                className: maps.element.id + '_template'
+            });
+            markerTemplateEle.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
+                'top:' + maps.mapAreaRect.y + 'px;' +
+                'left:' + maps.mapAreaRect.x + 'px;' +
+                'height:' + maps.mapAreaRect.height + 'px;' +
+                'width:' + maps.mapAreaRect.width + 'px;';
+        }
+        var allowInnerClusterSetting = this.allowInnerClusterSetting(currentLayer);
         var allowAnimation = (currentLayer.animationDuration !== 0 || animationMode === 'Enable') || isNullOrUndefined(maps.zoomModule);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var translatePoint;
@@ -55,13 +74,20 @@ var Marker = /** @class */ (function () {
         Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSettings, markerIndex) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
+            markerCount = 0;
             if (!isNullOrUndefined(markerSettings.dataSource)) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 Array.prototype.forEach.call(markerData, function (data, dataIndex) {
                     maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;
                     var eventArgs = {
-                        cancel: false, name: markerRendering, fill: markerSettings.fill, height: markerSettings.height,
-                        width: markerSettings.width, imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
+                        cancel: false, name: markerRendering, fill: markerSettings.fill,
+                        height: (!isNullOrUndefined(markerSettings.heightValuePath) &&
+                            !isNullOrUndefined(data[markerSettings.heightValuePath]) ?
+                            data[markerSettings.heightValuePath] : markerSettings.height),
+                        width: (!isNullOrUndefined(markerSettings.widthValuePath) &&
+                            !isNullOrUndefined(data[markerSettings.widthValuePath]) ?
+                            data[markerSettings.widthValuePath] : markerSettings.width),
+                        imageUrl: markerSettings.imageUrl, shape: markerSettings.shape,
                         template: markerSettings.template, data: data, maps: maps, marker: markerSettings,
                         border: markerSettings.border, colorValuePath: markerSettings.colorValuePath,
                         shapeValuePath: markerSettings.shapeValuePath, imageUrlValuePath: markerSettings.imageUrlValuePath
@@ -87,12 +113,14 @@ var Marker = /** @class */ (function () {
                             var scale = type === 'AddMarker' ? maps.scale : translatePoint['scale'];
                             var transPoint = type === 'AddMarker' ? maps.translatePoint : translatePoint['location'];
                             if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                                isMarkerTemplateNewCreation = false;
                                 markerTemplateCount++;
                                 markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateEle, location_1, transPoint, scale, offset, maps);
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 maps.renderReactTemplates();
                             }
                             else if (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
+                                isMarkerTemplateNewCreation = true;
                                 markerCount++;
                                 marker(eventArgs, markerSettings, markerData, dataIndex, location_1, transPoint, markerID, offset, scale, maps, _this.markerSVGObject);
                             }
@@ -104,32 +132,55 @@ var Marker = /** @class */ (function () {
                             maps.markerNullCount + 1 : maps.markerNullCount;
                         var markerDataLength = markerData.length - maps.markerNullCount;
                         var isMarkersClustered = false;
-                        if (_this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
-                            layerElement.appendChild(_this.markerSVGObject);
-                            if (currentLayer.markerClusterSettings.allowClustering) {
-                                maps.svgObject.appendChild(_this.markerSVGObject);
-                                maps.element.appendChild(maps.svgObject);
+                        var markerGroup = (markerSettings.clusterSettings.allowClustering ||
+                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1))
+                            ? _this.markerSVGObject.querySelectorAll("[id*='LayerIndex_" + layerIndex + "_MarkerIndex_" + markerIndex + "']:not([id*='_Group'])")
+                            : _this.markerSVGObject.childNodes;
+                        var templateCount = _this.markerSVGObject.childNodes === markerGroup ? markerTemplateCount : 0;
+                        if (markerGroup.length === (markerDataLength - templateCount - nullCount) && (type !== 'Template')) {
+                            if (markerElement.length === 0) {
+                                layerElement.appendChild(_this.markerSVGObject);
+                            }
+                            if (markerSettings.clusterSettings.allowClustering || !allowInnerClusterSetting &&
+                                currentLayer.markerClusterSettings.allowClustering) {
+                                if (markerElement.length === 0) {
+                                    maps.svgObject.appendChild(_this.markerSVGObject);
+                                    maps.element.appendChild(maps.svgObject);
+                                }
                                 if ((currentLayer.urlTemplate.indexOf('openstreetmap') !== -1 && isNullOrUndefined(currentLayer.shapeData))
                                     && maps.zoomSettings.enable) {
-                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
-                                    layerElement.appendChild(_this.markerSVGObject);
+                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, markerIndex, _this.markerSVGObject, layerElement, true, false, null, allowInnerClusterSetting);
+                                    if (markerElement.length === 0) {
+                                        layerElement.appendChild(_this.markerSVGObject);
+                                    }
                                 }
                                 else {
-                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, _this.markerSVGObject, layerElement, true, false);
+                                    isMarkersClustered = clusterTemplate(currentLayer, _this.markerSVGObject, maps, layerIndex, markerIndex, _this.markerSVGObject, layerElement, true, false, translatePoint, allowInnerClusterSetting);
                                 }
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 maps.renderReactTemplates();
                             }
                         }
-                        if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
-                            getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
+                        var markerTemplateGroup = (markerSettings.clusterSettings.allowClustering ||
+                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1))
+                            ? markerTemplateEle.querySelectorAll("[id*='LayerIndex_" + layerIndex + "_MarkerIndex_" + markerIndex + "']:not([id*='_Group'])")
+                            : markerTemplateEle.childNodes;
+                        if (markerTemplateGroup.length === (markerDataLength - markerCount - nullCount) && getElementByID(maps.element.id + '_Secondary_Element')) {
+                            if (!isMarkerTemplateNewCreation) {
+                                getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
+                            }
                             if (maps.checkInitialRender) {
-                                if (currentLayer.markerClusterSettings.allowClustering && !isMarkersClustered) {
-                                    clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, _this.markerSVGObject, layerElement, false, false);
+                                if ((markerSettings.clusterSettings.allowClustering || !allowInnerClusterSetting &&
+                                    currentLayer.markerClusterSettings.allowClustering) && !isMarkersClustered) {
+                                    clusterTemplate(currentLayer, markerTemplateEle, maps, layerIndex, markerIndex, _this.markerSVGObject, layerElement, false, false, translatePoint, allowInnerClusterSetting);
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     maps.renderReactTemplates();
                                 }
                             }
+                            if (currentLayer.markerClusterSettings.allowClustering && markerElement.length > 0) {
+                                var layerCollectionEle = getElementByID(maps.element.id + '_Layer_Collections');
+                                layerCollectionEle.appendChild(layerElement);
+                            }
                         }
                     });
                 });
@@ -410,16 +461,18 @@ var Marker = /** @class */ (function () {
         var markCollection = [];
         var clusterCollection = [];
         var marker;
-        this.maps.markerClusterExpand = layer.markerClusterSettings.allowClusterExpand;
         if (target.indexOf('_MarkerIndex_') > -1) {
             var markerIndex = parseInt(id[1].split('_MarkerIndex_')[1].split('_')[0], 10);
             var dataIndex = parseInt(id[1].split('_dataIndex_')[1].split('_')[0], 10);
             marker = layer.markerSettings[markerIndex];
+            var allowInnerClusterSetting = this.allowInnerClusterSetting(layer);
+            this.maps.markerClusterExpand = !allowInnerClusterSetting && layer.markerClusterSettings.allowClustering ?
+                layer.markerClusterSettings.allowClusterExpand : marker.clusterSettings.allowClusterExpand;
             if (!isNaN(markerIndex)) {
                 data = marker.dataSource[dataIndex];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var collection_1 = [];
-                if (!marker.template && (target.indexOf('_cluster_') > -1) && (this.maps.layers[index].markerClusterSettings.allowClusterExpand)) {
+                if (!marker.template && (target.indexOf('_cluster_') > -1) && this.maps.markerClusterExpand) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     Array.prototype.forEach.call(marker.dataSource, function (location, index) {
                         if (location['latitude'] === data['latitude'] && location['longitude'] === data['longitude']) {
@@ -429,8 +482,10 @@ var Marker = /** @class */ (function () {
                 }
                 if ((target.indexOf('_cluster_') > -1)) {
                     var isClusterSame = false;
-                    var clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? layer.markerClusterSettings.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : layer.markerClusterSettings.shape === 'Balloon' ? target + '_Group' : target);
-                    var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
+                    var cluster = !allowInnerClusterSetting && layer.markerClusterSettings.allowClustering ?
+                        layer.markerClusterSettings : layer.markerSettings[markerIndex].clusterSettings;
+                    var clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? cluster.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : cluster.shape === 'Balloon' ? target + '_Group' : target);
+                    var indexes = cluster.shape === 'Balloon' ? clusterElement.children[0].textContent.split(',').map(Number) : clusterElement.textContent.split(',').map(Number);
                     collection_1 = [];
                     for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
                         var i = indexes_1[_i];
@@ -500,6 +555,23 @@ var Marker = /** @class */ (function () {
         };
         this.maps.trigger(markerClusterMouseMove, eventArgs);
     };
+    /**
+     * This method is used to return whether the clustering is enabled in any marker settings.
+     *
+     * @param {LayerSettings} layer - Specifies the layer settings
+     * @returns {boolean}  - Specifies whether the clustering is enabled in any marker settings.
+     * @private
+     */
+    Marker.prototype.allowInnerClusterSetting = function (layer) {
+        var allowInnerClusterSetting = false;
+        for (var markerIndex = 0; markerIndex < layer.markerSettings.length; markerIndex++) {
+            if (layer.markerSettings[markerIndex].clusterSettings.allowClustering) {
+                allowInnerClusterSetting = true;
+                break;
+            }
+        }
+        return allowInnerClusterSetting;
+    };
     /**
      * @private
      * @returns {void}
@@ -526,7 +598,6 @@ var Marker = /** @class */ (function () {
      */
     Marker.prototype.destroy = function () {
         this.maps = null;
-        this.trackElements = [];
         this.markerSVGObject = null;
         this.sameMarkerData = [];
         this.initialMarkerCluster = [];

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

@@ -1,4 +1,4 @@
-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, getProcessedMarginValue } 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, PolygonSettingsModel } 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, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { ILoadEventArgs, ILoadedEventArgs, IMinMaxLatitudeLongitude, 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, BingMap } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { Polygon } from './layers/polygon';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, getProcessedMarginValue } 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, PolygonSettingsModel } 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, doubleClick, resize, shapeSelected, zoomIn, mouseMove } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { ILoadEventArgs, ILoadedEventArgs, IMinMaxLatitudeLongitude, IMouseEventArgs, IMouseMoveEventArgs, 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, BingMap } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { Polygon } from './layers/polygon';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';
 
 /**
@@ -329,6 +329,13 @@ export interface MapsModel extends ComponentModel{
      */
     markerMouseMove?: EmitType<IMarkerMoveEventArgs>;
 
+    /**
+     * This event is triggered when the mouse pointer moves over the map.
+     *
+     * @event mouseMove
+     */
+    mouseMove?: EmitType<IMouseMoveEventArgs>;
+
     /**
      * Triggers before the data-label gets rendered.
      *