Leaflet draw loses shapes after drawing - leaflet

Question

I'm using leaflet to show a map and the leaflet-draw plugin to draw shapes on this map.
I have the code below (see plunker) which allows to draw shapes. But as soon the shape is finished, it disapears.
What is missing to make the shapes visible on the map after drawing?
var mymap = L.map('mapid').setView([47.2090048, 7.7746663], 15);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZXJuc3RwIiwiYSI6ImNpcGdtMTUzOTAwMGV2Ymt3Z2JlYnMyejgifQ.gHxSIfBUM0-UiuWurWoEvQ', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(mymap);
var marker = L.marker([47.2090048, 7.7747663]).addTo(mymap);
// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
mymap.addLayer(drawnItems);
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
mymap.addControl(drawControl);

Answer 1

You've successfully drawn the shapes, but what's missing here is you haven't shown the drawn shape on top of your map layer, despite of what you're trying to achieve is to display it.
What you've got to do is just to add the drawn layer on top of your map.
E.g.
mymap.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
// Do marker specific actions
}
// Do whatever else you need to. (save to db, add to map etc)
mymap.addLayer(layer);
});
You can add this code to the end of your js. This is taken from the docs

Answer 2

You need to listen for the draw:created event and add the layer to the L.FeatureGroup in the event listener:
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
// Do marker specific actions
}
// Do whatever else you need to. (save to db, add to map etc)
drawnItems.addLayer(layer);
});