Leaflet.js Layer Control w/ Stamen base maps by mpmckenna8

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Stamen simple basemap</title>
        <script type="text/javascript" src="//leaflet.cloudmade.com/dist/leaflet.js"></script>
        <link rel="stylesheet" href="//leaflet.cloudmade.com/dist/leaflet.css" />
        <!--[if lte IE 8]><link rel="stylesheet" href="//leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->
        
        <script type="text/javascript" src="//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>

        <script type="text/javascript">
            function initialize() {
                //var layers = ["terrain", "watercolor","toner"];

                    
                    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>
Leaflet.js Layer Control w/ Stamen base maps

Choose your Stamen base map!

index.html
