mapgl: fix route error

src/maps/MapGL.js

@@ -49,7 +49,6 @@ export default class MapGL extends React.Component{
   }
 
   getDistance = () => {
-    console.log(this.state.path)
     let dst = calcDistance(this.state.path)
     this.setState({distance: dst})
   }
@@ -70,18 +69,22 @@ export default class MapGL extends React.Component{
       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;
 
-      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})
-        this.getDistance()
-      };
-      req.send();
+      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);
+        });
     }
   }