API & Client: use of calculated bounds from API to display map

mpwo_client/src/components/Activities/ActivityMap.jsx

@@ -23,8 +23,12 @@ class ActivityMap extends React.Component {
   }
 
   render() {
-    const { gpxContent } = this.props
-    const { jsonData, bounds } = getGeoJson(gpxContent)
+    const { activity, gpxContent } = this.props
+    const { jsonData } = getGeoJson(gpxContent)
+    const bounds = [
+      [activity.bounds[0], activity.bounds[1]],
+      [activity.bounds[2], activity.bounds[3]]
+    ]
 
     return (
       <div>
@@ -32,7 +36,7 @@ class ActivityMap extends React.Component {
           <Map
             zoom={this.state.zoom}
             bounds={bounds}
-            boundsOptions={{ padding: [50, 50] }}
+            boundsOptions={{ padding: [20, 20] }}
           >
             <TileLayer
               // eslint-disable-next-line max-len

mpwo_client/src/utils.js

@@ -1,6 +1,5 @@
 import togeojson from '@mapbox/togeojson'
 import { format, parse } from 'date-fns'
-import bbox from 'geojson-bbox'
 
 export const apiUrl = `${process.env.REACT_APP_API_URL}/api/`
 export const thunderforestApiKey = `${
@@ -19,18 +18,12 @@ export const generateIds = arr => {
 }
 
 export const getGeoJson = gpxContent => {
-  let jsonData, bboxCorners
-  let bounds = [[0, 0], [0, 0]]
+  let jsonData
   if (gpxContent) {
     const gpx = new DOMParser().parseFromString(gpxContent, 'text/xml')
     jsonData = togeojson.gpx(gpx)
-    bboxCorners = bbox(jsonData)
-      bounds = [
-      [bboxCorners[1], bboxCorners[0]],
-      [bboxCorners[3], bboxCorners[2]]
-    ]
   }
-  return { jsonData, bounds }
+  return { jsonData }
 }
 
 export const formatActivityDate = activityDateTime => {