CODEWITHSUNDEEP
leafletleaflet.draw
peterlawless
peterlawless

Reputation: 459

How to disable (not remove) toolbar button in leaflet-draw

The documentation for leaflet draw provides a way to remove a toolbar but I do not want the toolbar to be removed but rather just be a disabled button. Is there a known way to do this?

Upvotes: 4

Views: 2065

Answers (1)

meetar
meetar

Reputation: 7611

Here's how I used JS and CSS to toggle a "greyed-out" disabled state for the "add marker" button:

JS:

function toggleMarkerButton(state) {
    // toggle button dimming and clickability
    var button = document.getElementsByClassName("leaflet-draw-draw-marker")[0];
    if (state) {
        // enable button
        button.onClick = null;
        button.className = "leaflet-draw-draw-marker leaflet-draw-toolbar-button-enabled";
    } else {
        // disable button
        button.onClick = "preventEventDefault(); return false";
        button.className = "leaflet-draw-draw-marker draw-control-disabled";
    }
}

CSS:

.draw-control-disabled {
    filter: contrast(22%) brightness(157%);
    pointer-events:none;
}

Then I used toggleMarkerButton(false); to disable the button, and toggleMarkerButton(true); to enable it again.

Upvotes: 4

Related Questions