2

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?

  • 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
2

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 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.