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