@syncfusion/ej2-maps 27.2.2 → 28.1.38

package/src/maps/utils/helper.js

@@ -458,6 +458,7 @@ export function measureTextElement(text, font) {
     var metrics = context.measureText(text);
     var width = metrics.width;
     var height = parseFloat(font.size) || 16;
+    canvas = null;
     return new Size(width, height);
 }
 /**
@@ -1000,14 +1001,19 @@ function updateImageUrl(eventArgs, data) {
  * @param {HTMLElement | Element} markerTemplate - Specifies the marker template
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {number} layerIndex - Specifies the layer index
+ * @param {number} markerIndex - Specifies the marker index
  * @param {Element} markerCollection - Specifies the marker collection
  * @param {Element} layerElement - Specifies the layer element
  * @param {boolean} check - Specifies the boolean value
  * @param {boolean} zoomCheck - Specifies the boolean value
+ * @param {any} translatePoint - Specifies the data
+ * @param {boolean} allowInnerClusterSetting - Specifies the boolean value
  * @returns {boolean} -Returns boolean for cluster completion
  * @private
  */
-export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerCollection, layerElement, check, zoomCheck) {
+export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerIndex, markerCollection, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+layerElement, check, zoomCheck, translatePoint, allowInnerClusterSetting) {
     var bounds1;
     var bounds2;
     var colloideBounds = [];
@@ -1016,7 +1022,7 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
     var tempY = 0;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var data;
-    var style = currentLayer.markerClusterSettings.labelStyle;
+    var markerSetting = currentLayer.markerSettings[markerIndex];
     var options;
     var textElement;
     var tempElement1;
@@ -1026,7 +1032,9 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
     var postionY = (15 / 4);
     var m = 0;
     var indexCollection = [];
-    var clusters = currentLayer.markerClusterSettings;
+    var clusters = !allowInnerClusterSetting && currentLayer.markerClusterSettings.allowClustering ?
+        currentLayer.markerClusterSettings : markerSetting.clusterSettings;
+    var style = clusters.labelStyle;
     var clusterGroup = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster' });
     var eventArg = {
         cancel: false, name: markerClusterRendering, fill: clusters.fill, height: clusters.height,
@@ -1042,9 +1050,13 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
     }
     var isClusteringCompleted = false;
     var currentZoomFactor = !maps.isTileMap ? maps.mapScaleValue : maps.tileZoomLevel;
+    var markerGroup = (markerSetting.clusterSettings.allowClustering
+        || (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1))
+        ? markerTemplate.querySelectorAll("[id*='LayerIndex_" + layerIndex + "_MarkerIndex_" + markerIndex + "']:not([id*='_Group'])")
+        : markerTemplate.childNodes;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     maps.trigger('markerClusterRendering', eventArg, function (clusterargs) {
-        Array.prototype.forEach.call(markerTemplate.childNodes, function (markerElement, o) {
+        Array.prototype.forEach.call(markerGroup, function (markerElement, o) {
             indexCollection = [];
             if (markerElement['style']['visibility'] !== 'hidden') {
                 tempElement = markerElement;
@@ -1054,19 +1066,19 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                     var list = (maps.markerModule.zoomedMarkerCluster.length > 0 && maps.markerModule.zoomedMarkerCluster[layerIndex] && maps.markerModule.zoomedMarkerCluster[layerIndex][o] && maps.markerModule.zoomedMarkerCluster[layerIndex][o].length > 0)
                         || (maps.markerModule.initialMarkerCluster.length > 0 && maps.markerModule.initialMarkerCluster[layerIndex] && maps.markerModule.initialMarkerCluster[layerIndex][o] && maps.markerModule.initialMarkerCluster[layerIndex][o].length > 0) ?
                         (maps.previousScale < currentZoomFactor ? maps.markerModule.zoomedMarkerCluster[layerIndex][o] : maps.markerModule.initialMarkerCluster[layerIndex][o]) : null;
-                    if (!isNullOrUndefined(list) && list.length !== 0) {
+                    if (!isNullOrUndefined(list) && list.length !== 0 && !markerSetting.clusterSettings.allowClustering) {
                         Array.prototype.forEach.call(list, function (currentIndex) {
                             if (o !== currentIndex) {
                                 var otherMarkerElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
-                                    + 0 + '_dataIndex_' + currentIndex);
-                                if (otherMarkerElement['style']['visibility'] !== 'hidden') {
+                                    + markerIndex + '_dataIndex_' + currentIndex);
+                                if (otherMarkerElement && otherMarkerElement['style']['visibility'] !== 'hidden') {
                                     markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, currentIndex);
                                 }
                             }
                         });
                     }
                     else {
-                        Array.prototype.forEach.call(markerTemplate.childNodes, function (otherMarkerElement, p) {
+                        Array.prototype.forEach.call(markerGroup, function (otherMarkerElement, p) {
                             if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
                                 markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, p);
                             }
@@ -1082,23 +1094,23 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                         tempY = (tempY - ((maps.availableSize.height <= containerRect['height']) ?
                             containerRect['top'] : (containerRect['bottom'] - containerRect['top'])));
                         var dataIndex = parseInt(markerElement['id'].split('_dataIndex_')[1].split('_')[0], 10);
-                        var markerIndex = parseInt(markerElement['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
-                        var markerSetting = currentLayer.markerSettings[markerIndex];
+                        var markerIndex_1 = parseInt(markerElement['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                        var markerSetting_1 = currentLayer.markerSettings[markerIndex_1];
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var markerData = markerSetting.dataSource[dataIndex];
+                        var markerData = markerSetting_1.dataSource[dataIndex];
                         var location_1;
-                        var longitude = (!isNullOrUndefined(markerSetting.longitudeValuePath)) ?
-                            Number(getValueFromObject(markerData, markerSetting.longitudeValuePath)) :
+                        var longitude = (!isNullOrUndefined(markerSetting_1.longitudeValuePath)) ?
+                            Number(getValueFromObject(markerData, markerSetting_1.longitudeValuePath)) :
                             !isNullOrUndefined(markerData['longitude']) ? parseFloat(markerData['longitude']) :
                                 !isNullOrUndefined(markerData['Longitude']) ? parseFloat(markerData['Longitude']) : 0;
-                        var latitude = (!isNullOrUndefined(markerSetting.latitudeValuePath)) ?
-                            Number(getValueFromObject(markerData, markerSetting.latitudeValuePath)) :
+                        var latitude = (!isNullOrUndefined(markerSetting_1.latitudeValuePath)) ?
+                            Number(getValueFromObject(markerData, markerSetting_1.latitudeValuePath)) :
                             !isNullOrUndefined(markerData['latitude']) ? parseFloat(markerData['latitude']) :
                                 !isNullOrUndefined(markerData['Latitude']) ? parseFloat(markerData['Latitude']) : 0;
                         if (!maps.isTileMap) {
                             location_1 = convertGeoToPoint(latitude, longitude, factor, currentLayer, maps);
                         }
-                        else if (maps.isTileMap && !maps.zoomSettings.enable) {
+                        else if (maps.isTileMap) {
                             location_1 = convertTileLatLongToPoint(new Point(longitude, latitude), maps.tileZoomLevel, maps.tileTranslatePoint, true);
                         }
                         markerElement['style']['visibility'] = 'hidden';
@@ -1123,12 +1135,16 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                         }
                         tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : tempX + postionY - (eventArg.width / 2);
                         tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : tempY - (eventArg.height / 2);
-                        if (maps.isTileMap && !maps.zoomSettings.enable) {
+                        if (maps.isTileMap) {
                             tempX = location_1.x;
                             tempY = location_1.y;
                         }
-                        var clusterID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m);
-                        var labelID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m) + '_datalabel_' + m;
+                        else {
+                            tempX = (((location_1.x + ((!isNullOrUndefined(maps.translatePoint) && maps.translatePoint.x !== 0 && !maps.isResize) ? maps.translatePoint.x : translatePoint.location.x)) * (isNullOrUndefined(maps.scale) ? translatePoint.scale : maps.scale)) + markerSetting_1.offset.x);
+                            tempY = (((location_1.y + ((!isNullOrUndefined(maps.translatePoint) && maps.translatePoint.y !== 0 && !maps.isResize) ? maps.translatePoint.y : translatePoint.location.y)) * (isNullOrUndefined(maps.scale) ? translatePoint.scale : maps.scale)) + markerSetting_1.offset.y);
+                        }
+                        var clusterID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex_1 + '_dataIndex_' + dataIndex + '_cluster_' + (m);
+                        var labelID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex_1 + '_dataIndex_' + dataIndex + '_cluster_' + (m) + '_datalabel_' + m;
                         m++;
                         var ele = drawSymbols(shapeCustom['shape'], shapeCustom['imageUrl'], { x: 0, y: 0 }, clusterID, shapeCustom, markerCollection, maps);
                         ele.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
@@ -1141,8 +1157,16 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                         options = new TextOption(labelID, (0), postionY, 'middle', (colloideBounds.length + 1).toString(), '', '');
                         textElement = renderTextElement(options, style, style.color, markerCollection);
                         textElement.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
-                        clusterGroup.appendChild(textElement);
-                        clusterGroup.appendChild(ele);
+                        var eleMarkerIndex = parseFloat(ele.id.split('_MarkerIndex_')[1]);
+                        if ((markerSetting_1.clusterSettings.allowClustering && eleMarkerIndex === markerIndex_1) ||
+                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex_1)) {
+                            clusterGroup.appendChild(ele);
+                            clusterGroup.appendChild(textElement);
+                        }
+                        else {
+                            clusterGroup.appendChild(textElement);
+                            clusterGroup.appendChild(ele);
+                        }
                     }
                 }
                 colloideBounds = [];
@@ -1155,7 +1179,7 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
         layerElement.appendChild(clusterGroup);
         maps.svgObject.appendChild(layerElement);
         maps.element.appendChild(maps.svgObject);
-        if (clusters.allowDeepClustering) {
+        if (clusters.allowDeepClustering && !allowInnerClusterSetting) {
             Array.prototype.forEach.call(clusterGroup.childNodes, function (clusterElement, o) {
                 if (clusterElement['style']['visibility'] !== 'hidden') {
                     tempElement = clusterElement;
@@ -1171,7 +1195,16 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                                         clusterColloideBounds.push(tempElement1);
                                         clusterColloideBounds.push(clusterGroup.childNodes[p - 1]);
                                         clusterGroup.childNodes[p]['style']['visibility'] = 'hidden';
-                                        clusterGroup.childNodes[p - 1]['style']['visibility'] = 'hidden';
+                                        var eleMarkerIndex = !isNullOrUndefined(clusterGroup.childNodes[p + 1]) ?
+                                            parseFloat(clusterGroup.childNodes[p + 1].id.split('_MarkerIndex_')[1]) : null;
+                                        if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
+                                            (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
+                                            clusterGroup.childNodes[p + 1]['style']['visibility'] = 'hidden';
+                                        }
+                                        else {
+                                            eleMarkerIndex = parseFloat(clusterGroup.childNodes[p - 1].id.split('_MarkerIndex_')[1]);
+                                            clusterGroup.childNodes[p - 1]['style']['visibility'] = (eleMarkerIndex === markerIndex) ? 'hidden' : clusterGroup.childNodes[p - 1]['style']['visibility'];
+                                        }
                                         indexCollection.push(p);
                                     }
                                 }
@@ -1187,7 +1220,16 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                                 else {
                                     tempElement.textContent = tempElement.textContent + ',' + clusterColloideBounds[i].textContent;
                                 }
-                                clusterGroup.childNodes[o - 1].textContent = ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
+                                var eleMarkerIndex = parseFloat(clusterGroup.childNodes[o + 1].id.split('_MarkerIndex_')[1]);
+                                if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
+                                    (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
+                                    clusterGroup.childNodes[o + 1].textContent = ((+(clusterGroup.childNodes[o + 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
+                                }
+                                else {
+                                    eleMarkerIndex = parseFloat(clusterGroup.childNodes[o - 1].id.split('_MarkerIndex_')[1]);
+                                    clusterGroup.childNodes[o - 1].textContent = (eleMarkerIndex === markerIndex) ?
+                                        ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString() : clusterGroup.childNodes[o - 1].textContent;
+                                }
                                 i++;
                             }
                         }
@@ -1197,7 +1239,16 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
             });
         }
         while (0 < clusterGroup.childNodes.length) {
-            markerCollection.insertBefore(clusterGroup.childNodes[0], markerCollection.firstChild);
+            var eleMarkerIndex = parseFloat(clusterGroup.childNodes[0].id.split('_MarkerIndex_')[1]);
+            if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
+                (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
+                markerCollection.insertBefore(clusterGroup.childNodes[0], null);
+            }
+            else {
+                if (eleMarkerIndex === markerIndex) {
+                    markerCollection.insertBefore(clusterGroup.childNodes[0], markerCollection.firstChild);
+                }
+            }
         }
         if (!check) {
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
@@ -1303,6 +1354,10 @@ export function mergeSeparateCluster(sameMarkerData, maps) {
     for (var i = 0; i < markerDataLength; i++) {
         markerEle = marker.shape === 'Balloon' && isNullOrUndefined(marker.template) ? getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         markerEle['style']['visibility'] = 'hidden';
+        if (markerEle.id.indexOf('Group') > -1) {
+            var marker_1 = getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+            marker_1['style']['visibility'] = 'hidden';
+        }
     }
     removeElement(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine');
 }
@@ -1324,9 +1379,13 @@ export function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     var getElementFunction = isDom ? getElement : markerElement.querySelector.bind(markerElement);
     var getQueryConnect = isDom ? '' : '#';
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
-    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
+    var layer = maps.layers[layerIndex];
+    var allowInnerClusterSetting = maps.markerModule.allowInnerClusterSetting(layer);
+    var cluster = !allowInnerClusterSetting && layer.markerClusterSettings.allowClustering ?
+        layer.markerClusterSettings : layer.markerSettings[markerIndex].clusterSettings;
+    var marker = layer.markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
+    var clusterEle = cluster.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
     var clusterEleLabel = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'hidden');
     clusterEleLabel.setAttribute('visibility', 'hidden');
@@ -1335,6 +1394,7 @@ export function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     var width = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().width : marker.width;
     var centerX = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[0];
     var centerY = +clusterEle.getAttribute('transform').split('translate(')[1].trim().split(' ')[1].split(')')[0].trim();
+    width = (typeof width === 'string' ? parseFloat(width) : width);
     var radius = width + 5;
     var area = 2 * 3.14 * radius;
     var totalMarker = 0;
@@ -1377,14 +1437,20 @@ export function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
             markerEle.setAttribute('transform', 'translate( ' + x1 + ' ' + y1 + ')');
         }
         markerEle['style']['visibility'] = 'visible';
+        if (markerEle.id.indexOf('Group') > -1) {
+            var marker_2 = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+            marker_2['style']['visibility'] = 'visible';
+        }
         newAngle += angle;
     }
-    var connectorLine = maps.layers[layerIndex].markerClusterSettings.connectorLineSettings;
+    var connectorLine = cluster.connectorLineSettings;
     var options = {
         d: path, id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_markerClusterConnectorLine', stroke: connectorLine.color,
         'fill-opacity': connectorLine.opacity, 'stroke-opacity': connectorLine.opacity, 'stroke-width': connectorLine.width
     };
     markerElement = isDom ? getElementFunction(maps.element.id + '_Markers_Group') : markerElement;
+    var layerElement = getElementFunction(maps.element.id + '_LayerIndex_' + layerIndex);
+    markerElement = layerElement.querySelector('#' + markerElement.id);
     var groupEle = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine' });
     groupEle.appendChild(maps.renderer.drawPath(options));
     if (marker.shape === 'Balloon') {
@@ -1464,8 +1530,9 @@ export function markerTemplate(eventArgs, templateFn, markerID, data, markerInde
         for (var i = 0; i < markerElement.children.length; i++) {
             markerElement.children[i].style.pointerEvents = 'auto';
         }
-        markerElement.style.left = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x - maps.mapAreaRect.x + 'px';
-        markerElement.style.top = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y - maps.mapAreaRect.y + 'px';
+        markerElement.style.left = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x - (maps.isTileMap ? 0 : maps.mapAreaRect.x) + 'px';
+        markerElement.style.top = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y - (maps.isTileMap ? 0 : maps.mapAreaRect.y) + 'px';
+        markerElement.style.transform = 'translate(-50%, -50%)';
         markerTemplate.appendChild(markerElement);
     }
     return markerTemplate;
@@ -2533,22 +2600,6 @@ export function fixInitialScaleForTile(map) {
 export function getElementByID(id) {
     return document.getElementById(id);
 }
-/**
- * Function to get clientElement from id.
- *
- * @param {string} id - Specifies the id
- * @returns {Element} - Returns the element
- * @private
- */
-export function getClientElement(id) {
-    var element = document.getElementById(id);
-    if (!isNullOrUndefined(element)) {
-        return element.getClientRects()[0];
-    }
-    else {
-        return null;
-    }
-}
 /**
  * Function to return the number value for the string value.
  *
@@ -2858,6 +2909,11 @@ export function elementAnimate(element, delay, duration, point, maps, ele, radiu
                 element.setAttribute('transform', 'translate( ' + (centerX - (radius * height)) + ' ' + (centerY - (radius * height)) +
                     ' ) scale(' + height + ')');
             }
+            else {
+                if (maps.zoomModule.isPanningInProgress) {
+                    transform = element.getAttribute('transform');
+                }
+            }
         },
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         end: function (model) {