I have a functionality in website that gets the users coordinates and create a route to the place where the user it going. like so http://www.liedman.net/leaflet-routing-machine/tutorials/basic-usage/ . However, it is not working i cant seem to figure out what is with the code
// get place coordinates from a django variable I passed in the template
const latitude = document.getElementById('lat').textContent;
const longtitude = document.getElementById('lon').textContent;
let btn = document.getElementById('create_route');
console.log('check w')
// Creating map options
let mapOptions = {
center: [latitude, longtitude],
zoom: 18,
zoomControl: true,
zoomAnimation: true,
}
// Creating a map object (I'm guessing the error is somewhere down here...)
var map = new L.map('map', mapOptions);
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
});
map.addLayer(layer);
L.marker([latitude,longtitude]).addTo(map);
btn.addEventListener("click",function create_route(e){
function success(pos) {
const crd = pos.coords;
let crdLat = crd.latitude, crdLon = crd.longitude;
L.Routing.control({
waypoints: [
L.latLng(latitude,longtitude),
L.latLng(crdLat,crdLon)
],
autoRoute: true,
routeWhileDragging: true
}).addTo(map);
}
//get user location
navigator.geolocation.getCurrentPosition(success);
})
The two markers show up on the map when i click the button but the path/route i want isnt displayed.Also i get this error in the console.
leaflet-routing-machine.js:88
GET https://router.project-osrm.org/route/v1/driving/-77.3396498,25.0781526;55.4333172,-4.6083844?overview=false&alternatives=true&steps=true&hints=; 400
and this leaflet-routing-machine.js:15868 Routing error: { "message": "HTTP request failed: undefined", "url": "https://router.project-osrm.org/route/v1/driving/-77.3396498,25.0781526;55.4333172,-4.6083844?overview=false&alternatives=true&steps=true&hints=;", "status": -1, "target": {} }
Any amount of help will be much appreciated. Thanks in advance.