Use protomaps.sunny as default layer

src/UI/Map/MapLibreAdaptor.ts

@@ -60,6 +60,8 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         if(!MapLibreAdaptor.pmtilesInited){
             maplibregl.addProtocol("pmtiles",new Protocol().tile);
             MapLibreAdaptor.pmtilesInited = true
+            console.log("PM-tiles protocol added" +
+                "")
         }
         this._maplibreMap = maplibreMap
 

src/UI/Map/MaplibreMap.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import { onDestroy, onMount } from "svelte"
-  import type { Map } from "maplibre-gl"
+  import type { Map, MapOptions } from "maplibre-gl"
   import * as maplibre from "maplibre-gl"
-  import type { Readable, Writable } from "svelte/store"
-  import { get, writable } from "svelte/store"
+  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"
   import Translations from "../i18n/Translations"
+  import type { MapProperties } from "../../Models/MapProperties"
+  import type { RasterLayerProperties } from "../../Models/RasterLayerProperties"
 
   /**
    * The 'MaplibreMap' maps various event sources onto MapLibre.
@@ -17,40 +19,43 @@
    * Beware: this map will _only_ be set by this component
    * It should thus be treated as a 'store' by external parties
    */
-  export let map: Writable<Map>
+  export let map: Writable<Map> = undefined
+  export let mapProperties: MapProperties = undefined
 
   export let interactive: boolean = true
 
   let container: HTMLElement
 
-  export let center: { lng: number; lat: number } | Readable<{ lng: number; lat: number }> =
-    writable({ lng: 0, lat: 0 })
-  export let zoom: Readable<number> = writable(1)
-
-  const styleUrl = AvailableRasterLayers.maptilerDefaultLayer.properties.url
 
   let _map: Map
   onMount(() => {
-    let _center: { lng: number; lat: number }
-    if (typeof center["lng"] === "number" && typeof center["lat"] === "number") {
-      _center = <any>center
+    const { lon, lat } = mapProperties?.location?.data ?? { lon: 0, lat: 0 }
+
+    const rasterLayer: RasterLayerProperties = mapProperties?.rasterLayer?.data?.properties
+    let styleUrl: string
+    if (rasterLayer?.type === "vector") {
+      styleUrl = rasterLayer?.style ?? rasterLayer?.url ?? AvailableRasterLayers.defaultBackgroundLayer.properties.url
     } else {
-      _center = get(<any>center)
+      const defaultLayer = AvailableRasterLayers.defaultBackgroundLayer.properties
+      styleUrl = defaultLayer.style ?? defaultLayer.url
     }
 
-    _map = new maplibre.Map({
+    console.log("INiting mapLIbremap with style", styleUrl)
+
+    const options: MapOptions = {
       container,
       style: styleUrl,
-      zoom: get(zoom),
-      center: _center,
+      zoom: mapProperties?.zoom?.data ?? 1,
+      center: { lng: lon, lat },
       maxZoom: 24,
       interactive: true,
-      attributionControl: false,
-    })
+      attributionControl: false
+    }
+    _map = new maplibre.Map(options)
     window.requestAnimationFrame(() => {
       _map.resize()
     })
-    _map.on("load", function () {
+    _map.on("load", function() {
       _map.resize()
       const canvas = _map.getCanvas()
       if (interactive) {

src/UI/Map/OverlayMap.svelte

@@ -74,4 +74,4 @@
      style="z-index: 100">
   <StyleLoadingIndicator map={altmap} />
 </div>
-<MaplibreMap {interactive} map={altmap} />
+<MaplibreMap {interactive} map={altmap} mapProperties={altproperties} />

src/UI/Map/RasterLayerHandler.ts

@@ -108,7 +108,11 @@ class SingleBackgroundHandler {
         }
         const background = this._targetLayer.properties
         console.debug("Enabling", background.id)
-        let addLayerBeforeId = "aeroway_fill" // this is the first non-landuse item in the stylesheet, we add the raster layer before the roads but above the landuse
+        let addLayerBeforeId = "transit_pier" // this is the first non-landuse item in the stylesheet, we add the raster layer before the roads but above the landuse
+        if(!map.getLayer(addLayerBeforeId)){
+            console.warn("Layer", addLayerBeforeId,"not foundhttp://127.0.0.1:1234/theme.html?layout=cyclofix&z=14.8&lat=51.05282501324558&lon=3.720591622281745&layer-range=true")
+            addLayerBeforeId = undefined
+        }
         if (background.category === "osmbasedmap" || background.category === "map") {
             // The background layer is already an OSM-based map or another map, so we don't want anything from the baselayer
             addLayerBeforeId = undefined