UX+Docs: improve documentation of background layer switch, export ELI-docs, load background layer based on category

src/Logic/Actors/PreferredRasterLayerSelector.ts

@@ -1,5 +1,6 @@
 import { Store, UIEventSource } from "../UIEventSource"
 import { AvailableRasterLayers, RasterLayerPolygon } from "../../Models/RasterLayers"
+import { eliCategory } from "../../Models/RasterLayerProperties"
 
 /**
  * Selects the appropriate raster layer as background for the given query parameter, theme setting, user preference or default value.
@@ -64,7 +65,7 @@ export class PreferredRasterLayerSelector {
     private async updateLayer() {
         // What is the ID of the layer we have to (try to) load?
         const targetLayerId = (
-            this._queryParameter.data ?? this._preferredBackgroundLayer.data
+            (this._queryParameter.data ?? this._preferredBackgroundLayer.data)?.toLowerCase()
         )?.toLowerCase()
         if (targetLayerId === undefined || targetLayerId === "default") {
             return
@@ -77,8 +78,7 @@ export class PreferredRasterLayerSelector {
             return
         }
         await AvailableRasterLayers.editorLayerIndex()
-        const isCategory =
-            targetLayerId === "photo" || targetLayerId === "osmbasedmap" || targetLayerId === "map"
+        const isCategory = (eliCategory).indexOf(<any> targetLayerId) >= 0
         const available = this._availableLayers.store.data
         const foundLayer = isCategory
             ? available.find((l) => l.properties.category === targetLayerId)

src/Logic/State/FeatureSwitchState.ts

@@ -7,6 +7,9 @@ import { QueryParameters } from "../Web/QueryParameters"
 import Constants from "../../Models/Constants"
 import { Utils } from "../../Utils"
 import { Query } from "pg"
+import { eliCategory } from "../../Models/RasterLayerProperties"
+import { AvailableRasterLayers } from "../../Models/RasterLayers"
+import MarkdownUtils from "../../Utils/MarkdownUtils"
 
 class FeatureSwitchUtils {
     /** Helper function to initialize feature switches
@@ -78,7 +81,7 @@ export default class FeatureSwitchState extends OsmConnectionFeatureSwitches {
 
         const legacyRewrite: Record<string, string | string[]> = {
             "fs-userbadge": "fs-enable-login",
-            "fs-layers": ["fs-filter", "fs-background"],
+            "fs-layers": ["fs-filter", "fs-background"]
         }
 
         for (const key in legacyRewrite) {
@@ -248,7 +251,18 @@ export default class FeatureSwitchState extends OsmConnectionFeatureSwitches {
         this.backgroundLayerId = QueryParameters.GetQueryParameter(
             "background",
             layoutToUse?.defaultBackgroundId,
-            "The id of the background layer to start with"
+            ["When set, load this raster layer (or a layer of this category) as background layer instead of using the default background. This is as if the user opened the background selection menu and selected the layer with the given id or category.",
+                "Most raster layers are based on the [editor layer index](https://github.com/osmlab/editor-layer-index)",
+
+                "#### Selecting a category",
+                "If one of the following values is used, this parameter will be interpreted as a _category_ instead of the id of a specific layer. The best layer of this category will be used. Supported categories are those from the editor layer index and are:",
+                eliCategory.map(c => "- " + c).join("\n"),
+                "#### Selecting a specific layer",
+                "One can use the [ID of an ELI-layer](./ELI-overview.md) or use one of the global, builtin layers:",
+                MarkdownUtils.list(AvailableRasterLayers.globalLayers.map(global =>
+                    global.properties.id+(global.properties.best ? " ⭐" : "")
+                ))
+            ].join("\n\n")
         )
     }
 }

src/Models/RasterLayerProperties.ts

@@ -1,12 +1,12 @@
-export type EliCategory =
-    | "photo"
-    | "map"
-    | "historicmap"
-    | "osmbasedmap"
-    | "historicphoto"
-    | "qa"
-    | "elevation"
-    | "other"
+export const eliCategory = ["photo"
+    , "map"
+    , "historicmap"
+    , "osmbasedmap"
+    , "historicphoto"
+    , "qa"
+    , "elevation"
+    , "other"] as const
+export type EliCategory = (typeof eliCategory)[number]
 
 /**
  * This class has grown beyond the point of only containing Raster Layers

src/Models/RasterLayers.ts

@@ -5,7 +5,7 @@ import * as bingJson from "../assets/bing.json"
 import { BBox } from "../Logic/BBox"
 import { Store, Stores, UIEventSource } from "../Logic/UIEventSource"
 import { GeoOperations } from "../Logic/GeoOperations"
-import { RasterLayerProperties } from "./RasterLayerProperties"
+import { EliCategory, RasterLayerProperties } from "./RasterLayerProperties"
 import { Utils } from "../Utils"
 
 export type EditorLayerIndex = (Feature<Polygon, EditorLayerIndexProperties> & RasterLayerPolygon)[]
@@ -38,7 +38,7 @@ export class AvailableRasterLayers {
                 <RasterLayerPolygon>{
                     type: "Feature",
                     properties,
-                    geometry: BBox.global.asGeometry(),
+                    geometry: BBox.global.asGeometry()
                 }
         )
     public static bing = <RasterLayerPolygon>bingJson
@@ -48,18 +48,18 @@ 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()
     }
 
     /**
@@ -192,19 +192,12 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
     /**
      * A rough categorisation of different types of layers. See https://github.com/osmlab/editor-layer-index/blob/gh-pages/CONTRIBUTING.md#categories for a description of the individual categories.
      */
-    readonly category?:
-        | "photo"
-        | "map"
-        | "historicmap"
-        | "osmbasedmap"
-        | "historicphoto"
-        | "qa"
-        | "elevation"
-        | "other"
+    readonly category?: EliCategory
+
     /**
      * A URL template for imagery tiles
      */
-    readonly url: string
+    readonly    url: string
     readonly min_zoom?: number
     readonly max_zoom?: number
     /**