Ok so in my angular app I am working on the frontend I have two dropdown in which I specify the city of departure and arrival and the backend uses an api that calculates the coordinates of this two inputs and saves them using leaflet and openstreet map I was able to display what I have stored in DB as a straight line which was not pretty so searching for a way to display them snapped to road I found OSRM leaflet-routing-machine which works great but every time I go to my component for visualizing my lines/paths the console shows this enter image description here and while searching I found out by many others that you have to set up you own "set up instance of OSRM" but do I really need to do that just for displaying snaped to read lines ? Or is there a more convenient way? This is the code I am using for the demos servers I guess which I'm afraid will stop working at a given moment:
L.Routing.control({
router: L.Routing.osrmv1({
serviceUrl: `http://router.project-osrm.org/route/v1/`
}),
plan: L.Routing.plan(waypoints, {
createMarker: (i, wp) => {
return L.marker(wp.latLng, {
draggable: false
});
}
}),
waypoints: waypoints,
routeWhileDragging: false,
addWaypoints : false, //disable adding new waypoints to the existing path
show: false,
}).addTo(this.map);