Download pdf and png possible - pdf doesn't scale well

InitUiElements.ts

@@ -41,6 +41,8 @@ import FeatureSource from "./Logic/FeatureSource/FeatureSource";
 import AllKnownLayers from "./Customizations/AllKnownLayers";
 import LayerConfig from "./Customizations/JSON/LayerConfig";
 import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
+import { SimpleMapScreenshoter } from "leaflet-simple-map-screenshoter";
+import jsPDF from "jspdf";
 
 export class InitUiElements {
   static InitAll(
@@ -218,8 +220,33 @@ export class InitUiElements {
       State.state.locationControl.ping();
     });
 
+    
+    // To download pdf of leaflet you need to turn it into and image first
+    // Then export that image as a pdf
+    // leaflet-simple-map-screenshoter: to make image
+    // jsPDF:                           to make pdf
+
+    const screenshot = new MapControlButton(
+      new CenterFlexedElement(
+        Img.AsImageElement(Svg.bug, "", "width:1.25rem;height:1.25rem")
+      )
+    ).onClick(() => {
+      const screenshotter = new SimpleMapScreenshoter();
+      console.log("Debug - Screenshot");
+      screenshotter.addTo(State.state.leafletMap.data);
+      let doc = new jsPDF();
+      screenshotter.takeScreen('image').then(image => { 
+        // TO DO: scale image on pdf to its original size
+        doc.addImage(image, 'PNG', 15, 40, 100, 160);
+        doc.setDisplayMode('fullheight');
+        doc.save("Screenshot");
+      });
+      // The line below is for downloading the png
+      //screenshotter.takeScreen().then(blob => Utils.offerContentsAsDownloadableFile(blob, "Screenshot.png"));
+    });
+
     new Combine(
-      [plus, min, geolocationButton].map((el) => el.SetClass("m-0.5 md:m-1"))
+      [plus, min, geolocationButton, screenshot].map((el) => el.SetClass("m-0.5 md:m-1"))
     )
       .SetClass("flex flex-col")
       .AttachTo("bottom-right");

Utils.ts

@@ -358,9 +358,12 @@ export class Utils {
      * @param contents
      * @param fileName
      */
-    public static offerContentsAsDownloadableFile(contents: string, fileName: string = "download.txt") {
+    public static offerContentsAsDownloadableFile(contents: string | Blob, fileName: string = "download.txt") {
         const element = document.createElement("a");
-        const file = new Blob([contents], {type: 'text/plain'});
+        let file;
+        if(typeof(contents) === "string"){
+            file = new Blob([contents], {type: 'text/plain'});
+        }else {file = contents;}
         element.href = URL.createObjectURL(file);
         element.download = fileName;
         document.body.appendChild(element); // Required for this to work in FireFox

package.json

@@ -65,9 +65,11 @@
     "escape-html": "^1.0.3",
     "i18next-client": "^1.11.4",
     "jquery": "^3.6.0",
+    "jspdf": "^2.3.1",
     "latlon2country": "^1.1.3",
     "leaflet": "^1.7.1",
     "leaflet-providers": "^1.10.2",
+    "leaflet-simple-map-screenshoter": "^0.4.4",
     "leaflet.markercluster": "^1.4.1",
     "libphonenumber": "0.0.10",
     "libphonenumber-js": "^1.7.55",
@@ -81,7 +83,6 @@
     "postcss": "^7.0.36",
     "prompt-sync": "^4.2.0",
     "sharp": "^0.27.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
     "tslint": "^6.1.3"
   },
   "devDependencies": {
@@ -91,6 +92,7 @@
     "fs": "0.0.1-security",
     "marked": "^2.0.0",
     "read-file": "^0.2.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
     "ts-node": "^9.0.0",
     "ts-node-dev": "^1.0.0-pre.63",
     "tslint-no-circular-imports": "^0.7.0",