Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save breunigs/5291828 to your computer and use it in GitHub Desktop.
Save breunigs/5291828 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<style>
#content {
position:fixed;
top:30px;
bottom:0;
left:185px;
right:0;
}
#map {
/* breaks with fixed as well. Switching to static/relative doesn’t work
either, but width/height need to be set instead of top/bottom/left/right. */
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
</head>
<body>
<div id="content"><div id="map"></div></div>
<script>
var osm1 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var osm2 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var map = L.map('map', {
center: new L.LatLng(39.73, -104.99),
zoom: 10,
layers: osm1
});
L.control.layers([osm1, osm2]).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment