Making polyline snap to roads in leaflet
<p>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 the distance from marker-a to marker-b to marker-c and so on.</p>

<p>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.</p>

<p>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. </p>

<p>My markers are not so far apart, because my GPS device sends location every 10 seconds.</p>

<p>I found the <a href="https://github.com/perliedman/leaflet-routing-machine" rel="nofollow noreferrer">leaflet-routing-machine</a> plugin and I was wondering if I can use this to make my polyline snap to the road? </p>

<p>This is how I am adding markers to my map:</p>

<pre><code>function getlocationsfromdb(){
      group.clearLayers();
      latlngArray.length=0;
      var deviceid = $("#selectid").val();

        $.ajax({
            type: "POST",
            url: "functionhandlers/getlocations.php",
            data: {deviceid:deviceid,start:start,end:end},
            dataType: 'json',
            cache: false,
        })
        .success(function(response) {   
            $('input').removeClass('error').next('.errormessage').html('');
            if(!response.errors &amp;&amp; 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);    
                    latlngArray.push(latlng);   

               });
                  var polyline = L.polyline(latlngArray, {color: '#605ca8'}).addTo(group);  
                  map.fitBounds(group.getBounds());
                  var distancetravelled=polyline.measuredDistance();
                  $("#distancetravelled").html(distancetravelled);


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

<p>Can someone please point me in the right direction?</p>