Change to simple result table, add old map tiles and opacity slider

src/components/LeafletMap.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { Map, TileLayer } from 'react-leaflet';
+import {
+  Map,
+  LayersControl,
+  TileLayer
+} from 'react-leaflet';
 import FullscreenControl from 'react-leaflet-fullscreen';
 import ResultMarkerList from './ResultMarkerList';
 import MarkerClusterGroup from 'react-leaflet-markercluster';
 import 'react-leaflet-fullscreen/dist/styles.css';
 import 'react-leaflet-markercluster/dist/styles.min.css';
+import SimpleSlider from './SimpleSlider';
+import Control from 'react-leaflet-control';
 
 class LeafletMap extends React.Component {
-  state = {
-    lat: 64.950916,
-    lng: 27.095982,
-    zoom: 5,
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      lat: 64.950916,
+      lng: 27.095982,
+      zoom: 5,
+      opacity: 1.0
+    };
+  }
+
+  handleSetOpacity = (value) => {
+    this.setState({ opacity: +value / 100 });
   }
 
   render() {
     const position = [this.state.lat, this.state.lng];
+  
     return (
       <Map
         center={position}
         zoom={this.state.zoom}>
-        <TileLayer
-          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        />
+        <LayersControl position="topright">
+          <LayersControl.BaseLayer checked name="OpenStreetMap">
+            <TileLayer
+              attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+          </LayersControl.BaseLayer>
+          <LayersControl.Overlay name="Karelian maps">
+            <TileLayer
+              attribution="SeCo"
+              url="http:///mapwarper.onki.fi/mosaics/tile/4/{z}/{x}/{y}.png"
+              opacity={this.state.opacity}
+            />
+          </LayersControl.Overlay>
+          <LayersControl.Overlay name="Western Front July 1917">
+            <TileLayer
+              attribution="SeCo"
+              url="http://mapwarper.net/mosaics/tile/844/{z}/{x}/{y}.png"
+              opacity={this.state.opacity}
+            />
+          </LayersControl.Overlay>
+
+        </LayersControl>
         <MarkerClusterGroup>
           <ResultMarkerList results={this.props.results} />
         </MarkerClusterGroup>
         <FullscreenControl position='topright' />
+        <Control position="topright" >
+          <SimpleSlider
+            sliderValue={this.props.sliderValue}
+            setOpacity={this.handleSetOpacity}
+          />
+        </Control>
       </Map>
     );
   }
@@ -35,6 +76,7 @@ class LeafletMap extends React.Component {
 
 LeafletMap.propTypes = {
   results: PropTypes.array.isRequired,
+  sliderValue: PropTypes.number.isRequired,
 };
 
 export default LeafletMap;

src/components/SimpleSlider.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+// import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/Slider';
+
+const styles = {
+  container: {
+    width: 150,
+  },
+};
+
+class SimpleSlider extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.sliderValue
+    };
+  }
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+    this.props.setOpacity(value);
+  }
+
+  render() {
+    const { classes } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div className={classes.container}>
+        <Slider value={value} aria-labelledby="label" onChange={this.handleChange} />
+      </div>
+    );
+  }
+}
+
+SimpleSlider.propTypes = {
+  classes: PropTypes.object.isRequired,
+  sliderValue: PropTypes.number.isRequired,
+  setOpacity: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(SimpleSlider);

src/containers/MapApp.js

@@ -18,10 +18,8 @@ import Tab from '@material-ui/core/Tab';
 import IntegrationAutosuggest from '../components/IntegrationAutosuggest';
 import LeafletMap from '../components/LeafletMap';
 import Message from '../components/Message';
-// import ResultTable from '../components/ResultTable';
-// import SimpleTable from '../components/SimpleTable';
-import DataTable from '../components/DataTable';
-// import Paper from '@material-ui/core/Paper';
+import SimpleTable from '../components/SimpleTable';
+//import DataTable from '../components/DataTable';
 
 import {
   updateQuery,
@@ -155,7 +153,7 @@ let MapApp = (props) => {
         fetchResults={props.fetchResults}
       />
       {props.search.results.length > 0 &&
-        <DataTable data={props.search.results} />
+        <SimpleTable data={props.search.results} />
       }
     </Drawer>
   );
@@ -209,7 +207,7 @@ let MapApp = (props) => {
           <div className={classes.drawerHeader} />
           <Message error={error} />
           <LeafletMap
-            drawerIsOpen={drawerIsOpen}
+            sliderValue={100}
             results={props.search.results} />
         </main>
         {after}