diff --git a/app/components/path-editor.hbs b/app/components/path-editor.hbs index 3e55c46c6bc9ac72bd6acb8f9e8b78f5995e890d..dab217e08eb3df77ae593e97e91c7c2a1a6c03c0 100644 --- a/app/components/path-editor.hbs +++ b/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"> diff --git a/app/components/path-editor.js b/app/components/path-editor.js index 60f725bff7bd7e04a34da0f73475a754fb0d9fa5..525fe632553f3f2787906769c08b00de62bb4869 100644 --- a/app/components/path-editor.js +++ b/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); diff --git a/app/services/mapbox-ws.js b/app/services/mapbox-ws.js index ef7dafbe4e73fb14a7df05425e48e5a4c672e8db..94867d5e1fd0efe708d85f565b88986e0e3078d1 100644 --- a/app/services/mapbox-ws.js +++ b/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}; } }