Refactoring: move all code files into a src directory

src/UI/Map/RasterLayerPicker.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { RasterLayerPolygon } from "../../Models/RasterLayers"
+  import OverlayMap from "./OverlayMap.svelte"
+  import type { MapProperties } from "../../Models/MapProperties"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
+  import { Map as MlMap } from "maplibre-gl"
+  import { createEventDispatcher, onDestroy } from "svelte"
+
+  /***
+   * Chooses a background-layer out of available options
+   */
+  export let availableLayers: Store<RasterLayerPolygon[]>
+  export let mapproperties: MapProperties
+  export let map: Store<MlMap>
+
+  export let visible: Store<boolean> = undefined
+
+  let dispatch = createEventDispatcher<{ appliedLayer }>()
+
+  export let favourite: UIEventSource<string> | undefined = undefined
+
+  let rasterLayer = new UIEventSource<RasterLayerPolygon>(availableLayers.data?.[0])
+  let hasLayers = true
+  onDestroy(
+    availableLayers.addCallbackAndRun((layers) => {
+      if (layers === undefined || layers.length === 0) {
+        hasLayers = false
+        return
+      }
+      hasLayers = true
+      rasterLayer.setData(layers[0])
+    })
+  )
+
+  if (favourite) {
+    onDestroy(
+      favourite.addCallbackAndRunD((favourite) => {
+        const fav = availableLayers.data?.find((l) => l.properties.id === favourite)
+        if (!fav) {
+          return
+        }
+        rasterLayer.setData(fav)
+      })
+    )
+
+    onDestroy(
+      rasterLayer.addCallbackAndRunD((selected) => {
+        favourite?.setData(selected.properties.id)
+      })
+    )
+  }
+
+  let rasterLayerOnMap = UIEventSource.feedFrom(rasterLayer)
+
+  if (visible) {
+    onDestroy(
+      visible?.addCallbackAndRunD((visible) => {
+        if (visible) {
+          rasterLayerOnMap.setData(rasterLayer.data ?? availableLayers.data[0])
+        } else {
+          rasterLayerOnMap.setData(undefined)
+        }
+      })
+    )
+  }
+</script>
+
+{#if hasLayers}
+  <div class="flex h-full w-full flex-col">
+    <button
+      on:click={() => {
+        mapproperties.rasterLayer.setData(rasterLayer.data)
+        dispatch("appliedLayer")
+      }}
+      class="m-0 h-full w-full p-0"
+    >
+      <OverlayMap
+        rasterLayer={rasterLayerOnMap}
+        placedOverMap={map}
+        placedOverMapProperties={mapproperties}
+        {visible}
+      />
+    </button>
+    <select bind:value={$rasterLayer} class="w-full">
+      {#each $availableLayers as availableLayer}
+        <option value={availableLayer}>
+          {availableLayer.properties.name}
+        </option>
+      {/each}
+    </select>
+  </div>
+{/if}