tristen/app.js

## app.js
var baseMap = 'mapbox.world-bright'
var layers = [
  baseMap
  ];

var loadMap = function(layers) {
  var url = 'http://api.tiles.mapbox.com/v3/' + layers + '.jsonp';
  wax.tilejson(url, function(tilejson) {
    var map = new MM.Map('map', new wax.mm.connector(tilejson));
    map.setCenterZoom({ lat: 39, lon: -98 }, 4);
  });
}

$(function () {
  loadMap(layers);

  $('a.toggle').click(function(e) {
    e.preventDefault();
    if (!$(this).hasClass('active')) {
      $(this).addClass('active');
      var toggleLayer = $(this).attr('data-layer');
      layers = [
        baseMap,
        toggleLayer
      ]
      loadMap(layers);
    } else {
      $(this).removeClass('active');
      layers = [
        baseMap
        ]
      loadMap(layers);
    }
  });
});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Modest Maps JS Demo | Basic Controls</title>
    <link rel='stylesheet' href='style.css'>
  </head>

  <body>
    <div id='controls'>
	 <ul>
	   <li><a data-layer='mapbox.tornadoes-2010-state' class='toggle' href='#'>toggle layer</a></li>
	  </ul>
    </div>
    <div id='map' />
    <script src='https://rawgithub.com/stamen/modestmaps-js/master/modestmaps.min.js'></script>
    <script src='https://rawgithub.com/mapbox/wax/master/dist/wax.mm.min.js'></script>
    <script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
    <script src='app.js'></script>
  </body>
</html>

## style.css
  body {
    font: 13px/22px 'Helvetica Neue', Helvetica, sans;
    margin: 0;
    padding: 0;
  }
  a.toggle {
    background: #fff;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #1a73c7;
    font-weight: bold;
    display: block;
    padding: 5px 10px;
    position: absolute;
    left: 20px; top: 20px;
    z-index: 1000;
  }
  a.toggle.active,
  a.toggle:hover {
    background-color: #000;
    border-color: #000;
    color: #fff;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #map {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    }
	var baseMap = 'mapbox.world-bright'
	var layers = [
	baseMap
	];

	var loadMap = function(layers) {
	var url = 'http://api.tiles.mapbox.com/v3/' + layers + '.jsonp';
	wax.tilejson(url, function(tilejson) {
	var map = new MM.Map('map', new wax.mm.connector(tilejson));
	map.setCenterZoom({ lat: 39, lon: -98 }, 4);
	});
	}

	$(function () {
	loadMap(layers);

	$('a.toggle').click(function(e) {
	e.preventDefault();
	if (!$(this).hasClass('active')) {
	$(this).addClass('active');
	var toggleLayer = $(this).attr('data-layer');
	layers = [
	baseMap,
	toggleLayer
	]
	loadMap(layers);
	} else {
	$(this).removeClass('active');
	layers = [
	baseMap
	]
	loadMap(layers);
	}
	});
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Modest Maps JS Demo \| Basic Controls</title>
	<link rel='stylesheet' href='style.css'>
	</head>

	<body>
	<div id='controls'>
	<ul>
	<li><a data-layer='mapbox.tornadoes-2010-state' class='toggle' href='#'>toggle layer</a></li>
	</ul>
	</div>
	<div id='map' />
	<script src='https://rawgithub.com/stamen/modestmaps-js/master/modestmaps.min.js'></script>
	<script src='https://rawgithub.com/mapbox/wax/master/dist/wax.mm.min.js'></script>
	<script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
	<script src='app.js'></script>
	</body>
	</html>
	body {
	font: 13px/22px 'Helvetica Neue', Helvetica, sans;
	margin: 0;
	padding: 0;
	}
	a.toggle {
	background: #fff;
	border: 1px solid #ccc;
	text-decoration: none;
	color: #1a73c7;
	font-weight: bold;
	display: block;
	padding: 5px 10px;
	position: absolute;
	left: 20px; top: 20px;
	z-index: 1000;
	}
	a.toggle.active,
	a.toggle:hover {
	background-color: #000;
	border-color: #000;
	color: #fff;
	}
	ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}
	#map {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	}