Performance: lazily download ELI when needed instead of bundling this in the download

src/UI/Map/RasterLayerHandler.ts

@@ -22,7 +22,7 @@ class SingleBackgroundHandler {
     constructor(
         map: Store<MLMap>,
         targetLayer: RasterLayerPolygon,
-        background: UIEventSource<RasterLayerPolygon | undefined>
+        background: UIEventSource<RasterLayerPolygon | undefined>,
     ) {
         this._targetLayer = targetLayer
         this._map = map
@@ -57,10 +57,15 @@ class SingleBackgroundHandler {
             "Removing raster layer",
             this._targetLayer.properties.id,
             "map moved and not been used for",
-            SingleBackgroundHandler.DEACTIVATE_AFTER
+            SingleBackgroundHandler.DEACTIVATE_AFTER,
         )
-        if (map.getLayer(<string>this._targetLayer.properties.id)) {
-            map.removeLayer(<string>this._targetLayer.properties.id)
+        try {
+
+            if (map.getLayer(<string>this._targetLayer.properties.id)) {
+                map.removeLayer(<string>this._targetLayer.properties.id)
+            }
+        } catch (e) {
+            console.warn("Could not (try to) remove the raster layer", e)
         }
     }
 
@@ -152,7 +157,7 @@ class SingleBackgroundHandler {
                             "raster-opacity": 0,
                         },
                     },
-                    addLayerBeforeId
+                    addLayerBeforeId,
                 )
                 this.opacity.addCallbackAndRun((o) => {
                     try {
@@ -170,14 +175,14 @@ class SingleBackgroundHandler {
     private fadeOut() {
         Stores.Chronic(
             8,
-            () => this.opacity.data > 0 && this._deactivationTime !== undefined
+            () => this.opacity.data > 0 && this._deactivationTime !== undefined,
         ).addCallback((_) => this.opacity.setData(Math.max(0, this.opacity.data - this.fadeStep)))
     }
 
     private fadeIn() {
         Stores.Chronic(
             8,
-            () => this.opacity.data < 1.0 && this._deactivationTime === undefined
+            () => this.opacity.data < 1.0 && this._deactivationTime === undefined,
         ).addCallback((_) => this.opacity.setData(Math.min(1.0, this.opacity.data + this.fadeStep)))
     }
 }
@@ -195,7 +200,7 @@ export default class RasterLayerHandler {
     }
 
     public static prepareSource(
-        layer: RasterLayerProperties
+        layer: RasterLayerProperties,
     ): RasterSourceSpecification | VectorSourceSpecification {
         if (layer.type === "vector") {
             const vs: VectorSourceSpecification = {

src/UI/Map/RasterLayerOverview.svelte

@@ -12,11 +12,13 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import TitledPanel from "../Base/TitledPanel.svelte"
+  import Loading from "../Base/Loading.svelte"
 
-  export let availableLayers: Store<RasterLayerPolygon[]>
+  export let availableLayers: {store: Store<RasterLayerPolygon[]>}
   export let mapproperties: MapProperties
   export let userstate: UserRelatedState
   export let map: Store<MlMap>
+  let _availableLayers = availableLayers.store
   /**
    * Used to toggle the background layers on/off
    */
@@ -32,8 +34,8 @@
 
   function availableForCategory(type: CategoryType): Store<RasterLayerPolygon[]> {
     const keywords = categories[type]
-    return availableLayers.mapD((available) =>
-      available.filter((layer) => keywords.indexOf(<EliCategory>layer.properties.category) >= 0)
+    return _availableLayers.mapD((available) =>
+      available.filter((layer) => keywords.indexOf(<EliCategory>layer.properties.category) >= 0),
     )
   }
 
@@ -53,39 +55,42 @@
 
 <TitledPanel>
   <Tr slot="title" t={Translations.t.general.backgroundMap} />
-
-  <div class="grid h-full w-full grid-cols-1 gap-2 md:grid-cols-2">
-    <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>
+  {#if $_availableLayers?.length < 1}
+    <Loading />
+  {:else }
+    <div class="grid h-full w-full grid-cols-1 gap-2 md:grid-cols-2">
+      <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>
+  {/if}
 </TitledPanel>

src/UI/Map/RasterLayerPicker.svelte

@@ -9,7 +9,7 @@
   /***
    * Chooses a background-layer out of available options
    */
-  export let availableLayers: Store<RasterLayerPolygon[]>
+  export let availableLayers: RasterLayerPolygon[]
   export let mapproperties: MapProperties
   export let map: Store<MlMap>
 
@@ -19,34 +19,26 @@
 
   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])
-    })
-  )
+  let rasterLayer = new UIEventSource<RasterLayerPolygon>(availableLayers[0])
+  let rasterLayerId = rasterLayer.sync(l => l?.properties?.id, [], id => availableLayers.find(l => l.properties.id === id))
+  rasterLayer.setData(availableLayers[0])
+  $: rasterLayer.setData(availableLayers[0])
 
   if (favourite) {
     onDestroy(
       favourite.addCallbackAndRunD((favourite) => {
-        const fav = availableLayers.data?.find((l) => l.properties.id === favourite)
+        const fav = availableLayers?.find((l) => l.properties.id === favourite)
         if (!fav) {
           return
         }
         rasterLayer.setData(fav)
-      })
+      }),
     )
 
     onDestroy(
       rasterLayer.addCallbackAndRunD((selected) => {
         favourite?.setData(selected.properties.id)
-      })
+      }),
     )
   }
 
@@ -56,13 +48,14 @@
     onDestroy(
       visible?.addCallbackAndRunD((visible) => {
         if (visible) {
-          rasterLayerOnMap.setData(rasterLayer.data ?? availableLayers.data[0])
+          rasterLayerOnMap.setData(rasterLayer.data ?? availableLayers[0])
         } else {
           rasterLayerOnMap.setData(undefined)
         }
-      })
+      }),
     )
   }
+
   function apply() {
     mapproperties.rasterLayer.setData(rasterLayer.data)
     dispatch("appliedLayer")
@@ -75,7 +68,7 @@
   }
 </script>
 
-{#if hasLayers}
+{#if availableLayers?.length > 0}
   <form class="flex h-full w-full flex-col" on:submit|preventDefault={() => {}}>
     <button
       tabindex="-1"
@@ -92,9 +85,9 @@
         />
       </span>
     </button>
-    <select bind:value={$rasterLayer} class="w-full" on:keydown={handleKeyPress}>
-      {#each $availableLayers as availableLayer}
-        <option value={availableLayer}>
+    <select bind:value={$rasterLayerId} class="w-full" on:keydown={handleKeyPress}>
+      {#each availableLayers as availableLayer}
+        <option value={availableLayer.properties.id}>
           {availableLayer.properties.name}
         </option>
       {/each}

src/UI/SpecialVisualization.ts

@@ -88,8 +88,6 @@ export interface SpecialVisualizationState {
         readonly language: UIEventSource<string>
     }
 
-    readonly availableLayers: Store<RasterLayerPolygon[]>
-
     readonly imageUploadManager: ImageUploadManager
 
     readonly previewedImage: UIEventSource<ProvidedImage>