Add leaflet

package-lock.json

@@ -6726,6 +6726,11 @@
         "invert-kv": "1.0.0"
       }
     },
+    "leaflet": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.1.tgz",
+      "integrity": "sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ=="
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -7052,6 +7057,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
       "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
     },
+    "lodash-es": {
+      "version": "4.17.8",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.8.tgz",
+      "integrity": "sha512-I9mjAxengFAleSThFhhAhvba6fsO0hunb9/0sQ6qQihSZsJRBofv2rYH58WXaOb/O++eUmYpCLywSQ22GfU+sA=="
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -9330,6 +9340,16 @@
         "theming": "1.3.0"
       }
     },
+    "react-leaflet": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-1.9.1.tgz",
+      "integrity": "sha512-QiYpjyf1DHy0gLAR2958Mo5Wlu2u7FubIjapPpuUAQNFmjkVSteiDLlEdDpGswTHTyNAfKLS+u9PqvfipMDZKA==",
+      "requires": {
+        "lodash": "4.17.5",
+        "lodash-es": "4.17.8",
+        "warning": "3.0.0"
+      }
+    },
     "react-lifecycles-compat": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-2.0.2.tgz",

package.json

@@ -34,10 +34,12 @@
     "@material-ui/icons": "^1.0.0-beta.42",
     "autosuggest-highlight": "^3.1.1",
     "babel-preset-stage-2": "^6.24.1",
+    "leaflet": "^1.3.1",
     "lodash": "^4.17.5",
     "material-ui": "^1.0.0-beta.42",
     "react": "^16.3.2",
     "react-autosuggest": "^9.3.4",
-    "react-dom": "^16.3.2"
+    "react-dom": "^16.3.2",
+    "react-leaflet": "^1.9.1"
   }
 }

src/FullWidthGrid.js

@@ -5,6 +5,7 @@ import { withStyles } from 'material-ui/styles';
 import Grid from 'material-ui/Grid';
 import ButtonAppBar from './ButtonAppBar';
 import IntegrationAutosuggest from './IntegrationAutosuggest';
+import LeafletMapContainer from './LeafletMapContainer';
 
 const styles = theme => ({
   root: {
@@ -29,6 +30,9 @@ function FullWidthGrid(props) {
         <Grid item xs={12} sm={3}>
           <IntegrationAutosuggest />
         </Grid>
+        <Grid item xs={12} sm={9}>
+          <LeafletMapContainer />
+        </Grid>
       </Grid>
     </div>
   );

src/LeafletMap.js

+import React from 'react';
+import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
+
+class LeafletMap extends React.Component {
+  state = {
+    lat: 51.505,
+    lng: -0.09,
+    zoom: 13,
+  }
+
+  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"
+        />
+        <Marker position={position}>
+          <Popup>
+            <span>
+              A pretty CSS3 popup. <br /> Easily customizable.
+            </span>
+          </Popup>
+        </Marker>
+      </Map>
+    );
+  }
+}
+
+export default LeafletMap;

src/LeafletMapContainer.js

+import React from 'react';
+import LeafletMap from './LeafletMap';
+
+class LeafletMapContainer extends React.Component {
+
+  updateDimensions() {
+    const height = window.innerWidth >= 992 ? window.innerHeight : 400;
+    this.setState({ height: height });
+  }
+
+  componentWillMount() {
+    this.updateDimensions();
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.updateDimensions.bind(this));
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateDimensions.bind(this));
+  }
+
+  render() {
+    return (
+      <div className="map-container" style={{ height: this.state.height }}>
+        <LeafletMap />
+      </div>
+    );
+  }
+}
+
+export default LeafletMapContainer;

src/index.html

@@ -3,6 +3,14 @@
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
+   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+   crossorigin=""/>
+    <style>
+    .leaflet-container {
+      height: 100%;
+    }
+    </style>
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>