Feature:improve offline basemap retention and fallback behaviour

src/Models/RasterLayers.ts

@@ -8,8 +8,8 @@ import { BBox } from "../Logic/BBox"
 import { Store, Stores } from "../Logic/UIEventSource"
 import { GeoOperations } from "../Logic/GeoOperations"
 import { EliCategory, RasterLayerProperties } from "./RasterLayerProperties"
-import { Utils } from "../Utils"
 import { default as ELI } from "../../public/assets/data/editor-layer-index.json"
+import { IsOnline } from "../Logic/Web/IsOnline"
 
 export type EditorLayerIndex = (Feature<Polygon, EditorLayerIndexProperties> & RasterLayerPolygon)[]
 
@@ -20,8 +20,6 @@ export class AvailableRasterLayers {
         return AvailableRasterLayers._editorLayerIndex
     }
 
-    public static readonly globalLayers: ReadonlyArray<RasterLayerPolygon> =
-        AvailableRasterLayers.initGlobalLayers()
     public static bing = <RasterLayerPolygon>bingJson
     public static readonly osmCartoProperties: RasterLayerProperties = {
         id: "osm",
@@ -29,19 +27,42 @@ export class AvailableRasterLayers {
         url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
         attribution: {
             text: "OpenStreetMap",
-            url: "https://openStreetMap.org/copyright",
+            url: "https://openStreetMap.org/copyright"
         },
         best: true,
         max_zoom: 19,
         min_zoom: 0,
-        category: "osmbasedmap",
+        category: "osmbasedmap"
     }
     public static readonly osmCarto: RasterLayerPolygon = {
         type: "Feature",
         properties: AvailableRasterLayers.osmCartoProperties,
-        geometry: BBox.global.asGeometry(),
+        geometry: BBox.global.asGeometry()
     }
 
+    public static readonly sunnyOfflineProperties: RasterLayerProperties = {
+        "style": "./assets/sunny.json",
+        "best": true,
+        "id": "protomaps.sunny-self",
+        "name": "Protomaps Sunny",
+        "type": "vector",
+        "category": "osmbasedmap",
+        "attribution": {
+            "text": "Protomaps",
+            "url": "https://protomaps.com/"
+        },
+        url: "https://mapcomplete.org/"
+    }
+    public static readonly sunnyOffline: RasterLayerPolygon = {
+        type: "Feature",
+        properties: AvailableRasterLayers.sunnyOfflineProperties,
+        geometry: BBox.global.asGeometry()
+    }
+
+
+    public static readonly globalLayers: ReadonlyArray<RasterLayerPolygon> =
+        AvailableRasterLayers.initGlobalLayers()
+
     public static allAvailableGlobalLayers = new Set([
         ...AvailableRasterLayers.globalLayers,
         AvailableRasterLayers.osmCarto,
@@ -53,6 +74,7 @@ export class AvailableRasterLayers {
             (properties) =>
                 properties.id !== "osm.carto" && properties.id !== "Bing" /*Added separately*/
         )
+        gl.unshift(AvailableRasterLayers.sunnyOfflineProperties)
         const glEli: RasterLayerProperties[] = globallayersEli["default"] ?? globallayersEli
         const joined = gl.concat(glEli)
         if (joined.some((j) => !j.id)) {
@@ -71,20 +93,13 @@ export class AvailableRasterLayers {
     /**
      * The default background layer that any theme uses which does not explicitly define a background
      */
-    public static readonly defaultBackgroundLayer: RasterLayerPolygon =
-        AvailableRasterLayers.globalLayers.find((l) => {
-            return l.properties.id === "protomaps.sunny"
-        })
+    public static readonly defaultBackgroundLayer: RasterLayerPolygon = AvailableRasterLayers.sunnyOffline
 
     public static layersAvailableAt(
         location: Store<{ lon: number; lat: number }>,
         enableBing?: Store<boolean>
-    ): { store: Store<RasterLayerPolygon[]> } {
-        const store = { store: undefined }
-        Utils.AddLazyProperty(store, "store", () =>
-            AvailableRasterLayers._layersAvailableAt(location, enableBing)
-        )
-        return store
+    ): Store<RasterLayerPolygon[]> {
+        return AvailableRasterLayers._layersAvailableAt(location, enableBing)
     }
 
     private static _layersAvailableAt(
@@ -101,6 +116,9 @@ export class AvailableRasterLayers {
         return Stores.ListStabilized(
             availableLayersBboxes.mapD(
                 (eliPolygons) => {
+                    if (!IsOnline.isOnline.data) {
+                        return [this.sunnyOffline]
+                    }
                     const loc = location.data
                     const lonlat: [number, number] = [loc?.lon ?? 0, loc?.lat ?? 0]
                     const matching: RasterLayerPolygon[] = eliPolygons.filter((eliPolygon) => {
@@ -118,14 +136,14 @@ export class AvailableRasterLayers {
                     if (
                         !matching.some(
                             (l) =>
-                                l.id === AvailableRasterLayers.defaultBackgroundLayer.properties.id
+                                l.id === AvailableRasterLayers.defaultBackgroundLayer?.properties?.id
                         )
                     ) {
                         matching.push(AvailableRasterLayers.defaultBackgroundLayer)
                     }
                     return matching
                 },
-                [enableBing]
+                [enableBing, IsOnline.isOnline]
             )
         )
     }
@@ -141,7 +159,7 @@ export class RasterLayerUtils {
      * @param ignoreLayer
      * @param skipLayers Skip the first N layers
      */
-    public static SelectBestLayerAccordingTo(
+    public static selectBestLayerAccordingTo(
         available: RasterLayerPolygon[],
         preferredCategory: string,
         ignoreLayer?: RasterLayerPolygon,