@syncfusion/ej2-maps 19.4.56 → 19.4.57-105067

package/dist/ts/maps/model/constants.ts

@@ -0,0 +1,200 @@
+/**
+ * Maps constants doc
+ */
+
+/**
+ * Specifies the maps load event name.
+ *
+ * @private
+ */
+export const load: string = 'load';
+/**
+ * Specifies the maps loaded event name.
+ *
+ * @private
+ */
+export const loaded: string = 'loaded';
+/**
+ * Specifies the maps click event name.
+ *
+ * @private
+ */
+export const click: string = 'click';
+/**
+ * Specifies the maps onclick event name.
+ *
+ * @private
+ */
+export const onclick: string = 'onclick';
+/**
+ * Specifies the maps right click event name.
+ *
+ * @private
+ */
+export const rightClick: string = 'rightClick';
+/**
+ * Specifies the maps double click event name.
+ *
+ * @private
+ */
+export const doubleClick: string = 'doubleClick';
+/**
+ * Specifies the maps resize event name.
+ *
+ * @private
+ */
+export const resize: string = 'resize';
+/**
+ * Specifies the maps tooltip event name.
+ *
+ */
+export const tooltipRender: string = 'tooltipRender';
+/**
+ * Specifies the map shape selected event.
+ *
+ */
+export const shapeSelected: string = 'shapeSelected';
+/**
+ * Specifies the maps shape highlight event.
+ *
+ */
+export const shapeHighlight: string = 'shapeHighlight';
+/**
+ * Specifies the maps mouse move event name.
+ *
+ * @private
+ */
+export const mousemove: string = 'mousemove';
+/**
+ * Specifies the maps mouse up event name.
+ *
+ * @private
+ */
+export const mouseup: string = 'mouseup';
+/**
+ * Specifies the maps mouse down event name.
+ *
+ * @private
+ */
+export const mousedown: string = 'mousedown';
+/**
+ * Specifies the maps layer rendering event name.
+ *
+ * @private
+ */
+export const layerRendering: string = 'layerRendering';
+/**
+ * Specifies the maps shape rendering event name.
+ *
+ * @private
+ */
+export const shapeRendering: string = 'shapeRendering';
+/**
+ * Specifies the maps marker rendering event name.
+ *
+ * @private
+ */
+export const markerRendering: string = 'markerRendering';
+/**
+ * Specifies the maps cluster rendering event name.
+ *
+ * @private
+ */
+export const markerClusterRendering: string = 'markerClusterRendering';
+/**
+ * Specifies the maps marker click event name.
+ *
+ * @private
+ */
+export const markerClick: string = 'markerClick';
+/**
+ * Specifies the maps cluster click event name.
+ *
+ * @private
+ */
+export const markerClusterClick: string = 'markerClusterClick';
+/**
+ * Specifies the maps marker mouse move event name.
+ *
+ * @private
+ */
+export const markerMouseMove: string = 'markerMouseMove';
+/**
+ * Specifies the maps cluster mouse move event name.
+ *
+ * @private
+ */
+export const markerClusterMouseMove: string = 'markerClusterMouseMove';
+/**
+ * Specifies the maps data label rendering event name.
+ *
+ * @private
+ */
+export const dataLabelRendering: string = 'dataLabelRendering';
+/**
+ * Specifies the maps bubbleRendering event name.
+ *
+ * @private
+ */
+export const bubbleRendering: string = 'bubbleRendering';
+/**
+ * Specifies the maps bubble click event name.
+ *
+ * @private
+ */
+export const bubbleClick: string = 'bubbleClick';
+/**
+ * Specifies the maps bubble mouse move event name.
+ *
+ * @private
+ */
+export const bubbleMouseMove: string = 'bubbleMouseMove';
+/**
+ * Specifies the maps animation complete event name.
+ *
+ * @private
+ */
+export const animationComplete: string = 'animationComplete';
+/**
+ * Specifies the maps legend rendering event name.
+ *
+ * @private
+ */
+export const legendRendering: string = 'legendRendering';
+/**
+ * Specifies the maps annotation rendering event name.
+ *
+ * @private
+ */
+export const annotationRendering: string = 'annotationRendering';
+/**
+ * Specifies the maps item selection event name.
+ *
+ * @private
+ */
+export const itemSelection: string = 'itemSelection';
+/**
+ * Specifies the maps item highlight event name.
+ *
+ */
+export const itemHighlight: string = 'itemHighlight';
+/**
+ * Specifies the maps before print event name.
+ *
+ */
+export const beforePrint: string = 'beforePrint';
+/**
+ * Specifies the maps zoom in event name.
+ *
+ */
+export const zoomIn: string = 'zoomIn';
+/**
+ * Specifies the maps zoom out event name.
+ *
+ */
+export const zoomOut: string = 'zoomOut';
+/**
+ * Specifies the maps pan event name.
+ *
+ */
+export const pan: string = 'pan';

package/dist/ts/maps/model/export-image.ts

@@ -0,0 +1,178 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { createElement, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Maps } from '../../index';
+import { triggerDownload, getElementByID } from '../utils/helper';
+import { ExportType } from '../utils/enum';
+
+/**
+ * This module enables the export to Image functionality in Maps control.
+ *
+ * @hidden
+ */
+export class ImageExport {
+
+    /**
+     * Constructor for Maps
+     *
+     * @param {Maps} control - Specifies the instance of the map
+     */
+    constructor(control: Maps) {
+    }
+    /**
+     * To export the file as image/svg format
+     *
+     * @param {ExportType} type - Specifies the type of the image file
+     * @param {string} fileName - Specifies the file name of the image file
+     * @param {boolean} allowDownload - Specifies whether to download image as a file or not.
+     * @returns {Promise<string>} - Returns the promise string.
+     * @private
+     */
+    public export(maps: Maps, type: ExportType, fileName: string, allowDownload?: boolean): Promise<string> {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const promise: Promise<string> = new Promise((resolve: any, reject: any) => {
+            const imageCanvasElement: HTMLCanvasElement = <HTMLCanvasElement>createElement('canvas', {
+                id: 'ej2-canvas',
+                attrs: {
+                    'width': maps.availableSize.width.toString(),
+                    'height': maps.availableSize.height.toString()
+                }
+            });
+            const isDownload: boolean = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
+            const toolbarEle: HTMLElement = document.getElementById(maps.element.id + '_ToolBar');
+            const svgParent: HTMLElement = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
+            let svgDataElement: string;
+            let tileSvg: Element;
+            let svgObject: Element = getElementByID(maps.element.id + '_svg').cloneNode(true) as Element;
+            if (!maps.isTileMap) {
+                svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
+                    maps.svgObject.outerHTML + '</svg>';
+            } else {
+                tileSvg = getElementByID(maps.element.id + '_Tile_SVG').cloneNode(true) as Element;
+                svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
+                svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
+            }
+            const url: string = window.URL.createObjectURL(
+                new Blob(
+                    type === 'SVG' ? [svgDataElement] :
+                        [(new XMLSerializer()).serializeToString(svgObject)],
+                    { type: 'image/svg+xml' }
+                )
+            );
+            if (type === 'SVG') {
+                if (allowDownload) {
+                    triggerDownload(
+                        fileName, type,
+                        url, isDownload
+                    );
+                } else {
+                    resolve(null);
+                }
+            } else {
+                const image: HTMLImageElement = new Image();
+                const ctxt: CanvasRenderingContext2D = imageCanvasElement.getContext('2d');
+                if (!maps.isTileMap) {
+                    image.onload = (() => {
+                        ctxt.drawImage(image, 0, 0);
+                        window.URL.revokeObjectURL(url);
+                        if (allowDownload) {
+                            triggerDownload(
+                                fileName, type, imageCanvasElement.toDataURL('image/png').replace('image/png', 'image/octet-stream'),
+                                isDownload
+                            );
+                        } else {
+                            if (type === 'PNG') {
+                                resolve(imageCanvasElement.toDataURL('image/png'));
+                            } else if (type === 'JPEG') {
+                                resolve(imageCanvasElement.toDataURL('image/jpeg'));
+                            }
+                        }
+                    });
+                    image.src = url;
+                } else {
+                    const svgParentElement: HTMLElement = document.getElementById(maps.element.id + '_MapAreaBorder');
+                    let top: number = parseFloat(svgParentElement.getAttribute('y'));
+                    let left: number = parseFloat(svgParentElement.getAttribute('x'));
+                    const imgxHttp: XMLHttpRequest = new XMLHttpRequest();
+                    const imgTileLength: number = maps.mapLayerPanel.tiles.length;
+                    for (let i: number = 0; i <= imgTileLength + 1; i++) {
+                        const tile: HTMLElement = document.getElementById(maps.element.id + '_tile_' + (i - 1));
+                        const exportTileImg: HTMLImageElement = new Image();
+                        exportTileImg.crossOrigin = 'Anonymous';
+                        ctxt.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                        ctxt.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
+                        ctxt.font = maps.titleSettings.textStyle.size + ' Arial';
+                        let titleElement: HTMLElement = document.getElementById(maps.element.id + '_Map_title');
+                        if (!isNullOrUndefined(titleElement)) {
+                            ctxt.fillStyle = titleElement.getAttribute('fill');
+                            ctxt.fillText(
+                                maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')),
+                                parseFloat(titleElement.getAttribute('y'))
+                            );
+                        }
+                        exportTileImg.onload = (() => {
+                            if (i === 0 || i === imgTileLength + 1) {
+                                if (i === 0) {
+                                    ctxt.setTransform(1, 0, 0, 1, 0, 0);
+                                    ctxt.rect(0, top, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
+                                    ctxt.clip();
+                                } else {
+                                    ctxt.setTransform(1, 0, 0, 1, left, top);
+                                }
+                            } else {
+                                ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left, parseFloat(tile.style.top) +
+                                    top);
+                            }
+                            ctxt.drawImage(exportTileImg, 0, 0);
+                            if (i === imgTileLength + 1) {
+                                localStorage.setItem('local-canvasImage', imageCanvasElement.toDataURL('image/png'));
+                                const localBase64: string = localStorage.getItem('local-canvasImage');
+                                if (allowDownload) {
+                                    triggerDownload(fileName, type, localBase64, isDownload);
+                                    localStorage.removeItem('local-canvasImage');
+                                } else {
+                                    if (type === 'PNG') {
+                                        resolve(localBase64);
+                                    } else if (type === 'JPEG') {
+                                        resolve(imageCanvasElement.toDataURL('image/jpeg'));
+                                    }
+                                }
+                            }
+                        });
+                        if (i === 0 || i === imgTileLength + 1) {
+                            if (i === 0) {
+                                exportTileImg.src = url;
+                            } else {
+                                setTimeout(() => {
+                                    exportTileImg.src = window.URL.createObjectURL(new Blob(
+                                        [(new XMLSerializer()).serializeToString(tileSvg)],
+                                        { type: 'image/svg+xml' }));
+                                }, 300);
+                            }
+                        } else {
+                            imgxHttp.open('GET', tile.children[0].getAttribute('src'), true);
+                            imgxHttp.send();
+                            exportTileImg.src = tile.children[0].getAttribute('src');
+                        }
+                    }
+                }
+            }
+        });
+        return promise;
+    }
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name
+     */
+    protected getModuleName(): string {
+        return 'ImageExport';
+    }
+
+    /**
+     * To destroy the ImageExport.
+     *
+     * @returns {void}
+     * @private
+     */
+    public destroy(): void { }
+}

package/dist/ts/maps/model/export-pdf.ts

@@ -0,0 +1,170 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { createElement, isNullOrUndefined} from '@syncfusion/ej2-base';
+import { Maps } from '../../index';
+import { ExportType } from '../utils/enum';
+import { PdfPageOrientation, PdfDocument, PdfBitmap } from '@syncfusion/ej2-pdf-export';
+
+
+/**
+ * This module enables the export to PDF functionality in Maps control.
+ *
+ * @hidden
+ */
+export class PdfExport {
+
+    /**
+     * Constructor for Maps
+     *
+     * @param {Maps} control Specifies the instance of the map
+     */
+    constructor() { }
+
+    /**
+     * To export the file as image/svg format
+     *
+     * @param {ExportType} type - Specifies the type of the document
+     * @param {string} fileName - Specifies the file name of the document
+     * @param {boolean} allowDownload - Specifies whether to download the document or not
+     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component
+     * @returns {Promise<string>} - Returns the promise string
+     * @private
+     */
+    public export(maps: Maps, type: ExportType, fileName: string, allowDownload?: boolean, orientation?: PdfPageOrientation): Promise<string> {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const promise: Promise<string> = new Promise((resolve: any, reject: any) => {
+            const canvasElement: HTMLCanvasElement = <HTMLCanvasElement>createElement('canvas', {
+                id: 'ej2-canvas',
+                attrs: {
+                    'width': maps.availableSize.width.toString(),
+                    'height': maps.availableSize.height.toString()
+                }
+            });
+            orientation = isNullOrUndefined(orientation) ? PdfPageOrientation.Landscape : orientation;
+            const svgParent: HTMLElement = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
+            let svgData: string;
+            const exportElement: HTMLElement = maps.svgObject.cloneNode(true) as HTMLElement;
+            const backgroundElement: HTMLElement = exportElement.childNodes[0] as HTMLElement;
+            const backgroundColor: string = backgroundElement.getAttribute('fill');
+            if ((maps.theme === 'Tailwind' || maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5' || maps.theme === 'Bootstrap5Dark'
+                || maps.theme === 'Fluent' || maps.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                (exportElement.childNodes[0] as HTMLElement).setAttribute('fill', 'rgba(255,255,255, 1)');
+            }
+            const url: string = window.URL.createObjectURL(
+                new Blob(
+                    type === 'SVG' ? [svgData] :
+                        [(new XMLSerializer()).serializeToString(exportElement)],
+                    { type: 'image/svg+xml' }
+                )
+            );
+            const pdfDocument: PdfDocument = new PdfDocument();
+            const image: HTMLImageElement = new Image();
+            const ctx: CanvasRenderingContext2D = canvasElement.getContext('2d');
+            if (!maps.isTileMap) {
+                image.onload = (() => {
+                    ctx.drawImage(image, 0, 0);
+                    window.URL.revokeObjectURL(url);
+                    if (type === 'PDF') {
+                        let imageString: string = canvasElement.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
+                        pdfDocument.pageSettings.orientation = orientation;
+                        imageString = imageString.slice(imageString.indexOf(',') + 1);
+                        pdfDocument.pages.add().graphics.drawImage(
+                            new PdfBitmap(imageString), 0, 0, (maps.availableSize.width - 60), maps.availableSize.height
+                        );
+                        if (allowDownload) {
+                            pdfDocument.save(fileName + '.pdf');
+                            pdfDocument.destroy();
+                        } else {
+                            resolve(null);
+                        }
+                    }
+                });
+                image.src = url;
+            } else {
+                const svgParentElement: HTMLElement = document.getElementById(maps.element.id + '_MapAreaBorder');
+                let top: number = parseFloat(svgParentElement.getAttribute('y'));
+                let left: number = parseFloat(svgParentElement.getAttribute('x'));
+                const xHttp: XMLHttpRequest = new XMLHttpRequest();
+                const tileLength: number = maps.mapLayerPanel.tiles.length;
+                for (let i: number = 0; i <= tileLength + 1; i++) {
+                    const tile: HTMLElement = document.getElementById(maps.element.id + '_tile_' + (i - 1));
+                    const tileImg: HTMLImageElement = new Image();
+                    tileImg.crossOrigin = 'Anonymous';
+                    ctx.fillStyle = maps.background ? maps.background : '#FFFFFF';
+                    ctx.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
+                    ctx.font = maps.titleSettings.textStyle.size + ' Arial';
+                    let titleElement: HTMLElement = document.getElementById(maps.element.id + '_Map_title');
+                    if (!isNullOrUndefined(titleElement)) {
+                        ctx.fillStyle = titleElement.getAttribute('fill');
+                        ctx.fillText(
+                            maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')),
+                            parseFloat(titleElement.getAttribute('y')));
+                    }
+                    tileImg.onload = (() => {
+                        if (i === 0 || i === tileLength + 1) {
+                            if (i === 0) {
+                                ctx.setTransform(1, 0, 0, 1, 0, 0);
+                                ctx.rect(0, top, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
+                                ctx.clip();
+                            } else {
+                                ctx.setTransform(1, 0, 0, 1, left, top);
+                            }
+                        } else {
+                            ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left, parseFloat(tile.style.top) + top);
+                        }
+                        ctx.drawImage(tileImg, 0, 0);
+                        if (i === tileLength + 1) {
+                            if (type === 'PDF') {
+                                localStorage.setItem('saved-image-example', canvasElement.toDataURL('image/jpeg'));
+                                let x: string = localStorage.getItem('saved-image-example');
+                                pdfDocument.pageSettings.orientation = orientation;
+                                x = x.slice(x.indexOf(',') + 1);
+                                pdfDocument.pages.add().graphics.drawImage(
+                                    new PdfBitmap(x), 0, 0, (maps.availableSize.width - 60), maps.availableSize.height
+                                );
+                                if (allowDownload) {
+                                    pdfDocument.save(fileName + '.pdf');
+                                    pdfDocument.destroy();
+                                } else {
+                                    resolve(null);
+                                }
+                            }
+                        }
+                    });
+                    if (i === 0 || i === tileLength + 1) {
+                        if (i === 0) {
+                            tileImg.src = url;
+                        } else {
+                            setTimeout(() => {
+                                let tileSvg: Element = document.getElementById(maps.element.id + '_Tile_SVG');
+                                tileImg.src = window.URL.createObjectURL(new Blob(
+                                    [(new XMLSerializer()).serializeToString(tileSvg)],
+                                    { type: 'image/svg+xml' }));
+                            }, 300);
+                        }
+                    } else {
+                        xHttp.open('GET', tile.children[0].getAttribute('src'), true);
+                        xHttp.send();
+                        tileImg.src = tile.children[0].getAttribute('src');
+                    }
+                }
+            }
+        });
+        return promise;
+    }
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name
+     */
+    protected getModuleName(): string {
+        return 'PdfExport';
+    }
+
+    /**
+     * To destroy the PdfExport.
+     *
+     * @returns {void}
+     * @private
+     */
+    public destroy(): void { }
+}