More fixes to export functionality

src/UI/Map/MapLibreAdaptor.ts

@@ -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.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
+        for (let i = 0; i < labels.length; i++) {
-        element.style.height = h
+            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,7 +385,7 @@ 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)

src/UI/Map/MaplibreMap.svelte

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

src/Utils/pngMapCreator.ts

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

src/Utils/svgToPdf.ts

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