Activities: map init
This commit is contained in:
Sam
parent
979833bd07
commit
4d2f2e1afb
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,6 +1,7 @@
|
||||
# Created by .ignore support plugin (hsz.mobi)
|
||||
.idea
|
||||
|
||||
Makefile.custom.config
|
||||
|
||||
# MPWO_API
|
||||
###############
|
||||
|
||||
1
Makefile.custom.config.example
Normal file
1
Makefile.custom.config.example
Normal file
@ -0,0 +1 @@
|
||||
export REACT_APP_THUNDERFOREST_API_KEY=
|
||||
@ -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>
|
||||
|
||||
@ -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
30
mpwo_client/src/components/Activities/ActivityMap.jsx
Normal 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='© <a href="http://www.thunderforest.com/">Thunderforest</a>, © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png"
|
||||
apikey={thunderforestApiKey}
|
||||
/>
|
||||
</Map>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -60,3 +60,7 @@ input, textarea {
|
||||
.add-activity {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
20
yarn.lock
20
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user