Merge branch 'project/natuurpunt' of https://github.com/pietervdvn/MapComplete into project/natuurpunt

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";
 import FilterView from "./UI/BigComponents/FilterView";
 
 export class InitUiElements {
@@ -219,8 +221,34 @@ 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', 0, 0, screen.width/10, screen.height/10);
+        doc.setDisplayMode('fullheight');
+        doc.save("Screenshot");
+      });
+      //screenshotter.remove();
+      // 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

assets/svg/download.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.08 8.86C8.13 8.53 8.24 8.24 8.38 7.99C8.52 7.74 8.72 7.53 8.97 7.37C9.21 7.22 9.51 7.15 9.88 7.14C10.11 7.15 10.32 7.19 10.51 7.27C10.71 7.36 10.89 7.48 11.03 7.63C11.17 7.78 11.28 7.96 11.37 8.16C11.46 8.36 11.5 8.58 11.51 8.8H13.3C13.28 8.33 13.19 7.9 13.02 7.51C12.85 7.12 12.62 6.78 12.32 6.5C12.02 6.22 11.66 6 11.24 5.84C10.82 5.68 10.36 5.61 9.85 5.61C9.2 5.61 8.63 5.72 8.15 5.95C7.67 6.18 7.27 6.48 6.95 6.87C6.63 7.26 6.39 7.71 6.24 8.23C6.09 8.75 6 9.29 6 9.87V10.14C6 10.72 6.08 11.26 6.23 11.78C6.38 12.3 6.62 12.75 6.94 13.13C7.26 13.51 7.66 13.82 8.14 14.04C8.62 14.26 9.19 14.38 9.84 14.38C10.31 14.38 10.75 14.3 11.16 14.15C11.57 14 11.93 13.79 12.24 13.52C12.55 13.25 12.8 12.94 12.98 12.58C13.16 12.22 13.27 11.84 13.28 11.43H11.49C11.48 11.64 11.43 11.83 11.34 12.01C11.25 12.19 11.13 12.34 10.98 12.47C10.83 12.6 10.66 12.7 10.46 12.77C10.27 12.84 10.07 12.86 9.86 12.87C9.5 12.86 9.2 12.79 8.97 12.64C8.72 12.48 8.52 12.27 8.38 12.02C8.24 11.77 8.13 11.47 8.08 11.14C8.03 10.81 8 10.47 8 10.14V9.87C8 9.52 8.03 9.19 8.08 8.86V8.86ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" fill="white"/>
+</svg>

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",