Commit 7fab3fbf authored by Matija Obreza's avatar Matija Obreza
Browse files

Accession map using ApiCall<>

parent ae29e033
......@@ -30,6 +30,7 @@ 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';
import ApiCall from 'model/ApiCall';
let MapComponent;
......@@ -45,7 +46,7 @@ interface IMapPageProps {
t?: any;
apiUrl: string;
mapInfo: AccessionMapInfo;
mapInfo: ApiCall<AccessionMapInfo>;
suggestions: any;
currentTab: string;
filterCode: string;
......@@ -178,7 +179,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
public componentWillMount() {
const { mapInfo, filterCode, loadAccessionsMapInfo, initialPosition, initialZoom } = this.props;
// console.log(`Filter code for map ${filterCode} ?== ${mapInfo && mapInfo.filterCode}`, filterCode, mapInfo ? mapInfo.filterCode : 'No mapInfo');
if (mapInfo && mapInfo.filterCode !== filterCode) {
if (mapInfo && !mapInfo.loading && mapInfo.data.filterCode !== filterCode) {
// console.log(`mapInfo.filterCode !== filterCode. updatingRoute`);
loadAccessionsMapInfo(filterCode || '', {center: initialPosition, zoom: initialZoom});
} else if (!mapInfo) {
......@@ -269,7 +270,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
return;
}
const {mapInfo: {filter}, geoJsonRequest} = this.props;
const {mapInfo: { data: { filter } }, geoJsonRequest} = this.props;
const correctLng = Math.abs(e.latlng.lng) > 180 ? (360 + e.latlng.lng) % 180 : e.latlng.lng;
......@@ -317,18 +318,20 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
[50, -50],
];
if (! mapInfo) {
if (! mapInfo || mapInfo.loading) {
return <Loading />;
} else if (mapInfo.error) {
return <div>{ mapInfo.error }</div>;
}
if (mapInfo.bounds[0][0] !== null && mapInfo.bounds[1][0] !== null) {
if (Math.abs(mapInfo.bounds[0][0] - mapInfo.bounds[1][0]) < Math.abs(initialBounds[0][0] - initialBounds[1][0])) {
initialBounds[0][0] = mapInfo.bounds[0][0];
initialBounds[1][0] = mapInfo.bounds[1][0];
if (mapInfo.data.bounds[0][0] !== null && mapInfo.data.bounds[1][0] !== null) {
if (Math.abs(mapInfo.data.bounds[0][0] - mapInfo.data.bounds[1][0]) < Math.abs(initialBounds[0][0] - initialBounds[1][0])) {
initialBounds[0][0] = mapInfo.data.bounds[0][0];
initialBounds[1][0] = mapInfo.data.bounds[1][0];
}
if (Math.abs(mapInfo.bounds[0][1] - mapInfo.bounds[1][1]) < Math.abs(initialBounds[0][1] - initialBounds[1][1])) {
initialBounds[0][1] = mapInfo.bounds[0][1];
initialBounds[1][1] = mapInfo.bounds[1][1];
if (Math.abs(mapInfo.data.bounds[0][1] - mapInfo.data.bounds[1][1]) < Math.abs(initialBounds[0][1] - initialBounds[1][1])) {
initialBounds[0][1] = mapInfo.data.bounds[0][1];
initialBounds[1][1] = mapInfo.data.bounds[1][1];
}
}
......@@ -342,7 +345,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
});
}
console.log(suggestionTerms);
// console.log(suggestionTerms);
// const color = 'f00ba0';
const layerUrl = `{s}/acn/tile/{z}/{x}/{y}?f=${filterCode ? filterCode : ''}`; // `&color=${color}`;
......@@ -353,7 +356,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
<ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
<Drawer variant="temporary" open={ sidebarOpened } onClose={ this.closeSidebar }>
<AccessionsFilters terms={ suggestionTerms } onSubmit={ loadAccessionsMapInfo } initialValues={ mapInfo && mapInfo.filter }/>
<AccessionsFilters terms={ suggestionTerms } onSubmit={ loadAccessionsMapInfo } initialValues={ mapInfo.data.filter }/>
</Drawer>
......@@ -380,10 +383,10 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
</Tabs>
<PrettyFilters
prefix="accessions"
filterObj={ mapInfo && mapInfo.filter || {} }
filterObj={ mapInfo.data.filter || {} }
onSubmit={ this.myApplyFilters }
displayName="accessions.common.modelName"
amount={ mapInfo && mapInfo.accessionCount }
amount={ mapInfo.data.accessionCount }
/>
<div className={ `${classes.leafletContainer} ${trackClickPos && classes.crosshair}` }>
{ loading && <Loading /> }
......@@ -394,7 +397,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
center={ position }
zoom={ initialZoom || 3 } minZoom={ 2 } maxZoom={ 14 }
zoomDelta={ 0.5 }
bounds={ !initialZoom && initialPosition[0] && !initialPosition[1] ? mapInfo.bounds : initialBounds }
bounds={ !initialZoom && initialPosition[0] && !initialPosition[1] ? mapInfo.data.bounds : initialBounds }
ref={ (ref) => this.mapRef = ref }
>
<Control position="topleft">
......@@ -469,7 +472,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
updateWhenZooming={ false }
attribution="&amp;copy Accession localities from <a href=&quot;/&quot;>Genesys PGR</a>"
url={ layerUrl }
subdomains={ mapInfo.tileServers }
subdomains={ mapInfo.data.tileServers }
/>
{ geoData && geoData.length > 0 &&
<Rectangle
......@@ -494,8 +497,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
const mapStateToProps = (state, ownProps) => ({
suggestions: state.accessions.public.suggestions,
mapInfo: state.accessions.public.mapInfo ? state.accessions.public.mapInfo.data : undefined,
loading: state.accessions.public.mapInfo ? state.accessions.public.mapInfo.loading : false,
mapInfo: state.accessions.public.mapInfo,
mapLayers: state.accessions.public.mapLayers,
filterCode: ownProps.match.params.filterCode || (state.accessions.public.mapInfo ? state.accessions.public.mapInfo.data && state.accessions.public.mapInfo.data.filterCode : ''),
currentTab: ownProps.match.params.tab || 'map', // current tab, or ownProps.location.pathname
......
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