D3 Examples - Leaflet.js multiple basemap tiles example

xxxxxxxxxx
 
<!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>
​
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
​
    <script type="text/javascript">
        //OSM tiles attribution and URL
        var osmLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
        var osmURL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmAttrib = '&copy; ' + osmLink;
        
        //Carto tiles attribution and URL
        var cartoLink = '<a href="https://cartodb.com/attributions">CartoDB</a>';
        var cartoURL = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png';
        var cartoAttrib = '&copy; ' + osmLink + ' &copy; ' + cartoLink;
​
        //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>
    