Layer Switcher Example

<html>
<head>
  <title>Tornadoes in the U.S.</title>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
  <script src='https://mapbox.com/wax/dist/modestmaps.js' type='text/javascript'></script>
  <script src='https://mapbox.com/wax/dist/wax.mm.min.js' type='text/javascript'></script>
  <link href='https://mapbox.com/wax/css/controls.css' rel='stylesheet' type='text/css' />
</head>
<body>
  <div id="sidebar">
    <h2>Tornadoes in the United States</h2>
    <p>This map shows every tornado that occurred in the United States on a yearly basis over the last three years. Sizes of the dots are based on F-scale. Hover over them to view detailed statistics.</p>
    <p>Source: <a href="https://www.weather.gov/">NOAA's National Weather Service</a></p>
    <ul class="layerswitch">
      <li><a id="mapbox.tornadoes-2008" href="#">2008</a></li>
      <li><a id="mapbox.tornadoes-2009" href="#">2009</a></li>
      <li><a id="mapbox.tornadoes-2010" class="active" href="#">2010</a></li>
    </ul>
  </div>
  <div id="mymap"></div>
  <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 = 'https://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);
    });
    
    $('#sidebar ul.layerswitch a').click(function (e) {
      e.preventDefault();
      layer = this.id;
      $('#sidebar ul.layerswitch a').removeClass('active');
      $(this).addClass('active');
      refreshMap();
    });
    
    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>
</body>
</html>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js to a secure url

Modified http://mapbox.com/wax/dist/modestmaps.js to a secure url

Modified http://mapbox.com/wax/dist/wax.mm.min.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

https://mapbox.com/wax/dist/modestmaps.js

https://mapbox.com/wax/dist/wax.mm.min.js