Leaflet.draw
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: '© <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);
});
map.on('draw:editstart', function (e) {
drawControl.setDrawingOptions({
polygon: {
icon: new L.DivIcon({
iconSize: new L.Point(20, 20),
className: 'leaflet-div-icon leaflet-editing-icon'
})
}
});
});