<!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>
body {
	margin: 0;
}
html, body, #leaflet {
	height: 100%
}
var map = new L.Map('leaflet', {
	layers: [
		new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
		})
	],
	center: [0, 0],
	zoom: 0
});