Tuesday, May 21, 2024
 Popular · Latest · Hot · Upcoming
64
rated 0 times [  67] [ 3]  / answers: 1 / hits: 23076  / 9 Years ago, sat, july 4, 2015, 12:00:00

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(){
loadScript('https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js', function(){
var featureGroup = L.featureGroup().addTo(map);

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

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();
featureGroup.addLayer(e.layer);
e.layer.bindPopup(((LGeo.area(e.layer) / 1000000) * 0.62137).toFixed(2) + ' mi<sup>2</sup>');
e.layer.openPopup();
}

if (type === 'polyline') {
featureGroup.clearLayers();
featureGroup.addLayer(e.layer);
// 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. :)


More From » leaflet

 Answers
12

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

[#65926] Thursday, July 2, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
raymondd

Total Points: 620
Total Questions: 112
Total Answers: 94

Location: Namibia
Member since Mon, Feb 21, 2022
2 Years ago
raymondd questions
Thu, Apr 22, 21, 00:00, 3 Years ago
Thu, Jul 9, 20, 00:00, 4 Years ago
Thu, Apr 9, 20, 00:00, 4 Years ago
Thu, Jul 25, 19, 00:00, 5 Years ago
;