How to make the map bounds responsive in leaflet?

Question

I'm building a responsive application with a leaflet map container. The map container resizes based on user action (left and right panels over the map collapse). I want the max bounds of the map to re-adjust when the map container resizes.

How do I do this?

Answer 1

You will have to listen to the user event and call invalidateSize() on the map. The map will resize to the max bounds of the map's container. something like this :

map.leafletElement.invalidateSize()

you can read more about it on Leaflet's github issues: https://github.com/Leaflet/Leaflet/issues/941