diff --git a/src/UI/InputElement/Helpers/DirectionInput.svelte b/src/UI/InputElement/Helpers/DirectionInput.svelte
index 134fe778eb..2ffdf7e40c 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 3bbb4e9043..9b62c4d766 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"}