Map Basic

HTML

<div id="map" style="width: 600px; height: 400px"></div>
	<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.ie.css" /><![endif]-->
	<script src="http://leafletjs.com/dist/leaflet.js"></script>

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);


		L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
			maxZoom: 18,
			attribution: ''
		}).addTo(map);


		L.marker([52.18, 7.03144]).addTo(map)
			.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

        /*
		L.circle([52.181269, -0.11], 500, {
			color: 'red',
			fillColor: '#f03',
			fillOpacity: 0.5
		}).addTo(map).bindPopup("I am a circle.");
        */

		/* L.polygon([
			[51.509, -0.08],
			[51.503, -0.06],
			[51.51, -0.047]
		]).addTo(map).bindPopup("I am a polygon.");
        */

		var popup = L.popup();

		function onMapClick(e) {
			popup
				.setLatLng(e.latlng)
				.setContent("You clicked the map at " + e.latlng.toString())
				.openOn(map);
		}

		map.on('click', onMapClick);