Leaflet.draw Starter

Starter Fiddle for Leaflet.draw

by Mladen Petrovic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.11/leaflet.draw-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.11/leaflet.draw.css">
<div id="map"></div>

CSS

#map {
  height: 340px;
}

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);

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

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

var drawControl = new L.Control.Draw();
map.addControl(drawControl);

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

map.on('draw:editstart', function() {
  console.log('edit start');
});

map.on('draw:editstop', function() {
  console.log('edit stop');
});