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

Question

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

Answer 1

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();
    featureGroup.addLayer(e.layer);

    // 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();
}

Answer 2

I solved this by extending L.Polyline class, and using LatLng's distanceTo method:

L.Polyline = L.Polyline.include({
    getDistance: function(system) {
        // distance in meters
        var mDistanse = 0,
            length = this._latlngs.length;
        for (var i = 1; i < length; i++) {
            mDistanse += this._latlngs[i].distanceTo(this._latlngs[i - 1]);
        }
        // optional
        if (system === 'imperial') {
            return mDistanse / 1609.34;
        } else {
            return mDistanse / 1000;
        }
    }
});

Hope it helps someone.

Answer 3

And also that's the solution of calculate the area of circle.

else if (type === 'circle') {
     var area = 0;
     var radius = e.layer.getRadius();
     area = (Math.PI) * (radius * radius);
     e.layer.bindPopup((area / 1000000).toFixed(2) + ' km<sup>2</sup>');
     e.layer.openPopup();
}

Answer 4

I would also encourage readers to check out the turf library. It works great with leaflet and has many useful methods including polyline distance. http://turfjs.org/docs