Leaflet.draw plugin v1

An example of a map presented with leaflet.js and the Leaflet.draw plugin with a a range of options.

forked from d3noob's block: Leaflet.draw plugin v1

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet.draw Plugin</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
          crossorigin=""/>
    <link 
        rel="stylesheet" 
        href="leaflet.draw.css"
    />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

var LeafIcon = L.Icon.extend({
			options: {
				shadowUrl: 
				    'https://leafletjs.com/docs/images/leaf-shadow.png',
				iconSize:     [38, 95],
				shadowSize:   [50, 64],
				iconAnchor:   [22, 94],
				shadowAnchor: [4, 62],
				popupAnchor:  [-3, -76]
			}
		});

var greenIcon = new LeafIcon({
			iconUrl: 'https://leafletjs.com/docs/images/leaf-green.png'
			});

var drawnItems = new L.FeatureGroup();
		map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
			position: 'topright',
			draw: {
				polygon: {
					shapeOptions: {
						color: 'purple'
					},
					allowIntersection: false,
					drawError: {
						color: 'orange',
						timeout: 1000
					},
					showArea: true,
					metric: false,
					repeatMode: true
				},
				polyline: {
					shapeOptions: {
						color: 'red'
					},
				},
				rect: {
					shapeOptions: {
						color: 'green'
					},
				},
				circle: {
					shapeOptions: {
						color: 'steelblue'
					},
				},
				marker: {
					icon: greenIcon
				},
			},
			edit: {
				featureGroup: drawnItems
			}
		});
		map.addControl(drawControl);

map.on('draw:created', function (e) {
			var type = e.layerType,
				layer = e.layer;

if (type === 'marker') {
				layer.bindPopup('A popup!');
			}

drawnItems.addLayer(layer);
		});

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