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

Fix: decent PDF-export

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-06-04 22:52:13 +02:00
parent 905f796baa
commit de20b00b8f
15 changed files with 619 additions and 1396 deletions
Download patch file Download diff file Expand all files Collapse all files

54
Utils/pngMapCreator.ts
View file

@ -1,8 +1,9 @@
import ThemeViewState from "../Models/ThemeViewState"
import SvelteUIElement from "../UI/Base/SvelteUIElement"
import MaplibreMap from "../UI/Map/MaplibreMap.svelte"
import { Utils } from "../Utils"
import { UIEventSource } from "../Logic/UIEventSource"
import {Utils} from "../Utils"
import {UIEventSource} from "../Logic/UIEventSource"
import {Map as MlMap} from "maplibre-gl"
import {MapLibreAdaptor} from "../UI/Map/MapLibreAdaptor";
import {AvailableRasterLayers} from "../Models/RasterLayers";
export interface PngMapCreatorOptions {
readonly width: number
@ -23,33 +24,56 @@ export class PngMapCreator {
* Creates a base64-encoded PNG image
* @constructor
*/
public async CreatePng(status: UIEventSource<string>): Promise<Blob> {
public async CreatePng(freeComponentId: string, status?: UIEventSource<string>): Promise<Blob> {
const div = document.createElement("div")
div.id = "mapdiv-" + PngMapCreator.id
div.style.width = this._options.width + "mm"
div.style.height = this._options.height + "mm"
PngMapCreator.id++
const layout = this._state.layout
function setState(msg: string) {
status.setData(layout.id + ": " + msg)
status?.setData(layout.id + ": " + msg)
}
setState("Initializing map")
const map = this._state.map
new SvelteUIElement(MaplibreMap, { map })
.SetStyle(
"width: " + this._options.width + "mm; height: " + this._options.height + "mm; border: 2px solid red;"
)
.AttachTo("extradiv")
map.data.resize()
const settings = this._state.mapProperties
const l = settings.location.data
document.getElementById(freeComponentId).appendChild(div)
const mapElem = new MlMap({
container: div.id,
style: AvailableRasterLayers.maplibre.properties.url,
center: [l.lon, l.lat],
zoom: settings.zoom.data,
pixelRatio: 6
});
const map = new UIEventSource<MlMap>(mapElem)
const mla = new MapLibreAdaptor(map)
mla.zoom.setData(settings.zoom.data)
mla.location.setData(settings.location.data)
mla.rasterLayer.setData(settings.rasterLayer.data)
this._state?.showNormalDataOn(map)
console.log("Creating a map with size", this._options.width, this._options.height)
setState("Waiting for the data")
await this._state.dataIsLoading.AsPromise((loading) => !loading)
setState("Waiting for styles to be fully loaded")
while (!map?.data?.isStyleLoaded()) {
console.log("Waiting for the style to be loaded...")
await Utils.waitFor(250)
}
// Some extra buffer...
await Utils.waitFor(1000)
setState("Exporting png")
console.log("Loading for", this._state.layout.id, "is done")
console.log("Map export: starting actual export, target size is", this._options.width,"mm * ",this._options.height+"mm")
return this._state.mapProperties.exportAsPng(4)
const png = await mla.exportAsPng(6)
div.parentElement.removeChild(div)
Utils.offerContentsAsDownloadableFile(png, "test.png")
return png
}
}