Display selected coordinates on the map in the top right

This commit is contained in:
Dana Lambert 2021-10-19 16:04:04 +13:00
parent 695aceaaa0
commit aa3f9dc7f0
2 changed files with 30 additions and 8 deletions

View file

@ -1,4 +1,19 @@
.map-container, .leaflet-container {
height: 100%;
width: 100%;
position: relative;
z-index: 1;
}
.coordinates-display {
position: absolute;
right: 0;
top: 0;
z-index: 2;
font-size: 12px;
background: white;
color: $background-color-primary;
padding: 3px 6px;
margin: 6px;
border-radius: 5px;
}

View file

@ -1,6 +1,6 @@
import { useState } from "react"
import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'
import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet'
const NZ_BOUNDS = [
[-47.204642, 165.344238],
@ -28,12 +28,7 @@ function LocationMarker(props) {
})
return position === null ? null : (
<Marker position={position}>
<Popup>
<strong>Latitude:</strong> {position.lat} <br/>
<strong>Longitude:</strong> {position.lng}
</Popup>
</Marker>
<Marker position={position} />
)
}
@ -41,9 +36,21 @@ const fitNZBounds = (map) => {
map.fitBounds(NZ_BOUNDS);
}
function CoordinatesDisplay(props) {
const savedCoordinates = props.filters["coordinates"];
return savedCoordinates ? (
<div class='coordinates-display'>
<strong>Latitude:</strong> {savedCoordinates.lat} <br />
<strong>Longitude:</strong> {savedCoordinates.lng}
</div>
) : null;
}
export default function Map(props) {
return (
<div className="map-container">
<CoordinatesDisplay {...props} />
<MapContainer scrollWheelZoom={true} whenCreated={fitNZBounds}>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'