Commit 0b886f6a authored by Matija Obreza's avatar Matija Obreza
Browse files

Display Location section if there are locations

- Display map only if we have lat/lng in locations
parent 7fb51e51
......@@ -17,4 +17,9 @@ class Location extends UuidModel {
}
}
export interface IGeoPoint {
lat: number;
lng: number;
}
export { Location };
......@@ -386,8 +386,8 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
<Grid container spacing={ 0 }>
{ dataset.locations && (
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-20">
{ dataset.locations && dataset.locations.length > 0 && (
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10">
<Section title="Locations">
<div className="p-20">
<LocationMap locations={ dataset.locations } classes={ {} }/>
......
......@@ -3,7 +3,7 @@ import {withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import {isNumeric} from 'utilities';
import {Location} from 'model/location.model';
import { Location, IGeoPoint } from 'model/location.model';
let Map;
let Marker;
......@@ -62,29 +62,30 @@ class LocationMap extends React.Component<ILocationMapProps, any> {
lng: location.decimalLongitude,
}));
if (!(positions && positions.length)) {
return null;
let min: IGeoPoint;
let max: IGeoPoint;
let center: IGeoPoint;
if (positions && positions.length) {
min = positions.reduce((p, c) => ({
lat: Math.min(p.lat, c.lat),
lng: Math.min(p.lng, c.lng),
}));
max = positions.reduce((p, c) => ({
lat: Math.max(p.lat, c.lat),
lng: Math.max(p.lng, c.lng),
}));
center = {
lat: (min.lat + max.lat) / 2,
lng: (min.lng + max.lng) / 2,
};
}
const min = positions.reduce((p, c) => ({
lat: Math.min(p.lat, c.lat),
lng: Math.min(p.lng, c.lng),
}));
const max = positions.reduce((p, c) => ({
lat: Math.max(p.lat, c.lat),
lng: Math.max(p.lng, c.lng),
}));
const center = {
lat: (min.lat + max.lat) / 2,
lng: (min.lng + max.lng) / 2,
};
return (
<Grid item xs={ 12 }>
{
typeof window !== 'undefined' && (
{ typeof window !== 'undefined' && positions && positions.length > 0 && (
<div className={ classes.leafletContainer }>
<Map
center={ center }
......
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