Commit 103dcd72 authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '42-dataset-locations-map' into 'main'

Dataset locations map

Closes #42

See merge request !41
parents 3583ca2d 7a312c8e
......@@ -257,7 +257,7 @@ class AccessionDetailsPage extends React.Component<AccessionDetailsPageProps & W
<Property title={ t('accession.geo.uncertainty') } value={ details.geo.uncertainty } index={ propertyIndex++ }/>
<Property title={ t('accession.geo.elevation') } value={ details.geo.elevation } index={ propertyIndex++ }/>
{ map.enabled && details.institute && details.geo.latitude && details.geo.longitude &&
<LocationMap position={ { lat: details.geo.latitude, lng: details.geo.longitude } }/>
<LocationMap locations={ [{ lat: details.geo.latitude, lng: details.geo.longitude }] }/>
}
</>
}
......
......@@ -13,6 +13,7 @@ import {Property} from 'ui/common/Property';
import Loading from 'ui/common/Loading';
import PageTitle from 'ui/common/PageTitle';
import Markdown from 'ui/common/Markdown';
import LocationMap from "map/LocationMap";
interface DatasetDetailsPageProps {
match: any;
......@@ -50,6 +51,12 @@ const DatasetDetailsPage = ({match}: DatasetDetailsPageProps) => {
loadData(match.params.uuid);
}, [loadData, match.params])
const locations = React.useMemo(() => {
if (!dataset || !dataset.locations || dataset.locations.length < 1)
return null;
return dataset.locations
.map((location) => ({lat: location.decimalLatitude, lng: location.decimalLongitude}));
}, [dataset])
if (!dataset) {
return (
......@@ -121,8 +128,10 @@ const DatasetDetailsPage = ({match}: DatasetDetailsPageProps) => {
/>
}
{dataset.locations && dataset.locations.length > 0 && (
<>
<LocationMap locations={locations}/>
<Property
title={t('dataset.locations')}
value={ dataset.locations.map((location) => (
......
......@@ -8,7 +8,7 @@ import { MapContainer, TileLayer, Marker } from 'react-leaflet';
interface MapComponentProps {
height?: number;
position: { lat: number; lng: number };
locations: { lat: number; lng: number }[];
}
interface MapComponentState {
......@@ -27,7 +27,7 @@ class LocationMap extends React.Component<MapComponentProps & WithTranslation &
}
public render() {
const { height = 400, appConfig, position } = this.props;
const { height = 400, appConfig, locations } = this.props;
const { url, attribution } = appConfig.map.baseMap;
console.log('map', height);
......@@ -45,13 +45,15 @@ class LocationMap extends React.Component<MapComponentProps & WithTranslation &
zoomControl={ true }
dragging={ false }
doubleClickZoom={ false }
center={ position }
center={ locations[0] }
>
<TileLayer
attribution={ attribution }
url={ url }
/>
<Marker position={ position }><></></Marker>
{locations.map((position, index) => (
<Marker key={`location-${index}`} position={ position }><></></Marker>
))}
</MapContainer>
</div>
);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment