Use protomaps.sunny as default layer

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) {