Animating polylines between markers - Mapbox

Question

I have the following code to plot markers and polylines between points. It runs this script when a user changes a selection on the page.

$.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){

// Create empty featureLayer
var featureLayer = L.mapbox.featureLayer().addTo(map);

// Create empty featureCollection
var featureCollection = {
    "type": "FeatureCollection",
    "features": []
};

var lineArray = [];

$.each(data, function (k, item) {

    // Create new feature object and push to featureCollection
    featureCollection.features.push({
        "type": "Feature",
        "properties": {
            "id": item.id,
            "title": item.title,
            "description": item.description,
            "image": item.image,
            "marker-symbol": "star",
            "marker-color": "#ff8888",
            "marker-size": "large"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                item.long,
                item.lat
            ]
        }
    });

    lineArray[item.id] = [item.lat, item.long];

});

featureLayer.setGeoJSON(featureCollection);

lineArray = lineArray.filter(function(){return true});


var polyline = L.polyline(lineArray).addTo(map);

},'json');

I have found the following example on the mapbox examples. https://www.mapbox.com/mapbox.js/example/v1.0.0/dynamically-drawing-a-line/ I was wondering if this kind of animation is possible on drawing simple lines, and if so how to do it.

iH8 iH8 · Accepted Answer · 2015-02-18T19:13:45

Instead of adding the entire lineArray to instanciate L.polyline:

var polyline = L.polyline(lineArray).addTo(map);

Add an empty array and create a function which adds the points from the array one by one. In code, with explanation in the comments:

// New polyline with empty array
var polyline = L.polyline([]).addTo(map);

// Set iterator to 0
var iteration = 0;

// Function for adding lines
function addLine () {
  // Add first point from the line array  
  polyline.addLatLng(lineArray[iteration]);
  // Set the view to the same point
  map.setView(lineArray[iteration], 3);
  // As long as there are points in the array,
  // Update the iterator and execute this function every 500 ms
  if (++iteration < lineArray.length) window.setTimeout(addLine, 500);
}

// Execute the function
addLine();

Working example on Plunker: http://plnkr.co/edit/8tO7P2bFd6ycWllfllZM?p=preview

Animating polylines between markers - Mapbox

1 Answers