@syncfusion/ej2-maps 23.2.7 → 24.1.47

package/src/maps/utils/helper.js

@@ -215,6 +215,25 @@ export function convertGeoToPoint(latitude, longitude, factor, layer, mapModel)
     }
     return new Point(x, y);
 }
+/**
+ * @private
+ */
+export function calculatePolygonPath(maps, factor, currentLayer, markerData) {
+    var path = '';
+    Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+        var lat = data.latitude;
+        var lng = data.longitude;
+        var location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
+        if (dataIndex === 0) {
+            path += 'M ' + location.x + ' ' + location.y;
+        }
+        else {
+            path += ' L ' + location.x + ' ' + location.y;
+        }
+    });
+    path += ' z ';
+    return path;
+}
 /**
  * Converting tile latitude and longitude to point
  *
@@ -358,6 +377,17 @@ var Point = /** @class */ (function () {
     return Point;
 }());
 export { Point };
+/**
+ * Defines the latitude and longitude values that define a map location.
+ */
+var Coordinate = /** @class */ (function () {
+    function Coordinate(latitude, longitude) {
+        this.latitude = latitude;
+        this.longitude = longitude;
+    }
+    return Coordinate;
+}());
+export { Coordinate };
 /**
  * Map internal class for min and max
  *
@@ -965,46 +995,50 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
         width: clusters.width, imageUrl: clusters.imageUrl, shape: clusters.shape,
         data: data, maps: maps, cluster: clusters, border: clusters.border
     };
+    var containerRect = maps.element.getBoundingClientRect();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var translatePoint = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
+    var factor;
+    if (!maps.isTileMap) {
+        factor = maps.mapLayerPanel.calculateFactor(currentLayer);
+    }
+    var isClusteringCompleted = false;
     maps.trigger('markerClusterRendering', eventArg, function (clusterargs) {
-        for (var o = 0; o < markerTemplate.childElementCount; o++) {
+        Array.prototype.forEach.call(markerTemplate.childNodes, function (markerElement, o) {
             indexCollection = [];
-            if (markerTemplate.childNodes[o]['style']['visibility'] !== 'hidden') {
-                tempElement = markerTemplate.childNodes[o];
+            if (markerElement['style']['visibility'] !== 'hidden') {
+                tempElement = markerElement;
                 bounds1 = tempElement.getBoundingClientRect();
                 indexCollection.push(o);
                 if (!isNullOrUndefined(bounds1)) {
-                    for (var p = o + 1; p < markerTemplate.childElementCount; p++) {
-                        if (markerTemplate.childNodes[p]['style']['visibility'] !== 'hidden') {
-                            tempElement = markerTemplate.childNodes[p];
+                    Array.prototype.forEach.call(markerTemplate.childNodes, function (otherMarkerElement, p) {
+                        if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
+                            tempElement = otherMarkerElement;
                             bounds2 = tempElement.getBoundingClientRect();
                             if (!isNullOrUndefined(bounds2)) {
                                 if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
                                     || bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
                                     colloideBounds.push(bounds2);
-                                    markerTemplate.childNodes[p]['style']['visibility'] = 'hidden';
+                                    otherMarkerElement['style']['visibility'] = 'hidden';
                                     indexCollection.push(p);
                                 }
                             }
                         }
-                    }
+                    });
                     tempX = bounds1.left + bounds1.width / 2;
                     tempY = bounds1.top + bounds1.height;
                     if (colloideBounds.length > 0) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         indexCollection = indexCollection.filter(function (item, index, value) { return value.indexOf(item) === index; });
-                        var container = maps.element.getBoundingClientRect();
-                        tempX = tempX - container['left'];
-                        tempY = (tempY - ((maps.availableSize.height <= container['height']) ?
-                            container['top'] : (container['bottom'] - container['top'])));
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var translate = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
-                        var dataIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_dataIndex_')[1].split('_')[0], 10);
-                        var markerIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                        tempX = tempX - containerRect['left'];
+                        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];
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var markerData = markerSetting.dataSource[dataIndex];
-                        var factor = void 0;
-                        var location_1 = void 0;
+                        var location_1;
                         var longitude = (!isNullOrUndefined(markerSetting.longitudeValuePath)) ?
                             Number(getValueFromObject(markerData, markerSetting.longitudeValuePath)) :
                             !isNullOrUndefined(markerData['longitude']) ? parseFloat(markerData['longitude']) :
@@ -1014,45 +1048,30 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                             !isNullOrUndefined(markerData['latitude']) ? parseFloat(markerData['latitude']) :
                                 !isNullOrUndefined(markerData['Latitude']) ? parseFloat(markerData['Latitude']) : 0;
                         if (!maps.isTileMap) {
-                            factor = maps.mapLayerPanel.calculateFactor(currentLayer);
                             location_1 = convertGeoToPoint(latitude, longitude, factor, currentLayer, maps);
                         }
                         else if (maps.isTileMap && !maps.zoomSettings.enable) {
                             location_1 = convertTileLatLongToPoint(new Point(longitude, latitude), maps.tileZoomLevel, maps.tileTranslatePoint, true);
                         }
-                        markerTemplate.childNodes[o]['style']['visibility'] = 'hidden';
-                        var clusters_1 = currentLayer.markerClusterSettings;
+                        markerElement['style']['visibility'] = 'hidden';
                         if (eventArg.cancel) {
                             shapeCustom = {
-                                size: new Size(clusters_1.width, clusters_1.height),
-                                fill: clusters_1.fill, borderColor: clusters_1.border.color,
-                                borderWidth: clusters_1.border.width, opacity: clusters_1.opacity,
-                                dashArray: clusters_1.dashArray
+                                size: new Size(clusters.width, clusters.height),
+                                fill: clusters.fill, borderColor: clusters.border.color,
+                                borderWidth: clusters.border.width, opacity: clusters.opacity,
+                                dashArray: clusters.dashArray, imageUrl: clusters.imageUrl, shape: clusters.shape
                             };
-                            shapeCustom['fill'] = clusters_1.fill;
-                            shapeCustom['size']['width'] = clusters_1.width;
-                            shapeCustom['size']['height'] = clusters_1.height;
-                            shapeCustom['imageUrl'] = clusters_1.imageUrl;
-                            shapeCustom['shape'] = clusters_1.shape;
-                            shapeCustom['borderColor'] = clusters_1.border.color;
-                            shapeCustom['borderWidth'] = clusters_1.border.width;
-                            shapeCustom['borderOpacity'] = isNullOrUndefined(clusters_1.border.opacity) ? clusters_1.opacity : clusters_1.border.opacity;
+                            shapeCustom['borderOpacity'] = isNullOrUndefined(clusters.border.opacity) ? clusters.opacity : clusters.border.opacity;
                         }
                         else {
                             shapeCustom = {
-                                size: new Size(clusters_1.width, clusters_1.height),
-                                fill: clusters_1.fill, borderColor: clusters_1.border.color,
-                                borderWidth: clusters_1.border.width, opacity: clusters_1.opacity,
-                                dashArray: clusters_1.dashArray
+                                size: new Size(eventArg.width, eventArg.height),
+                                fill: eventArg.fill, borderColor: eventArg.border.color,
+                                borderWidth: eventArg.border.width, opacity: clusters.opacity,
+                                dashArray: clusters.dashArray, imageUrl: eventArg.imageUrl,
+                                shape: eventArg.shape
                             };
-                            shapeCustom['fill'] = eventArg.fill;
-                            shapeCustom['size']['width'] = eventArg.width;
-                            shapeCustom['size']['height'] = eventArg.height;
-                            shapeCustom['imageUrl'] = eventArg.imageUrl;
-                            shapeCustom['shape'] = eventArg.shape;
-                            shapeCustom['borderColor'] = eventArg.border.color;
-                            shapeCustom['borderWidth'] = eventArg.border.width;
-                            shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters_1.opacity : eventArg.border.opacity;
+                            shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters.opacity : eventArg.border.opacity;
                         }
                         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);
@@ -1080,48 +1099,51 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                 }
                 colloideBounds = [];
             }
-        }
+            isClusteringCompleted = true;
+        });
         layerElement.appendChild(clusterGroup);
         maps.svgObject.appendChild(layerElement);
         maps.element.appendChild(maps.svgObject);
-        for (var o = 0; o < clusterGroup.childElementCount; o++) {
-            if (clusterGroup.childNodes[o]['style']['visibility'] !== 'hidden') {
-                tempElement = clusterGroup.childNodes[o];
-                bounds1 = tempElement.getBoundingClientRect();
-                if (!isNullOrUndefined(bounds1) && !(tempElement.id.indexOf('_datalabel_') > -1)) {
-                    for (var p = o + 1; p < clusterGroup.childElementCount; p++) {
-                        if (clusterGroup.childNodes[p]['style']['visibility'] !== 'hidden') {
-                            tempElement1 = clusterGroup.childNodes[p];
-                            bounds2 = tempElement1.getBoundingClientRect();
-                            if (!isNullOrUndefined(bounds2) && !(tempElement1.id.indexOf('_datalabel_') > -1)) {
-                                if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
-                                    || bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
-                                    clusterColloideBounds.push(tempElement1);
-                                    clusterColloideBounds.push(clusterGroup.childNodes[p - 1]);
-                                    clusterGroup.childNodes[p]['style']['visibility'] = 'hidden';
-                                    clusterGroup.childNodes[p - 1]['style']['visibility'] = 'hidden';
-                                    indexCollection.push(p);
+        if (clusters.allowDeepClustering) {
+            Array.prototype.forEach.call(clusterGroup.childNodes, function (clusterElement, o) {
+                if (clusterElement['style']['visibility'] !== 'hidden') {
+                    tempElement = clusterElement;
+                    bounds1 = tempElement.getBoundingClientRect();
+                    if (!isNullOrUndefined(bounds1) && !(tempElement.id.indexOf('_datalabel_') > -1)) {
+                        for (var p = o + 1; p < clusterGroup.childElementCount; p++) {
+                            if (clusterGroup.childNodes[p]['style']['visibility'] !== 'hidden') {
+                                tempElement1 = clusterGroup.childNodes[p];
+                                bounds2 = tempElement1.getBoundingClientRect();
+                                if (!isNullOrUndefined(bounds2) && !(tempElement1.id.indexOf('_datalabel_') > -1)) {
+                                    if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
+                                        || bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
+                                        clusterColloideBounds.push(tempElement1);
+                                        clusterColloideBounds.push(clusterGroup.childNodes[p - 1]);
+                                        clusterGroup.childNodes[p]['style']['visibility'] = 'hidden';
+                                        clusterGroup.childNodes[p - 1]['style']['visibility'] = 'hidden';
+                                        indexCollection.push(p);
+                                    }
                                 }
                             }
                         }
-                    }
-                    if (clusterColloideBounds.length > 0) {
-                        tempElement = clusterGroup.childNodes[o];
-                        for (var i = 0; i < clusterColloideBounds.length; i++) {
-                            if (tempElement.tagName === 'g') {
-                                tempElement.childNodes[0].textContent = tempElement.childNodes[0].textContent + ',' +
-                                    clusterColloideBounds[i].textContent;
-                            }
-                            else {
-                                tempElement.textContent = tempElement.textContent + ',' + clusterColloideBounds[i].textContent;
+                        if (clusterColloideBounds.length > 0) {
+                            tempElement = clusterElement;
+                            for (var i = 0; i < clusterColloideBounds.length; i++) {
+                                if (tempElement.tagName === 'g') {
+                                    tempElement.childNodes[0].textContent = tempElement.childNodes[0].textContent + ',' +
+                                        clusterColloideBounds[i].textContent;
+                                }
+                                else {
+                                    tempElement.textContent = tempElement.textContent + ',' + clusterColloideBounds[i].textContent;
+                                }
+                                clusterGroup.childNodes[o - 1].textContent = ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
+                                i++;
                             }
-                            clusterGroup.childNodes[o - 1].textContent = ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
-                            i++;
                         }
+                        clusterColloideBounds = [];
                     }
-                    clusterColloideBounds = [];
                 }
-            }
+            });
         }
         while (0 < clusterGroup.childNodes.length) {
             markerCollection.insertBefore(clusterGroup.childNodes[0], markerCollection.firstChild);
@@ -1130,12 +1152,24 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
         }
         var element = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
-        if (isNullOrUndefined(element)) {
+        var polygonElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
+        if (isNullOrUndefined(element) && !maps.isTileMap) {
             layerElement.insertBefore(markerCollection, layerElement.firstChild);
         }
-        else {
+        else if (!maps.isTileMap) {
             layerElement.appendChild(markerCollection);
         }
+        else {
+            if (!isNullOrUndefined(polygonElement)) {
+                polygonElement.insertAdjacentElement('afterend', markerCollection);
+            }
+            else if (!isNullOrUndefined(element)) {
+                element.insertAdjacentElement('afterend', markerCollection);
+            }
+            else {
+                layerElement.insertBefore(markerCollection, layerElement.firstChild);
+            }
+        }
         var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster');
         if (!isNullOrUndefined(markerCluster)) {
             markerCluster.remove();
@@ -1151,6 +1185,7 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
             }
         }
     });
+    return isClusteringCompleted;
 }
 /**
  *
@@ -1667,7 +1702,7 @@ export function drawBalloon(maps, options, size, location, type, element) {
     var height = size.height;
     var pathElement;
     location.x -= width / 2;
-    location.y -= height / 2;
+    location.y -= ((options.id.indexOf('cluster') > -1) ? (height / 2) : options.id.indexOf('Legend') > -1 ? height / 1.25 : height);
     options.d = 'M15,0C8.8,0,3.8,5,3.8,11.2C3.8,17.5,9.4,24.4,15,30c5.6-5.6,11.2-12.5,11.2-18.8C26.2,5,21.2,0,15,0z M15,16' +
         'c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S17.8,16,15,16z';
     var balloon = maps.renderer.drawPath(options);
@@ -2076,7 +2111,8 @@ export function getTranslate(mapObject, layer, animate) {
             var topPosition = (((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) + mapObject.mapAreaRect.y) / factor;
             var point = checkMethodeZoom ? calculateCenterFromPixel(mapObject, layer) :
                 convertGeoToPoint(centerLatitude, centerLongitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
-            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
+            if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType
+                || mapObject.isMarkerZoomCompleted) {
                 x = -point.x + leftPosition;
                 y = -point.y + topPosition;
                 scaleFactor = zoomFactor;
@@ -3045,6 +3081,13 @@ export function changeBorderWidth(element, index, scale, maps) {
         if (childNode.id.indexOf('_NavigationGroup') > -1) {
             changeNavaigationLineWidth(childNode, index, scale, maps);
         }
+        else if (childNode.id.indexOf('_Polygons_Group') > -1) {
+            for (var i = 0; i < childNode.childElementCount; i++) {
+                // eslint-disable-next-line
+                var width = maps.layersCollection[index].polygonSettings.polygons[parseInt(childNode.children[i].id.split('_PolygonIndex_')[1])].borderWidth;
+                childNode.children[i].setAttribute('stroke-width', (width / scale).toString());
+            }
+        }
         else {
             var currentStroke = void 0;
             var value = 0;