mapgl: get street route and set markers

src/MapGL.js

@@ -5,13 +5,15 @@ import {
   NavigationControl, 
   FullscreenControl,
   ScaleControl,
-  GeolocateControl
+  GeolocateControl,
+//  Layer,
+//  Source,
 } from "react-map-gl";
 import "./css/maps.css";
 import mapboxToken from './config/mapboxToken.js';
 import {calcDistance} from './helpers/distance';
 import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./config/variables";
-  
+
 export default class MapGL extends React.Component{
   state = {
     viewport: {
@@ -23,26 +25,24 @@ export default class MapGL extends React.Component{
       bearing: 0,
       pitch: 0
     },
-    path: [[latitude, longitude]],
+    path: [[longitude, latitude]],
     distance: 0,
   };
-  
+
   addMarker = event => {
     const lng = event.lngLat[0]
     const lat = event.lngLat[1]
-    console.log("Clicked at", lat, "/", lng)
-    let pathCopy = this.state.path.slice();
-    pathCopy.push([lat, lng]);
-    this.setState({path: pathCopy})
+    console.log("Clicked at", lng, "/", lat);
+    this.getRoute(lng, lat);
     this.getDistance()
   }
 
   updateMarker = (idx, event) => {
     const lng = event.lngLat[0]
     const lat = event.lngLat[1]
-    console.log(lat, lng, idx)
+    console.log(lng, lat, idx)
     let pathCopy = this.state.path.slice();
-    pathCopy[idx] = [lat, lng]
+    pathCopy[idx] = [lng, lat]
     this.setState({path: pathCopy})
     this.getDistance()
   }
@@ -56,6 +56,42 @@ 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})
+    } else {
+      var start = this.state.path[this.state.path.length-1];
+      var baseUrl = "https://api.mapbox.com/directions/v5/mapbox/"
+      var url = baseUrl + "driving/" + start[0] + "," + start[1] + ";" + end[0] + "," + end[1] + "?alternatives=true&geometries=geojson&steps=true&access_token=" + mapboxToken;
+
+      var req = new XMLHttpRequest();
+      req.open('GET', url, true);
+      req.onload = (self) => {
+        var json = JSON.parse(req.response);
+        var data = json.routes[0];
+        var route = data.geometry.coordinates;
+        route.map((pos) => pathCopy.push(pos))
+        pathCopy.push(end)
+        this.setState({path: pathCopy})
+      };
+      req.send();
+    }
+  }
+
+//  geojson = {
+//    type: 'FeatureCollection',
+//    features: [{
+//      type: 'Feature',
+//      geometry: {
+//        type: 'LineString',
+//        coordinates: this.state.path
+//      }
+//    }]
+//  }
+
   render() {
     return (
       <div>
@@ -68,10 +104,28 @@ export default class MapGL extends React.Component{
             onClick={this.addMarker}
           >
 
+          {/*
+          <Source id="my-data" type="geojson" data={this.geojson}>
+            <Layer
+              source="my-data"
+              id="point"
+              type="line"
+              paint={{
+                "line-color": "#888",
+                "line-width": 8
+              }}
+              layout= {{
+                "line-join": "round",
+                "line-cap": "round"
+              }}
+            />
+          </Source>
+          */}
+
           {this.state.path.map((pos, idx) =>
             <Marker
-              longitude={pos[1]}
-              latitude={pos[0]}
+              longitude={pos[0]}
+              latitude={pos[1]}
               captureClick={false}
               draggable={true}
               offsetTop={-20}