From b678fb44152c9a26b62f843ec08b8a3f933e76cb Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Fri, 9 Nov 2018 17:10:54 -0800
Subject: [PATCH] Add MapGL subview
---
src/client/components/Deck.js | 9 ++++++---
src/client/components/LeafletMap.js | 19 ++-----------------
src/client/components/Manuscripts.js | 21 ++++++++++++++++++++-
src/client/components/ViewTabs.js | 2 +-
src/client/containers/MapApp.js | 4 ++--
src/server/sparql/Datasets.js | 4 ++--
webpack.client.dev.js | 2 +-
7 files changed, 34 insertions(+), 27 deletions(-)
diff --git a/src/client/components/Deck.js b/src/client/components/Deck.js
index cd2a4ec4..34dc8a76 100644
--- a/src/client/components/Deck.js
+++ b/src/client/components/Deck.js
@@ -24,6 +24,9 @@ import Typography from '@material-ui/core/Typography';
const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoiZWtrb25lbiIsImEiOiJjam5vampzZ28xd2dyM3BzNXR0Zzg4azl4In0.eozyF-bBaZbA3ibhvJlJpQ';
const styles = theme => ({
+ mapGLContainer: {
+ marginTop: 72
+ },
tooltip: {
position: 'absolute',
padding: '4px',
@@ -195,8 +198,10 @@ class Deck extends React.Component {
return (
<ReactMapGL
{...this.state.viewport}
+ className={this.props.classes.root}
width='100%'
- height='100%'
+ height='calc(100% - 72px)'
+ style={{marginTop: 72}}
onViewportChange={this._onViewportChange}
mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
>
@@ -205,7 +210,6 @@ class Deck extends React.Component {
viewState={this.state.viewport}
layers={[layer]}
/>
-
<div className={this.props.classes.mapControls}>
<NavigationControl onViewportChange={this._onViewportChange} />
</div>
@@ -216,7 +220,6 @@ class Deck extends React.Component {
onClose={this.closeDialog.bind(this)}
data={this.state.dialog.data}
/>
-
</ReactMapGL>
);
}
diff --git a/src/client/components/LeafletMap.js b/src/client/components/LeafletMap.js
index 781ec553..5f361a5e 100644
--- a/src/client/components/LeafletMap.js
+++ b/src/client/components/LeafletMap.js
@@ -46,8 +46,6 @@ const style = {
class LeafletMap extends React.Component {
componentDidMount() {
- console.log('mounted')
- //this.props.fetchManuscripts();
this.props.fetchPlaces('creationPlaces');
// Base layers
@@ -55,19 +53,7 @@ class LeafletMap extends React.Component {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
- // const karelianMaps = L.tileLayer('http:///mapwarper.onki.fi/mosaics/tile/4/{z}/{x}/{y}.png', {
- // attribution: 'SeCo'
- // });
- //
- // const senateAtlas = L.tileLayer('http:///mapwarper.onki.fi/mosaics/tile/5/{z}/{x}/{y}.png', {
- // attribution: 'SeCo'
- // });
- //
- // const westernFront = L.tileLayer('http://mapwarper.net/mosaics/tile/844/{z}/{x}/{y}.png', {
- // attribution: 'SeCo'
- // });
-
- const test = L.tileLayer('http://mapwarper.net/maps/tile/28345/{z}/{x}/{y}.png', {
+ const parisTest = L.tileLayer('http://mapwarper.net/maps/tile/28345/{z}/{x}/{y}.png', {
attribution: 'SeCo'
});
@@ -103,7 +89,7 @@ class LeafletMap extends React.Component {
// 'Search results': this.resultMarkerLayer,
// 'Karelian maps (MapWarper)': karelianMaps,
// 'Senate atlas (MapWarper)': senateAtlas,
- 'Paris': test
+ 'Paris': parisTest
};
this.layerControl = L.control.layers(
@@ -266,7 +252,6 @@ class LeafletMap extends React.Component {
LeafletMap.propTypes = {
fetchPlaces: PropTypes.func.isRequired,
fetchPlace: PropTypes.func.isRequired,
- fetchManuscripts: PropTypes.func.isRequired,
results: PropTypes.array.isRequired,
mapMode: PropTypes.string.isRequired
};
diff --git a/src/client/components/Manuscripts.js b/src/client/components/Manuscripts.js
index 442d4921..e4982e5b 100644
--- a/src/client/components/Manuscripts.js
+++ b/src/client/components/Manuscripts.js
@@ -4,6 +4,8 @@ import { Route, Switch } from 'react-router-dom';
import ViewTabs from './ViewTabs';
import ResultTable from './ResultTable';
import LeafletMap from './LeafletMap';
+import Deck from './Deck';
+import Pie from './Pie';
let Manuscripts = props => {
return (
@@ -30,11 +32,28 @@ let Manuscripts = props => {
<LeafletMap
fetchPlaces={props.fetchPlaces}
fetchPlace={props.fetchPlace}
- fetchManuscripts={props.fetchManuscripts}
results={props.search.places}
mapMode='cluster'
/>}
/>
+ <Route
+ path={props.match.url + '/migrations'}
+ render={() =>
+ <Deck
+ fetchPlaces={props.fetchPlaces}
+ fetchingPlaces={props.search.fetchingPlaces}
+ data={props.search.places}
+ />}
+ />
+ <Route
+ path={props.match.url + '/statistics'}
+ render={() =>
+ <Pie
+ fetchPlaces={props.fetchPlaces}
+ fetchingPlaces={props.search.fetchingPlaces}
+ data={props.search.places}
+ />}
+ />
</Switch>
</React.Fragment>
);
diff --git a/src/client/components/ViewTabs.js b/src/client/components/ViewTabs.js
index e2eace35..a5027924 100644
--- a/src/client/components/ViewTabs.js
+++ b/src/client/components/ViewTabs.js
@@ -43,7 +43,7 @@ class ViewTabs extends React.Component {
>
<Tab icon={<CalendarViewDayIcon />} label="table" component={Link} to="/manuscripts/table" />
<Tab icon={<AddLocationIcon />} label="creation places" component={Link} to="/manuscripts/creation_places" />
- <Tab icon={<RedoIcon />} label="migrations" />
+ <Tab icon={<RedoIcon />} label="migrations" component={Link} to="/manuscripts/migrations" />
<Tab icon={<PieChartIcon />} label="statistics" />
</Tabs>
</Paper>
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index 16a5e9eb..5cde7cbb 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -117,10 +117,10 @@ let MapApp = (props) => {
</Switch>
</div>
<Paper className={classes.footer}>
- <img className={classes.oxfordLogo} src='img/logos/oxford-logo-white.png' alt='Oxford University logo'/>
+ {/*<img className={classes.oxfordLogo} src='img/logos/oxford-logo-white.png' alt='Oxford University logo'/>
<img className={classes.pennLogo} src='img/logos/penn-logo-white.png' alt='Oxford University logo'/>
<img className={classes.cnrsLogo} src='img/logos/cnrs-logo-white-small.png' alt='CNRS logo'/>
- <img className={classes.aaltoLogo} src='img/logos/aalto-logo-white-no-background-small.png' alt='Aalto University logo'/>
+ <img className={classes.aaltoLogo} src='img/logos/aalto-logo-white-no-background-small.png' alt='Aalto University logo'/>*/}
</Paper>
</div>
</div>
diff --git a/src/server/sparql/Datasets.js b/src/server/sparql/Datasets.js
index cd5e8bb3..86b3a5d0 100644
--- a/src/server/sparql/Datasets.js
+++ b/src/server/sparql/Datasets.js
@@ -14,8 +14,8 @@ module.exports = {
'title': 'MMM',
'shortTitle': 'MMM',
'timePeriod': '',
- 'endpoint': 'http://ldf.fi/mmm-cidoc/sparql',
- //'endpoint': 'http://localhost:3050/ds/sparql',
+ //'endpoint': 'http://ldf.fi/mmm-cidoc/sparql',
+ 'endpoint': 'http://localhost:3050/ds/sparql',
'countQuery': `
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
diff --git a/webpack.client.dev.js b/webpack.client.dev.js
index 819680a2..ab249532 100644
--- a/webpack.client.dev.js
+++ b/webpack.client.dev.js
@@ -11,6 +11,6 @@ module.exports = merge(common, {
open: true,
historyApiFallback: true,
publicPath: '/',
- contentBase: path.join(__dirname, 'dist/public')
+ //contentBase: path.join(__dirname, 'dist/public')
}
});
--
GitLab