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 class="map" id="gw_map1"></div>


#gw_map1 {
display: none;


$("#gw-example-expandable-button1").click(function() {

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?

  • 1
    @tom beat me to the answer, but I am guessing you are hiding the div element from the start before the map is created. It is trying to use a minimum or browser reported size for the hidden element when it is finally displayed. You changed its size programmatically through JQuery and Leaflet isn't in the loop; you'll have to tell it about the new state. – RomaH Jul 19 '18 at 13:37

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

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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