echeipesh/leaflet.html

## leaflet.html
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet Layers Control Example</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <style>
        html, body {
            height: 100%;
        }

        #map {
            height: 100%;
            background: #000;
        }
    </style>
</head>
<body style="height: 100%">
	<div id="map" style="width: 100%"></div>

	<script>
		var cities = new L.LayerGroup();

		L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
		L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
		L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
		L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

        var nlcd256Url = 'http://s3.amazonaws.com/com.azavea.datahub.tms/nlcd-sample-256/{z}/{x}-{y}.png';
        var nlcd512Url = 'http://s3.amazonaws.com/com.azavea.datahub.tms/nlcd-sample-512/{z}/{x}-{y}.png';
        var nlcd768Url = 'http://s3.amazonaws.com/com.azavea.datahub.tms/nlcd-sample-768/{z}/{x}-{y}.png';
        var nlcdUrl = 'http://s3.amazonaws.com/com.azavea.datahub.tms/nlcd/{z}/{x}/{y}.png';

        var baseMbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ';

        var base   = L.tileLayer(baseMbUrl, {id: 'mapbox.streets'});
        var nlcd256  = L.tileLayer(nlcd256Url, {options: {tileSize: 256, maxNativeZoom: 13, maxZoom: 20}});
        var nlcd512  = L.tileLayer(nlcd512Url, {options: {tileSize: 512, maxNativeZoom: 12, maxZoom: 20}});
        var nlcd768  = L.tileLayer(nlcd768Url, {options: {tileSize: 768, maxNativeZoom: 11, maxZoom: 20}});
        var nlcd  = L.tileLayer(nlcdUrl, {options: {tileSize: 256, maxNativeZoom: 13, maxZoom: 20}});

		var map = L.map('map', {
			center: [39.8, -95.0000],
			zoom: 5,
			layers: [nlcd]
		});

		var baseLayers = {
            "base": base,
            "nlcd": nlcd,
            "nlcd256": nlcd256,
            "nlcd512": nlcd512,
            "nlcd768": nlcd768
		};

		var overlays = {
			"Cities": cities
		};

		L.control.layers(baseLayers, overlays).addTo(map);
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet Layers Control Example</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<style>
	html, body {
	height: 100%;
	}

	#map {
	height: 100%;
	background: #000;
	}
	</style>
	</head>
	<body style="height: 100%">
	<div id="map" style="width: 100%"></div>

	<script>
	var cities = new L.LayerGroup();

	L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
	L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
	L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
	L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

	var nlcd256Url = 'http://s3.amazonaws.com/com.azavea.datahub.tms/nlcd-sample-256/{z}/{x}-{y}.png';
	var nlcd512Url = 'http://s3.amazonaws.com/com.azavea.datahub.tms/nlcd-sample-512/{z}/{x}-{y}.png';
	var nlcd768Url = 'http://s3.amazonaws.com/com.azavea.datahub.tms/nlcd-sample-768/{z}/{x}-{y}.png';
	var nlcdUrl = 'http://s3.amazonaws.com/com.azavea.datahub.tms/nlcd/{z}/{x}/{y}.png';

	var baseMbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ';

	var base = L.tileLayer(baseMbUrl, {id: 'mapbox.streets'});
	var nlcd256 = L.tileLayer(nlcd256Url, {options: {tileSize: 256, maxNativeZoom: 13, maxZoom: 20}});
	var nlcd512 = L.tileLayer(nlcd512Url, {options: {tileSize: 512, maxNativeZoom: 12, maxZoom: 20}});
	var nlcd768 = L.tileLayer(nlcd768Url, {options: {tileSize: 768, maxNativeZoom: 11, maxZoom: 20}});
	var nlcd = L.tileLayer(nlcdUrl, {options: {tileSize: 256, maxNativeZoom: 13, maxZoom: 20}});

	var map = L.map('map', {
	center: [39.8, -95.0000],
	zoom: 5,
	layers: [nlcd]
	});

	var baseLayers = {
	"base": base,
	"nlcd": nlcd,
	"nlcd256": nlcd256,
	"nlcd512": nlcd512,
	"nlcd768": nlcd768
	};

	var overlays = {
	"Cities": cities
	};

	L.control.layers(baseLayers, overlays).addTo(map);
	</script>
	</body>
	</html>