Leaflet.js Layer Control w/ Stamen base maps

Choose your Stamen base map!

Working with the layer control selector and Stamen base maps. Now to mix it up putting some data on there or using other base maps.

<!DOCTYPE html>
<html>
    <head>
        <title>Stamen simple basemap</title>
        <script type="text/javascript" src="https://leaflet.cloudmade.com/dist/leaflet.js"></script>
        <link rel="stylesheet" href="https://leaflet.cloudmade.com/dist/leaflet.css" />
        
        
        <script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
        
        <style type="text/css">
            #map {
                width: 700px;
                height: 400px;
                margin: 0 0 1em 0;
            }
        
        
        </style>
    </head>
    <body onload="initialize()">
        <div id="map" ></div>

var watercolor = new  L.StamenTileLayer("watercolor");
                    var terrain = new L.StamenTileLayer("terrain");
                    var toner= new  L.StamenTileLayer("toner");
                    
                    var bases = {
                        "Watercolor":watercolor,
                        "Terrain":terrain,
                        "Toner":toner
                        
                       
                    }
                    var map = new L.Map('map', {
                                        center: [39,-98],
                                        zoom:4,
                                        layers:watercolor
                                        })
                    
                     L.control.layers(bases).addTo(map);
                     
                     
            }
        
        </script>
    </body>
</html>

Modified http://leaflet.cloudmade.com/dist/leaflet.js to a secure url

Modified http://maps.stamen.com/js/tile.stamen.js?v1.2.3 to a secure url

https://leaflet.cloudmade.com/dist/leaflet.js

https://maps.stamen.com/js/tile.stamen.js?v1.2.3