Use protomaps.sunny as default layer

public/assets/sunny.json

@@ -1147,6 +1147,7 @@
         "fill-opacity": 0.5
       }
     },
+
     {
       "id": "transit_pier",
       "type": "line",

scripts/generateLayouts.ts

@@ -259,7 +259,7 @@ class GenerateLayouts extends Script {
         const urls: string[] = []
         const regex = /{switch:([^}]+)}/
         const rasterLayers = [
-            AvailableRasterLayers.maptilerDefaultLayer,
+            AvailableRasterLayers.defaultBackgroundLayer,
             ...eli.features,
             ...eli_global.layers.map((properties) => ({ properties }))
         ]

src/Models/RasterLayers.ts

@@ -48,26 +48,12 @@ export class AvailableRasterLayers {
         geometry: BBox.global.asGeometry(),
     }
 
-    public static readonly maptilerDefaultLayer: RasterLayerPolygon = {
+    /**
-        type: "Feature",
+     * The default background layer that any theme uses which does not explicitly define a background
-        properties: {
+     */
-            name: "MapTiler",
+    public static readonly defaultBackgroundLayer: RasterLayerPolygon = AvailableRasterLayers.globalLayers.find(l => {
-            url:
+        return l.properties.id === "protomaps.sunny"
-                "https://api.maptiler.com/maps/15cc8f61-0353-4be6-b8da-13daea5f7432/style.json?key=" +
+    })
-                Constants.maptilerApiKey,
-            style:
-                "https://api.maptiler.com/maps/15cc8f61-0353-4be6-b8da-13daea5f7432/style.json?key=" +
-                Constants.maptilerApiKey,
-            category: "osmbasedmap",
-            id: "maptiler",
-            type: "vector",
-            attribution: {
-                text: "Maptiler",
-                url: "https://www.maptiler.com/copyright/",
-            },
-        },
-        geometry: BBox.global.asGeometry(),
-    }
 
     public static layersAvailableAt(
         location: Store<{ lon: number; lat: number }>,
@@ -93,7 +79,7 @@ export class AvailableRasterLayers {
                         return GeoOperations.inside(lonlat, eliPolygon)
                     })
                     matching.unshift(AvailableRasterLayers.osmCarto)
-                    matching.push(AvailableRasterLayers.maptilerDefaultLayer)
+                    matching.push(AvailableRasterLayers.defaultBackgroundLayer)
                     if (enableBing?.data) {
                         matching.push(AvailableRasterLayers.bing)
                     }
@@ -110,7 +96,7 @@ export class AvailableRasterLayers {
         all.push(...AvailableRasterLayers.globalLayers.map((l) => l.properties.id))
         all.push(...AvailableRasterLayers.EditorLayerIndex.map((l) => l.properties.id))
         all.push(this.osmCarto.properties.id)
-        all.push(this.maptilerDefaultLayer.properties.id)
+        all.push(this.defaultBackgroundLayer.properties.id)
         return new Set<string>(all)
     }
 }

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
     }
 
@@ -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 type { Writable } from "svelte/store"
-  import { get, 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,36 +19,39 @@
    * 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 }
+    const { lon, lat } = mapProperties?.location?.data ?? { lon: 0, lat: 0 }
-    if (typeof center["lng"] === "number" && typeof center["lat"] === "number") {
+
-      _center = <any>center
+    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),
+      zoom: mapProperties?.zoom?.data ?? 1,
-      center: _center,
+      center: { lng: lon, lat },
       maxZoom: 24,
       interactive: true,
-      attributionControl: false,
+      attributionControl: false
-    })
+    }
+    _map = new maplibre.Map(options)
     window.requestAnimationFrame(() => {
       _map.resize()
     })

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}

src/Utils/pngMapCreator.ts

@@ -67,7 +67,7 @@ export class PngMapCreator {
             const newZoom = settings.zoom.data + Math.log2(pixelRatio) - 1
             const mapElem = new MlMap({
                 container: div.id,
-                style: AvailableRasterLayers.maptilerDefaultLayer.properties.url,
+                style: AvailableRasterLayers.defaultBackgroundLayer.properties.url,
                 center: [l.lon, l.lat],
                 zoom: newZoom,
                 pixelRatio,

src/assets/global-raster-layers.json

@@ -23,6 +23,18 @@
         "url": "https://github.com/ZeLonewolf/openstreetmap-americana/"
       }
     },
+    {
+      "name": "MapTiler",
+      "url": "https://api.maptiler.com/maps/15cc8f61-0353-4be6-b8da-13daea5f7432/style.json?key=GvoVAJgu46I5rZapJuAy",
+      "style": "https://api.maptiler.com/maps/15cc8f61-0353-4be6-b8da-13daea5f7432/style.json?key=GvoVAJgu46I5rZapJuAy",
+      "category": "osmbasedmap",
+      "id": "maptiler",
+      "type": "vector",
+      "attribution": {
+        "text": "Maptiler",
+        "url": "https://www.maptiler.com/copyright/"
+      }
+    },
     {
       "name": "MapTiler Carto",
       "url": "https://api.maptiler.com/maps/openstreetmap/style.json?key=GvoVAJgu46I5rZapJuAy",
@@ -168,7 +180,9 @@
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
       "style": "https://api.protomaps.com/styles/v2/white.json?key=2af8b969a9e8b692",
-      "connect-src": ["https://protomaps.github.io"],
+      "connect-src": [
+        "https://protomaps.github.io"
+      ],
       "id": "protomaps.white",
       "name": "Protomaps White",
       "type": "vector",
@@ -181,7 +195,9 @@
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
       "style": "https://api.protomaps.com/styles/v2/light.json?key=2af8b969a9e8b692",
-      "connect-src": ["https://protomaps.github.io"],
+      "connect-src": [
+        "https://protomaps.github.io"
+      ],
       "id": "protomaps.light",
       "name": "Protomaps Light",
       "type": "vector",
@@ -193,7 +209,9 @@
     },
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
-      "connect-src": ["https://protomaps.github.io"],
+      "connect-src": [
+        "https://protomaps.github.io"
+      ],
       "style": "https://api.protomaps.com/styles/v2/grayscale.json?key=2af8b969a9e8b692",
       "id": "protomaps.grayscale",
       "name": "Protomaps Grayscale",
@@ -206,7 +224,9 @@
     },
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
-      "connect-src": ["https://protomaps.github.io"],
+      "connect-src": [
+        "https://protomaps.github.io"
+      ],
       "style": "https://api.protomaps.com/styles/v2/dark.json?key=2af8b969a9e8b692",
       "id": "protomaps.dark",
       "name": "Protomaps Dark",
@@ -220,7 +240,9 @@
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
       "style": "https://api.protomaps.com/styles/v2/black.json?key=2af8b969a9e8b692",
-      "connect-src": ["https://protomaps.github.io"],
+      "connect-src": [
+        "https://protomaps.github.io"
+      ],
       "id": "protomaps.black",
       "name": "Protomaps Black",
       "type": "vector",
@@ -233,7 +255,9 @@
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
       "style": "assets/sunny.json",
-      "connect-src": ["https://protomaps.github.io"],
+      "connect-src": [
+        "https://protomaps.github.io"
+      ],
       "id": "protomaps.sunny",
       "name": "Protomaps Sunny",
       "type": "vector",