Skip to content

Instantly share code, notes, and snippets.

@markusstraub

markusstraub/leafletjs_bug6557.html

Created March 13, 2019 11:23
Show Gist options
  • Save markusstraub/c8540fe88147056975113a668fb678e5 to your computer and use it in GitHub Desktop.
Save markusstraub/c8540fe88147056975113a668fb678e5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
leafletjs_bug6557.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<style>
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', { 'zoomControl' : false } ).setView([48.2083537, 16.3725042], 14);
var stamenToner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 14,
ext: 'png'
});
var stamenWatercolor = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 15,
maxZoom: 16,
ext: 'jpg'
});
var mixed = L.layerGroup([stamenToner, stamenWatercolor]);
var stamenTonerPure = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 16,
ext: 'png'
});
var stamenWatercolorPure = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 16,
ext: 'jpg'
});
var baseMaps = {
"stamen mixed": mixed,
//"OpenStreetMap (Mapbox)": mapboxStreets,
"stamen watercolor": stamenWatercolorPure,
"stamen toner": stamenTonerPure
};
var overlayMaps = {};
// TODO / BUG: the zoom level mostly (not always) jumps when switching between mixed and regular base layers
stamenTonerPure.addTo(map);
L.control.layers(baseMaps, overlayMaps, { 'position' : 'topright', 'collapsed' : false } ).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment