Improve 'slopes' input, add compass indicator

src/UI/BigComponents/Summary.svelte

@@ -3,6 +3,8 @@
   import type { SpecialVisualizationState } from "../SpecialVisualization"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
   import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte"
+  import { GeoOperations } from "../../Logic/GeoOperations"
+  import { Store } from "../../Logic/UIEventSource"
 
   export let state: SpecialVisualizationState
   export let feature: Feature
@@ -16,11 +18,22 @@
     state.selectedLayer.setData(layer)
     state.selectedElement.setData(feature)
   }
+
+  let bearingAndDist: Store<{ bearing: number, dist: number }> = state.mapProperties.location.map(l => {
+      let fcenter = GeoOperations.centerpointCoordinates(feature)
+      let mapCenter = [l.lon, l.lat]
+
+      let bearing = Math.round(GeoOperations.bearing(fcenter, mapCenter))
+      let dist = Math.round(GeoOperations.distanceBetween(fcenter, mapCenter))
+      return { bearing, dist }
+    },
+  )
 </script>
 
-<button class="cursor-pointer small" on:click={() => select()}>
+<button class="cursor-pointer small flex" on:click={() => select()}>
   {#if i !== undefined}
     <span class="font-bold">{i + 1}.</span>
   {/if}
   <TagRenderingAnswer config={layer.title} {layer} selectedElement={feature} {state} {tags} />
+  <span class="flex">{$bearingAndDist.dist}m {$bearingAndDist.bearing}°</span>
 </button>