Skip to content

Instantly share code, notes, and snippets.

@echeipesh

echeipesh/nlcd-leaflet.html

Last active December 29, 2015 22:49
Show Gist options
  • Save echeipesh/dfbc2641387926fec6f1 to your computer and use it in GitHub Desktop.
Save echeipesh/dfbc2641387926fec6f1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
nlcd-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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment