Overlay example for leaflet.js by d3noob

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <link 
        rel="stylesheet" 
        href="//cdn.leafletjs.com/leaflet-0.7/leaflet.css"
    />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script
        src="//cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script>

    <script>

        var coolPlaces = new L.LayerGroup();

        L.marker([-41.29042, 174.78219])
            .bindPopup('Te Papa').addTo(coolPlaces),
        L.marker([-41.29437, 174.78405])
            .bindPopup('Embassy Theatre').addTo(coolPlaces),
        L.marker([-41.2895, 174.77803])
            .bindPopup('Michael Fowler Centre').addTo(coolPlaces),
        L.marker([-41.28313, 174.77736])
            .bindPopup('Leuven Belgin Beer Cafe').addTo(coolPlaces),
        L.polyline([
            [-41.28313, 174.77736],
            [-41.2895, 174.77803],
            [-41.29042, 174.78219],
            [-41.29437, 174.78405]
            ]
            ).addTo(coolPlaces);

        var osmLink = '<a href="//openstreetmap.org">OpenStreetMap</a>',
            thunLink = '<a href="//thunderforest.com/">Thunderforest</a>';
        
        var osmUrl = '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; ' + osmLink + ' Contributors',
            landUrl = '//{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
            thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink;

        var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
            landMap = L.tileLayer(landUrl, {attribution: thunAttrib});

        var map = L.map('map', {
			    layers: [osmMap] // only add one!
		    })
		    .setView([-41.2858, 174.78682], 14);

		var baseLayers = {
			"OSM Mapnik": osmMap,
			"Landscape": landMap
		};

		var overlays = {
			"Interesting places": coolPlaces
		};

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

    </script>
</body>
</html>