Draw an animated line between two markers in MapBox

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 !

Ok, what did your research turn up? What have you tried? What didn't work? What problems did it give? Any errors? This is by far not a question which adheres to Stackoverflow standards. Please give this a good and thorough read: stackoverflow.com/help/how-to-ask and afterwards edit your question. — iH8
Thank you for your response, next time i will try to ask a good question, it is my first, that's why ! I have many questions, i'm starting with this : Ok, i import some markers from a csv file, and i can draw lines between them, from each port to its destination. but if you see the map, you don't know the direction from A to B or the reverse. so, for this reason i would like draw a animated direction from each port to its destination. for the moment i don't have any code. — Hichamisto
Please edit your question, add that to your question and add what you've researched, and what you found etc. — iH8

Lyzi Diamond Lyzi Diamond · Accepted Answer · 2015-10-08T19:17:35

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);
}

Draw an animated line between two markers in MapBox

1 Answers