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;


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?

1 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):


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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.