tmcw/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.uncompressed.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.css' rel='stylesheet' />
  <link href='style.css' rel='stylesheet' />
  <!--[if lte IE 8]>
    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.ie.css' rel='stylesheet' >
  <![endif]-->
</head>
<body>
<div id='ui-container'>
  <ul id='map-ui'></ul>
</div>
<div id='map'></div>
<script src='site.js' type='text/javascript'></script>
</body>
</html>

## site.js
var map = L.mapbox.map('map')
    .setView([38.1, -98], 4)
    .addLayer(L.mapbox.tileLayer('bloombergmaps.map-pgfea6on'));

var layers = [{
    name: 'Stent',
    layer: L.layerGroup([
        L.mapbox.tileLayer('bloombergmaps.stents_hsa'),
        L.mapbox.gridLayer('bloombergmaps.stents_hsa')])
}, {
    name: 'Gun Deaths',
    layer: L.layerGroup([
        L.mapbox.tileLayer('bloombergmaps.totalUSRate'),
        L.mapbox.gridLayer('bloombergmaps.totalUSRate')])
}];

var gridControl;

$.each(layers, function(i, layer) {
    layer.control = L.mapbox.gridControl(layer.layer.getLayers()[1]);
    $('<li></li>')
        .appendTo('#map-ui')
        .append($('<a></a>')
            .text(layer.name)
            .attr('href', '#')
            .click(function(e) {
                $.each(layers, function(i, l) {
                    if (l.layer !== layer.layer && map.hasLayer(l.layer)) {
                        map.removeLayer(l.layer);
                    }
                });
                $('.active').removeClass('active');
                $(this).addClass('active');
                if (gridControl) map.removeControl(gridControl);
                layer.layer.addTo(map);
                gridControl = layer.control.addTo(map);
                e.preventDefault();
            }));
});

$('#map-ui a:first').click();

## style.css
body {
    margin:0;
    padding:0;
}
#map {
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
}
#ui-container {
  height:900px;
	float:left;
	background: rgba(0, 0, 0, 0.8);
	position:relative;
	left:0px;
	top:0px;
	z-index:99;
	padding:10px;
	padding-top:75px;
}

#map-ui {
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 100;
}

#map-ui a {
  font: normal 13px/18px 'Helvetica Neue', Helvetica, sans-serif;
  display: block;
  margin: 0;
  /*border: 1px solid #BBB;*/
	background-color: #999;
	color:#000;
  border-bottom-width: 0;
  min-width: 138px;
  padding: 10px;
	padding-left:20px;
  text-decoration: none;
}

#map-ui li:hover a{
  background-color: #666;
	color:#000;
}

#map-ui li:last-child a {
  border-bottom-width: 1px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}

#map-ui li:first-child a {
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
#map-ui a.active {
  color: #FFF;
	background: rgba(0, 0, 0, 1);
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.uncompressed.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.css' rel='stylesheet' />
	<link href='style.css' rel='stylesheet' />
	<!--[if lte IE 8]>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.ie.css' rel='stylesheet' >
	<![endif]-->
	</head>
	<body>
	<div id='ui-container'>
	<ul id='map-ui'></ul>
	</div>
	<div id='map'></div>
	<script src='site.js' type='text/javascript'></script>
	</body>
	</html>
	var map = L.mapbox.map('map')
	.setView([38.1, -98], 4)
	.addLayer(L.mapbox.tileLayer('bloombergmaps.map-pgfea6on'));

	var layers = [{
	name: 'Stent',
	layer: L.layerGroup([
	L.mapbox.tileLayer('bloombergmaps.stents_hsa'),
	L.mapbox.gridLayer('bloombergmaps.stents_hsa')])
	}, {
	name: 'Gun Deaths',
	layer: L.layerGroup([
	L.mapbox.tileLayer('bloombergmaps.totalUSRate'),
	L.mapbox.gridLayer('bloombergmaps.totalUSRate')])
	}];

	var gridControl;

	$.each(layers, function(i, layer) {
	layer.control = L.mapbox.gridControl(layer.layer.getLayers()[1]);
	$('<li></li>')
	.appendTo('#map-ui')
	.append($('<a></a>')
	.text(layer.name)
	.attr('href', '#')
	.click(function(e) {
	$.each(layers, function(i, l) {
	if (l.layer !== layer.layer && map.hasLayer(l.layer)) {
	map.removeLayer(l.layer);
	}
	});
	$('.active').removeClass('active');
	$(this).addClass('active');
	if (gridControl) map.removeControl(gridControl);
	layer.layer.addTo(map);
	gridControl = layer.control.addTo(map);
	e.preventDefault();
	}));
	});

	$('#map-ui a:first').click();
	body {
	margin:0;
	padding:0;
	}
	#map {
	position:absolute;
	top:0;
	bottom:0;
	width:100%;
	}
	#ui-container {
	height:900px;
	float:left;
	background: rgba(0, 0, 0, 0.8);
	position:relative;
	left:0px;
	top:0px;
	z-index:99;
	padding:10px;
	padding-top:75px;
	}

	#map-ui {
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 100;
	}

	#map-ui a {
	font: normal 13px/18px 'Helvetica Neue', Helvetica, sans-serif;
	display: block;
	margin: 0;
	/border: 1px solid #BBB;/
	background-color: #999;
	color:#000;
	border-bottom-width: 0;
	min-width: 138px;
	padding: 10px;
	padding-left:20px;
	text-decoration: none;
	}

	#map-ui li:hover a{
	background-color: #666;
	color:#000;
	}

	#map-ui li:last-child a {
	border-bottom-width: 1px;
	-webkit-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
	}

	#map-ui li:first-child a {
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
	}
	#map-ui a.active {
	color: #FFF;
	background: rgba(0, 0, 0, 1);
	}