Add MapGL subview

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>
    );
  }

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: '&copy; <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
 };

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>
   );

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>

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>

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#>

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')
   }
 });