diff --git a/frontend/src/components/steps/location/Map.js b/frontend/src/components/steps/location/Map.js index 8a63d8c..993f9c1 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 { useState, useEffect } from "react" import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet' +import LocationRepository from '../../../repository/LocationRepository' const NZ_BOUNDS = [ [-47.204642, 165.344238], @@ -36,21 +36,41 @@ const fitNZBounds = (map) => { map.fitBounds(NZ_BOUNDS); } -function CoordinatesDisplay(props) { +function LocationDetailsDisplay(props) { + const [locationDetails, setLocationDetails] = useState({}) + + useEffect(() => { + if (props.filters["coordinates"]) { + LocationRepository.getLocationData(props.filters).then(result => { + setLocationDetails(result); + }) + } + }, [props.filters, props.filters.coordinates] ); + const savedCoordinates = props.filters["coordinates"]; - return savedCoordinates ? ( -
- Latitude: {savedCoordinates.lat}
- Longitude: {savedCoordinates.lng} -
- ) : null; + + if (savedCoordinates) { + const soilString = `${locationDetails.soil_name} (${locationDetails.soil_code})` + return ( +
+ Latitude: {savedCoordinates.lat}
+ Longitude: {savedCoordinates.lng}
+ Address: {locationDetails.full_address}
+ Ecological Region: {locationDetails.ecological_region}
+ Ecological District: {locationDetails.ecological_district}
+ Soil Order: {locationDetails.soil_name ? soilString : ""} +
+ ) + } + + return null } export default function Map(props) { return (
- +