CODEWITHSUNDEEP
javascriptroutesleaflet
user1542125
user1542125

Reputation: 615

Leaflet Routing Machine waypoints added as markers

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??).

enter image description here

Upvotes: 0

Views: 6688

Answers (1)

Liedman
Liedman

Reputation: 10339

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/

Upvotes: 3

Related Questions