midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

More fixes to export functionality

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-03-31 21:14:29 +02:00
parent 5cd7f0976e
commit 27da2b8116
4 changed files with 29 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/UI/Map/MapLibreAdaptor.ts
View file

@ -336,9 +336,9 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
for (const img of Array.from(allimages)) {
let isLoaded: boolean = false
while (!isLoaded) {
console.log("Waiting for image", img.src, "to load")
console.log("Waiting for image", img.src, "to load", img.complete, img.naturalWidth, img)
await Utils.waitFor(250)
isLoaded = img.complete && img.naturalWidth > 0
isLoaded = img.complete && img.width > 0
}
}
}
@ -349,21 +349,32 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
element.style.transform = ""
const offset = style.match(/translate\(([-0-9]+)%, ?([-0-9]+)%\)/)
let labels =<HTMLElement[]> Array.from(element.getElementsByClassName("marker-label"))
const origLabelTransforms = labels.map(l => l.style.transform)
// We save the original width (`w`) and height (`h`) in order to restore them later on
const w = element.style.width
const h = element.style.height
const h = Number(element.style.height)
const targetW = Math.max(element.getBoundingClientRect().width * 4,
...labels.map(l => l.getBoundingClientRect().width))
const targetH = element.getBoundingClientRect().height +
Math.max(...labels.map(l => l.getBoundingClientRect().height))
// Force a wider view for icon badges
element.style.width = element.getBoundingClientRect().width * 4 + "px"
element.style.width = targetW + "px"
// Force more height to include labels
element.style.height = element.getBoundingClientRect().height * 2 + "px"
element.classList.add("w-full","flex", "flex-col","items-center")
element.style.height = targetH + "px"
element.classList.add("w-full", "flex", "flex-col", "items-center")
labels.forEach(l => {
l.style.transform = ""
})
await Utils.awaitAnimationFrame()
const svgSource = await htmltoimage.toSvg(element)
const img = await MapLibreAdaptor.createImage(svgSource)
element.style.width = w
element.style.height = h
for (let i = 0; i < labels.length; i++) {
labels[i].style.transform = origLabelTransforms[i]
}
element.style.width = "" + w
element.style.height = "" + h
await Utils.awaitAnimationFrame()
if (offset && rescaleIcons !== 1) {
const [_, __, relYStr] = offset
const relY = Number(relYStr)
@ -374,12 +385,12 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
y *= pixelRatio
try {
let xdiff = img.width * rescaleIcons / 2
const xdiff = img.width * rescaleIcons / 2
drawOn.drawImage(img, x - xdiff, y, img.width * rescaleIcons, img.height * rescaleIcons)
} catch (e) {
console.log("Could not draw image because of", e)
}
element.classList.remove("w-full","flex", "flex-col","items-center")
element.classList.remove("w-full", "flex", "flex-col", "items-center")
}

3
src/UI/Map/MaplibreMap.svelte
View file

@ -3,7 +3,6 @@
import type { Map, MapOptions } from "maplibre-gl"
import * as maplibre from "maplibre-gl"
import type { Writable } from "svelte/store"
import { get } from "svelte/store"
import { AvailableRasterLayers } from "../../Models/RasterLayers"
import { Utils } from "../../Utils"
import { ariaLabel } from "../../Utils/ariaLabel"
@ -40,7 +39,7 @@
styleUrl = defaultLayer.style ?? defaultLayer.url
}
console.log("INiting mapLIbremap with style", styleUrl)
console.log("Initing mapLIbremap with style", styleUrl)
const options: MapOptions = {
container,

5
src/Utils/pngMapCreator.ts
View file

@ -65,9 +65,12 @@ export class PngMapCreator {
document.getElementById(freeComponentId).appendChild(div)
const newZoom = settings.zoom.data + Math.log2(pixelRatio) - 1
const rasterLayerProperties = settings.rasterLayer.data?.properties ?? AvailableRasterLayers.defaultBackgroundLayer.properties
const style = rasterLayerProperties?.style ?? rasterLayerProperties?.url
console.log("Png-map-creator: initing MlMap with style", style, rasterLayerProperties)
const mapElem = new MlMap({
container: div.id,
style: settings.rasterLayer.data?.properties?.url ?? AvailableRasterLayers.defaultBackgroundLayer.properties.url,
style,
center: [l.lon, l.lat],
zoom: newZoom,
pixelRatio,

100
src/Utils/svgToPdf.ts
View file

@ -881,107 +881,7 @@ class SvgToPdfPage {
width,
height,
}).CreatePng(this.options.freeComponentId, this._state)
} /* else {
const match = spec.match(/\$map\(([^)]*)\)$/)
if (match === null) {
throw "Invalid mapspec:" + spec
}
const params = SvgToPdfInternals.parseCss(match[1], ",")
const layout = AllKnownLayouts.allKnownLayouts.get(params["theme"])
if (layout === undefined) {
console.error("Could not show map with parameters", params)
throw (
"Theme not found:" +
params["theme"] +
". Use theme: to define which theme to use. "
)
}
layout.widenFactor = 0
layout.overpassTimeout = 600
layout.defaultBackgroundId = params["background"] ?? layout.defaultBackgroundId
for (const paramsKey in params) {
if (paramsKey.startsWith("layer-")) {
const layerName = paramsKey.substring("layer-".length)
const key = params[paramsKey].toLowerCase().trim()
const layer = layout.layers.find((l) => l.id === layerName)
if (layer === undefined) {
throw "No layer found for " + paramsKey
}
if (key === "force") {
layer.minzoom = 0
layer.minzoomVisible = 0
}
}
}
const zoom = Number(params["zoom"] ?? params["z"] ?? 14)
const state = new ThemeViewState(layout)
state.mapProperties.location.setData({
lat: this.options?.overrideLocation?.lat ?? Number(params["lat"] ?? 51.05016),
lon: this.options?.overrideLocation?.lon ?? Number(params["lon"] ?? 3.717842),
})
state.mapProperties.zoom.setData(zoom)
const fl = Array.from(state.layerState.filteredLayers.values())
for (const filteredLayer of fl) {
if (params["layer-" + filteredLayer.layerDef.id] !== undefined) {
filteredLayer.isDisplayed.setData(
loadData &&
params["layer-" + filteredLayer.layerDef.id].trim().toLowerCase() !==
"false"
)
} else if (params["layers"] === "none") {
filteredLayer.isDisplayed.setData(false)
} else if (filteredLayer.layerDef.id.startsWith("note_import")) {
filteredLayer.isDisplayed.setData(false)
}
}
for (const paramsKey in params) {
if (paramsKey.startsWith("layer-")) {
const layerName = paramsKey.substring("layer-".length)
const key = params[paramsKey].toLowerCase().trim()
const isDisplayed = loadData && (key === "true" || key === "force")
const layer = fl.find((l) => l.layerDef.id === layerName)
if (!loadData) {
console.log(
"Not loading map data as 'loadData' is falsed, this is probably a test run"
)
} else {
console.log(
"Setting ",
layer?.layerDef?.id,
" to visibility",
isDisplayed,
"(minzoom:",
layer?.layerDef?.minzoomVisible,
layer?.layerDef?.minzoom,
")"
)
}
layer.isDisplayed.setData(loadData && isDisplayed)
if (key === "force" && loadData) {
layer.layerDef.minzoom = 0
layer.layerDef.minzoomVisible = 0
layer.isDisplayed.addCallback((isDisplayed) => {
if (!isDisplayed) {
console.warn("Forcing layer " + paramsKey + " as true")
layer.isDisplayed.setData(true)
}
})
}
}
}
const pngCreator = new PngMapCreator(state, {
width: 4 * width,
height: 4 * height,
})
png = await pngCreator.CreatePng(this.options.freeComponentId, this._state)
if (!png) {
throw "PngCreator did not output anything..."
}
}
//*/
svgImage.setAttribute("xlink:href", await SvgToPdfPage.blobToBase64(png))
svgImage.style.width = width + "mm"
svgImage.style.height = height + "mm"