Show a route on a map with Vue - vue.js

Question

I am working on a project with Vue and Leaflet that for now just shows a map and I want that when you give the start and end coordinates it colours the route from between those points (or many points and a route than goes through all of them). Unfortunately, I found that the plugin for Leaflet that uses OSRM for automating routing "will not work unless you configure a routing backend yourself". Is there an alternative to that? Any other open-source plugin for Vue Leaflet (or alternatively for OpenLayers(VueLayers) that can auto-track existing routes? Thank you in advance.

Answer 1

You could interface Openlayers directly with a service such as OpenRouteService https://openrouteservice.org/dev/#/api-docs/v2/directions/{profile}/json/post This code assumes a map routesMap with a vector layer orsRoute, and array routeComplete of coordinate pairs in view projection for start, optional waypoint, and end, and API key orsKey
var viewProj = routesMap.getView().getProjection();
var startA = ol.proj.transform(routeComplete[0], viewProj, 'EPSG:4326');
var viaA = routeComplete[1] ? ol.proj.transform(routeComplete[1], viewProj, 'EPSG:4326') : null;
var endA = ol.proj.transform(routeComplete[2], viewProj, 'EPSG:4326');
var startN = startA.toString();
var viaN = viaA ? viaA.toString() : null;
var endN = endA.toString();
var url = 'https://api.openrouteservice.org/v2/directions/driving-car/json';
var params = '{"coordinates":[[' + startN + '],[' + (viaN ? viaN + '],[' : '') + endN + ']]}';
var orsXhr = new XMLHttpRequest();
orsXhr.onreadystatechange = function() {
if (orsXhr.readyState == 4) {
if (orsXhr.status == 200) {
var route = JSON.parse(orsXhr.responseText).routes[0];
var linestring = route.geometry;
var distance = route.summary.distance;
var duration = route.summary.duration;
orsRoute.getSource().addFeature(
new ol.Feature({
geometry: new ol.format.Polyline().readGeometry(linestring).transform('EPSG:4326', viewProj),
name: 'Openrouteservice',
distance: distance,
duration: duration
})
);
orsRoute.getSource().setAttributions('© Powered by openrouteservice');
}
}
}
orsXhr.onerror = function(e) { console.log('error'); }
orsXhr.ontimeout = function(e) { console.log('timeout'); }
orsXhr.open('POST', url, true);
orsXhr.timeout = 3000;
orsXhr.setRequestHeader('Content-type', 'application/json');
orsXhr.setRequestHeader('Authorization', orsKey);
orsXhr.send(params);