layerswitcher.html

<script type='text/javascript'>
  // Declare variables
  var m, mm, interaction;
  // Set initial map layer
  var layer = 'mapbox.tornadoes-2010';
  // Static part of the map url
  var urlBase = 'http://api.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul,mapbox.world-borders-light,';
  // Full map url
  var url = urlBase + layer + '.jsonp';
  
  wax.tilejson(url, function(tilejson) {
    // Set minimum zoom limit
    tilejson.minzoom = 4;
    // Set maximum zoom limit
    tilejson.maxzoom = 8;
    mm = com.modestmaps;
    m = new mm.Map('mymap',
    new wax.mm.connector(tilejson));
    wax.mm.zoomer(m, tilejson).appendTo(m.parent);
    interaction = wax.mm.interaction(m, tilejson);
    m.setCenterZoom(new mm.Location(39, -98), 5);
  });
  
  // *** 2) jQuery click function ***
  $('#sidebar ul.layerswitch a').click(function (e) {
    e.preventDefault();
    $('#sidebar ul.layerswitch a').removeClass('active');
    $(this).addClass('active');
    layer = this.id;
    refreshMap();
  });
  
  // *** 3) Function to refresh the map ***
  function refreshMap() {
    url = urlBase + layer + '.jsonp';
    wax.tilejson(url, function(tilejson) {
      m.setProvider(new wax.mm.connector(tilejson));
      interaction.remove();
      interaction = wax.mm.interaction(m, tilejson);
    });
  }
</script>