Use protomaps.sunny as default layer

src/UI/BigComponents/WaySplitMap.svelte

@@ -106,6 +106,6 @@
 </script>
 
 <div class="h-full w-full relative">
-  <MaplibreMap {map} />
+  <MaplibreMap {map} mapProperties={adaptor} />
   <SmallZoomButtons {adaptor} />
 </div>

src/UI/DownloadFlow/DownloadPdf.svelte

@@ -25,7 +25,7 @@
     const templateUrls = SvgToPdf.templates[templateName].pages
     const templates: string[] = await Promise.all(templateUrls.map((url) => Utils.download(url)))
     console.log("Templates are", templates)
-    const bg = state.mapProperties.rasterLayer.data ?? AvailableRasterLayers.maptilerDefaultLayer
+    const bg = state.mapProperties.rasterLayer.data ?? AvailableRasterLayers.defaultBackgroundLayer
     const creator = new SvgToPdf(title, templates, {
       state,
       freeComponentId: "belowmap",

src/UI/InputElement/Helpers/DirectionInput.svelte

@@ -63,7 +63,7 @@
   on:touchstart={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)}
 >
   <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
-    <MaplibreMap attribution={false} {map} />
+    <MaplibreMap mapProperties={mla} {map} />
   </div>
 
   <div bind:this={directionElem} class="absolute top-0 left-0 h-full w-full">

src/UI/InputElement/Helpers/LocationInput.svelte

@@ -84,7 +84,7 @@
 
 <div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
   <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
-    <MaplibreMap center={{ lng: initialCoordinate.lon, lat: initialCoordinate.lat }} {map} />
+    <MaplibreMap center={{ lng: initialCoordinate.lon, lat: initialCoordinate.lat }} {map} mapProperties={mla}/>
   </div>
 
   <div

src/UI/InputElement/InputHelpers.ts

@@ -60,6 +60,11 @@ export default class InputHelpers {
         if (!mapProperties.zoom) {
             mapProperties = { ...mapProperties, zoom: new UIEventSource<number>(zoom) }
         }
+        if (!mapProperties.rasterLayer) {
+       /*     mapProperties = {
+                ...mapProperties, rasterLayer: properties?.mapProperties?.rasterLayer
+            }*/
+        }
         return mapProperties
     }
 
@@ -72,7 +77,7 @@ export default class InputHelpers {
         const searchKey: string = <string>args[0] ?? "name"
 
         const searchFor: string = searchKey.split(";").map(k => inputHelperOptions.feature?.properties[k]?.toLowerCase())
-                .find(foundValue => !!foundValue) ?? ""
+            .find(foundValue => !!foundValue) ?? ""
 
         let searchForValue: UIEventSource<string> = new UIEventSource(searchFor)
         const options: any = args[1]
@@ -120,7 +125,7 @@ export default class InputHelpers {
             value,
             searchText: searchForValue,
             instanceOf,
-            notInstanceOf,
+            notInstanceOf
         })
     }
 }

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

src/UI/Popup/AutoApplyButton.ts

@@ -110,7 +110,7 @@ class ApplyButton extends UIElement {
         mla.allowZooming.setData(false)
         mla.allowMoving.setData(false)
 
-        const previewMap = new SvelteUIElement(MaplibreMap, { map: mlmap }).SetClass("h-48")
+        const previewMap = new SvelteUIElement(MaplibreMap, { mapProperties: mla, map: mlmap }).SetClass("h-48")
 
         const features = this.target_feature_ids.map((id) =>
             this.state.indexedFeatures.featuresById.data.get(id)

src/UI/Popup/ImportButtons/WayImportFlow.svelte

@@ -48,7 +48,7 @@
 <ImportFlow {importFlow} on:confirm={() => importFlow.onConfirm()}>
   <div slot="map" class="relative">
     <div class="h-32">
-      <MaplibreMap {map} />
+      <MaplibreMap {map} mapProperties={mla} />
     </div>
     <div class="absolute bottom-0">
       <OpenBackgroundSelectorButton />

src/UI/Popup/MinimapViz.ts

@@ -109,7 +109,7 @@ export class MinimapViz implements SpecialVisualization {
             state.layout.layers
         )
 
-        return new SvelteUIElement(MaplibreMap, { interactive: false, map: mlmap })
+        return new SvelteUIElement(MaplibreMap, { interactive: false, map: mlmap, mapProperties: mla })
             .SetClass("h-40 rounded")
             .SetStyle("overflow: hidden; pointer-events: none;")
     }

src/UI/ThemeViewGUI.svelte

@@ -149,7 +149,7 @@
   let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
   let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
   let rasterLayerName =
-    rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name
+    rasterLayer.data?.properties?.name ?? AvailableRasterLayers.defaultBackgroundLayer.properties.name
   onDestroy(
     rasterLayer.addCallbackAndRunD((l) => {
       rasterLayerName = l.properties.name
@@ -180,7 +180,7 @@
 </script>
 
 <div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
-  <MaplibreMap map={maplibremap} />
+  <MaplibreMap map={maplibremap} mapProperties={mapproperties} />
 </div>
 
 {#if $visualFeedback}