Display selected coordinates on the map in the top right

frontend/src/assets/styles/map.scss

@@ -1,4 +1,19 @@
 .map-container, .leaflet-container {
     height: 100%;
     width: 100%;
+    position: relative;
+    z-index: 1;
+}
+
+.coordinates-display {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 2;
+    font-size: 12px;
+    background: white;
+    color: $background-color-primary; 
+    padding: 3px 6px;
+    margin: 6px;
+    border-radius: 5px;
 }

frontend/src/components/steps/location/Map.js

@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet'
 
 const NZ_BOUNDS = [
   [-47.204642, 165.344238],
@@ -28,12 +28,7 @@ function LocationMarker(props) {
   })
 
   return position === null ? null : (
-    <Marker position={position}>
+    <Marker position={position} />
-      <Popup>
-        <strong>Latitude:</strong> {position.lat} <br/>
-        <strong>Longitude:</strong> {position.lng}
-        </Popup>
-    </Marker>
   )
 }
 
@@ -41,9 +36,21 @@ const fitNZBounds = (map) => {
   map.fitBounds(NZ_BOUNDS);
 }
 
+function CoordinatesDisplay(props) {
+  const savedCoordinates = props.filters["coordinates"];
+  return savedCoordinates ? (
+    <div class='coordinates-display'>
+      <strong>Latitude:</strong> {savedCoordinates.lat} <br />
+      <strong>Longitude:</strong> {savedCoordinates.lng}
+    </div>
+  ) : null;
+}
+
+
 export default function Map(props) {
   return (
     <div className="map-container">
+      <CoordinatesDisplay {...props} />
       <MapContainer scrollWheelZoom={true} whenCreated={fitNZBounds}>
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'