Rohan - 1 year ago 204
Javascript Question

How to calculate the distance of a polyline in Leaflet like geojson.io?

I am working on a map with Mapbox and Leaflet and I am supposed to let the user draw polygons and calculate and show the are of that polygon and I also need to let the user draw a polyline and show the distance of the polyline.

I have figured out the polygon area feature but I cannot figure out how to calculate the distance of a polyline.

My code is as follows:

``````loadScript('https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js', function(){

var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
},
draw: {
polygon: true,
polyline: true,
rectangle: false,
circle: false,
marker: false
}

map.on('draw:created', showPolygonArea);
map.on('draw:edited', showPolygonAreaEdited);

function showPolygonAreaEdited(e) {
e.layers.eachLayer(function(layer) {
showPolygonArea({ layer: layer });
});
}
function showPolygonArea(e) {
var type = e.layerType,
layer = e.layer;

if (type === 'polygon') {
featureGroup.clearLayers();
e.layer.bindPopup(((LGeo.area(e.layer) / 1000000) * 0.62137).toFixed(2) + ' mi<sup>2</sup>');
e.layer.openPopup();
}

if (type === 'polyline') {
featureGroup.clearLayers();
// What do I do different here to calculate the distance of the polyline?
// Is there a method in the LGeo lib itself?
// e.layer.bindPopup(((LGeo.area(e.layer) / 1000000) * 0.62137).toFixed(2) + ' mi<sup>2</sup>');
e.layer.openPopup();
}

}
});
});
``````

Is there a method in the LGeo lib itself which will help me calculate the distance of the polyline? The devs at geogson.io also have a way to calculate the distance but I cannot seem to figure it out looking at their code. I am not a seasoned Javascript developer. Any help is welcome. :)

So I finally came up with an algorithm myself. I basically found the property of the polyline which holds all the `latlngs` of the polyline and then I made it go through a loop and I used the `distanceTo` method from Leaflet to calculate distance between points and kept on adding them to a `totalDistance` variable.

``````if (type === 'polyline') {
featureGroup.clearLayers();

// Calculating the distance of the polyline
var tempLatLng = null;
var totalDistance = 0.00000;
\$.each(e.layer._latlngs, function(i, latlng){
if(tempLatLng == null){
tempLatLng = latlng;
return;
}

totalDistance += tempLatLng.distanceTo(latlng);
tempLatLng = latlng;
});
e.layer.bindPopup((totalDistance).toFixed(2) + ' meters');
e.layer.openPopup();
}
``````
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download