Add distance along the path

app/components/path-editor.hbs

@@ -2,6 +2,7 @@
 {{! Second div to display the current lattitude and longitude with binding attributes }}
 <div>
 <p>Latitude: <code>{{lat}}</code> / Longitude: <code>{{lng}}</code></p>
+<p>Distance (in meters): <code>{{fullDist}}</code></p>
 </div>
 {{! Right column to contain the map}}
 <div class="flex">

app/components/path-editor.js

@@ -12,6 +12,7 @@ export default class PathEditorComponent extends Component {
 
     @tracked lat = 0
     @tracked lng = 0 
+    @tracked fullDist = 0
     @tracked polyline = []
     startPoint 
     geoJsonPolyline = {
@@ -40,11 +41,12 @@ export default class PathEditorComponent extends Component {
             // complete polyline by first retrieving new path though mapbox service
             let previousCoord = this.polyline[this.polyline.length - 2];
             let path = await this.mapboxWs.direction("cycling", previousCoord, newCoord);
-            if (path.length > 0) { // Insert intermediate coord in the polyline
+            if (path.coords.length > 0) { // Insert intermediate coord in the polyline
                 let last = this.polyline.pop();
-                for (let i = 0; i < path.length; i++) {
-                    this.polyline.push(path[i]);
+                for (let i = 0; i < path.coords.length; i++) {
+                    this.polyline.push(path.coords[i]);
                 }
+                this.fullDist += path.dist;
             }
             // Don't put back last point that could be outside the road
             // this.polyline.push(last);

app/services/mapbox-ws.js

@@ -42,9 +42,9 @@ export default class MapboxWsService extends Service {
     }
     });
     if (response.status === 200 && response.data.code === 'Ok') {
-        return response.data.routes[0].geometry.coordinates;
+        return { coords: response.data.routes[0].geometry.coordinates, dist: response.data.routes[0].distance };
     } else {
-        return [];
+        return { coords: [], dist: 0};
     }   
   }