I'm working on a project that plots out some pipes on a leaflet map, these are displayed on the map as polylines with arrows showing flow direction.

i am feeding the data in as geojson linestrings via ajax.

each "pipe" has multiple segments and i am calculating the approx total length of all segments server side and putting it in as a property of the linestring. this all works fine. the problem is, i also need the length of each segment.

i am having no luck figuring out how to get the start and end of each segment of a polyline in leaflet, if i could get the start and end coordinates i could use the haversine formula to work out the approx length.

if i cant figure this out i will have to make 1 linestring for each segment, and will loose the ability to calculate the total length server side as well as make my geojson file HUGE as it will have to store the properties for each segment of a line, not a big issue if it has only 2-3 segments, but if it has 20,30,100 or more segments it will be huge.

1 Answer 1


You could be interested in Leaflet measurement plugins, e.g. Leaflet Measure Path (demo):

A plugin to show measurements on paths (polylines, polygons and circles currently supported).

Otherwise, you can very easily do it yourself, using these methods:


polyline.getLatLngs().forEach(function (latLng) {
  if (previousPoint) {
      'Distance from previous point: '
      + previousPoint.distanceTo(latLng)
      + ' meter(s)'
  previousPoint = latLng;
  • i would prefer not to use if i can. trying to keep tje codebase small and as 'in house' as possible so i am not relying on other projects. the only issue with your seco d option. is i would like to be able to click the line itself to get the distance. i already have a popup nound to it. so i dont have access to the "current" point as it could be anywhere in the section. not necaseraly at a point.
    – mike16889
    Nov 15, 2017 at 7:20
  • The above code is just an example of implementation. If you need help on implementing your on click listener, please feel free to open a new question with relevant details.
    – ghybs
    Nov 15, 2017 at 9:44
  • ok, i have resorted to trying to use the plugin you suggested, the but i am having a problem getting it to work, something I probably should have mentioned is I'm getting the data for the polyline from the server via ajax and GeoJSON, the GeoJSON file has a bunch of linestrings inside it, my code then draws the lines on the map, uses polyline decorator to mark the direction and binds a popup to the the line itself. the plugin does not seem to support geojson linestrings, or at least i cant get it to work , it just states "showMeasurements is not a function"
    – mike16889
    Nov 18, 2017 at 23:15
  • This really sounds like a different question. As mentioned above, please open a new question with relevant details and code. Ideally provide a live case (e.g. using Plunker, JSBin, JSFiddle, etc.) You may also switch to Stack Overflow for very programming related questions.
    – ghybs
    Nov 19, 2017 at 3:30

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.