Skip to content

Instantly share code, notes, and snippets.

@dhcole

dhcole/mm-layers.html

Created May 7, 2012 20:04
Show Gist options
  • Save dhcole/2630040 to your computer and use it in GitHub Desktop.
Save dhcole/2630040 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mm-layers.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="map" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%"></div>
<div style="position: absolute; z-index: 100; background: white;">
<a href="#overlay">add overlay</a>
<a href="#base">change baselayer</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://raw.github.com/stamen/modestmaps-js/master/modestmaps.min.js"></script>
<script type="text/javascript">
var baselayer = new MM.TemplatedMapProvider('http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/{Z}/{X}/{Y}.png'),
overlay = new MM.TemplatedMapProvider('http://a.tiles.mapbox.com/v3/awidercircle.awc-addresses-don/{Z}/{X}/{Y}.png'),
baselayer2 = new MM.TemplatedMapProvider('http://a.tiles.mapbox.com/v3/mapbox.mapbox-nightvision/{Z}/{X}/{Y}.png');
var map = new MM.Map('map', new MM.Layer(baselayer));
map.setCenterZoom({ lat: 38.8850033656251, lon: -77.01439615889109 }, 14);
$(function(){
$('[href="#overlay"]').click(function(e){
e.preventDefault();
map.insertLayerAt(1, new MM.Layer(overlay));
});
$('[href="#base"]').click(function(e){
e.preventDefault();
map.setLayerAt(0, new MM.Layer(baselayer2));
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment