Leaflet / Mapbox rendering issue (grey area)

Question

For some reason, my map has a big grey area on it, until I move it which makes it appear.

But on the first look, there's a part missing. I've seen this quite a lot around the web before but never wondered about how to fix it until now.

This is a simple Mapbox map using MarkerClusterGroup for clusters.

Here's a screenshot and the link to the page:

http://vinpin.com/map

So I was wondering, is there any easy known fix for that kind of behavior?

I can add code snippets if required.

Thanks and have a nice day!

Answer 1

It seems the map element size has changed since the initialization and you did not invalidate it.

Did you change the visibility (eg. display: none style), position (eg. position: absolute or position: fixed like in affix), or removed any HTML element dynamically (with JS)? Perhaps, you are loading the resources in the wrong order and styles are loaded after the leaflet.js? Or, perhaps you changed margins or padding? These kind of operations can change the size of other elements implicitly and the Leaflet applet loads the tiles only for an area covered by its old size. It shows already loaded tiles correctly in this "grey" area, though, so you can scroll up and the grey space at the bottom will be filled then.

If this is the case, you should execute invalidateSize() method on your Leaflet map object.