example/drawing.html

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet Draw</title>

	<link rel="stylesheet" href="../lib/leaflet/leaflet.css" />
	<link rel="stylesheet" href="../Control.Draw.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="../ib/leaflet/leaflet.ie.css" /><![endif]-->

	<script src="../lib/leaflet/leaflet-src.js"></script>
	<script src="../Handler.Draw.js"></script>
	<script src="../Polyline.Draw.js"></script>
	<script src="../Polygon.Draw.js"></script>
	<script src="../SimpleShape.Draw.js"></script>
	<script src="../Rectangle.Draw.js"></script>
	<script src="../Circle.Draw.js"></script>
	<script src="../Marker.Draw.js"></script>
	<script src="../Control.Draw.js"></script>
</head>
<body>
	<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
	
	<script>
		
		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
			cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
			map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });

		var drawControl = new L.Control.Draw({
			position: 'topright',
			styles: {
				polygon: {
					color: '#bada55'
				},
				circle: {
					color: '#662d91'
				}
			}
		});
		map.addControl(drawControl);
		
		var drawnItems = new L.LayerGroup();
		map.on('draw:poly-created', function (e) {
			drawnItems.addLayer(e.poly);
		});
		map.on('draw:rectangle-created', function (e) {
			drawnItems.addLayer(e.rect);
		});
		map.on('draw:circle-created', function (e) {
			drawnItems.addLayer(e.circ);
		});
		map.on('draw:marker-created', function (e) {
			drawnItems.addLayer(e.marker);
		});
		map.addLayer(drawnItems);
		
	</script>
</body>
</html>