3

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[i]);
  };

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

Welp, figured out my answer after posting this, naturally. The code below is much different but works like a charm.

// define map
var map = L.map('map').setView([57.8915,86.8359], 3);

// define addLayer function
function addLayer(layer, name, zIndex) {
    layer
        .setZIndex(zIndex)
        .addTo(map);
}

// add basemap only
addLayer(L.mapbox.tileLayer('mymapboxaccount.7xu07ldi'), 'Base Map', -1);

// here are the new layers we're going to add
var layers =  [L.mapbox.tileLayer('mymapboxaccount.wv29be29'),
      L.mapbox.tileLayer('mymapboxaccount.d08p8pvi'),
      L.mapbox.tileLayer('mymapboxaccount.0tivygb9'),
      L.mapbox.tileLayer('mymapboxaccount.lv8l4n29'),
      L.mapbox.tileLayer('mymapboxaccount.mlr9hpvi')
      ];

// and the length of said array so that the timer will stop
var arrayLength = layers.length;

// set the counter for the timer
var i = 0;                     

// set the timer delay function to add layers to map, calling function name in HTML button
function gogogo () {           
   setTimeout(function () {    
      addLayer(layers[i], i); // adding one layer at a time from the array
      i++;                     
      if (i < arrayLength) {            
         gogogo();             
      }                        
   }, 2000); // delay between layer adds in milliseconds
}
0

That's because addNextLayer() adds all layers at once. Move layers array out of the function, and leave the function to:

var i = 0;
function addNextLayer() {
  if (i < layers.length)
    layerAdder(layers[i++]);
  else
    clearInterval(animation);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.