diff --git a/frontend/src/components/steps/location/Map.js b/frontend/src/components/steps/location/Map.js index e38ce6f..9de4b32 100644 --- a/frontend/src/components/steps/location/Map.js +++ b/frontend/src/components/steps/location/Map.js @@ -1,10 +1,30 @@ -import { MapContainer, TileLayer, useMap } from 'react-leaflet' +import { useState } from "react" + +import { MapContainer, TileLayer, Marker, Popup, useMapEvents, useMap } from 'react-leaflet' const NZ_BOUNDS = [ [-47.204642, 165.344238], [-34.307144, 179.824219] ] +function LocationMarker() { + const [position, setPosition] = useState(null) + useMapEvents({ + click(e) { + setPosition(e.latlng) + }, + }) + + return position === null ? null : ( + + + Latitude: {position.lat}
+ Longitude: {position.lng} +
+
+ ) +} + function FitNewZealandBounds() { const map = useMap() map.fitBounds(NZ_BOUNDS) @@ -19,6 +39,7 @@ export default function Map() { attribution='© OpenStreetMap contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> +