Draw on map with Leaflet.js and leaflet.draw

Leaflet is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ Leaflet.draw is a leaflet plugin for drawing on a map. Leaflet.draw code is from: https://github.com/Leaflet/Leaflet.draw https://github.com/Leaflet/Leaflet.draw Here data is provided by OpenStreetMap

by Mallack

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.3.2/leaflet.draw.js"></script>
<div id="map"></div>

CSS

#map {
  height: 400px;
}

JavaScript

var self = this;

// center of the map
var center = [-33.8650, 151.2094];
// Create the map
var map = L.map('map').setView(center, 6);

// Set up the OSM layer
L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);

// Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

self.drawControlFull = new L.Control.Draw();

self.drawControlEdit = new L.Control.Draw({
  edit: {
    featureGroup: editableLayers,
    edit: false
  },
  draw: false
});
map.addControl(drawControlFull);

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;
  
	self.drawControlFull.remove();
	self.drawControlEdit.addTo(map);
  
  editableLayers.addLayer(layer);
});

map.on('draw:deleted', function (e) {
	self.drawControlEdit.remove();
	self.drawControlFull.addTo(map);
});