Leaflet.js draw line along rivers between two points - node.js

Question

I am looking to draw a line along a few rivers (they merge so the river name technically changes) with Leaflet.js. I am currently using a Mapbox custom map style to display the map but I'm at a loss of how to "draw" a line along these rivers, from one marker to another.
EDIT
Thanks to #ghybs who pointed me in the right direction (below).
I now have this code which works perfectly for getting the data. However. The problem is that the nodes are not "in order". I'd like the nodes to be in order with regards to the river, so that I can draw the line. Currently, because they are not sequential, the line is all over the place.
The code is utilising Request to get the data, hence the calls are asynchronous. I think this is what's leading to the ordering issue.
var request = require("request");
var parseString = require("xml2js").parseString;
var fs = require("fs");
var results = [];
request("https://www.openstreetmap.org/api/0.6/relation/5806846", function(error, response, body){
// var body = fs.readFileSync("relation.xml");
var total_requests = 0;
var completed_requests = 0;
parseString(body, function(err, result){
var ways = result.osm.relation[0].member;
console.log("Initial requests: " + ways.length);
total_requests += ways.length;
for (var i = 0; i < ways.length; i++) {
var way = ways[i].$.ref;
(function(way, i){
setTimeout(function(){
request("https://www.openstreetmap.org/api/0.6/way/"+way, function(error, response, body){
completed_requests++;
if (error) {
console.log(error);
console.log("https://www.openstreetmap.org/api/0.6/way/" + way + " failed");
}
else {
parseString(body, function(err, result){
var nodes = result.osm.way[0].nd;
console.log("Total requests " + + nodes.length);
total_requests += nodes.length;
for (var i2 = 0; i2 < nodes.length; i2++){
var node = nodes[i2].$.ref;
(function(node, i){
setTimeout(function(){
request("https://www.openstreetmap.org/api/0.6/node/"+node, function(error, response, body){
completed_requests++;
if (error) {
console.log(error);
console.log("https://www.openstreetmap.org/api/0.6/node/" + node + " failed");
}
else {
parseString(body, function(err, result){
var lat = result.osm.node[0].$.lat;
var long = result.osm.node[0].$.lon;
results.push([lat, long]);
});
console.log(total_requests + "/" + completed_requests);
if (completed_requests == total_requests){
console.log("Done");
console.log("Got " + results.length + " results");
fs.writeFile("little_ouse.json", JSON.stringify(results), function(err) {
if (err) {
return console.log(err);
}
console.log("The file was saved");
});
}
}
});
}, i * 1000);
})(node, i2);
}
});
}
});
}, i * 1000);
})(way, i)
}
});
});

Answer 1

It sounds like you would like to extract your rivers paths from the OSM database (which is what Mapbox studio uses to let you customize your basemap style).
On OpenStreetMap main website, you have a big "Export" button at the top. You can use it to extract all the data contained in a given bounding box, including the coordinates of the paths for your rivers.
Then you can use other tools to convert to GeoJSON and keep only the data related to your rivers (e.g. http://geojson.io/).
Once you have your data as GeoJSON, you can easily display it on Leaflet using L.geoJson(myGeoJSONdata).addTo(map)