geografa · January 24, 2014 00:52
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title></title>
  <script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
  <!--[if lte IE 8]>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.ie.css' rel='stylesheet'>
  <![endif]-->
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
 </head>
 <body>
 <div id='map'></div>
 <script type='text/javascript'>
 // add some base layers
 var bldgLayer = L.mapbox.tileLayer('grafa.gm7oh1b2');
 var basicLayer = L.mapbox.tileLayer('grafa.h2e9ii5l');

 // declare layer groups
 var trees = new L.LayerGroup(),
    bldgs = new L.LayerGroup();

 // declare tilelayers
 var forageLayer = L.mapbox.tileLayer('grafa.DowntownPortland').addTo(bldgs);
 var heritageLayer = L.mapbox.tileLayer('grafa.heritage-trees').addTo(trees);

 // declare gridlayer that correspond to tilelayers above
 var heritageGridLayer = L.mapbox.gridLayer('grafa.heritage-trees').addTo(trees);
 var bldgGridLayer = L.mapbox.gridLayer('grafa.DowntownPortland').addTo(bldgs);

 // you can add other stuff to your layergroups
 L.marker([45.52245801087795, -122.67773866653444]).bindPopup('just a marker.').addTo(trees);

 // declare your map and settings
 var map = L.map('map', {
  center: [45.52245801087795, -122.67773866653444],
  zoom: 15,
  layers: [basicLayer]
 });

 // add the gridControl for the gridLayers
 map.addControl(L.mapbox.gridControl(heritageGridLayer));
 map.addControl(L.mapbox.gridControl(bldgGridLayer));

 // create the baselayers and overlays for the layer control
 var baseLayers = {
  "Buildings": bldgLayer,
  "Normal": basicLayer
 };
 var overlays = {
  "Trees": trees,
  "Buildings": bldgs
 };

 // add the layer control
 L.control.layers(baseLayers, overlays).addTo(map);

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title></title>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
	<!--[if lte IE 8]>
	<link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.ie.css' rel='stylesheet'>
	<![endif]-->
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<div id='map'></div>
	<script type='text/javascript'>
	// add some base layers
	var bldgLayer = L.mapbox.tileLayer('grafa.gm7oh1b2');
	var basicLayer = L.mapbox.tileLayer('grafa.h2e9ii5l');

	// declare layer groups
	var trees = new L.LayerGroup(),
	bldgs = new L.LayerGroup();

	// declare tilelayers
	var forageLayer = L.mapbox.tileLayer('grafa.DowntownPortland').addTo(bldgs);
	var heritageLayer = L.mapbox.tileLayer('grafa.heritage-trees').addTo(trees);

	// declare gridlayer that correspond to tilelayers above
	var heritageGridLayer = L.mapbox.gridLayer('grafa.heritage-trees').addTo(trees);
	var bldgGridLayer = L.mapbox.gridLayer('grafa.DowntownPortland').addTo(bldgs);

	// you can add other stuff to your layergroups
	L.marker([45.52245801087795, -122.67773866653444]).bindPopup('just a marker.').addTo(trees);

	// declare your map and settings
	var map = L.map('map', {
	center: [45.52245801087795, -122.67773866653444],
	zoom: 15,
	layers: [basicLayer]
	});

	// add the gridControl for the gridLayers
	map.addControl(L.mapbox.gridControl(heritageGridLayer));
	map.addControl(L.mapbox.gridControl(bldgGridLayer));

	// create the baselayers and overlays for the layer control
	var baseLayers = {
	"Buildings": bldgLayer,
	"Normal": basicLayer
	};
	var overlays = {
	"Trees": trees,
	"Buildings": bldgs
	};

	// add the layer control
	L.control.layers(baseLayers, overlays).addTo(map);

	</script>
	</body>
	</html>