elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

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

Browse source
This commit is contained in:
LiamSimons 2021-07-22 14:33:49 +02:00
parent 8cc3f8bede
commit 35bb27d365
4 changed files with 467 additions and 14303 deletions
Download patch file Download diff file Expand all files Collapse all files

29
InitUiElements.ts
View file

@ -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");