Leaflet: Auto-detect changes to map size (and invalidateSize)
I have a map that’s styled like this:
#map {position: absolute; top: 10px; left: 10px; right: 10px; bottom: 90px;}
… i.e. it has no explicit height. So, of course, leaflet isn’t rendering all of the tiles. However I do setTimeout(map.invalidateSize.bind(map)), after creating the map it renders properly.
This has me thinking that it’s not actually necessary for the map to have an explicit height - it’s just a question of insuring Leaflet is smart about detecting the height at the appropriate time.
About this issue
- Original URL
- State: closed
- Created 12 years ago
- Reactions: 3
- Comments: 16 (7 by maintainers)
I believe this is the same issue as seen on #926 The hidden element causes it, you can’t measure a display:none element.
You can simplify the code a bit: http://jsfiddle.net/dCK8j/6/ Just need to do
after making it display:block
Closing the issue as we don’t want to implement this for performance, browser support and insignificance reasons (you can easily just use invalidateSize when necessary).
http://jsfiddle.net/dCK8j/ demonstrates the problem I’m seeing. (This repros on chrome, safari, firefox, and opera (all macosx).)
I believe the root cause here is that I have my map element hidden via display:none when I create the map and call setView the first time. As a result, getSize() caches a bounds of [0, 0]. Note that resizing the window after the page has loaded fixes the rendering problem (for whatever reason.)