Leaflet.Control.Layers.Tree icon indicating copy to clipboard operation
Leaflet.Control.Layers.Tree copied to clipboard

Request - use click instead of hover to open/close the control

Open fisharebest opened this issue 3 years ago • 2 comments

At present, the control is opened/closed using mouseover/mouseout events.

This makes it difficult to operate by users with some disabilities and/or assistive technology.

Can you provide an option to open/close this control using mouse-click and/or keyboard?

fisharebest avatar Apr 29 '21 10:04 fisharebest

This control tries to behave like "Control.Layers" control (https://leafletjs.com/reference-1.7.1.html#control-layers). As far as I know, there is no such a feature in Leaflet.

However you can capture the events in the DOM, and call the expand() and collapse() methods (probably using also the option collapsed in the control creation)

jjimenezshaw avatar Apr 29 '21 13:04 jjimenezshaw

Basically:

     var layerControlTree = L.control.layers(base, tree, {collapsed: false}).addTo(map);
     
     var collapsed = false
      $('.leaflet-control-layers').on('click', () => {
          if (collapsed)
            layerControlTree.expand();
          else
            layerControlTree.collapse();
          collapsed = !collapsed
      });

albfan avatar Jun 18 '23 22:06 albfan