Leaflet – How to Toggle Leaflet Map Visibility on Click

displayleaflet

I have created a Leaflet map on my web page and I would like to show/hide it when I click on a button. When I first load the page, I'd like the map to be hidden.

HTML code:

<div class="dropdown" id="gw-dropdown1">
    <button type="button" class="button button--default expandable__button" aria-controls="gw-example-button-dropdown1" aria-expanded="false" id="gw-example-expandable-button1">Select on the map</button>                         
</div>
<div class="map" id="gw_map1"></div>

CSS:

#gw_map1 {
display: none;
}

jQuery:

$("#gw-example-expandable-button1").click(function() {
    $("#gw_map1").toggle();
});

If I click on the button the map div appears and disappears, but the content of the map is not correctly displayed.

In fact, If I do not set the 'display' into css the map is correctly loaded into the page as in the figure: enter image description here

but if I set the 'display' to 'none' and then I click on the button the map is displayed incomplete and even if I drag on the map it is always incomplete and polygons are not visible.

enter image description here

Any suggestions?

Best Answer

You need to call invalidateSize() on your map object - this checks if the map container has changed and updates it as necessary.

API reference: https://leafletjs.com/reference-1.3.2.html#map-invalidatesize

Related Question