描画後にリーフレットのドローが消えます

Question

私はleafletを使用してマップを表示し、leaflet-draw pluginはこのマップ上に図形を描画しています。

私は以下のコード（see plunker）を使用して図形を描くことができます。しかし、すぐに形が終わると、それは消滅します。

描画後に図形を地図に表示するには、何が欠けていますか？

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 &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
     '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
     'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
     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

あなたはdraw:created eventをリッスンし、イベントリスナーにL.FeatureGroupにレイヤーを追加する必要があります：あなたは成功した図形を描画した

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); 
}); 

Answer 2

が、何ここに欠けていることは、あなたが持っていないです表示しようとしているものが表示されているにもかかわらず、マップレイヤーの上に描画された図形が表示されます。

マップの上に描画レイヤーを追加するだけです。

など。

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); 
}); 

あなたjsの最後にこのコードを追加することができます。これは、docsから