Skip to content

Instantly share code, notes, and snippets.

@willwhite
Created October 8, 2011 19:59
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save willwhite/1272792 to your computer and use it in GitHub Desktop.
Save willwhite/1272792 to your computer and use it in GitHub Desktop.
Modest Maps layer switcher demo
<html>
<head>
<!-- NOTE: Do not use these URLs in production. If they ever change your site will break.
Instead, download the files to your web server and host them there. -->
<script src='https://raw.github.com/mapbox/wax/v3.0.8/ext/modestmaps.min.js' type='text/javascript'></script>
<script src='https://raw.github.com/mapbox/wax/v3.0.8/dist/wax.mm.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-1.6.4.min.js' type='text/javascript'></script>
</head>
<body>
<h3>Choose a layer</h3>
<ul>
<li><a href='#' rel='http://api.tiles.mapbox.com/v2/mapbox.geography-class.jsonp' class='first'>Geography Class</a></li>
<li><a href='#' rel='http://api.tiles.mapbox.com/v2/mapbox.dc-nightvision.jsonp'>DC</a></li>
<li><a href='#' rel='http://api.tiles.mapbox.com/v2/mapbox.world-blank-light,devseed.usa-unemployment-vs-stimulus.jsonp'>Employment</a></li>
</ul>
<div id='demo-map'></div>
<script>
var mm = com.modestmaps;
var map;
// Each time a layer is clicked, we request the TileJSON from
// MapBox Hosting and use that to configure the map with `map.setProvider()`.
$('li a').click(function() {
// This fetches TileJSON from the URL in the `rel` attribute of the clicked link.
wax.tilejson($(this).attr('rel'), function(tilejson) {
if (!map) {
// Set up the map. Only runs once.
map = new mm.Map('demo-map',
new wax.mm.connector(tilejson),
new mm.Point(700,400));
} else {
// We used the TileJSON to configure the map.
map.setProvider(new wax.mm.connector(tilejson));
}
// Each time we change the layer, we use the TileJSON to set the
// center of the map.
map.setCenterZoom(new mm.Location(tilejson.center[1],
tilejson.center[0]),
tilejson.center[2] - 3);
});
});
// Fire the first click.
$('li a.first').click();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment