Leaflet routing machine not giving the optimal route (by far)

Question

I have issues when trying to show a route on my leaflet map:

  L.Routing.control({
  router: L.Routing.mapbox(''),
  profile:"mapbox/driving",
  addWaypoints:false,
  waypointMode:'snap',
  routeWhileDragging: true,
  show:false,
  fitSelectedRoutes:false,
  plan:false,
  draggableWaypoints:false,
  lineOptions:{
    styles:[ {color: 'black', opacity: 0.8, weight: 6}, {color: 'red', opacity: 1, weight: 2}]
      },
  waypoints: [
    L.Routing.waypoint(L.latLng(28.6114741,77.2112497),"New Dehli"),
    L.Routing.waypoint(L.latLng(30.7304186,76.7789926),"Chandigarh"),
    L.Routing.waypoint(L.latLng(31.1047637,77.1717752),"Shimla"),
    L.Routing.waypoint(L.latLng(31.4493988,77.629702),"Rampur"),
    L.Routing.waypoint(L.latLng(31.9755409,78.5961753),"Changoa"),
    L.Routing.waypoint(L.latLng(32.2251899,78.0610693),"Kaza"),
    L.Routing.waypoint(L.latLng(32.4513357,77.860656),"Hanse"),
    L.Routing.waypoint(L.latLng(32.4386919,77.7497997),"losar gompa"),
  ],

}).addTo(map);

At the 7th waypoint (Hanse), the route is doing a U turn, adding a thousand kms to reach the 8th point that is only a few kms away.

What's going on here? I can't figure it out. Any help is welcome!

ghybs ghybs · Accepted Answer · 2017-11-08T16:32:05

Welcome to SO!

This is reproducible with OSMR service instead of Mapbox:

var map = L.map("map").setView([32.4513357, 77.860656], 10);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.Routing.control({
  //router: L.Routing.mapbox(''),
  //profile: "mapbox/driving",
  addWaypoints: false,
  waypointMode: 'snap',
  routeWhileDragging: true,
  show: false,
  fitSelectedRoutes: false,
  plan: false,
  draggableWaypoints: false,
  lineOptions: {
    styles: [{
      color: 'black',
      opacity: 0.8,
      weight: 6
    }, {
      color: 'red',
      opacity: 1,
      weight: 2
    }]
  },
  waypoints: [
    /*L.Routing.waypoint(L.latLng(28.6114741, 77.2112497), "New Dehli"),
    L.Routing.waypoint(L.latLng(30.7304186, 76.7789926), "Chandigarh"),
    L.Routing.waypoint(L.latLng(31.1047637, 77.1717752), "Shimla"),
    L.Routing.waypoint(L.latLng(31.4493988, 77.629702), "Rampur"),
    L.Routing.waypoint(L.latLng(31.9755409, 78.5961753), "Changoa"),
    L.Routing.waypoint(L.latLng(32.2251899, 78.0610693), "Kaza"),*/
    L.Routing.waypoint(L.latLng(32.4513357, 77.860656), "Hanse"),
    L.Routing.waypoint(L.latLng(32.4386919, 77.7497997), "losar gompa"),
  ],

}).addTo(map);

#map {
  height: 200px;
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet-routing-machine.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet-routing-machine.js"></script>

<div id="map"></div>

It looks like the OSM database thinks there is a "barrier" obstacle near your arrival point ("losar gompa"):

If this obstacle type cannot be crossed by car, that would explain why the router takes another (very long…) route instead.

If you think this obstacle no longer exists, please feel free to create an account on OpenStreetMap and edit the map! There is a very high chance that Mapbox router uses OSM data, therefore your modifications would be reflected some time later in Mapbox.

Leaflet routing machine not giving the optimal route (by far)

1 Answers