MapPage.tsx 5.28 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import * as React from 'react';
import {connect} from 'react-redux';
import {withStyles} from '@material-ui/core/styles';
import {bindActionCreators} from 'redux';
import { parse } from 'query-string';
import { applyFilters, updateRoute } from 'actions/accessions';
import PageLayout from 'ui/layout/PageLayout';
import ContentHeader from '../../common/heading/ContentHeader';
import FilteredPage from '../../../model/FilteredPage';
import Accession from '../../../model/Accession';
import Button from '@material-ui/core/Button';
import Tabs, {Tab} from 'ui/common/Tabs';
import PrettyFilters from '../../common/filter/PrettyFilters';


let Map;
let TileLayer;

interface IMapPageProps extends React.ClassAttributes<any> {
20
    apiUrl: string;
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
    paged: FilteredPage<Accession>;
    currentTab: string;
    classes: any;
    filterCode: string;
    applyFilters: any;
    updateRoute: any;
}

const styles = (theme) => ({
    leafletContainer: {
        width: '100%',
        minHeight: '500px',
        height: 'calc(100vh - 186px)',
    },
});

class BrowsePage extends React.Component<IMapPageProps, any> {
    protected static needs = [
      ({ search, params: { filterCode } }) => {
        const qs = parse(search || '');
        const page = { direction: qs.d, properties: null };
        if (qs.s) {
          page.properties = [ ...qs.s ];
        }
        return applyFilters(filterCode || '', page);
      },
    ];

    constructor(props, context) {
        super(props, context);
        if (typeof window !== 'undefined') {
            Map = require('react-leaflet').Map;
            TileLayer = require('react-leaflet').TileLayer;
        }
    }


    public componentWillMount() {
      const { paged, filterCode, updateRoute, applyFilters } = this.props;
      // console.log(`Filter code for map ${filterCode} ?== ${paged && paged.filterCode}`, filterCode, paged ? paged.filterCode : 'No paged');
      if (paged && paged.filterCode !== filterCode) {
        // console.log(`paged.filterCode !== filterCode. updatingRoute`);
        updateRoute(paged, '/a/map');
      } else if (!paged) {
        applyFilters(filterCode || '');
      }
    }

    /// Wrap applyFilters dispatch and fills the current sort selection
    protected myApplyFilters = (filters: any) => {
      const { paged, applyFilters } = this.props;
      if (paged) {
        applyFilters(filters, { page: 0, direction: paged.sort[0].direction, properties: [ paged.sort[0].property ] });
      } else {
        applyFilters(filters, { page: 0 });
      }
    }

    public render() {
        const position = [30, 0];

82
        const { paged, currentTab, classes, filterCode, apiUrl } = this.props;
83
84

        // const color = 'f00ba0';
85
        const layerUrl = `${apiUrl}/acn/tile/{z}/{x}/{y}?f=${filterCode ? filterCode : ''}`; // `&color=${color}`;
86
87
88
89
90
91
92
93

        return (
            <PageLayout>
                <ContentHeader title="Accession map" subTitle="Explore accession localities"/>
                <Tabs
                    tab={ currentTab }
                    actions={
                        <span>
Matija Obreza's avatar
Matija Obreza committed
94
95
96
97
                          <form method="post" action="/proxy/api/v1/acn/downloadKml">
                            <input type="hidden" name="f" value={ filterCode } />
                            <Button type="submit">Download KML</Button>
                          </form>
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
                        </span>
                    }
                >
                    <Tab name="data" to={ `/a/` }>Accessions</Tab>
                    <Tab name="overview" to={ `/a/overview/` }>Overview</Tab>
                    <Tab name="map" to={ `/a/map/` }>Map</Tab>
                </Tabs>
                <PrettyFilters
                    prefix="accessions"
                    filterObj={ paged && paged.filter || {} }
                    onSubmit={ this.myApplyFilters }
                />
                <div className={ classes.leafletContainer }>
                { typeof window !== 'undefined' &&
                    <Map
                        center={ position }
                        zoom={ 3 } minZoom={ 2 } maxZoom={ 14 }>
                        <TileLayer
                            opacity={ 0.50 }
                            attribution={ '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }
                            url={ 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png' }
                        />
                        <TileLayer
                            updateInterval={ 1000 }
                            updateWhenZooming={ false }
                            attribution="&amp;copy Accession localities from <a href=&quot;/&quot;>Genesys PGR</a>"
                            url={ layerUrl }
                        />
                    </Map>
                }
                </div>
            </PageLayout>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
135
    apiUrl: state.applicationConfig.apiUrl,
136
137
138
139
140
141
142
143
144
145
146
    paged: state.accessions.paged || undefined,
    filterCode: ownProps.match.params.filterCode || '',
    currentTab: ownProps.match.params.tab || 'map', // current tab, or ownProps.location.pathname
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    applyFilters,
    updateRoute,
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(BrowsePage));