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 : ( - - - Latitude: {position.lat}
- Longitude: {position.lng} -
-
+ ) } @@ -41,9 +36,21 @@ const fitNZBounds = (map) => { map.fitBounds(NZ_BOUNDS); } +function CoordinatesDisplay(props) { + const savedCoordinates = props.filters["coordinates"]; + return savedCoordinates ? ( +
+ Latitude: {savedCoordinates.lat}
+ Longitude: {savedCoordinates.lng} +
+ ) : null; +} + + export default function Map(props) { return (
+