Allow user to draw only one shape

[this issue has its own solution]

I have a site where I want the user to draw a shape. The shape’s GeoJSON description will be saved to a database for them to access the shape later, but I only want to allow them to create one shape per database record.

I didn’t see a sanctioned way so I tried a method that watched for the event “draw:created” and then disabled the drawing toolbar.

Use

map.on('draw:created', function (e) {
    console.log("something was created; hiding draw control");
    var type = e.layerType,
        layer = e.layer;

    drawControl.removeFrom(map);

    editableLayers.addLayer(layer);
});

to disable the draw control and

map.on('draw:deletestop', function(e) {
    console.log("something was deleted; showing draw control");
    var type = e.layerType,
        layer = e.layer;

    drawControl.addTo(map);
});

to enable the draw control.

[nk9]

There are a number of improvements that have been made to the original solution over the years. Here is a complete, working solution with Leaflet Draw 1.0.4:

// Set up the edit control
// Only allow a single shape to be drawn
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControlFull = new L.Control.Draw({
    draw: {
        polyline: false,
    },
    edit: {
        featureGroup: drawnItems
    }
});
var drawControlEditOnly = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    },
    draw: false
});
map.addControl(drawControlFull);

map.on(L.Draw.Event.CREATED, function (e) {
    drawnItems.addLayer(e.layer);
    drawControlFull.remove(map);
    drawControlEditOnly.addTo(map)
});
map.on(L.Draw.Event.DELETED, function(e) {
   if (drawnItems.getLayers().length === 0){
        drawControlEditOnly.remove(map);
        drawControlFull.addTo(map);
    };
});

[MattFerraro]

Great fix! I adopted your change a bit so that the UI precludes you from adding more than one, but fluidly allows you to remove and try again if you aren’t happy with your shape

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

var drawControlFull = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    },
    draw: {
        polyline: false
    }
});


var drawControlEditOnly = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    },
    draw: false
});

map.addControl(drawControlFull);

map.on("draw:created", function (e) {
    var layer = e.layer;
    layer.addTo(drawnItems);
    drawControlFull.removeFrom(map);
    drawControlEditOnly.addTo(map)
});

map.on("draw:deleted", function(e) {
    drawControlEditOnly.removeFrom(map);
    drawControlFull.addTo(map);
});