Cycling through overlays

Hide and show overlays in a cycle

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Cycling through overlays</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', 'mapbox.streets', {
        // we disable tile animations for this example so that the
        // transition from one layer to another is immediate.
        // you can change this if you want, to show tiles fading in
        fadeAnimation: false
    })
    .setView([40, -96.50], 4);

var layers = [
    L.mapbox.tileLayer('examples.bird-species'),
    L.mapbox.tileLayer('examples.npr-stations'),
    L.mapbox.tileLayer('examples.location-formatter')
];

// i is the number of the currently-selected layer: this loops through
// 0, 1, and 2.
var i = 0;

// we use a layer group to make it simple to remove an existing overlay
// and add a new one in the same line of code, as below, without juggling
// temporary variables.
var layerGroup = L.layerGroup().addTo(map);

// show the first overlay as soon as the map loads
next();

// and then time the next() function to run every 2 seconds
setInterval(next, 1000 * 2);

function next() {
    layerGroup.clearLayers().addLayer(layers[i]);
    if (++i >= layers.length) i = 0;
}
</script>
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example