mapbox: move getroute to file

src/helpers/mapboxHelper.js

@@ -0,0 +1,33 @@
+import mapboxToken from "./../config/mapboxToken.js";
+
+export function getRoute(lng, lat){
+  console.log(this)
+  let pathCopy = this.state.path.slice();
+  var end = [lng, lat];
+  if (this.state.path.length < 1){
+    pathCopy.push(end)
+    this.setState({path: pathCopy})
+    this.getDistance()
+  } else {
+    var start = this.state.path[this.state.path.length-1];
+    var baseUrl = "https://api.mapbox.com/directions/v5/mapbox/"
+    var url = baseUrl + "walking/" + start[0] + "," + start[1] + ";" + end[0] + "," + end[1] + "?alternatives=true&geometries=geojson&steps=true&access_token=" + mapboxToken;
+
+    fetch(url)
+      .then(response => response.json())
+      .then(data => {
+        if("routes" in data){
+          let route = data.routes[0].geometry.coordinates
+          route.map((pos) => pathCopy.push(pos))
+          pathCopy.push(end)
+        } else{
+          pathCopy.push(end)
+        }
+        this.setState({path: pathCopy})
+        this.getDistance()
+      })
+      .catch((error) =>{
+        console.error(error);
+      });
+  }
+}

src/maps/MapGL.js

@@ -14,33 +14,37 @@ import mapboxToken from "./../config/mapboxToken.js";
 import {calcDistance} from "./../helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/variables";
 import {Button} from "reactstrap";
+import {getRoute} from "./../helpers/mapboxHelper";
 
 export default class MapGL extends React.Component{
-  state = {
-    viewport: {
-      width: mapWidth,
-      height: mapHeight,
-      latitude: latitude,
-      longitude: longitude,
-      zoom: 15,
-      bearing: 0,
-      pitch: 0
-    },
-    path: [[longitude, latitude]],
-    distance: 0,
-  };
+  constructor(props){
+    super(props);
+    this.state = {
+      viewport: {
+        width: mapWidth,
+        height: mapHeight,
+        latitude: latitude,
+        longitude: longitude,
+        zoom: 15,
+        bearing: 0,
+        pitch: 0
+      },
+      path: [[longitude, latitude]],
+      distance: 0,
+    }
+
+    this.getRoute = getRoute.bind(this)
+  }
 
   addMarker = event => {
     const lng = event.lngLat[0]
     const lat = event.lngLat[1]
-    console.log("Clicked at", lng, "/", lat);
     this.getRoute(lng, lat);
   }
 
   updateMarker = (idx, event) => {
     const lng = event.lngLat[0]
     const lat = event.lngLat[1]
-    console.log(lng, lat, idx)
     let pathCopy = this.state.path.slice();
     pathCopy[idx] = [lng, lat]
     this.setState({path: pathCopy})
@@ -56,37 +60,6 @@ export default class MapGL extends React.Component{
     this.setState({path: [], distance: 0})
   }
 
-  getRoute = (lng, lat) => {
-    let pathCopy = this.state.path.slice();
-    var end = [lng, lat];
-    if (this.state.path.length < 1){
-      pathCopy.push(end)
-      this.setState({path: pathCopy})
-      this.getDistance()
-    } else {
-      var start = this.state.path[this.state.path.length-1];
-      var baseUrl = "https://api.mapbox.com/directions/v5/mapbox/"
-      var url = baseUrl + "walking/" + start[0] + "," + start[1] + ";" + end[0] + "," + end[1] + "?alternatives=true&geometries=geojson&steps=true&access_token=" + mapboxToken;
-
-      fetch(url)
-        .then(response => response.json())
-        .then(data => {
-          if("routes" in data){
-            let route = data.routes[0].geometry.coordinates
-            route.map((pos) => pathCopy.push(pos))
-            pathCopy.push(end)
-          } else{
-            pathCopy.push(end)
-          }
-          this.setState({path: pathCopy})
-          this.getDistance()
-        })
-        .catch((error) =>{
-          console.error(error);
-        });
-    }
-  }
-
   render() {
     return (
       <div>

src/maps/Mapbox.js

@@ -10,33 +10,34 @@ import mapboxToken from "./../config/mapboxToken.js";
 import {calcDistance} from "./../helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 import {Button} from "reactstrap";
+import {getRoute} from "./../helpers/mapboxHelper";
 
 const Map = ReactMapboxGl({ accessToken: mapboxToken });
 
 export default class Mapbox extends React.Component{
-  state = {
-    latitude: latitude,
-    longitude: longitude,
-    zoom: [15],
-    path: [[longitude, latitude]],
-    distance: 0,
-    center: [longitude, latitude]
+  constructor(props){
+    super(props);
+    this.state = {
+      latitude: latitude,
+      longitude: longitude,
+      zoom: [15],
+      path: [[longitude, latitude], [longitude+0.003, latitude]],
+      distance: 0,
+      center: [longitude, latitude]
     }
 
+    this.getRoute = getRoute.bind(this)
+  }
+
   addMarker = (event, click) => {
     const lng = click.lngLat.lng
     const lat = click.lngLat.lat
-    console.log("Clicked at", lat, "/", lng)
-    let pathCopy = this.state.path.slice();
-    pathCopy.push([lng, lat]);
-    this.setState({path: pathCopy})
-    this.getDistance()
+    this.getRoute(lng, lat);
   }
 
   updateMarker = (idx, event) => {
     const lng = event.lngLat.lng
     const lat = event.lngLat.lat
-    console.log(lat, lng, idx)
     let pathCopy = this.state.path.slice();
     pathCopy[idx] = [lng, lat]
     this.setState({path: pathCopy})