84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
import hash from 'object-hash'
|
|
import React from 'react'
|
|
import { GeoJSON, Map, Marker, TileLayer } from 'react-leaflet'
|
|
import { connect } from 'react-redux'
|
|
|
|
import { getActivityGpx } from '../../../actions/activities'
|
|
import { thunderforestApiKey } from '../../../utils'
|
|
import { getGeoJson } from '../../../utils/activities'
|
|
|
|
class ActivityMap extends React.Component {
|
|
|
|
constructor(props, context) {
|
|
super(props, context)
|
|
this.state = {
|
|
zoom: 13,
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.props.loadActivityGpx(this.props.activity.id)
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (prevProps.activity.id !==
|
|
this.props.activity.id) {
|
|
this.props.loadActivityGpx(this.props.activity.id)
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.props.loadActivityGpx(null)
|
|
}
|
|
|
|
render() {
|
|
const { activity, coordinates, gpxContent } = this.props
|
|
const { jsonData } = getGeoJson(gpxContent)
|
|
const bounds = [
|
|
[activity.bounds[0], activity.bounds[1]],
|
|
[activity.bounds[2], activity.bounds[3]]
|
|
]
|
|
|
|
return (
|
|
<div>
|
|
{jsonData && (
|
|
<Map
|
|
zoom={this.state.zoom}
|
|
bounds={bounds}
|
|
boundsOptions={{ padding: [10, 10] }}
|
|
>
|
|
<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>'
|
|
// eslint-disable-next-line max-len
|
|
url={`https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=${thunderforestApiKey}`}
|
|
/>
|
|
<GeoJSON
|
|
// hash as a key to force re-rendering
|
|
key={hash(jsonData)}
|
|
data={jsonData}
|
|
/>
|
|
{coordinates.latitude && (
|
|
<Marker
|
|
position={[coordinates.latitude, coordinates.longitude]}
|
|
/>
|
|
)}
|
|
</Map>
|
|
)}
|
|
</div>
|
|
|
|
)
|
|
}
|
|
}
|
|
|
|
export default connect(
|
|
state => ({
|
|
gpxContent: state.gpx
|
|
}),
|
|
dispatch => ({
|
|
loadActivityGpx: activityId => {
|
|
dispatch(getActivityGpx(activityId))
|
|
},
|
|
})
|
|
)(ActivityMap)
|