Add location details to map screen
This commit is contained in:
parent
f3d2595b23
commit
d3acc27339
1 changed files with 30 additions and 10 deletions
|
@ -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 ? (
|
||||
<div className='coordinates-display'>
|
||||
<strong>Latitude:</strong> {savedCoordinates.lat} <br />
|
||||
<strong>Longitude:</strong> {savedCoordinates.lng}
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
if (savedCoordinates) {
|
||||
const soilString = `${locationDetails.soil_name} (${locationDetails.soil_code})`
|
||||
return (
|
||||
<div className='coordinates-display'>
|
||||
<strong>Latitude:</strong> {savedCoordinates.lat} <br />
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
export default function Map(props) {
|
||||
return (
|
||||
<div className="map-container">
|
||||
<CoordinatesDisplay {...props} />
|
||||
<LocationDetailsDisplay {...props} />
|
||||
<MapContainer scrollWheelZoom={true} whenCreated={fitNZBounds}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
|
|
Loading…
Reference in a new issue