import React from 'react' import { GeoJSON, Map, TileLayer } from 'react-leaflet' import { connect } from 'react-redux' import { getActivityGpx } from '../../actions/activities' import { getGeoJson, thunderforestApiKey } from '../../utils' class ActivityMap extends React.Component { constructor(props, context) { super(props, context) this.state = { zoom: 13, } } componentDidMount() { this.props.loadActivityGpx(this.props.activity.id) } componentWillUnmount() { this.props.loadActivityGpx(null) } render() { const { activity, gpxContent } = this.props const { jsonData } = getGeoJson(gpxContent) const bounds = [ [activity.bounds[0], activity.bounds[1]], [activity.bounds[2], activity.bounds[3]] ] return (
{jsonData && ( )}
) } } export default connect( state => ({ gpxContent: state.gpx }), dispatch => ({ loadActivityGpx: activityId => { dispatch(getActivityGpx(activityId)) }, }) )(ActivityMap)