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
Download Patch File Download Diff File Expand all files Collapse all files

7
mpwo_client/public/index.html
View File

@ -16,11 +16,12 @@
integrity="sha256-MGU/JUq/40CFrfxjXb5pZjpoZmxiP2KuICN5ElLFNd8="
crossorigin="anonymous"
>
<link
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>
</head>
<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 { 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
</div>
<div className="card-body">
to do
<ActivityMap />
</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 {
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 thunderforestApiKey = `${
process.env.REACT_APP_THUNDERFOREST_API_KEY
}`
export const isLoggedIn = () => !!window.localStorage.authToken