MapBox Leaflet Routing machine not recognized

Question

I'm building a small site with a map. I need a routing by foot so i considered switching from the osrmv1 test server to MapBox for my test because osrm test server only provide driving.

i try to change the Routing as so:

const options = { profile: 'mapbox/walking' };
const mapRouter = L.Routing.control({
  router: L.Routing.Mapbox( mapBoxAPIKey, options),
  waypoints: [
    L.latLng([this.currentLatlong[0], this.currentLatlong[1]]),
    L.latLng([this.pointToGoLatlong[0], this.pointToGoLatlong[1]])
  ],
  fitSelectedRoutes : false,
  routeWhileDragging: false,
  collapsible: true,
  lineOptions: {
    styles: [{
      color: 'green',
      opacity: 1,
      weight: 3
    }]
  },
});

mapRouter.addTo(this.map);

but the line :

router: L.Routing.Mapbox( mapBoxKey, options)

don't recognize the parameter Mapbox for L.Routing

what am i missing ?

thanks

kboul kboul · Accepted Answer · 2020-03-07T14:30:23

Due to a change on mapbox API and more specifically due to updates to the walking profile to improve its precision so it will return polyline6 encoding this issue emerged as mentioned by Daniel Patterson working for Mapbox on this github issue.

You need to use L.Routing.mapbox instead of L.Routing.Mapbox and change your options to be:

const options = { profile: "mapbox/walking", polylinePrecision: 6 };

also use the following to avoid getting the error on compilation time by Typescript:

router: (L.Routing as any).mapbox("your api key", options),

Demo

Include your API key to be able to see the demo

MapBox Leaflet Routing machine not recognized

1 Answers