maxim75/gist:980251

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet Quick Start Guide Example</title>
	<meta charset="utf-8" />

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

	<script src="../dist/leaflet.js"></script>
	<script>
		var map = new L.Map('map');

		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
			cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
			cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});

		map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);


		var markerLocation = new L.LatLng(51.5, -0.09),
			marker = new L.Marker(markerLocation);

		map.addLayer(marker);
		marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();


		var circleLocation = new L.LatLng(51.508, -0.11),
			circleOptions = {color: '#f03', opacity: 0.7},
			circle = new L.Circle(circleLocation, 20, circleOptions);

		circle.bindPopup("I am a circle.");
		map.addLayer(circle);


		var p1 = new L.LatLng(51.509, -0.08),
			p2 = new L.LatLng(51.503, -0.06),
			p3 = new L.LatLng(51.51, -0.047),
			polygonPoints = [p1, p2, p3],
			polygon = new L.Polygon(polygonPoints);

		polygon.bindPopup("I am a polygon.");
		map.addLayer(polygon);


		map.on('click', onMapClick);

		var popup = new L.Popup();

		function onMapClick(e) {
			var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';

			popup.setLatLng(e.latlng);
			popup.setContent("You clicked the map at " + latlngStr);
			map.openPopup(popup);
		}
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet Quick Start Guide Example</title>
	<meta charset="utf-8" />

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

	<script src="../dist/leaflet.js"></script>
	<script>
	var map = new L.Map('map');

	var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
	cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
	cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});

	map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);


	var markerLocation = new L.LatLng(51.5, -0.09),
	marker = new L.Marker(markerLocation);

	map.addLayer(marker);
	marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();


	var circleLocation = new L.LatLng(51.508, -0.11),
	circleOptions = {color: '#f03', opacity: 0.7},
	circle = new L.Circle(circleLocation, 20, circleOptions);

	circle.bindPopup("I am a circle.");
	map.addLayer(circle);


	var p1 = new L.LatLng(51.509, -0.08),
	p2 = new L.LatLng(51.503, -0.06),
	p3 = new L.LatLng(51.51, -0.047),
	polygonPoints = [p1, p2, p3],
	polygon = new L.Polygon(polygonPoints);

	polygon.bindPopup("I am a polygon.");
	map.addLayer(polygon);


	map.on('click', onMapClick);

	var popup = new L.Popup();

	function onMapClick(e) {
	var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';

	popup.setLatLng(e.latlng);
	popup.setContent("You clicked the map at " + latlngStr);
	map.openPopup(popup);
	}
	</script>
	</body>
	</html>