Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Activities: map init

Browse Source
This commit is contained in:
Sam 2018-05-03 14:07:31 +02:00
parent 979833bd07
commit 4d2f2e1afb
9 changed files with 67 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,6 +1,7 @@
# Created by .ignore support plugin (hsz.mobi) # Created by .ignore support plugin (hsz.mobi)
.idea .idea
Makefile.custom.config
# MPWO_API # MPWO_API
############### ###############

1
Makefile.custom.config.example Normal file
View File

@ -0,0 +1 @@
export REACT_APP_THUNDERFOREST_API_KEY=

7
mpwo_client/public/index.html
View File

@ -16,11 +16,12 @@
integrity="sha256-MGU/JUq/40CFrfxjXb5pZjpoZmxiP2KuICN5ElLFNd8=" integrity="sha256-MGU/JUq/40CFrfxjXb5pZjpoZmxiP2KuICN5ElLFNd8="
crossorigin="anonymous" crossorigin="anonymous"
> >
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/foundation-icons/3.0/foundation-icons.min.css" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
> integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<title>mpwo</title> <title>mpwo</title>
</head> </head>
<body> <body>

3
mpwo_client/src/components/Activities/ActivityDisplay.jsx
View File

@ -2,6 +2,7 @@ import React from 'react'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import ActivityMap from './ActivityMap'
import { getData } from '../../actions/index' import { getData } from '../../actions/index'
class ActivityDisplay extends React.Component { class ActivityDisplay extends React.Component {
@ -72,7 +73,7 @@ class ActivityDisplay extends React.Component {
Map Map
</div> </div>
<div className="card-body"> <div className="card-body">
to do <ActivityMap />
</div> </div>
</div> </div>
</div> </div>

30
mpwo_client/src/components/Activities/ActivityMap.jsx Normal file
View File

@ -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 (
<Map center={position} zoom={this.state.zoom}>
<TileLayer
// eslint-disable-next-line max-len
attribution='&copy; <a href="http://www.thunderforest.com/">Thunderforest</a>, &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png"
apikey={thunderforestApiKey}
/>
</Map>
)
}
}

4
mpwo_client/src/components/App.css
View File

@ -60,3 +60,7 @@ input, textarea {
.add-activity { .add-activity {
margin-top: 50px; margin-top: 50px;
} }
.leaflet-container {
height: 240px;
}

3
mpwo_client/src/utils.js
View File

@ -1,4 +1,7 @@
export const apiUrl = `${process.env.REACT_APP_API_URL}/api/` 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 export const isLoggedIn = () => !!window.localStorage.authToken

2
package.json
View File

@ -6,9 +6,11 @@
"chalk": "2.3.0", "chalk": "2.3.0",
"date-fns": "^1.29.0", "date-fns": "^1.29.0",
"history": "^4.7.2", "history": "^4.7.2",
"leaflet": "^1.3.1",
"react": "^16.3.1", "react": "^16.3.1",
"react-dom": "^16.3.1", "react-dom": "^16.3.1",
"react-helmet": "^5.2.0", "react-helmet": "^5.2.0",
"react-leaflet": "^1.9.1",
"react-redux": "^5.0.7", "react-redux": "^5.0.7",
"react-router-dom": "^4.2.2", "react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9", "react-router-redux": "^5.0.0-alpha.9",

20
yarn.lock
View File

@ -4272,6 +4272,10 @@ lcid@^1.0.0:
dependencies: dependencies:
invert-kv "^1.0.0" 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: leven@^2.1.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580" 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" p-locate "^2.0.0"
path-exists "^3.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: lodash-es@^4.17.5:
version "4.17.8" version "4.17.8"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.8.tgz#6fa8c8c5d337481df0bdf1c0d899d42473121e45" 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" version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" 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: lodash@^4.17.5:
version "4.17.5" version "4.17.5"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" 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" prop-types "^15.5.4"
react-side-effect "^1.1.0" 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: react-redux@^5.0.7:
version "5.0.7" version "5.0.7"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"