Leaflet Routing Machine waypoints added as markers

Question

I'm trying to create a leaflet routing machine route in my web app using waypoints stored in a database. I'm first creating the control:

var routeControl = L.Routing.control({waypoints: [null]}).addTo(map);
getTestRoute("1");

The function 'getTestRoute' pulls in my waypoints from a db as lat/long pairs and adds them to the control, here's the function:

function getTestRoute(route){

    $.ajax({

    url: './get_route.php',
    type: 'POST',
    dataType: 'JSON',
    data: {
          getRoute: route
    },

    success: function (res) {


        $.each(res,function(key,value){

            var newLatLng = new L.LatLng(res[key].latitude, res[key].longitude);


            routeControl.spliceWaypoints(0, 0, newLatLng);

        })

    }

    });
}

My issue is that instead of seeing a route on the map I'm seeing my waypoints (five in total) added to the map as markers with no routing between them.

Please please help!!!

Here is a fiddle of my issue: http://jsfiddle.net/c4yfy4ek/46/

As can be seen on the fiddle no routes are created between the points, and the points are added as markers (which I'm assuming is unexpected??).

Try removing "null" from "waypoints: [null]". If that doesn't help, please provide a jsfiddle and I'll have a look. — gusper
Yes, what @gusper says - the null entry in the array will be kept as an empty waypoint at the start of the list; also, check for errors in the JavaScript console, since the null will likely cause errors in LRM. — Liedman

Liedman Liedman · Accepted Answer · 2015-08-11T08:11:28

The problem is the use of spliceWaypoints combined with an undocumented feature in Leaflet Routing Machine.

When the control is created, it will automatically add waypoints such that the route always has a start and an end waypoint, it such waypoints are not already supplied. That means: whatever you do, getWaypoints will always return an array with at least two entries; if not provided, these waypoints will however have their latLng properties set to undefined, indicating the location has not yet been provided.

In the code in question, the control is created and will get two waypoints added implicitly by Leaflet Routing Machine, with undefined locations. Later, you add a couple of new waypoints, but the implicit two waypoints remain, without locations. No route will be calculated, since two waypoints are missing locations.

The solution is to build the array of waypoints first, and then call setWaypoints, instead of spliceWaypoints.

See an updated version of the fiddle: http://jsfiddle.net/c4yfy4ek/53/

Leaflet Routing Machine waypoints added as markers

1 Answers