[SOLVED] How to get a pedestrian route using Leaflet Routing Machine and Mapzen?

How to get a pedestrian route using Leaflet Routing Machine and Mapzen?

I know Mapzen can provide a pedestrian route for the itinerary I am trying to do because I can get it on openstreetmaps.org.

But I can't get it to work on my embedded map, and I absolutely don't know the reason.

My code is the following:

L.Routing.control({
waypoints: [
    L.latLng(-44.004358, 170.476709),
    L.latLng(-43.985844, 170.464058)
],
router: L.Routing.Mapzen('valhalla-apikey', 'pedestrian')
// formatter: new L.Routing.Mapzen.Formatter()
}).addTo(cafeMap);

(Replacing apikey with my apikey)

But all I get is the normal driving itinerary. I tried replacing 'pedestrian' by all the other options available, but can't get it to work.

Anyone sees a glitch in my code?

Thanks

Solution

You are initializing the router incorrectly. The plugin follows the convention described in the Leaflet docs for class factories. So you can either use the new operator to create a new instance of the router class:

router: new L.Routing.Mapzen('valhalla-apikey', 'pedestrian')

or the lowercase factory method, which does the same thing:

router: L.Routing.mapzen('valhalla-apikey', 'pedestrian')

You must also specify a formatter so that routing machine can parse the directions returned from mapzen. The full code for the routing control would thus be:

var control = L.Routing.control({
  waypoints: [
    L.latLng(-44.004358, 170.476709),
    L.latLng(-43.985844, 170.464058)
],
  waypointMode: 'snap',
  router: new L.Routing.Mapzen('valhalla-apikey', 'pedestrian'),
  formatter: new L.Routing.Mapzen.Formatter()
}).addTo(map);

The way you are doing it (without the new operator) is passing an undefined value to the routing control, and the results you are getting are actually from the OSRM router. So it looks like Leaflet Routing Machine defaults to OSRM if given an undefined value for the router.