Refactoring: new background selector

UI/Map/RasterLayerOverview.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    /**
+     * The RasterLayerOverview shows the available 4 categories of maps with a RasterLayerPicker
+     */
+    import {Store, UIEventSource} from "../../Logic/UIEventSource";
+    import type {RasterLayerPolygon} from "../../Models/RasterLayers";
+    import type {MapProperties} from "../../Models/MapProperties";
+    import {Map as MlMap} from "maplibre-gl";
+    import RasterLayerPicker from "./RasterLayerPicker.svelte";
+    import type {EliCategory} from "../../Models/RasterLayerProperties";
+    import UserRelatedState from "../../Logic/State/UserRelatedState";
+    import Translations from "../i18n/Translations";
+    import Tr from "../Base/Tr.svelte";
+
+    export let availableLayers: Store<RasterLayerPolygon[]>
+    export let mapproperties: MapProperties
+    export let userstate: UserRelatedState
+    export let map: Store<MlMap>
+    /**
+     * Used to toggle the background layers on/off
+     */
+    export let visible: UIEventSource<boolean> = undefined
+
+    type CategoryType = "photo" | "map" | "other" | "osmbasedmap"
+    const categories: Record<CategoryType, EliCategory[]> = {
+        "photo": ["photo", "historicphoto"],
+        "map": ["map", "historicmap"],
+        "other": ["other", "elevation"],
+        "osmbasedmap": ["osmbasedmap"]
+    }
+
+    function availableForCategory(type: CategoryType): Store<RasterLayerPolygon[]> {
+        const keywords = categories[type]
+        return availableLayers.mapD(available => available.filter(layer =>
+            keywords.indexOf(<EliCategory>layer.properties.category) >= 0
+        ))
+    }
+
+    const mapLayers = availableForCategory("map")
+    const osmbasedmapLayers = availableForCategory("osmbasedmap")
+    const photoLayers = availableForCategory("photo")
+    const otherLayers = availableForCategory("other")
+
+    function onApply() {
+        visible.setData(false)
+    }
+
+    function getPref(type: CategoryType): UIEventSource<string> {
+        return userstate.osmConnection.GetPreference("preferred-layer-" + type)
+    }
+
+</script>
+
+
+<div class="h-full flex flex-col">
+    <slot name="title">
+        <h2>
+            <Tr t={Translations.t.general.backgroundMap}/>
+        </h2>
+    </slot>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 h-full w-full">
+        <RasterLayerPicker availableLayers={photoLayers} favourite={getPref("photo")} {map} {mapproperties}
+                           on:appliedLayer={onApply} {visible}/>
+        <RasterLayerPicker availableLayers={mapLayers} favourite={getPref("map")} {map} {mapproperties}
+                           on:appliedLayer={onApply} {visible}/>
+        <RasterLayerPicker availableLayers={osmbasedmapLayers} favourite={getPref("osmbasedmap")}
+                           {map} {mapproperties} on:appliedLayer={onApply} {visible}/>
+        <RasterLayerPicker availableLayers={otherLayers} favourite={getPref("other")} {map} {mapproperties}
+                           on:appliedLayer={onApply} {visible}/>
+    </div>
+
+</div>