Add location details to map screen

This commit is contained in:
Dana Lambert 2021-10-22 16:03:37 +13:00
parent f3d2595b23
commit d3acc27339

View file

@ -1,6 +1,6 @@
import { useState } from "react" import { useState, useEffect } from "react"
import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet' import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet'
import LocationRepository from '../../../repository/LocationRepository'
const NZ_BOUNDS = [ const NZ_BOUNDS = [
[-47.204642, 165.344238], [-47.204642, 165.344238],
@ -36,21 +36,41 @@ const fitNZBounds = (map) => {
map.fitBounds(NZ_BOUNDS); 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"]; const savedCoordinates = props.filters["coordinates"];
return savedCoordinates ? (
if (savedCoordinates) {
const soilString = `${locationDetails.soil_name} (${locationDetails.soil_code})`
return (
<div className='coordinates-display'> <div className='coordinates-display'>
<strong>Latitude:</strong> {savedCoordinates.lat} <br /> <strong>Latitude:</strong> {savedCoordinates.lat} <br />
<strong>Longitude:</strong> {savedCoordinates.lng} <strong>Longitude:</strong> {savedCoordinates.lng} <br />
<strong>Address:</strong> {locationDetails.full_address} <br />
<strong>Ecological Region:</strong> {locationDetails.ecological_region} <br />
<strong>Ecological District:</strong> {locationDetails.ecological_district} <br />
<strong>Soil Order:</strong> {locationDetails.soil_name ? soilString : ""}
</div> </div>
) : null; )
}
return null
} }
export default function Map(props) { export default function Map(props) {
return ( return (
<div className="map-container"> <div className="map-container">
<CoordinatesDisplay {...props} /> <LocationDetailsDisplay {...props} />
<MapContainer scrollWheelZoom={true} whenCreated={fitNZBounds}> <MapContainer scrollWheelZoom={true} whenCreated={fitNZBounds}>
<TileLayer <TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'