@syncfusion/ej2-maps 19.4.52 → 19.4.56

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

@@ -1240,8 +1240,10 @@ function maintainSelection(elementId, elementClass, element, className) {
     if (elementId) {
         for (let 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);
                     }
@@ -2198,6 +2200,22 @@ function fixInitialScaleForTile(map) {
 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
+ */
+function getClientElement(id) {
+    const element = document.getElementById(id);
+    if (!isNullOrUndefined(element)) {
+        return element.getClientRects()[0];
+    }
+    else {
+        return null;
+    }
+}
 /**
  * To apply internalization
  *
@@ -7209,12 +7227,14 @@ let Maps = class Maps extends Component {
                     this.checkInitialRender = false;
                 }
             }
-            for (let k = 0; k < this.layers[i].markerSettings.length; k++) {
-                if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
-                    && this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
-                    const markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
-                    for (let j = 0; j < markerSelectionValues.length; j++) {
-                        this.markerInitialSelection(i, k, this.layers[i].markerSettings[k], markerSelectionValues[j].latitude, markerSelectionValues[j].longitude);
+            if (!this.isResize) {
+                for (let k = 0; k < this.layers[i].markerSettings.length; k++) {
+                    if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
+                        && this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
+                        const markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
+                        for (let j = 0; j < markerSelectionValues.length; j++) {
+                            this.markerInitialSelection(i, k, this.layers[i].markerSettings[k], markerSelectionValues[j].latitude, markerSelectionValues[j].longitude);
+                        }
                     }
                 }
             }
@@ -7292,7 +7312,8 @@ let Maps = class Maps extends Component {
     markerSelection(selectionSettings, map, targetElement, data) {
         const border = {
             color: selectionSettings.border.color,
-            width: selectionSettings.border.width / map.scale
+            width: selectionSettings.border.width / map.scale,
+            opacity: selectionSettings.border.opacity
         };
         const markerSelectionProperties = {
             opacity: selectionSettings.opacity,
@@ -7312,9 +7333,11 @@ let Maps = class Maps extends Component {
         if (this.selectedMarkerElementId.length === 0 || selectionSettings.enableMultiSelect) {
             if (targetElement.tagName === 'g') {
                 targetElement.children[0].setAttribute('class', 'MarkerselectionMapStyle');
+                this.selectedMarkerElementId.push(targetElement.children[0].id);
             }
             else {
                 targetElement.setAttribute('class', 'MarkerselectionMapStyle');
+                this.selectedMarkerElementId.push(targetElement.id);
             }
         }
     }
@@ -7823,30 +7846,29 @@ let Maps = class Maps extends Component {
                     }
                 }
                 if (this.markerModule) {
-                    this.markerModule.markerClick(e);
                     this.markerModule.markerClusterClick(e);
                 }
-                if (this.bubbleModule) {
-                    this.bubbleModule.bubbleClick(e);
-                }
                 if (!eventArgs.cancel) {
                     this.notify(click, targetEle);
                 }
                 if (!eventArgs.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
-                    const layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
-                    const shapeSelectedEventArgs = triggerShapeEvent(targetId, this.layers[layerIndex].selectionSettings, this, shapeSelected);
-                    if (!shapeSelectedEventArgs.cancel && this.selectionModule && !isNullOrUndefined(this.shapeSelected)) {
-                        customizeStyle(this.selectionModule.selectionType + 'selectionMap', this.selectionModule.selectionType + 'selectionMapStyle', shapeSelectedEventArgs);
-                    }
-                    else if (shapeSelectedEventArgs.cancel && this.selectionModule
-                        && isNullOrUndefined(shapeSelectedEventArgs['data'])) {
-                        removeClass(targetEle);
-                        this.selectionModule.removedSelectionList(targetEle);
-                    }
+                    this.triggerShapeSelection(targetEle);
                 }
             });
         }
     }
+    triggerShapeSelection(targetEle) {
+        const layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
+        const shapeSelectedEventArgs = triggerShapeEvent(targetEle.id, this.layers[layerIndex].selectionSettings, this, shapeSelected);
+        if (!shapeSelectedEventArgs.cancel && this.selectionModule && !isNullOrUndefined(this.shapeSelected)) {
+            customizeStyle(this.selectionModule.selectionType + 'selectionMap', this.selectionModule.selectionType + 'selectionMapStyle', shapeSelectedEventArgs);
+        }
+        else if (shapeSelectedEventArgs.cancel && this.selectionModule
+            && isNullOrUndefined(shapeSelectedEventArgs['data'])) {
+            removeClass(targetEle);
+            this.selectionModule.removedSelectionList(targetEle);
+        }
+    }
     getClickLocation(targetId, pageX, pageY, targetElement, x, y) {
         let layerIndex = 0;
         let latLongValue;
@@ -7968,6 +7990,9 @@ let Maps = class Maps extends Component {
             const markerModule = this.markerModule;
             if (element.id.indexOf('shapeIndex') > -1 || element.id.indexOf('Tile') > -1) {
                 this.mergeCluster();
+                if (element.id.indexOf('shapeIndex') > -1) {
+                    this.triggerShapeSelection(element);
+                }
             }
             if (markerModule) {
                 markerModule.markerClick(e);
@@ -14457,7 +14482,9 @@ class Print {
      * @private
      */
     getHTMLContent(elements) {
-        const div = createElement('div');
+        const elementRect = getClientElement(this.control.element.id);
+        let div = createElement('div');
+        div.setAttribute("style", "margin-top:" + elementRect["top"] + "px");
         if (elements) {
             if (elements instanceof Array) {
                 Array.prototype.forEach.call(elements, (value) => {
@@ -14535,18 +14562,21 @@ 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);
             if (!this.control.isTileMap) {
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
                     this.control.svgObject.outerHTML + '</svg>';
             }
             else {
-                const tileSvg = document.getElementById(this.control.element.id + '_Tile_SVG');
+                tileSvg = getElementByID(this.control.element.id + '_Tile_SVG').cloneNode(true);
                 svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
-                    this.control.svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
+                    svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
             }
             const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgDataElement] :
-                [(new XMLSerializer()).serializeToString(this.control.svgObject)], { type: 'image/svg+xml' }));
+                [(new XMLSerializer()).serializeToString(svgObject)], { type: 'image/svg+xml' }));
             if (type === 'SVG') {
                 if (allowDownload) {
                     triggerDownload(fileName, type, url, isDownload);
@@ -14577,6 +14607,7 @@ 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++) {
@@ -14586,8 +14617,11 @@ class ImageExport {
                         ctxt.fillStyle = this.control.background ? this.control.background : '#FFFFFF';
                         ctxt.fillRect(0, 0, this.control.availableSize.width, this.control.availableSize.height);
                         ctxt.font = this.control.titleSettings.textStyle.size + ' Arial';
-                        ctxt.fillStyle = document.getElementById(this.control.element.id + '_Map_title').getAttribute('fill');
-                        ctxt.fillText(this.control.titleSettings.text, parseFloat(document.getElementById(this.control.element.id + '_Map_title').getAttribute('x')), parseFloat(document.getElementById(this.control.element.id + '_Map_title').getAttribute('y')));
+                        let titleElement = document.getElementById(this.control.element.id + '_Map_title');
+                        if (!isNullOrUndefined(titleElement)) {
+                            ctxt.fillStyle = titleElement.getAttribute('fill');
+                            ctxt.fillText(this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                        }
                         exportTileImg.onload = (() => {
                             if (i === 0 || i === imgTileLength + 1) {
                                 if (i === 0) {
@@ -14596,12 +14630,12 @@ class ImageExport {
                                     ctxt.clip();
                                 }
                                 else {
-                                    ctxt.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
+                                    ctxt.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), (parseFloat(tileParent.style.top) - extraSpace["top"]));
                                 }
                             }
                             else {
-                                ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
-                                    (parseFloat(document.getElementById(this.control.element.id + '_tile_parent').style.top)));
+                                ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + this.control.margin.left, parseFloat(tile.style.top) +
+                                    (parseFloat(tileParent.style.top)) - extraSpace["top"]);
                             }
                             ctxt.drawImage(exportTileImg, 0, 0);
                             if (i === imgTileLength + 1) {
@@ -14627,7 +14661,7 @@ class ImageExport {
                             }
                             else {
                                 setTimeout(() => {
-                                    exportTileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(document.getElementById(this.control.element.id + '_Tile_SVG'))], { type: 'image/svg+xml' }));
+                                    exportTileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                                 }, 300);
                             }
                         }
@@ -14703,6 +14737,7 @@ 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')
@@ -14735,6 +14770,7 @@ 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++) {
@@ -14744,8 +14780,11 @@ class PdfExport {
                     ctx.fillStyle = this.control.background ? this.control.background : '#FFFFFF';
                     ctx.fillRect(0, 0, this.control.availableSize.width, this.control.availableSize.height);
                     ctx.font = this.control.titleSettings.textStyle.size + ' Arial';
-                    ctx.fillStyle = document.getElementById(this.control.element.id + '_Map_title').getAttribute('fill');
-                    ctx.fillText(this.control.titleSettings.text, parseFloat(document.getElementById(this.control.element.id + '_Map_title').getAttribute('x')), parseFloat(document.getElementById(this.control.element.id + '_Map_title').getAttribute('y')));
+                    let titleElement = document.getElementById(this.control.element.id + '_Map_title');
+                    if (!isNullOrUndefined(titleElement)) {
+                        ctx.fillStyle = titleElement.getAttribute('fill');
+                        ctx.fillText(this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
+                    }
                     tileImg.onload = (() => {
                         if (i === 0 || i === tileLength + 1) {
                             if (i === 0) {
@@ -14754,12 +14793,12 @@ class PdfExport {
                                 ctx.clip();
                             }
                             else {
-                                ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
+                                ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), (parseFloat(tileParent.style.top) - extraSpace["top"]));
                             }
                         }
                         else {
-                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
-                                (parseFloat(document.getElementById(this.control.element.id + '_tile_parent').style.top)));
+                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + this.control.margin.left, (parseFloat(tile.style.top) +
+                                (parseFloat(tileParent.style.top)) - extraSpace["top"]));
                         }
                         ctx.drawImage(tileImg, 0, 0);
                         if (i === tileLength + 1) {
@@ -14785,7 +14824,8 @@ class PdfExport {
                         }
                         else {
                             setTimeout(() => {
-                                tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(document.getElementById(this.control.element.id + '_Tile_SVG'))], { type: 'image/svg+xml' }));
+                                let tileSvg = document.getElementById(this.control.element.id + '_Tile_SVG');
+                                tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                             }, 300);
                         }
                     }
@@ -14829,5 +14869,5 @@ class PdfExport {
  * exporting all modules from maps index
  */
 
-export { Maps, load, loaded, click, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
+export { Maps, load, loaded, click, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
 //# sourceMappingURL=ej2-maps.es2015.js.map