Leaflet.draw change polygon filling programmatically

Question

I'm using Leaflet.draw to draw and edit polygons.

var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems,
        edit: { 
            selectedPathOptions: {
                maintainColor: true,
                opacity: 0.3,
                fill: true
            }
        },
    },
    draw: {
        marker: false,
        polyline: false,
        rectangle: false,
        circle: false,
        circlemarker: false,
        polygon: {
            shapeOptions: { color: 'white', opacity: 0.3 },
            allowIntersection: false
        }
    }
});

When I'm in Edit mode, I have a checkbox that should enable/disable the polygons filling. I've tried

drawControl.options.edit.edit.selectedPathOptions.fill = isChecked;

and

if (drawControl._toolbars.edit._activeMode.handler)
    drawControl._toolbars.edit._activeMode.handler.options.selectedPathOptions.fill = isChecked;

but it doesn't change the filling state.

Is there a way to add or remove the filling while in edit mode?

Answer 1

Leaflet.draw plugin does not have many hooks to get close to it's internals, so some hacking is required:

• Status of edited polygon fill is available in drawControl._toolbars.edit.options.edit.selectedPathOptions.fill
• Editing can be disabled by calling drawControl._toolbars.edit.disable()
• Editing can be enabled by simulating click on HTML element with has leaflet-draw-edit-edit CSS class.

So code for showing/hiding polygon background while being edited could look something like this (tested):

HTML

<input type="checkbox" oninput="toggleBackground(this)"><label for="layer1"> Show background </label>

JS

function toggleBackground(checkbox) {
  var editButton = document.getElementsByClassName('leaflet-draw-edit-edit')[0];
  drawControl._toolbars.edit.disable();
  drawControl._toolbars.edit.options.edit.selectedPathOptions.fill = checkbox.checked;
  editButton.click();
}