Skip to content

Instantly share code, notes, and snippets.

@mapsam
Created August 13, 2013 22:00
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 mapsam/6226148 to your computer and use it in GitHub Desktop.
Save mapsam/6226148 to your computer and use it in GitHub Desktop.
Leaflet: Layer Control
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
<style>
#map {
width:960px;
height:500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
window.onload = function () {
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var stamenToner = L.StamenTileLayer("toner");
var map = L.map('map', {
center: L.LatLng(0.0, -10.0),
zoom: 3,
layers: [osm, stamenToner]
});
var baseMaps = {
"OSM": osm,
"Stamen Toner": stamenToner
};
L.control.layers(baseMaps).addTo(map);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment