Draw an animated line between two markers in MapBox - line

Question

I'm new to mapbox
I import some markers from a csv file, and i can draw lines between them manually , from each port to its destination.
for example from Morocco to China, but if i show you my map, you can't know where is the Port and what is the Destination : from Morocco to China or the reverse. so, for this reason i would like draw an animated line from each port to its destination.
For the moment i don't have any code, i found in the below link how to draw an animated line but i couldn't do it between to markers, because they talk about a sinusoidal function.
https://www.mapbox.com/mapbox.js/example/v1.0.0/dynamically-drawing-a-line/
Can you help me please ?
Thank you !

Answer 1

In the example you linked, you can change the add() function to start drawing at your first point and stop drawing at your last. Ideally your markers are in the order you want the line to be drawn:
// add your points
var points = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
},
"properties": {}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [10, -10]
},
"properties": {}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [50, 50]
},
"properties": {}
}
]
// add a variable for keeping track of points
var y = 0;
// Start drawing the polyline.
add();
function add() {
// add a point on the line for the new marker
polyline.addLatLng(
L.latLng(points[y].geometry.coordinates[1],
points[y].geometry.coordinates[0])
);
// Pan the map along with where the line is being added.
map.setView(points[y].geometry.coordinates, 3);
// Continue to draw and pan the map by calling `add()`
// until `y` reaches the number of points
if (++y < points.length) window.setTimeout(add, 1000);
}