1

I'm quite new when it comes to Leaflet and this is my very first question asked here so I'm not experienced. While I was drawing polyline I noticed that you can get current distance while drawing it: enter image description here But I was wondering is there any method in Leaflet.Draw which can get the total distance of a created polyline so I can use it later? Edit: As suggested this is the only code I have for now which is a basic map with some plugins:

var center = [42.6194, 25.3930];

var map = L.map('map', {
    fullscreenControl: true, fullscreenControlOptions: {
        position: 'topleft'
    },
    visualClick: true,
    visualClickPane: 'shadowPane'
}).setView(center, 7);


L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> | &copy; <a href="https://opentopomap.org/about">OpenTopoMap</a> | &copy; <a href="/">Trails</a>'
}).addTo(map);

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

var drawPluginOptions = {
    position: 'topleft',
    draw: {
        polyline: {
            shapeOptions: {
                color: '#c700ac',
                weight: 4
            }
        },
        polygon: false,
        circle: false,
        rectangle: false,
        circlemarker: false,
        marker: false
    },
    edit: {
        featureGroup: editableLayers,
        remove: false
    }
};

var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);

L.control.mousePosition().addTo(map);
L.control.scale().addTo(map);

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

map.on('draw:created', function (e) {
    editableLayers.addLayer(e.layer);
});
0

1 Answer 1

1

It seems that neither Leaflet nor Leaflet.Draw has some method to get line length, so you'll have to calculate it yourselves.

One way to do it is to use line layer .getLatLngs() method to get all line coordinates, and then loop through them and get line segments lengths (in meters) with Leaflet coordinate .distanceTo method.

Code could then look something like this:

map.on('draw:created', function (e) {
  var layer = e.layer;
  editableLayers.addLayer(layer);
  if (e.layerType = 'polyline') {
    var coords = layer.getLatLngs();
    var length = 0;
    for (var i = 0; i < coords.length - 1; i++) {
      length += coords[i].distanceTo(coords[i + 1]);
    }
    console.log(length);
  }
});
1
  • Works! Thank you!
    – htopalov
    Feb 4, 2022 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.