Collapse leaflet control

Question

I want to collapse a leaflet control on my map. I have the current code:

    var legend = L.control({position: 'bottomright', collapsed:true});

    legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = "<h6>DISCLAIMER:<br>text</h3><table></table>";
        return div;
    };
    legend.addTo(map);

But I still cannot get it to collapse or appear on hover like my layers selection does. How do I need to adjust my code? I have visited the Leaflet examples but it seems like the collapse feature is only for layer elements and not simply for a control.

Answer 1

I don't think collapsed:true is going to make sense in this context, as there isn't a legend control in Leaflet that is analogous to the layer control (L.control.layers).

Similar to the layer control, you could construct a div with an icon that always shows by default, with the legend hidden by default, but positioned to hide the icon div when visible.

Then with javascript/jQuery, show the legend on hover:

$('#legend-icon-div).hover(
  function() {
    $('#legend').show();
  }, function() {
    $('#legend').hide();
  }
)

Answer 2

From the sound of it, Leaflet.EasyButton could help. It has a disable method that you can style to fit your needs (example).

in your js:

var disclaimer = L.easyButton('<h1>!!!</h1>', function(btn, map){
   alert('disclaimer here!!!');
},{position:'bottomright'});

disclaimer.addTo(map);

and in your css:

.easy-button-button.disabled{
  display: none;
}

then whenever you want, call:

disclaimer.disable();
// and
disclaimer.enable();

Answer 3

This ended up being the solution using HTML attributes of "onmousenenter" and "onmouseleave":

var legend = L.control({position: 'bottomright'});

    function showDisclaimer() {
        var div = document.getElementById("info legend")
        div.innerHTML = "<h6>DISCLAIMER:<br>text</h3><table></table>";
    }

    function hideDisclaimer() {
        var div = document.getElementById("info legend")
        div.innerHTML = "<h2>DISCLAIMER</h2>";
    }

    legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = "<h2>DISCLAIMER</h2>";
    div.setAttribute("onmouseenter", "showDisclaimer()");
    div.setAttribute("onmouseleave", "hideDisclaimer()");
    div.id = "info legend"

        return div;
    };
    legend.addTo(map);