Bruno Bruno - 1 month ago 20x
jQuery Question

Making polyline snap to roads in leaflet

I am loading markers from a database and then drawing a polyline between markers. I am using the polyline to calculate overall distance instead of having to calculate distance from marker-a to marker-b to marker-c and so on.

My distance is however inaccurate because if two markers are around a curved road, the polyline just connects them instead of drawing it along the road.

I know this is possible in Google Maps API but the usage restrictions would not suit me which is why I decided to use leaflet.

My markers are not so far apart, because my gps device sends location every 10 seconds.

I found the leaflet-routing-machine plugin and I was wondering if I can use this to make my polyline snap to the road?

This is how I am adding markers to my map:

function getlocationsfromdb(){
var deviceid = $("#selectid").val();

type: "POST",
url: "functionhandlers/getlocations.php",
data: {deviceid:deviceid,start:start,end:end},
dataType: 'json',
cache: false,
.success(function(response) {
if(!response.errors && response.result) {

$.each(response.result, function( index, value) {
var latlng = L.latLng(value[7], value[8]);
var marker = L.circleMarker(latlng,{radius:2}).addTo(group);

var polyline = L.polyline(latlngArray, {color: '#605ca8'}).addTo(group);
var distancetravelled=polyline.measuredDistance();

} else {
$.each(response.errors, function( index, value) {
// add error classes
$('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')

Can someone please point me in the right direction?


This can be done rather easily with leaflet-routing-machine. You can just set the waypoints to your latlngArray when you initialize the routing control:

var control = L.Routing.control({
  waypoints: latlngArray,
  show: false,
  waypointMode: 'snap',
  createMarker: function() {}

Here, show: false keeps the control from displaying on the map, and the empty createMarker function overrides the default markers that routing machine creates, instead doing nothing (though the markers would be removed when we remove the control, this just keeps them from flashing on the screen when a route is found).

You can extract all the vertices of the routing machine results by listening for the routeselected event, which will return an IRoute object that contains all the directions and geometries for the route. Placing the .route.coordinates in a new L.polyline object will keep the route around, so we can then just get rid of the routing control:

control.on('routeselected', function(e) {

Placing the above code blocks within your .success callback function right after you populate your latlngArray should give you the route you want. Here's an fiddle showing this at work:

Also, if you're not using the routing control for anything else and want to keep it from showing up entirely (a small white control box may still appear while the route is being calculated), you can simply hide it in css:

.leaflet-routing-container {