Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created June 26, 2013 21:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/5871690 to your computer and use it in GitHub Desktop.
Save tmcw/5871690 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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.0.4/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.4/mapbox.css' rel='stylesheet' />
<link href='site.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/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>
Raw
site.css
body {
margin:0;
padding:0;
}
#map {
position:absolute;
top:0;
left:300px;
bottom:0;
right:0;
}
#ui-container {
position:absolute;
top:0;
bottom:0;
left:0;
width:300px;
background: rgba(0, 0, 0, 0.8);
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);
}
Raw
site.js
var map = L.mapbox.map('map', 'bloombergmaps.map-cbhu7q47')
.setView([38.1, -98], 6),
overlays = L.layerGroup().addTo(map),
ui = document.getElementById('map-ui');
var layers = [{
name: 'Rate of Stenting',
layer: L.mapbox.tileLayer('bloombergmaps.stents_hsa'),
grid: L.mapbox.gridLayer('bloombergmaps.stents_hsa')
}, {
name: 'Suicide Rates',
layer: L.mapbox.tileLayer('bloombergmaps.PCI_rate'),
grid: L.mapbox.gridLayer('bloombergmaps.PCI_rate')
}];
var overlay, gridLayer, gridControl;
for (var i = 0; i < layers.length; i++) {
(function(layer) {
var li = ui.appendChild(document.createElement('li')),
a = li.appendChild(document.createElement('a'));
layer.gridControl = L.mapbox.gridControl(layer.grid);
a.innerHTML = layer.name;
a.onclick = function() {
(document.getElementsByClassName('active')[0] || {}).className = '';
overlays.addLayer(layer.layer);
if (overlay) map.removeLayer(overlay);
if (gridLayer) map.removeLayer(gridLayer);
if (gridControl) map.removeLayer(gridControl);
gridLayer = layer.grid.addTo(map);
overlay = layer.layer.addTo(map);
gridControl = layer.gridControl.addTo(map);
};
})(layers[i]);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment