diff --git a/frontend/src/assets/styles/map.scss b/frontend/src/assets/styles/map.scss
index fd881df..65bff66 100644
--- a/frontend/src/assets/styles/map.scss
+++ b/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;
}
diff --git a/frontend/src/components/steps/location/Map.js b/frontend/src/components/steps/location/Map.js
index 01ed9e5..7ee7f2e 100644
--- a/frontend/src/components/steps/location/Map.js
+++ b/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],
@@ -13,7 +13,7 @@ function LocationMarker(props) {
click(e) {
const newPosition = e.latlng;
setPosition(newPosition);
- props.updateFilterState({"coordinates": newPosition});
+ props.updateFilterState({ "coordinates": newPosition });
props.setNextDisabled(false);
}
})
@@ -28,12 +28,7 @@ function LocationMarker(props) {
})
return position === null ? null : (
-
- Longitude: {position.lng}
-