Question

I am using a mapping app called Leaflet. Some of the code I use is below:

var layer1 =L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/7540/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 12

}).addTo(map);

// THE ABOVE CODE MERELY PLACES A BASE LAYER INSIDE A DIV TAG. But the key to this is the //addTo method.

I also am getting weather radar data from Aeris and create a layer on leaflet using this:

var radar_img_arr = createVariables();

and the createVariables() looks like this:

function createVariables(){
  var radar_images = [];

  for (var i = 0; i <= 99; ++i) {
      radar_images[i] = L.tileLayer('http://tile2.aerisapi.com/QjvmoFnKc1Wj94aDULEX_8Y7R8eagwQKlUusR5WZk6JTBdz6zlCm3KIP15CLG/radar/{z}/{x}/{y}/'+data.files[i].time +'.png', {opacity: 0.6, format: 'image/png',   maxZoom: 12,attribution: "FOSM"}).addTo(map).setZIndex(999);
  }

  return radar_images;
}

The above adds to the map all data to the map at once just to test.

What I really want is a loop which can remove a old layer from the map and replace it with a new layer.

The 2 important methods are below:
map.removeLayer(radar_img_arr[i]);
map.addLayer(radar_img_arr[i+1]);

I am trying to write a loop to do this and the timing is messed up. other weather sites use Flex or Flash to animate a radar loop but i want to try a Javascript solution.

Does anyone know how to create this loop in JS or jQuery?

Thanks,
Jim

Answer 1

You should use set timeout to iterate over the loop… Something like:

// function for setTimeout
var updateImage = function() {

  //gets the current image & update place
  var img = radar_img_arr[place++] 

  // code to update display here.
  ...

  // call the function again in 1 second 
  setTimeout(updateImage, 1000)

  // reset place to 0 if need be
  if (step == radar_img_arr.length-1) 
    place = 0;

}

// variable to store where we are in the array.
var place = 0

// array of images
var radar_img_arr = createVariables()

//start the process in 1 second:
setTimeout(updateImage, 1000)

// or, start it right away:
updateImage()

I don’t like to use setInterval, which will automatically call your function over and over however many miliseconds you pass. Reason is, if your function takes longer to run than timer takes, you create a race condition, which in your case would cause the images to update strangely.