Leaflet.draw

by Mark Dickerson

HTML

<script src="http://leaflet.github.com/Leaflet.draw/lib/leaflet/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.github.com/Leaflet.draw/lib/leaflet/leaflet.css">
<link rel="stylesheet" href="http://leaflet.github.com/Leaflet.draw/leaflet.draw.css">
<script src="http://leaflet.github.com/Leaflet.draw/leaflet.draw.js"></script>
<div id="map"></div>

CSS

#map {
    height: 340px;
}

JavaScript

var map = L.map('map').setView([49.43, 7.75], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

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

L.Edit.Poly = L.Edit.Poly.extend({
    options : {
        icon: new L.DivIcon({
             iconSize: new L.Point(20, 20),
             className: 'leaflet-div-icon leaflet-editing-icon my-own-icon'
        })
    }
});

var drawControl = new L.Control.Draw({
    draw: {
        position: 'topleft',
        polygon: {
        	icon: new L.DivIcon({
            	iconSize: new L.Point(20, 20),
                className: 'leaflet-div-icon leaflet-editing-icon my-own-icon'
            }),
            guidelineDistance: 10,
            shapeOptions: {
                color: '#FF5500',
                opacity: 1,
                weight: 2
            }
        },
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false
    },
    edit: {
        featureGroup: drawnItems,
        edit: {
            selectedPathOptions: {
                color: '#FF5500',
                opacity: 1,
                weight: 2,
            }
        }
    }
});
map.addControl(drawControl);

map.on('draw:created', function (e) {
    drawnItems.addLayer(e.layer);
});