@syncfusion/ej2-maps 19.4.56 → 20.1.47

package/dist/es6/ej2-maps.es2015.js

@@ -1204,7 +1204,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 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)) {
         const templateElement = templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false);
         const markerElement = convertElement(templateElement, markerID, data, markerIndex, maps);
@@ -2236,7 +2236,7 @@ function Internalize(maps, value) {
  * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function getTemplateFunction(template) {
+function getTemplateFunction(template, maps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let templateFn = null;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2244,6 +2244,9 @@ function getTemplateFunction(template) {
         if (document.querySelectorAll(template).length) {
             templateFn = compile(document.querySelector(template).innerHTML.trim());
         }
+        else if (maps.isVue || maps.isVue3) {
+            templateFn = compile(template);
+        }
     }
     catch (e) {
         templateFn = compile(template);
@@ -2646,6 +2649,7 @@ 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', {
@@ -2846,6 +2850,9 @@ function changeBorderWidth(element, index, scale, maps) {
                         currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
                     }
                 }
+                else {
+                    currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
+                }
             }
             else {
                 currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
@@ -3372,11 +3379,11 @@ function getShapeColor(theme) {
             themePalette = ['#5ECB9B', '#A860F1', '#EBA844', '#557EF7', '#E9599B',
                 '#BFC529', '#3BC6CF', '#7A68EC', '#74B706', '#EA6266'];
             break;
-        case 'fluentui':
+        case 'fluent':
             themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
                 '#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
             break;
-        case 'fluentuidark':
+        case 'fluentdark':
             themePalette = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C',
                 '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', '#BC4870'];
             break;
@@ -3665,7 +3672,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#495057'
             };
             break;
-        case 'fluentui':
+        case 'fluent':
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 areaBackgroundColor: 'rgba(255,255,255, 0.0)',
@@ -3688,7 +3695,7 @@ function getThemeStyle(theme) {
                 shapeFill: '#F3F2F1'
             };
             break;
-        case 'fluentuidark':
+        case 'fluentdark':
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 areaBackgroundColor: 'rgba(255,255,255, 0.0)',
@@ -4657,10 +4664,10 @@ class Marker {
                     eventArgs = markerShapeChoose(eventArgs, data);
                     const lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : 0;
+                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
                     const lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : 0;
+                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
                     const offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
                         const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
@@ -4705,7 +4712,7 @@ class Marker {
                             this.maps.renderReactTemplates();
                         }
                     }
-                    if (markerTemplateEle.childElementCount === (markerData.length - markerCount - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
+                    if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
                         getElementByID(this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
                         if (this.maps.checkInitialRender) {
                             if (currentLayer.markerClusterSettings.allowClustering) {
@@ -4955,7 +4962,7 @@ class Marker {
                 if ((target.indexOf('_cluster_') > -1)) {
                     let isClusterSame = false;
                     const clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? target.split('_datalabel_')[0] : target);
-                    const indexes = clusterElement.innerHTML.split(',').map(Number);
+                    const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerHTML.split(',').map(Number) : clusterElement.innerHTML.split(',').map(Number);
                     collection = [];
                     for (const i of indexes) {
                         collection.push({ data: marker$$1.dataSource[i], index: i });
@@ -6789,7 +6796,7 @@ class Annotations {
             if (argsData.cancel) {
                 return;
             }
-            templateFn = getTemplateFunction(argsData.content);
+            templateFn = getTemplateFunction(argsData.content, this.map);
             if (templateFn && templateFn(this.map, this.map, argsData.content, this.map.element.id + '_ContentTemplate_' + annotationIndex).length) {
                 templateElement = Array.prototype.slice.call(templateFn(this.map, this.map, argsData.content, this.map.element.id + '_ContentTemplate_' + annotationIndex));
                 const length = templateElement.length;
@@ -9636,7 +9643,7 @@ class DataLabel {
                 this.value[index] = { rightWidth: xpositionEnds, leftWidth: xpositionStart, heightTop: start, heightBottom: end };
                 let labelElement;
                 if (eventargs.template !== '') {
-                    templateFn = getTemplateFunction(eventargs.template);
+                    templateFn = getTemplateFunction(eventargs.template, this.maps);
                     const templateElement = templateFn ? templateFn(!isNullOrUndefined(datasrcObj) ?
                         datasrcObj : shapeData['properties'], this.maps, eventargs.template, this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                     templateElement.innerHTML = !templateFn ? eventargs.template : '';
@@ -11243,7 +11250,7 @@ class Legend {
                     data[this.maps.legendSettings.showLegendPath];
                 if (marker$$1.visible && showLegend && (!isNullOrUndefined(data['latitude'])) && (!isNullOrUndefined(data['longitude']))) {
                     if (marker$$1.template) {
-                        templateFn = getTemplateFunction(marker$$1.template);
+                        templateFn = getTemplateFunction(marker$$1.template, this.maps);
                         const templateElement = templateFn(this.maps);
                         const markerEle = isNullOrUndefined(templateElement.childElementCount) ? templateElement[0] :
                             templateElement;
@@ -12716,6 +12723,10 @@ class MapsTooltip {
                             fill: tooltipArgs.fill || this.maps.themeStyle.tooltipFillColor
                         });
                     }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (this.maps.isVue || this.maps.isVue3) {
+                        this.svgTooltip.controlInstance = this.maps;
+                    }
                     this.svgTooltip.opacity = this.maps.themeStyle.tooltipFillOpacity || this.svgTooltip.opacity;
                     this.svgTooltip.appendTo(tooltipEle);
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -12729,9 +12740,7 @@ class MapsTooltip {
                     }
                 }
                 else {
-                    this.removeTooltip();
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.maps.clearTemplate();
+                    this.clearTooltip();
                 }
             });
             if (this.svgTooltip) {
@@ -12746,9 +12755,7 @@ class MapsTooltip {
                 });
             }
             else {
-                this.removeTooltip();
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.maps.clearTemplate();
+                this.clearTooltip();
             }
         }
         else {
@@ -12758,9 +12765,7 @@ class MapsTooltip {
                 this.maps.notify(click, this);
             }
             else {
-                this.removeTooltip();
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.maps.clearTemplate();
+                this.clearTooltip();
             }
         }
     }
@@ -12804,8 +12809,18 @@ class MapsTooltip {
         }
     }
     removeTooltip() {
+        let isTooltipRemoved = false;
         if (document.getElementsByClassName('EJ2-maps-Tooltip').length > 0) {
             remove(document.getElementsByClassName('EJ2-maps-Tooltip')[0]);
+            isTooltipRemoved = true;
+        }
+        return isTooltipRemoved;
+    }
+    clearTooltip() {
+        const isTooltipRemoved = this.removeTooltip();
+        if (isTooltipRemoved) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.maps.clearTemplate();
         }
     }
     // eslint-disable-next-line valid-jsdoc
@@ -13392,10 +13407,10 @@ class Zoom {
                     }
                     const lati = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
-                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : 0;
+                        parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
                     const long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
-                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : 0;
+                        parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
                     const offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
                         const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
@@ -13415,10 +13430,10 @@ class Zoom {
                     nullCount += (!isNaN(lati) && !isNaN(long)) ? 0 : 1;
                     markerTemplateCounts += (eventArgs.cancel) ? 1 : 0;
                     markerCounts += (eventArgs.cancel) ? 1 : 0;
-                    this.maps.markerNullCount = (!isNullOrUndefined(lati) || !isNullOrUndefined(long))
-                        ? this.maps.markerNullCount : this.maps.markerNullCount + 1;
+                    this.maps.markerNullCount = (isNullOrUndefined(lati) || isNullOrUndefined(long))
+                        ? this.maps.markerNullCount + 1 : this.maps.markerNullCount;
                     const markerDataLength = markerDatas.length - this.maps.markerNullCount;
-                    if (markerSVGObject.childElementCount === (markerDatas.length - markerTemplateCounts - nullCount) && (type !== 'Template')) {
+                    if (markerSVGObject.childElementCount === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(markerSVGObject);
                         if (currentLayers.markerClusterSettings.allowClustering) {
                             this.maps.svgObject.appendChild(markerSVGObject);
@@ -13426,7 +13441,7 @@ class Zoom {
                             clusterTemplate(currentLayers, markerSVGObject, this.maps, layerIndex, markerSVGObject, layerElement, true, true);
                         }
                     }
-                    if (markerTemplateElements.childElementCount === (markerDatas.length - markerCounts - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
+                    if (markerTemplateElements.childElementCount === (markerDataLength - markerCounts - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
                         getElementByID(this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateElements);
                         if (scale >= 1) {
                             if (currentLayers.markerClusterSettings.allowClustering) {
@@ -13866,7 +13881,7 @@ class Zoom {
         const map = this.maps;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
-            opacity: map.theme.toLowerCase() === 'fluentuidark' ? 0.6 : 0.3
+            opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
         });
         const kitHeight = 16;
         const kitWidth = 16;
@@ -14270,14 +14285,14 @@ class Zoom {
                 if (document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     if (!this.maps.zoomSettings.enablePanning) {
                         if (target.id.indexOf('_Zooming_ToolBar') > -1 || target.id.indexOf('_Zooming_Rect') > -1) {
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
                         }
                     }
                 }
             }
             else {
-                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
+                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
                 if (!this.maps.zoomSettings.enablePanning && document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '1');
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '1');
@@ -14484,7 +14499,27 @@ class Print {
     getHTMLContent(elements) {
         const elementRect = getClientElement(this.control.element.id);
         let div = createElement('div');
-        div.setAttribute("style", "margin-top:" + elementRect["top"] + "px");
+        let divElement = this.control.element.cloneNode(true);
+        if (this.control.isTileMap) {
+            for (let i = 0; i < divElement.childElementCount; i++) {
+                if (divElement.children[i].id === this.control.element.id + '_tile_parent') {
+                    divElement.children[i].style.removeProperty('height');
+                    divElement.children[i].style.removeProperty('width');
+                    divElement.children[i].style.removeProperty('top');
+                    divElement.children[i].style.removeProperty('left');
+                    divElement.children[i].style.removeProperty('right');
+                    divElement.children[i].style.removeProperty('overflow');
+                    const svgElement = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
+                    divElement.children[i].children[0].style.overflow = 'hidden';
+                    divElement.children[i].children[0].style.position = 'absolute';
+                    divElement.children[i].children[0].style.height = svgElement.style.height;
+                    divElement.children[i].children[0].style.width = svgElement.style.width;
+                    divElement.children[i].children[0].style.left = svgElement.style.left;
+                    divElement.children[i].children[0].style.top = svgElement.style.top;
+                    break;
+                }
+            }
+        }
         if (elements) {
             if (elements instanceof Array) {
                 Array.prototype.forEach.call(elements, (value) => {
@@ -14499,7 +14534,7 @@ class Print {
             }
         }
         else {
-            div.appendChild(this.control.element.cloneNode(true));
+            div.appendChild(divElement);
         }
         return div;
     }
@@ -14562,7 +14597,6 @@ class ImageExport {
             const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
             const toolbarEle = document.getElementById(this.control.element.id + '_ToolBar');
             const svgParent = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
-            const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
             let svgDataElement;
             let tileSvg;
             let svgObject = getElementByID(this.control.element.id + '_svg').cloneNode(true);
@@ -14607,7 +14641,6 @@ class ImageExport {
                     image.src = url;
                 }
                 else {
-                    const extraSpace = getClientElement(this.control.element.id);
                     const imgxHttp = new XMLHttpRequest();
                     const imgTileLength = this.control.mapLayerPanel.tiles.length;
                     for (let i = 0; i <= imgTileLength + 1; i++) {
@@ -14630,12 +14663,13 @@ class ImageExport {
                                     ctxt.clip();
                                 }
                                 else {
-                                    ctxt.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), (parseFloat(tileParent.style.top) - extraSpace["top"]));
+                                    ctxt.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
                                 }
                             }
                             else {
-                                ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + this.control.margin.left, parseFloat(tile.style.top) +
-                                    (parseFloat(tileParent.style.top)) - extraSpace["top"]);
+                                const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
+                                ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
+                                    (parseFloat(tileParent.style.top)));
                             }
                             ctxt.drawImage(exportTileImg, 0, 0);
                             if (i === imgTileLength + 1) {
@@ -14737,11 +14771,10 @@ class PdfExport {
             const svgParent = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
             let svgData;
             const exportElement = this.control.svgObject.cloneNode(true);
-            const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
             const backgroundElement = exportElement.childNodes[0];
             const backgroundColor = backgroundElement.getAttribute('fill');
-            if ((this.control.theme === 'Tailwind' || this.control.theme === 'TailwindDark' || this.control.theme === 'Bootstrap5' || this.control.theme === 'Bootstrap5Dark')
-                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            if ((this.control.theme === 'Tailwind' || this.control.theme === 'TailwindDark' || this.control.theme === 'Bootstrap5' || this.control.theme === 'Bootstrap5Dark'
+                || this.control.theme === 'Fluent' || this.control.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
             const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
@@ -14770,7 +14803,6 @@ class PdfExport {
                 image.src = url;
             }
             else {
-                const extraSpace = getClientElement(this.control.element.id);
                 const xHttp = new XMLHttpRequest();
                 const tileLength = this.control.mapLayerPanel.tiles.length;
                 for (let i = 0; i <= tileLength + 1; i++) {
@@ -14793,12 +14825,13 @@ class PdfExport {
                                 ctx.clip();
                             }
                             else {
-                                ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), (parseFloat(tileParent.style.top) - extraSpace["top"]));
+                                ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
                             }
                         }
                         else {
-                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + this.control.margin.left, (parseFloat(tile.style.top) +
-                                (parseFloat(tileParent.style.top)) - extraSpace["top"]));
+                            const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
+                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
+                                (parseFloat(tileParent.style.top)));
                         }
                         ctx.drawImage(tileImg, 0, 0);
                         if (i === tileLength + 1) {