diff --git a/demo/src/app/geo/print/print.component.ts b/demo/src/app/geo/print/print.component.ts index f4783f6631..7b7f29f190 100644 --- a/demo/src/app/geo/print/print.component.ts +++ b/demo/src/app/geo/print/print.component.ts @@ -12,7 +12,7 @@ export class AppPrintComponent { public map = new IgoMap({ controls: { attribution: { - collapsed: true + collapsed: false } } }); @@ -35,7 +35,8 @@ export class AppPrintComponent { layer: 'carte_gouv_qc_ro', matrixSet: 'EPSG_3857', version: '1.3.0', - crossOrigin: 'anonymous' + crossOrigin: 'anonymous', + attributions: "© Gouvernement du Québec / IGO2" } }) .subscribe(l => this.map.addLayer(l)); diff --git a/packages/geo/src/lib/print/shared/print.service.ts b/packages/geo/src/lib/print/shared/print.service.ts index 3a9e83401c..6a4e1a109f 100644 --- a/packages/geo/src/lib/print/shared/print.service.ts +++ b/packages/geo/src/lib/print/shared/print.service.ts @@ -85,6 +85,7 @@ export class PrintService { this.addMap(doc, map, resolution, size, margins).subscribe( async (status: SubjectStatus) => { if (status === SubjectStatus.Done) { + await this.addScale(doc, map, margins); if (options.showLegend === true) { await this.addLegend(doc, map, margins, resolution); } else { @@ -396,6 +397,49 @@ export class PrintService { } } + /** + * Add scale and attributions on the map on the document + * @param doc - Pdf document where legend will be added + * @param map - Map of the app + * @param margins - Page margins + */ + private async addScale( + doc: jsPDF, + map: IgoMap, + margins: Array + ) { + const mapSize = map.ol.getSize(); + const extent = map.ol.getView().calculateExtent(mapSize); + // Get the scale and attribution + // we use cloneNode to modify the nodes to print without modifying it on the page, using deep:true to get children + let canvasOverlayHTML; + const mapOverlayHTML = map.ol.getOverlayContainerStopEvent(); + // Remove the UI buttons from the nodes + const OverlayHTMLButton = mapOverlayHTML.getElementsByTagName('button'); + for (const but of OverlayHTMLButton) { + but.setAttribute('data-html2canvas-ignore', 'true'); + } + // Change the styles of hyperlink in the printed version + // Transform the Overlay into a canvas + // scale is necessary to make it in google chrome + // background as null because otherwise it is white and cover the map + // allowtaint is to allow rendering images in the attributions + // useCORS: true pour permettre de renderer les images (ne marche pas en local) + const canvas = await html2canvas(mapOverlayHTML, { + scale: 1, + backgroundColor: null, + allowTaint: true, + useCORS: true, + }).then( e => { + canvasOverlayHTML = e; + }); + this.addCanvas(doc, canvasOverlayHTML, margins); // this adds scales and attributions + } + + defineNbFileToProcess(nbFileToProcess) { + this.nbFileToProcess = nbFileToProcess; + } + private timeout(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } @@ -406,8 +450,9 @@ export class PrintService { margins: Array ) { let image; - - image = canvas.toDataURL('image/png'); + if (canvas) { + image = canvas.toDataURL('image/png'); + } if (image !== undefined) { const imageSize = this.getImageSizeToFitPdf(doc, canvas, margins); @@ -440,10 +485,9 @@ export class PrintService { const heightPixels = Math.round((size[1] * resolution) / 25.4); let timeout; + map.ol.once('rendercomplete', (event: any) => { - const canvases = event.target - .getViewport() - .getElementsByTagName('canvas'); + const canvases = event.target.getViewport().getElementsByTagName('canvas'); const mapStatus$$ = map.status$.subscribe((mapStatus: SubjectStatus) => { clearTimeout(timeout); @@ -510,10 +554,6 @@ export class PrintService { return status$; } - defineNbFileToProcess(nbFileToProcess) { - this.nbFileToProcess = nbFileToProcess; - } - /** * Download an image of the map with addition of informations * @param map - Map of the app