How do i make my route path visible on a leaflet map?

921 Views Asked by At

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.

0

There are 0 best solutions below