Get the distance and bearing of each pathline using Leaflet.PolylineMeasure plugin?

Question

I have been playing with polylinemeasure:change and I see I can get the value of the total distance easily with currentLine.distance.

But how can I get the value of each pathline distance and its bearing?

This is the furthest I went:

// Define some maps options
var mapOptions = {
  center: [20.27, -157],
  zoom: 7
};

//Create a map and assign it to the map div
var map = L.map("leafletMapid", mapOptions);

//  Add a baselayer
var baselayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

baselayer.addTo(map);

// Create polylineMeasure

const pMeasure = L.control.polylineMeasure();
pMeasure.addTo(map);

map.on("polylinemeasure:change", (currentLine) => {
  console.log(currentLine.distance);
});

You can see this example here: https://codesandbox.io/s/polylinemeasure-from-points-forked-xux7si?file=/src/index.js

Answer 1

Checking source code of L.control.polylineMeasure plugin shows that bearings data is calculated only when option showBearings is set to true and even then data is stored only in marker tooltip.

Solution is to 'steal' bearings calculation function from plugin source code end calculate bearings from polylineMeasure._currentLine.circleCoords coordinates.

Code could then look something like this (showBearings is set to true to check correctness of the method):

let polylineMeasure = L.control.polylineMeasure ({
  position:'topleft',
  unit:'kilometres',
  clearMeasurementsOnStop: false,
  showClearControl: true,
  showUnitControl: true,
  showBearings: true
});
polylineMeasure.addTo (map);

var calcAngle = function (p1, p2, direction) {
    var lat1 = p1.lat / 180 * Math.PI;
    var lat2 = p2.lat / 180 * Math.PI;
    var lng1 = p1.lng / 180 * Math.PI;
    var lng2 = p2.lng / 180 * Math.PI;
    var y = Math.sin(lng2-lng1) * Math.cos(lat2);
    var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(lng2-lng1);
    if (direction === "inbound") {
        var brng = (Math.atan2(y, x) * 180 / Math.PI + 180).toFixed(0);
    } else {
        var brng = (Math.atan2(y, x) * 180 / Math.PI + 360).toFixed(0);
    }
    return (brng % 360);
}

function debugevent(e) {
  var coords = polylineMeasure._currentLine.circleCoords;
  var lastInd = coords.length - 1;
  if (lastInd > 0) {
    var outb = calcAngle(coords[lastInd - 1], coords[lastInd], 'outbound');
    var inb = calcAngle(coords[lastInd], coords[lastInd - 1], 'inbound');
    console.log('Line ' + lastInd + ' bearings:');
    console.log('  - start out: ' + outb);
    console.log('  - end in: ' + inb);
  }
}

map.on('polylinemeasure:change', debugevent);

This measuring:

would give this result:

Line 1 bearings:
  - start out: 356
  - end in: 356
Line 2 bearings:
  - start out: 290
  - end in: 280
Line 3 bearings:
  - start out: 218
  - end in: 213
Line 4 bearings:
  - start out: 153
  - end in: 157