From 644552b88d91d886e5cd9d79433b1ae420c992f5 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 24 Sep 2024 16:41:00 +0200
Subject: [PATCH] UI: direction picker now uses the general background layer as
 well

---
 src/UI/InputElement/Helpers/DirectionInput.svelte | 5 +++++
 src/UI/InputElement/InputHelper.svelte            | 1 +
 2 files changed, 6 insertions(+)

diff --git a/src/UI/InputElement/Helpers/DirectionInput.svelte b/src/UI/InputElement/Helpers/DirectionInput.svelte
index 134fe778e..2ffdf7e40 100644
--- a/src/UI/InputElement/Helpers/DirectionInput.svelte
+++ b/src/UI/InputElement/Helpers/DirectionInput.svelte
@@ -5,11 +5,14 @@
   import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
   import MaplibreMap from "../../Map/MaplibreMap.svelte"
   import Direction_stroke from "../../../assets/svg/Direction_stroke.svelte"
+  import type { SpecialVisualizationState } from "../../SpecialVisualization"
 
   /**
    * A visualisation to pick a direction on a map background.
    */
   export let value: UIEventSource<undefined | string>
+  export let state: SpecialVisualizationState = undefined
+
   export let mapProperties: Partial<MapProperties> & {
     readonly location: UIEventSource<{ lon: number; lat: number }>
   }
@@ -17,6 +20,8 @@
   let mla = new MapLibreAdaptor(map, mapProperties)
   mla.allowMoving.setData(false)
   mla.allowZooming.setData(false)
+  state?.mapProperties?.rasterLayer?.addCallbackAndRunD(l => mla.rasterLayer.set(l))
+
   let directionElem: HTMLElement | undefined
   $: value.addCallbackAndRunD((degrees) => {
     if (directionElem === undefined) {
diff --git a/src/UI/InputElement/InputHelper.svelte b/src/UI/InputElement/InputHelper.svelte
index 3bbb4e904..9b62c4d76 100644
--- a/src/UI/InputElement/InputHelper.svelte
+++ b/src/UI/InputElement/InputHelper.svelte
@@ -33,6 +33,7 @@
 {:else if type === "direction"}
   <DirectionInput
     {value}
+    {state}
     mapProperties={InputHelpers.constructMapProperties({ feature, args: args ?? [] })}
   />
 {:else if type === "date"}