MapPage.tsx 5.54 KB
Newer Older
1
import * as React from 'react';
2
3
4
5
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles';
import { bindActionCreators } from 'redux';
6
import { loadAccessionsMapInfo } from 'accessions/actions/public';
7
import AccessionFilter from 'model/accession/AccessionFilter';
8
import Loading from 'ui/common/Loading';
9
import AccessionMapInfo from 'model/accession/AccessionMapInfo';
10
import PageLayout from 'ui/layout/PageLayout';
11
import ContentHeader from 'ui/common/heading/ContentHeader';
12
import Button from '@material-ui/core/Button';
13
import Tabs, { Tab } from 'ui/common/Tabs';
14
import PrettyFilters from 'ui/common/filter/PrettyFilters';
Oleksii Savran's avatar
Oleksii Savran committed
15
import ButtonBar from 'ui/common/buttons/ButtonBar';
16
17
18
19
20


let Map;
let TileLayer;

21
22
23
24
interface IMapPageProps {
    classes?: any;
    t?: any;

25
    apiUrl: string;
26
    mapInfo: AccessionMapInfo;
27
28
    currentTab: string;
    filterCode: string;
29
    loadAccessionsMapInfo: any;
30
31
32
33
34
35
36
37
38
39
40
41
}

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

class BrowsePage extends React.Component<IMapPageProps, any> {
    protected static needs = [
42
43
      ({ params: { filterCode } }) => {
        return loadAccessionsMapInfo(filterCode || '');
44
45
46
47
48
49
50
51
52
53
54
55
56
      },
    ];

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


    public componentWillMount() {
57
58
59
60
61
62
63
      const { mapInfo, filterCode, loadAccessionsMapInfo } = this.props;
      // console.log(`Filter code for map ${filterCode} ?== ${mapInfo && mapInfo.filterCode}`, filterCode, mapInfo ? mapInfo.filterCode : 'No mapInfo');
      if (mapInfo && mapInfo.filterCode !== filterCode) {
        // console.log(`mapInfo.filterCode !== filterCode. updatingRoute`);
        loadAccessionsMapInfo(filterCode || '');
      } else if (!mapInfo) {
        loadAccessionsMapInfo(filterCode || '');
64
65
66
      }
    }

67
68
69
70
71
    /// Wrap loadAccessionsMapInfo dispatch and fills the current sort selection
    protected myApplyFilters = (filters: AccessionFilter) => {
      const { loadAccessionsMapInfo } = this.props;

      loadAccessionsMapInfo(filters);
72
73
74
75
76
    }

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

Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
77
        const { mapInfo, currentTab, classes, filterCode, t } = this.props;
78
79
80
81

        if (! mapInfo) {
          return <Loading />;
        }
82
83

        // const color = 'f00ba0';
84
        const layerUrl = `{s}/acn/tile/{z}/{x}/{y}?f=${filterCode ? filterCode : ''}`; // `&color=${color}`;
85
86

        return (
Oleksii Savran's avatar
Oleksii Savran committed
87
            <PageLayout withFooter>
Matija Obreza's avatar
Matija Obreza committed
88
              <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
89
90
91
                <Tabs
                    tab={ currentTab }
                    actions={
Oleksii Savran's avatar
Oleksii Savran committed
92
                      <ButtonBar>
93
                        <span>
Matija Obreza's avatar
Matija Obreza committed
94
95
                          <form method="post" action="/proxy/api/v1/acn/downloadKml">
                            <input type="hidden" name="f" value={ filterCode } />
Oleksii Savran's avatar
Oleksii Savran committed
96
                            <Button type="submit">{ `${t('common:action.download')} ${t('accessions.public.p.browse.kml')}` }</Button>
Matija Obreza's avatar
Matija Obreza committed
97
                          </form>
98
                        </span>
Oleksii Savran's avatar
Oleksii Savran committed
99
                      </ButtonBar>
100
101
                    }
                >
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
102
103
104
                  <Tab name="data" to={ `/a/${filterCode || ''}` }>{ t('accessions.tab.data') }</Tab>
                  <Tab name="overview" to={ `/a/overview/${filterCode || ''}` }>{ t('accessions.tab.overview') }</Tab>
                  <Tab name="map" to={ `/a/map/${filterCode || '' }` }>{ t('accessions.tab.map') }</Tab>
105
106
107
                </Tabs>
                <PrettyFilters
                    prefix="accessions"
108
                    filterObj={ mapInfo && mapInfo.filter || {} }
109
110
111
                    onSubmit={ this.myApplyFilters }
                />
                <div className={ classes.leafletContainer }>
112
                { mapInfo && typeof window !== 'undefined' &&
113
114
                    <Map
                        center={ position }
115
116
                        zoom={ 3 } minZoom={ 2 } maxZoom={ 14 }
                        bounds={ mapInfo.bounds }>
117
118
119
120
121
122
123
124
125
126
                        <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 }
127
                            subdomains={ mapInfo.tileServers }
128
129
130
131
132
133
134
135
136
137
                        />
                    </Map>
                }
                </div>
            </PageLayout>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
138
    mapInfo: state.accessions.public.mapInfo || undefined,
139
140
141
142
143
    filterCode: ownProps.match.params.filterCode || '',
    currentTab: ownProps.match.params.tab || 'map', // current tab, or ownProps.location.pathname
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
144
    loadAccessionsMapInfo,
145
146
}, dispatch);

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