A simple to ask but difficult to answer question:

I want to create a control like the one in the Leaflet layers example:


Notice that the control is a small button, until pressed. When pressed, it expands, and shows all options. I can't find anywhere in the documentation on how this was implemented, or how I can copy this behaviour. Does anyone have any idea?

1 Answer 1


You mean it expands when hovering (not pressed) ...

There is no documentation but you can read the code here: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js

Note in line 70

if (!L.Browser.android) {
                L.DomEvent.on(container, {
                    mouseenter: this._expand,
                    mouseleave: this._collapse
                }, this);

And at the end of the file

_expand: function () {
    L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');

_collapse: function () {
    L.DomUtil.removeClass(this._container, 'leaflet-control-layers-expanded');

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.