Adding multiple layers with timed delay in Mapbox/Leaflet

[المشرف العام]

So I've got a Mapbox map showing data split into several layers. I'd like the user to be able to click a play button to call the function "gogogo", and then the layers get added one at a time every 1 second or so.

I'm trying to use simple Javascript to iterate through an array of addLayer's to add them one at a time, but the result of this code is that all the layers are added at once when the user clicks the button. Is there another way I should do this? Or is there some way through Mapbox or Leaflet's JS libraries to natively slow down the addition of layers?

var map = L.map('map').setView([57.8915,86.8359], 3); // this just adds the basemap only addLayer(L.mapbox.tileLayer('mymapboxaccount.7xu07ldi'), 'Base Map', -1); function addLayer(layer, name, zIndex) { layer .setZIndex(zIndex) .addTo(map); } var animation; function gogogo() { animation = setInterval(addNextLayer, 1000); } var layerAdder = function(layer) { layer .addTo(map); }; function addNextLayer() { for (var i = 0; i < arrayLength; i++) { layerAdder(layers); }; var layers = [addLayer(L.mapbox.tileLayer('mymapboxaccount.wv29be29')), addLayer(L.mapbox.tileLayer('mymapboxaccount.d08p8pvi')), addLayer(L.mapbox.tileLayer('mymapboxaccount.0tivygb9')), addLayer(L.mapbox.tileLayer('mymapboxaccount.lv8l4n29')), addLayer(L.mapbox.tileLayer('mymapboxaccount.mlr9hpvi')) ]; var arrayLength = layers.length; clearInterval(animation); }

أكثر...