UX: small maps now follow the rotation of the main map, fix #2433, add compass indicators to most of the minimaps

src/UI/InputElement/Helpers/DistanceInput.svelte

@@ -51,10 +51,12 @@
       state?.mapProperties.rasterLayer.addCallbackD((layer) => rasterLayer.set(layer))
     }
   }
-  let mapProperties: Partial<MapProperties> = {
+  let mapProperties: Partial<MapProperties> & { location } = {
     rasterLayer: rasterLayer,
     location: mapLocation,
     zoom: new UIEventSource(args?.zoom ?? 18),
+    rotation: state.mapProperties.rotation.followingClone(),
+    lastClickLocation: new UIEventSource(undefined)
   }
 
   let start: UIEventSource<{ lon: number; lat: number }> = new UIEventSource(undefined)
@@ -98,6 +100,13 @@
     layer: new LayerConfig(conflation),
     features: new StaticFeatureSource(lengthFeature),
   })
+
+  mapProperties.lastClickLocation.addCallbackAndRunD(lonlat => {
+    if (start.data === undefined) {
+      start.set(lonlat)
+    }
+    mapProperties.location.set(lonlat)
+  }, onDestroy)
   const t = Translations.t.input_helpers.distance
 </script>
 

src/UI/InputElement/Helpers/LocationInput.svelte

@@ -14,6 +14,7 @@
   import { createEventDispatcher, onDestroy } from "svelte"
   import Move_arrows from "../../../assets/svg/Move_arrows.svelte"
   import SmallZoomButtons from "../../Map/SmallZoomButtons.svelte"
+  import CompassWidget from "../../BigComponents/CompassWidget.svelte"
 
   /**
    * A visualisation to pick a location on a map background
@@ -92,7 +93,6 @@
 <div class="relative h-full min-h-32 cursor-pointer overflow-hidden">
   <div class="absolute left-0 top-0 h-full w-full cursor-pointer">
     <MaplibreMap
-      center={{ lng: initialCoordinate.lon, lat: initialCoordinate.lat }}
       {map}
       mapProperties={mla}
     />
@@ -108,4 +108,8 @@
 
   <DragInvitation hideSignal={mla.location} />
   <SmallZoomButtons adaptor={mla} />
+  <div class="absolute top-0 left-0 ">
+    <CompassWidget mapProperties={mla} />
+  </div>
 </div>
+