From ab8ac74570f51dfc052f5d0c334d8d6cd884e517 Mon Sep 17 00:00:00 2001
From: Esko Ikkala <esko.ikkala@aalto.fi>
Date: Tue, 17 Apr 2018 15:51:03 +0300
Subject: [PATCH] Add leaflet
---
package-lock.json | 20 ++++++++++++++++++++
package.json | 4 +++-
src/FullWidthGrid.js | 4 ++++
src/LeafletMap.js | 33 +++++++++++++++++++++++++++++++++
src/LeafletMapContainer.js | 32 ++++++++++++++++++++++++++++++++
src/index.html | 8 ++++++++
6 files changed, 100 insertions(+), 1 deletion(-)
create mode 100644 src/LeafletMap.js
create mode 100644 src/LeafletMapContainer.js
diff --git a/package-lock.json b/package-lock.json
index 5e1c438f..c6e03077 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 670bcb8f..5388158e 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/FullWidthGrid.js b/src/FullWidthGrid.js
index fc5163f8..03d3ad02 100644
--- a/src/FullWidthGrid.js
+++ b/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>
);
diff --git a/src/LeafletMap.js b/src/LeafletMap.js
new file mode 100644
index 00000000..6d01478b
--- /dev/null
+++ b/src/LeafletMap.js
@@ -0,0 +1,33 @@
+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="&copy <a href="http://osm.org/copyright">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;
diff --git a/src/LeafletMapContainer.js b/src/LeafletMapContainer.js
new file mode 100644
index 00000000..33bd7745
--- /dev/null
+++ b/src/LeafletMapContainer.js
@@ -0,0 +1,32 @@
+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;
diff --git a/src/index.html b/src/index.html
index f3fdf12e..cf357ac6 100644
--- a/src/index.html
+++ b/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>
--
GitLab