Activities: display gpx on map

mpwo_client/src/components/Activities/ActivityDisplay.jsx

@@ -73,7 +73,7 @@ class ActivityDisplay extends React.Component {
                   Map
                 </div>
                 <div className="card-body">
-                  <ActivityMap />
+                  <ActivityMap activity={activity} />
                 </div>
               </div>
             </div>

mpwo_client/src/components/Activities/ActivityMap.jsx

@@ -1,30 +1,57 @@
 import React from 'react'
-import { Map, TileLayer } from 'react-leaflet'
+import { GeoJSON, Map, TileLayer } from 'react-leaflet'
+import { connect } from 'react-redux'
 
-import { thunderforestApiKey } from '../../utils'
+import { getActivityGpx } from '../../actions/activities'
+import { getGeoJson, thunderforestApiKey } from '../../utils'
 
-export default class ActivityMap extends React.Component {
+class ActivityMap extends React.Component {
 
   constructor(props, context) {
     super(props, context)
     this.state = {
-    lat: 51.505,
-    lng: -0.09,
-    zoom: 13,
+      zoom: 13,
     }
   }
 
+  componentDidMount() {
+    this.props.loadActivityGpx(this.props.activity.id)
+  }
+
   render() {
-    const position = [this.state.lat, this.state.lng]
+    const { gpxContent } = this.props
+    const { jsonData, bounds } = getGeoJson(gpxContent)
+
     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>
+      <div>
+        {jsonData && (
+          <Map
+            zoom={this.state.zoom}
+            bounds={bounds}
+            boundsOptions={{ padding: [50, 50] }}
+          >
+            <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>'
+              // eslint-disable-next-line max-len
+              url={`https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=${thunderforestApiKey}`}
+            />
+            <GeoJSON data={jsonData} />
+          </Map>
+        )}
+      </div>
+
     )
   }
 }
+
+export default connect(
+  state => ({
+    gpxContent: state.gpx
+  }),
+  dispatch => ({
+    loadActivityGpx: activityId => {
+      dispatch(getActivityGpx(activityId))
+    },
+  })
+)(ActivityMap)