-
-
Save tmcw/1657931 to your computer and use it in GitHub Desktop.
Layer Switcher Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>Tornadoes in the U.S.</title> | |
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> | |
<script src='http://mapbox.com/wax/dist/modestmaps.js' type='text/javascript'></script> | |
<script src='http://mapbox.com/wax/dist/wax.mm.min.js' type='text/javascript'></script> | |
<link href='http://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="http://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 = '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); | |
}); | |
$('#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> | |
<style type="text/css"> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
p { | |
line-height: 20px; | |
} | |
a { | |
color: #29A1E1; | |
text-decoration: none; | |
} | |
a:hover { | |
text-decoration: underline; | |
} | |
#mymap { | |
position: absolute; | |
top: 0; | |
right: 400px; | |
bottom: 0; | |
left: 0; | |
background: #020B1A; | |
} | |
#sidebar { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
right: 0; | |
width: 359px; | |
background: #111; | |
color: #fff; | |
border-left:1px solid #000; | |
padding: 20px; | |
} | |
.source { | |
font-size: 80%; | |
} | |
.layerswitch { | |
list-style: none; | |
padding: 0; | |
} | |
.layerswitch li a { | |
display: block; | |
height: 30px; | |
width: 60px; | |
border: 1px solid #333; | |
float: left; | |
margin-right: 10px; | |
text-align: center; | |
line-height: 30px; | |
color: #fff; | |
text-decoration: none; | |
} | |
.layerswitch li a.active { | |
border-color: #813; | |
} | |
.wax-tooltip { | |
right: 10px; | |
left: auto; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment