PDF export added - not working

InitUiElements.ts

@@ -40,6 +40,7 @@ import FeatureSource from "./Logic/FeatureSource/FeatureSource";
 import AllKnownLayers from "./Customizations/AllKnownLayers";
 import LayerConfig from "./Customizations/JSON/LayerConfig";
 import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
+import ExportPDF from "./Logic/Actors/ExportPDF";
 
 export class InitUiElements {
 
@@ -189,7 +190,15 @@ export class InitUiElements {
             State.state.locationControl.ping();
         })
 
-        new Combine([plus, min, geolocationButton].map(el => el.SetClass("m-0.5 md:m-1")))
+        const screenshot = new MapControlButton(
+            new FixedUiElement(
+                Img.AsImageElement(Svg.bug, "", "width:1.25rem;height:1.25rem")
+            )
+        ).onClick(() => {
+            let createdPDF = new ExportPDF("Screenshot", "natuurpunt");
+        })
+
+        new Combine([plus, min, geolocationButton, screenshot].map(el => el.SetClass("m-0.5 md:m-1")))
             .SetClass("flex flex-col")
             .AttachTo("bottom-right");
 

Logic/Actors/ExportPDF.ts

@@ -0,0 +1,34 @@
+/**
+ * Creates screenshoter to take png screenshot
+ * Creates jspdf and downloads it
+ * 		-	landscape pdf
+ * 
+ * To add new layout:
+ * 		-	add new possible layout name in constructor 
+ * 		-	add new layout in "PDFLayout"
+ * 				-> in there are more instructions
+ */
+
+ import jsPDF from "jspdf";
+ import { SimpleMapScreenshoter } from "leaflet-simple-map-screenshoter";
+ import State from "../../State";
+ import { PDFLayout } from "./PDFLayout";
+ 
+ export default class ExportPDF {
+     constructor(
+         name: string,
+         layout: "natuurpunt"
+     ){
+         const screenshotter = new SimpleMapScreenshoter();
+         //minimap op index.html -> hidden daar alles op doen en dan weg
+         //minimap - leaflet map ophalen - boundaries ophalen - State.state.featurePipeline
+         screenshotter.addTo(State.state.leafletMap.data);
+         let doc = new jsPDF('l');
+         screenshotter.takeScreen('image').then(image => {
+             let file = new PDFLayout();
+             file.AddLayout(layout, doc, image);
+             console.log("SCREENSHOTTER");
+             doc.save(name);
+         })
+     }
+ }

Logic/Actors/PDFLayout.ts

@@ -0,0 +1,26 @@
+/**
+ * Adds a theme to the pdf
+ * 
+ * To add new layout:	(first check ExportPDF.ts)
+ * 		-	in AddLayout() -> add new name for your layout 
+ * 				AddLayout(layout: "natuurpunt" ...) => AddLayout(layout: "natuurpunt" | "newlayout" ...)
+ * 		-	add if statement that checks which layout you want
+ * 		-	add new function to change the pdf layout
+ */
+
+ import jsPDF from "jspdf";
+
+ export class PDFLayout {
+     public AddLayout(layout: "natuurpunt", doc: jsPDF, image: Blob){
+         if(layout === "natuurpunt") this.AddNatuurpuntLayout(doc, image);
+     }
+     public AddNatuurpuntLayout(doc: jsPDF, image: Blob){
+         // Add Natuurpunt layout
+         const screenRatio = screen.width/screen.height;
+         let img = document.createElement('img');
+         img.src = './assets/themes/natuurpunt/natuurpunt.png';
+         doc.addImage(img, 'PNG', 15, 5, 20, 20);
+         doc.addImage(image, 'PNG', 15, 30, 150*screenRatio, 150);
+         return doc;
+     }
+ }