Skip to content

How to dinamically disable a button on the Toolbar #642

Closed
@fpuga

Description

@fpuga

Is there any recommend way to dinamically disable a button (or a mode) in the Toolbar.

I have an entity that can have or not a polygon geometry. This geometry will never be a multipolygon. If it has a geometry it is the only editable layer in the map.

I want all the available buttons visible in the map

map.pm.addControls({
    position: "topleft",
    drawMarker: false,
    drawCircleMarker: false,
    drawPolyline: false,
    drawRectangle: true,
    drawPolygon: true,
    drawCircle: true,
    editMode: true,
    dragMode: true,
    cutPolygon: false,
    removalMode: true,
});

But enable/disable while still visible, after user actions.

  • If the entity already has a geometry, or the user draw one, only edit/drag/remove mode buttons should be "clickable"
  • If the entity does not have a geometry, or the user removes it, only draw mode buttons should be "clickable"

AFAIK, i can modify the css getting the buttons with

map.pm.Toolbar.getButtons().drawPolygon._button
// or 
map.pm.Toolbar.getButtons().drawPolygon.buttonsDomNode
// or
document.getElementsByClassName('leaflet-pm-draw')

but i'm not sure about the correct approach to handle the "click" action. Maybe it could be a new feature directly supported by Geoman.

Currently what i'm doing is something like

// disable buttons
document.getElementsByClassName('leaflet-pm-draw')[0].style.pointerEvents = 'none';
document.querySelectorAll('.leaflet-pm-draw a').forEach(a => a.classList.add('leaflet-disabled'))

//enable buttons
document.getElementsByClassName('leaflet-pm-draw')[0].style.pointerEvents = 'auto';
document.querySelectorAll('.leaflet-pm-draw a').forEach(a => a.classList.remove('leaflet-disabled'))

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions