Last active
December 29, 2020 14:16
-
-
Save echeipesh/4a9826a26dd9127ca1a2 to your computer and use it in GitHub Desktop.
Checking leaflet rendering with different tile sizes: http://rawgit.com/echeipesh/4a9826a26dd9127ca1a2/raw/6ac71cdfac38df975f7bce763fa805483b3c893b/leaflet.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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