Skip to content

Instantly share code, notes, and snippets.

@juliomalegria

juliomalegria/index.html

Created September 20, 2015 19:25
Show Gist options
  • Save juliomalegria/5a5127e2d5648015f837 to your computer and use it in GitHub Desktop.
Save juliomalegria/5a5127e2d5648015f837 to your computer and use it in GitHub Desktop.
Download ZIP
Tangrams with base layer
Raw
index.html
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Playing with Tangram</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<style>
body {
margin: 0px;
border: 0px;
padding: 0px;
}
#map {
height: 100%;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<script src="https://mapzen.com/tangram/0.2/tangram.min.js"></script>
<script>
var toner_lite = L.tileLayer('http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
'attribution': 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
});
var buildings = Tangram.leafletLayer({
scene: 'scene.yaml'
});
var controlMaps = {
baseMaps: {"Toner lite (Stamen)": toner_lite},
overlayMaps: {"Buildings SF" : buildings}
};
var map = L.map('map', {
layers: [toner_lite, buildings] // <========= If I don't include `toner_lite` here, it works
}).setView([37.7578, -122.4292], 13);
var control = L.control.layers(
controlMaps.baseMaps, controlMaps.overlayMaps
).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment