Leaflet.js multiple basemap tiles example

This is an example of using multiple basemap tiles on Leaflet.

The detailed explanation can be found on my blog.

_{Camilo Cruz, 2017.}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Multiple tiles</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
</head>
<body>
	<div id="map" style="width: 600px; height: 400px"></div>

//Stamen Toner tiles attribution and URL
		var stamenURL = 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}';
		var stamenAttrib = 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';

//Creation of map tiles
		var osmMap = L.tileLayer(osmURL, {attribution: osmAttrib});
		var cartoMap = L.tileLayer(cartoURL, {attribution: cartoAttrib});
		var stamenMap = L.tileLayer(stamenURL,{
			attribution: stamenAttrib,
			subdomains: 'abcd',
			minZoom: 0,
			maxZoom: 20,
			ext: 'png'
		});

//Map creation
		var map = L.map('map',{
			layers: [osmMap]
		}).setView([-41.2858, 174.78682], 14);

//Base layers definition and addition
		var baseLayers = {
			"OSM Mapnik": osmMap,
			"Carto DarkMatter": cartoMap,
			"Stamen Toner": stamenMap
		};
	  
		 //Add baseLayers to map as control layers
		 L.control.layers(baseLayers).addTo(map);
	</script>
</body>
</html>

https://unpkg.com/leaflet@1.0.3/dist/leaflet.js