1

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.

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();
  }
)
  • yeah I didn't think collapsed:true could apply to the control but I wasn't sure. would I replace my code entirely with yours? – cbunn Apr 22 '15 at 18:55
  • no, this isn't a complete solution, if I get time, I'll try to add more details. You'll need css and html for the 'icon div' at least. You could implement a custom Leaflet control for this, a bit more complicated, but tidier and more reusable. – toms Apr 22 '15 at 19:01
1

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();
0

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.