@syncfusion/ej2-maps 19.4.53 → 19.4.56-105067

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

@@ -40,7 +40,11 @@ export declare type MapsTheme =
 /** Renders a map with Bootstrap5 theme. */
 'Bootstrap5' | 
 /**  Render a map with Bootstrap5 dark theme. */
-'Bootstrap5Dark';
+'Bootstrap5Dark' | 
+/** Renders a map with Fluent theme. */
+'Fluent' | 
+/**  Render a map with Fluent dark theme. */
+'FluentDark';
 /**
  * Defines the position of the legend.
  */

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

@@ -818,6 +818,14 @@ export declare function fixInitialScaleForTile(map: Maps): void;
  * @returns {Element} - Returns the element
  */
 export declare function getElementByID(id: string): Element;
+/**
+ * Function to get clientElement from id.
+ *
+ * @param {string} id - Specifies the id
+ * @returns {Element} - Returns the element
+ * @private
+ */
+export declare function getClientElement(id: string): ClientRect;
 /**
  * To apply internalization
  *
@@ -833,7 +841,7 @@ export declare function Internalize(maps: Maps, value: number): string;
  * @returns {Function} - Returns the function
  * @private
  */
-export declare function getTemplateFunction(template: string): any;
+export declare function getTemplateFunction(template: string, maps: Maps): any;
 /**
  * Function to get element from id.
  *

package/src/maps/utils/helper.js

@@ -1,16 +1,16 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable max-len */
@@ -807,6 +807,8 @@ export function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, ma
     var padding = 5;
     var rectOptions;
     var pathOptions = new PathOption(markerID, fill, borderWidth, borderColor, opacity, borderOpacity, dashArray, '');
+    size.width = typeof (size.width) === 'string' ? parseInt(size.width, 10) : size.width;
+    size.height = typeof (size.height) === 'string' ? parseInt(size.height, 10) : size.height;
     if (shape === 'Circle') {
         var radius = (size.width + size.height) / 4;
         var circleOptions = new CircleOption(markerID, fill, border, opacity, location.x, location.y, radius, dashArray);
@@ -1024,8 +1026,8 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                             shapeCustom['borderWidth'] = eventArg.border.width;
                             shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters_1.opacity : eventArg.border.opacity;
                         }
-                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : ((location_1.x + transPoint.x + eventArg.width) * maps.mapScaleValue);
-                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : ((location_1.y + transPoint.y + (eventArg.height / 2)) * maps.mapScaleValue);
+                        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) {
                             tempX = location_1.x;
                             tempY = location_1.y;
@@ -1104,12 +1106,15 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
             layerElement.appendChild(markerCollection);
         }
-        var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_0_markerCluster');
+        var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster');
         if (!isNullOrUndefined(markerCluster)) {
             markerCluster.remove();
         }
         if (zoomCheck) {
-            document.getElementById(maps.element.id + '_Layer_Collections').appendChild(layerElement);
+            var layerGroupElement = document.getElementById(maps.element.id + '_Layer_Collections');
+            if (!isNullOrUndefined(layerGroupElement)) {
+                layerGroupElement.appendChild(layerElement);
+            }
         }
     });
 }
@@ -1126,15 +1131,16 @@ export function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
     var markerIndex = sameMarkerData[0].markerIndex;
     var dataIndex = sameMarkerData[0].dataIndex;
     var markerId = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex;
+    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
     var clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    var clusterEle = getElement(clusterId);
+    var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElement(clusterId + '_Group') : getElement(clusterId);
     var clusterEleLabel = getElement(clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'visible');
     clusterEleLabel.setAttribute('visibility', 'visible');
     var markerEle;
     var markerDataLength = sameMarkerData[0].data.length;
     for (var i = 0; i < markerDataLength; i++) {
-        markerEle = getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+        markerEle = marker.shape === 'Balloon' ? getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElement(markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         markerEle['style']['visibility'] = 'hidden';
     }
     removeElement(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine');
@@ -1156,13 +1162,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 clusterId = markerId + '_dataIndex_' + dataIndex + '_cluster_' + clusterIndex;
-    var clusterEle = getElementFunction(getQueryConnect + '' + clusterId);
+    var clusterEle = maps.layers[layerIndex].markerClusterSettings.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + clusterId + '_Group') : getElementFunction(getQueryConnect + '' + clusterId);
     var clusterEleLabel = getElementFunction(getQueryConnect + '' + clusterId + '_datalabel_' + clusterIndex);
     clusterEle.setAttribute('visibility', 'hidden');
     clusterEleLabel.setAttribute('visibility', 'hidden');
-    var marker = maps.layers[layerIndex].markerSettings[markerIndex];
-    var markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
+    var markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + dataIndex);
     var height = markerEle.parentElement.id.indexOf('Template_Group') > -1 ? markerEle.getBoundingClientRect().height : marker.height;
     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];
@@ -1198,7 +1204,7 @@ export function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
         var x1 = centerX + radius * Math.sin((Math.PI * 2 * newAngle) / 360);
         var y1 = centerY + radius * Math.cos((Math.PI * 2 * newAngle) / 360);
         path += start + 'L ' + (x1) + ' ' + y1 + ' ';
-        markerEle = getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
+        markerEle = marker.shape === 'Balloon' ? getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index'] + '_Group') : getElementFunction(getQueryConnect + '' + markerId + '_dataIndex_' + sameMarkerData[0].data[i]['index']);
         if (markerEle.parentElement.id.indexOf('Template_Group') > -1) {
             markerEle['style']['transform'] = '';
             markerEle['style']['left'] = maps.isTileMap ? x1 - (width / 2) + 'px' : (x1 - (width / 2) - 10) + 'px';
@@ -1219,7 +1225,12 @@ export function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     markerElement = isDom ? getElementFunction(maps.element.id + '_Markers_Group') : markerElement;
     var groupEle = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_markerClusterConnectorLine' });
     groupEle.appendChild(maps.renderer.drawPath(options));
-    markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0'));
+    if (marker.shape === 'Balloon') {
+        markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0_Group'));
+    }
+    else {
+        markerElement.insertBefore(groupEle, markerElement.querySelector('#' + markerId + '_dataIndex_0'));
+    }
 }
 /**
  *
@@ -1246,6 +1257,7 @@ export function marker(eventArgs, markerSettings, markerData, dataIndex, locatio
         dashArray: markerSettings.dashArray, borderOpacity: isNullOrUndefined(eventArgs.border.opacity) ? markerSettings.opacity :
             eventArgs.border.opacity
     };
+    removeElement(markerID);
     var ele = drawSymbols(eventArgs.shape, eventArgs.imageUrl, { x: 0, y: 0 }, markerID, shapeCustom, markerCollection, maps);
     var x = (maps.isTileMap ? location.x : (location.x + transPoint.x) * scale) + offset.x;
     var y = (maps.isTileMap ? location.y : (location.y + transPoint.y) * scale) + offset.y;
@@ -1276,7 +1288,7 @@ export function marker(eventArgs, markerSettings, markerData, dataIndex, locatio
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplate, location, transPoint, scale, offset, maps) {
-    templateFn = getTemplateFunction(eventArgs.template);
+    templateFn = getTemplateFunction(eventArgs.template, maps);
     if (templateFn && (templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false).length)) {
         var templateElement = templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false);
         var markerElement = convertElement(templateElement, markerID, data, markerIndex, maps);
@@ -1312,8 +1324,10 @@ export function maintainSelection(elementId, elementClass, element, className) {
     if (elementId) {
         for (var index = 0; index < elementId.length; index++) {
             if (element.getAttribute('id') === elementId[index]) {
-                if (isNullOrUndefined(getElement(elementClass.id)) || index === 0) {
-                    document.body.appendChild(elementClass);
+                if (index === 0 || element.tagName === 'g') {
+                    if (!isNullOrUndefined(elementClass) && !isNullOrUndefined(elementClass.id)) {
+                        document.body.appendChild(elementClass);
+                    }
                     if (element.id.indexOf('_MarkerIndex_') > -1 && element.childElementCount > 0) {
                         element.children[0].setAttribute('class', className);
                     }
@@ -1621,7 +1635,7 @@ export function drawBalloon(maps, options, size, location, type, element) {
     var y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
     if (type === 'Marker') {
-        var g = maps.renderer.createGroup({ id: options.id });
+        var g = maps.renderer.createGroup({ id: options.id + '_Group' });
         appendShape(balloon, g);
         pathElement = appendShape(g, element);
     }
@@ -2040,7 +2054,12 @@ export function getTranslate(mapObject, layer, animate) {
         }
         else {
             if (isNullOrUndefined(mapObject.previousProjection) || mapObject.previousProjection !== mapObject.projectionType) {
+                if (mapHeight === 0 || mapWidth === 0 || mapHeight === mapWidth) {
+                    mapWidth = size.width / 2;
+                    mapHeight = size.height;
+                }
                 scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
                 mapWidth *= scaleFactor;
                 mapHeight *= scaleFactor;
                 var widthDiff = min['x'] !== 0 && mapObject.translateType === 'layers' ? availSize.width - size.width : 0;
@@ -2089,8 +2108,9 @@ export function getTranslate(mapObject, layer, animate) {
                         mapObject.zoomTranslatePoint.y = y;
                     }
                     else {
-                        if (!isNullOrUndefined(mapObject.previousProjection) && mapObject.mapScaleValue === 1 && !mapObject.zoomModule.isDragZoom) {
+                        if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1 || mapObject.mapScaleValue <= 1.05) && !mapObject.zoomModule.isDragZoom) {
                             scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
+                            scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
                             mapWidth *= scaleFactor;
                             x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));
                             mapHeight *= scaleFactor;
@@ -2247,6 +2267,8 @@ export function getZoomTranslate(mapObject, layer, animate) {
         }
     }
     scaleFactor = (mapObject.enablePersistence) ? (mapObject.mapScaleValue === 0 ? 1 : mapObject.mapScaleValue) : scaleFactor;
+    mapObject.widthBeforeRefresh = mapObject.availableSize.width;
+    mapObject.heightBeforeRefresh = mapObject.availableSize.height;
     return { scale: animate ? 1 : scaleFactor, location: new Point(x, y) };
 }
 /**
@@ -2274,6 +2296,22 @@ 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;
+    }
+}
 /**
  * To apply internalization
  *
@@ -2294,7 +2332,7 @@ export function Internalize(maps, value) {
  * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getTemplateFunction(template) {
+export function getTemplateFunction(template, maps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var templateFn = null;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2303,6 +2341,9 @@ export function getTemplateFunction(template) {
         if (document.querySelectorAll(template).length) {
             templateFn = templateComplier(document.querySelector(template).innerHTML.trim());
         }
+        else if (maps.isVue || maps.isVue3) {
+            templateFn = templateComplier(template);
+        }
     }
     catch (e) {
         templateFn = templateComplier(template);
@@ -2707,6 +2748,7 @@ export function createTooltip(id, text, top, left, fontSize) {
         'left:' + left.toString() + 'px;' +
         'color: #000000; ' +
         'background:' + '#FFFFFF' + ';' +
+        'z-index: 2;' +
         'position:absolute;border:1px solid #707070;font-size:' + fontSize + ';border-radius:2px;';
     if (!tooltip) {
         tooltip = createElement('div', {
@@ -2896,6 +2938,7 @@ export function changeBorderWidth(element, index, scale, maps) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var borderWidthValue = maps.layersCollection[index].shapeSettings.borderWidthValuePath;
             var borderWidth = maps.layersCollection[index].shapeSettings.border.width;
+            var circleRadius = maps.layersCollection[index].shapeSettings.circleRadius;
             if (maps.layersCollection[index].shapeSettings.borderWidthValuePath) {
                 value = checkShapeDataFields(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2908,13 +2951,16 @@ export function changeBorderWidth(element, index, scale, maps) {
                         currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
                     }
                 }
+                else {
+                    currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
+                }
             }
             else {
                 currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
             }
             childNode.setAttribute('stroke-width', (currentStroke / scale).toString());
-            if (element.id.indexOf('_LineString') > -1 && isNullOrUndefined(currentStroke)) {
-                childNode.setAttribute('stroke-width', (1 / scale).toString());
+            if (element.id.indexOf('_Point') > -1 || element.id.indexOf('_MultiPoint') > -1) {
+                childNode.setAttribute('r', (circleRadius / scale).toString());
             }
         }
     }
@@ -3108,7 +3154,10 @@ export function animate(element, delay, duration, process, end) {
         else {
             window.cancelAnimationFrame(clearAnimation);
             end.call(_this, { element: element });
-            element.setAttribute('style', markerStyle);
+            if (element.id.indexOf('Marker') > -1) {
+                var markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
+                markerElement.setAttribute('style', markerStyle);
+            }
         }
     };
     clearAnimation = window.requestAnimationFrame(startAnimation);