Fix overlay layers

UI/BigComponents/OverlayToggle.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">/**
+ * The OverlayToggle shows a single toggle to enable or disable an overlay
+ */
+import Checkbox from "../Base/Checkbox.svelte";
+import { onDestroy } from "svelte";
+import { UIEventSource } from "../../Logic/UIEventSource";
+import Tr from "../Base/Tr.svelte";
+import Translations from "../i18n/Translations";
+import type { RasterLayerProperties } from "../../Models/RasterLayers";
+import { Translation } from "../i18n/Translation";
+
+export let layerproperties : RasterLayerProperties
+export let state: {isDisplayed: UIEventSource<boolean>};
+export let zoomlevel: UIEventSource<number>;
+export let highlightedLayer: UIEventSource<string> | undefined;
+
+let isDisplayed: boolean = state.isDisplayed.data;
+onDestroy(state.isDisplayed.addCallbackAndRunD(d => {
+  isDisplayed = d;
+  return false;
+}));
+
+
+let mainElem: HTMLElement;
+$:  onDestroy(
+  highlightedLayer.addCallbackAndRun(highlightedLayer => {
+    if (highlightedLayer === layerproperties.id) {
+      mainElem?.classList?.add("glowing-shadow");
+    } else {
+      mainElem?.classList?.remove("glowing-shadow");
+    }
+  })
+);
+</script>
+{#if layerproperties.name}
+  <div bind:this={mainElem}>
+    <label class="flex gap-1">
+      <Checkbox selected={state.isDisplayed} />
+      <Tr t={new Translation(layerproperties.name)}/>
+      {#if $zoomlevel < layerproperties.min_zoom}
+        <span class="alert">
+          <Tr t={Translations.t.general.layerSelection.zoomInToSeeThisLayer} />
+        </span>
+      {/if}
+    </label>
+  </div>
+{/if}