bsudekum/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet Layers Control Example</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" />
<![endif]-->

<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
</head>
<body>
	<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

## map.js
	var cities = new L.LayerGroup();

	    L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
		L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
		L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
		L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);


	    var cmAttr = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
			cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';

	    var minimal   = L.tileLayer(cmUrl, {styleId: 22677, attribution: cmAttr}),
		    midnight  = L.tileLayer(cmUrl, {styleId: 999,   attribution: cmAttr}),
		    motorways = L.tileLayer(cmUrl, {styleId: 46561, attribution: cmAttr});

		var map = L.map('map', {
			center: [39.73, -104.99],
			zoom: 10,
			layers: [minimal, motorways, cities]
		});

		var baseLayers = {
			"Minimal": minimal,
			"Night View": midnight
		};

		var overlays = {
			"Motorways": motorways,
			"Cities": cities
		};

		L.control.layers(baseLayers, overlays).addTo(map);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet Layers Control Example</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" />
	<![endif]-->

	<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
	</head>
	<body>
	<div id="map" style="width: 600px; height: 400px"></div>
	</body>
	</html>
	var cities = new L.LayerGroup();

	L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
	L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
	L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
	L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);


	var cmAttr = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
	cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';

	var minimal = L.tileLayer(cmUrl, {styleId: 22677, attribution: cmAttr}),
	midnight = L.tileLayer(cmUrl, {styleId: 999, attribution: cmAttr}),
	motorways = L.tileLayer(cmUrl, {styleId: 46561, attribution: cmAttr});

	var map = L.map('map', {
	center: [39.73, -104.99],
	zoom: 10,
	layers: [minimal, motorways, cities]
	});

	var baseLayers = {
	"Minimal": minimal,
	"Night View": midnight
	};

	var overlays = {
	"Motorways": motorways,
	"Cities": cities
	};

	L.control.layers(baseLayers, overlays).addTo(map);