diff --git a/frontend/src/components/steps/location/Map.js b/frontend/src/components/steps/location/Map.js index 4ec77cd..01ed9e5 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, useMap } from 'react-leaflet' +import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet' const NZ_BOUNDS = [ [-47.204642, 165.344238], @@ -9,13 +9,22 @@ const NZ_BOUNDS = [ function LocationMarker(props) { const [position, setPosition] = useState(null) - useMapEvents({ + const map = useMapEvents({ click(e) { const newPosition = e.latlng; setPosition(newPosition); - props.updateFilterState({"latitude": newPosition.lat, "longitude": newPosition.lng}); + props.updateFilterState({"coordinates": newPosition}); props.setNextDisabled(false); - }, + } + }) + + map.whenReady(() => { + const savedCoordinates = props.filters["coordinates"]; + if (!position && savedCoordinates) { + setPosition(savedCoordinates); + props.setNextDisabled(false); + map.flyTo(savedCoordinates, 9) + } }) return position === null ? null : ( @@ -28,22 +37,19 @@ function LocationMarker(props) { ) } -function FitNewZealandBounds() { - const map = useMap() - map.fitBounds(NZ_BOUNDS) - return null +const fitNZBounds = (map) => { + map.fitBounds(NZ_BOUNDS); } export default function Map(props) { return (