Leaflet and TurfJS: Can not draw perpendicular lines using destination and bearing

Question

I am trying to draw perpendicular lines and I am using destination and rhumbDestination methods.

let home = turf.point([43.12831626497193, 1.259286403656006]);
L.circle(home.geometry.coordinates, {
    color: 'purple',
    fillColor: 'purple',
    fillOpacity: 0.5,
    radius: 20
}).addTo(map);

let destination;

destination = turf.rhumbDestination(home.geometry.coordinates, 400, 45, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -135, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);


destination = turf.rhumbDestination(home.geometry.coordinates, 400, 135, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -45, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);

But resulting lines are not perpendicular

Not perpendicular

I am using leaflet for visualization. I have also tested with destination method, the same result.

While bearing is multiple of 90 the result is right.

destination = turf.rhumbDestination(home.geometry.coordinates, 400, 0, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -180, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);


destination = turf.rhumbDestination(home.geometry.coordinates, 400, 90, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -90, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);

Perpendicular

What I am doing wrong ? How can I draw perpendicular lines using leaflet and turfjs ?

Answer 1

it is a matter of coordinates order: Leaflet (like Google Maps) uses the [latitude, longitude] schema, while Turf follows the GeoJSON definition of [longitude, latitude], i.e. the equivalent of [x, y] on a geometrical plane.

Thanks to stegobit for answer