diff --git a/.gitignore b/.gitignore
index 2495e97d..907084c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
# Created by .ignore support plugin (hsz.mobi)
.idea
+Makefile.custom.config
# MPWO_API
###############
diff --git a/Makefile.custom.config.example b/Makefile.custom.config.example
new file mode 100644
index 00000000..f1d2cf57
--- /dev/null
+++ b/Makefile.custom.config.example
@@ -0,0 +1 @@
+export REACT_APP_THUNDERFOREST_API_KEY=
diff --git a/mpwo_client/public/index.html b/mpwo_client/public/index.html
index 53866d43..d34c0aa8 100644
--- a/mpwo_client/public/index.html
+++ b/mpwo_client/public/index.html
@@ -16,11 +16,12 @@
integrity="sha256-MGU/JUq/40CFrfxjXb5pZjpoZmxiP2KuICN5ElLFNd8="
crossorigin="anonymous"
>
-
+ href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
+ integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+ crossorigin=""/>
+
mpwo
diff --git a/mpwo_client/src/components/Activities/ActivityDisplay.jsx b/mpwo_client/src/components/Activities/ActivityDisplay.jsx
index 0e64aeda..2da0f3fe 100644
--- a/mpwo_client/src/components/Activities/ActivityDisplay.jsx
+++ b/mpwo_client/src/components/Activities/ActivityDisplay.jsx
@@ -2,6 +2,7 @@ import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
+import ActivityMap from './ActivityMap'
import { getData } from '../../actions/index'
class ActivityDisplay extends React.Component {
@@ -72,7 +73,7 @@ class ActivityDisplay extends React.Component {
Map
diff --git a/mpwo_client/src/components/Activities/ActivityMap.jsx b/mpwo_client/src/components/Activities/ActivityMap.jsx
new file mode 100644
index 00000000..e9ddcc73
--- /dev/null
+++ b/mpwo_client/src/components/Activities/ActivityMap.jsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Map, TileLayer } from 'react-leaflet'
+
+import { thunderforestApiKey } from '../../utils'
+
+export default class ActivityMap extends React.Component {
+
+ constructor(props, context) {
+ super(props, context)
+ this.state = {
+ lat: 51.505,
+ lng: -0.09,
+ zoom: 13,
+ }
+ }
+
+ render() {
+ const position = [this.state.lat, this.state.lng]
+ return (
+
+ )
+ }
+}
diff --git a/mpwo_client/src/components/App.css b/mpwo_client/src/components/App.css
index 2e7394d6..910616af 100644
--- a/mpwo_client/src/components/App.css
+++ b/mpwo_client/src/components/App.css
@@ -60,3 +60,7 @@ input, textarea {
.add-activity {
margin-top: 50px;
}
+
+.leaflet-container {
+ height: 240px;
+}
diff --git a/mpwo_client/src/utils.js b/mpwo_client/src/utils.js
index 78c1eafe..6a74f5f6 100644
--- a/mpwo_client/src/utils.js
+++ b/mpwo_client/src/utils.js
@@ -1,4 +1,7 @@
export const apiUrl = `${process.env.REACT_APP_API_URL}/api/`
+export const thunderforestApiKey = `${
+ process.env.REACT_APP_THUNDERFOREST_API_KEY
+}`
export const isLoggedIn = () => !!window.localStorage.authToken
diff --git a/package.json b/package.json
index b22eeede..b7998704 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,11 @@
"chalk": "2.3.0",
"date-fns": "^1.29.0",
"history": "^4.7.2",
+ "leaflet": "^1.3.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-helmet": "^5.2.0",
+ "react-leaflet": "^1.9.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9",
diff --git a/yarn.lock b/yarn.lock
index 10e89c9e..14cad8da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4272,6 +4272,10 @@ lcid@^1.0.0:
dependencies:
invert-kv "^1.0.0"
+leaflet@^1.3.1:
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.1.tgz#86f336d2fb0e2d0ff446677049a5dc34cf0ea60e"
+
leven@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
@@ -4343,6 +4347,10 @@ locate-path@^2.0.0:
p-locate "^2.0.0"
path-exists "^3.0.0"
+lodash-es@^4.0.0:
+ version "4.17.10"
+ resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.10.tgz#62cd7104cdf5dd87f235a837f0ede0e8e5117e05"
+
lodash-es@^4.17.5:
version "4.17.8"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.8.tgz#6fa8c8c5d337481df0bdf1c0d899d42473121e45"
@@ -4396,6 +4404,10 @@ lodash@4.16.4:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+lodash@^4.0.0:
+ version "4.17.10"
+ resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+
lodash@^4.17.5:
version "4.17.5"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
@@ -5681,6 +5693,14 @@ react-helmet@^5.2.0:
prop-types "^15.5.4"
react-side-effect "^1.1.0"
+react-leaflet@^1.9.1:
+ version "1.9.1"
+ resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-1.9.1.tgz#0a282d8d26f66ea2d719ebb8f4a5fa156b33b8c8"
+ dependencies:
+ lodash "^4.0.0"
+ lodash-es "^4.0.0"
+ warning "^3.0.0"
+
react-redux@^5.0.7:
version "5.0.7"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"