Commit 4040d698 authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '224-extending-leaflet-maps' into 'master'

Extending Leaflet maps

Closes #224

See merge request genesys-pgr/genesys-ui!232
parents a7e8c158 71706327
This diff is collapsed.
......@@ -18,11 +18,20 @@ import PrettyFilters from 'ui/common/filter/PrettyFilters';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import ContentLayout from 'ui/layout/ContentLayout';
import MapConfigSection from './c/MapConfigSection';
import Control from 'react-leaflet-control';
import MapAccessionsFilters from 'accessions/ui/c/MapAccessionsFilters';
import BioClimateDisplay from 'accessions/ui/c/BioClimateDisplay';
import {Dialog, Drawer} from '@material-ui/core';
import PageTitle from 'ui/common/PageTitle';
import Popover from '@material-ui/core/Popover';
import Paper from '@material-ui/core/Paper';
import Tooltip from '@material-ui/core/Tooltip';
import LayersIcon from '@material-ui/icons/Layers';
import ClimateIcon from '@material-ui/icons/WbSunny';
import FilterIcon from '@material-ui/icons/PermDataSetting';
import CancelIcon from '@material-ui/icons/Cancel';
let Map;
let TileLayer;
......@@ -51,10 +60,23 @@ interface IMapPageProps {
}
const styles = (theme) => ({
/*tslint:disable*/
leafletContainer: {
width: '100%',
minHeight: '500px',
height: 'calc(100vh - 186px)',
height: 'calc(100vh - 245px)',
[theme.breakpoints.down('md')]: {
height: 'calc(100vh - 211px)',
},
[theme.breakpoints.down('sm')]: {
height: 'calc(100vh - 199px)',
},
'& a[aria-label="Zoom in"], & a[aria-label="Zoom out"],': {
color: '#000',
'&:hover': {
color: '#88ba42',
},
},
},
crosshair: {
'& > div': {
......@@ -65,24 +87,59 @@ const styles = (theme) => ({
marginBottom: 0,
overflow: 'auto' as 'auto',
},
mapButton: {
height: '34px',
width: '34px',
minWidth: 'auto',
minHeight: 'initial',
padding: '5px 8px',
backgroundColor: '#fff',
borderRadius: '4px',
border: 'solid 2px #b7b7b7',
transition: 'none',
'& > span > svg': {
color: '#000',
},
'&:hover': {
backgroundColor: '#f4f4f4',
'& > span > svg': {
color: '#88ba42',
},
},
},
mapIcon: {
fontSize: '20px',
},
tooltip: {
fontSize: '1rem',
},
filterAccessionsButton: {
position: 'absolute' as 'absolute',
zIndex: 1000,
top: '8px',
left: '48px',
top: '4px',
},
pickPositionButton: {
position: 'absolute' as 'absolute',
zIndex: 1000,
top: '48px',
left: '48px',
top: '42px',
},
layersButton: {
width: '50px',
height: '50px',
'&:hover > span > svg': {
color: '#000',
},
},
layersControl: {
maxHeight: '55vh',
overflow: 'auto',
},
/*tslint:enable*/
});
class BrowsePage extends React.Component<IMapPageProps, any> {
private clickTimeout;
private mapRef = null;
private anchorRef = null;
protected static needs = [
({ params: { filterCode, initialPosition, initialZoom } }) => {
......@@ -99,6 +156,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
trackClickPos: false,
dialogOpened: false,
climateData: null,
layersControlsIsOpen: false,
};
constructor(props, context) {
......@@ -131,6 +189,14 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
return this.setState({sidebarOpened: false});
}
private openLayersControls = () => {
return this.setState({layersControlsIsOpen: true});
}
private closeLayersControls = () => {
return this.setState({layersControlsIsOpen: false});
}
private setPositionPick = (e) => {
e.preventDefault();
e.stopPropagation();
......@@ -237,7 +303,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
}
public render() {
const { searchBox, geoData, otherCount, sidebarOpened, trackClickPos, dialogOpened, climateData} = this.state;
const { searchBox, geoData, otherCount, sidebarOpened, trackClickPos, dialogOpened, climateData, layersControlsIsOpen} = this.state;
const { mapInfo, mapLayers, currentTab, classes, filterCode, loading, t, loadAccessionsMapInfo, initialPosition, initialZoom } = this.props;
const position = initialPosition[0] && initialPosition[1] ? initialPosition : [30, 0];
......@@ -250,11 +316,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
const layerUrl = `{s}/acn/tile/{z}/{x}/{y}?f=${filterCode ? filterCode : ''}`; // `&color=${color}`;
return (
<ContentLayout
right={ <MapConfigSection/> }
rightAlwaysCollapsible
customHeaderHeight
>
<ContentLayout customHeaderHeight>
<PageTitle title={ t('accessions.public.p.browse.title') } />
<ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
......@@ -302,9 +364,64 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
bounds={ !initialZoom && initialPosition[0] && !initialPosition[1] ? mapInfo.bounds : undefined }
ref={ (ref) => this.mapRef = ref }
>
<Button variant="contained" className={ classes.filterAccessionsButton } onClick={ this.openSidebar }>{ t(`accessions.public.p.map.filterAccessions`) }</Button>
<Button variant="contained" className={ classes.pickPositionButton } onClick={ this.setPositionPick }>{ t(`accessions.public.p.map.${ trackClickPos ? 'stopPick' : 'pick'}`) }</Button>
<TileLayer
<Control position="topleft">
<Tooltip
classes={ { tooltip: classes.tooltip } }
className={ `${classes.filterAccessionsButton} ${classes.mapButton}` }
title={ t(`accessions.public.p.map.filterAccessions`) }
placement="right"
>
<Button variant="outlined" onClick={ this.openSidebar }>
<FilterIcon className={ classes.mapIcon }/>
</Button>
</Tooltip>
</Control>
<Control position="topleft">
<Tooltip
classes={ { tooltip: classes.tooltip } }
className={ `${classes.pickPositionButton} ${classes.mapButton}` }
title={ t(`accessions.public.p.map.${ trackClickPos ? 'stopPick' : 'pick'}`) }
placement="right"
>
<Button variant="outlined" onClick={ this.setPositionPick }>
{ trackClickPos ?
<CancelIcon className={ classes.mapIcon }/> :
<ClimateIcon className={ classes.mapIcon }/>
}
</Button>
</Tooltip>
</Control>
<Control position="topright">
<div
onMouseEnter={ this.openLayersControls }
ref={ (ref) => this.anchorRef = ref }
>
<Button
variant="contained"
className={ `${classes.mapButton} ${classes.layersButton}` } /*onClick={ this.openLayersControls }*/
onClick={ this.openLayersControls }
>
<LayersIcon/>
</Button>
<Popover open={ layersControlsIsOpen }
anchorEl={ this.anchorRef }
onClose={ this.closeLayersControls }
transformOrigin={ {
vertical: 'top',
horizontal: 'right',
} }
anchorOrigin={ {
vertical: 'top',
horizontal: 'right',
} }
>
<Paper className={ classes.layersControl } onMouseLeave={ this.closeLayersControls }>
<MapConfigSection/>
</Paper>
</Popover>
</div>
</Control>
<TileLayer
zIndex={ 0 }
opacity={ 0.50 }
attribution={ '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }
......
......@@ -188,7 +188,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
mapLayers={ mapLayers }
/>
<Properties>
<PropertiesItem title={ t('geo.common.latitude') }>({ institute.details.latitude }</PropertiesItem>
<PropertiesItem title={ t('geo.common.latitude') }>{ institute.details.latitude }</PropertiesItem>
<PropertiesItem title={ t('geo.common.longitude') }>{ institute.details.longitude }</PropertiesItem>
</Properties>
</PageSection>
......
......@@ -12,8 +12,8 @@ class MapLayer {
public constructor() {
this.enabled = false;
this.opacity = 0.5;
this.attribution = '© worldclim.org';
this.maxZoom = 7;
this.attribution = 'http://worldclim.org/version1';
this.maxZoom = 8;
this.subdomains = ['a', 'b', 'c', 'd'];
}
}
......@@ -31,12 +31,14 @@ export const AVAILABLE_LAYERS = [ ...layerNames.map((layerName) => ({
...new MapLayer(),
name: `rcp26.${layerName}`,
title: `accessions.climate.rcp26.${ layerName }`,
attribution: `http://ccafs-climate.org`,
legendUrl: `https://a.static.genesys-pgr.org/worldclim1.4/future/rcp26/${ layerName }/legend.png`,
url: `https://{s}.static.genesys-pgr.org/worldclim1.4/future/rcp26/${ layerName }/{z}/{x}/{y}.png`,
})), ...futureLayers.map((layerName) => ({
...new MapLayer(),
name: `rcp85.${layerName}`,
title: `accessions.climate.rcp85.${ layerName }`,
attribution: `http://ccafs-climate.org`,
legendUrl: `https://a.static.genesys-pgr.org/worldclim1.4/future/rcp85/${ layerName }/legend.png`,
url: `https://{s}.static.genesys-pgr.org/worldclim1.4/future/rcp85/${ layerName }/{z}/{x}/{y}.png`,
}))];
......
......@@ -21,6 +21,9 @@ const styles = (theme) => ({
color: '#81807f',
textTransform: 'uppercase',
},
titleWrapper: {
minWidth: '320px',
},
collapseArrow: theme.arrows.collapse,
arrowOpened: theme.arrows.opened,
arrowClosed: theme.arrows.closed,
......@@ -51,7 +54,7 @@ class CollapsibleComponentSearch extends React.Component<ICollapsibleComponentSe
return (
<div>
<div className="pl-20 pr-15" onClick={ this.toggleCollapsed }>
<div className={ `pl-20 pr-15 ${classes.titleWrapper}` } onClick={ this.toggleCollapsed }>
<span className={ classes.title }>{ t(title) }</span>
<PlayArrow className={ `${ classes.collapseArrow } ${ this.state.show ? classes.arrowOpened : classes.arrowClosed }` } />
</div>
......
Markdown is supported
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