Skip to content

Instantly share code, notes, and snippets.

@MateoV

MateoV/layerswitcher.html

Created January 20, 2012 22:06
Show Gist options
  • Save MateoV/1649873 to your computer and use it in GitHub Desktop.
Save MateoV/1649873 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
layerswitcher.html
<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);
});
// *** 2) jQuery click function ***
$('#sidebar ul.layerswitch a').click(function (e) {
e.preventDefault();
$('#sidebar ul.layerswitch a').removeClass('active');
$(this).addClass('active');
layer = this.id;
refreshMap();
});
// *** 3) Function to refresh the map ***
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment