I'm trying to create a Leaflet map which is hidden when the page loads, and revealed when the user clicks a button.

I'm trying to use the Bootstrap collapse functionality to reveal the map on a button press - sample here.

This works to show/hide the map's div - but the formatting of the map is broken, with a large empty area with no data:

enter image description here

This only occurs when the map's div has the .collapse class - if you remove that class the map loads correctly.

So the question is, how to allow a Leaflet map to load correctly when it isn't visible when the page loads?

1 Answer 1


https://stackoverflow.com/questions/24412325/resizing-a-leaflet-map-on-container-resize had the answer, which is to call invalidateSize on the map when the collapse event fires:

Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically

$('#demo').on('shown.bs.collapse', function (e) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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