Leaflet map isn't loading in the correct location

Question

I'm currently working with Leaflet and a dockable web framework called Golden Layout. I'm trying to load tiles into the map, but they are not loading properly and I'm not sure why.

Currently, I have created a function to handle the creation of the map. The map container itself is created correctly, however when I try to add the tile layer, that's where things go wrong.

There are a couple problems with adding the tile layer. The first is that the tiles don't load except for the one in the top left hand corner. The second problem is what tile is being loaded. The tile that gets loaded in the top left hand corner is the tile I have set to be the center of my map.

If the page is adjusted in anyway (ex: console opened), all the tiles will load and the center will be correct.

I've created a Codepen to show the problem.

Answer 1

Well, I don't know how Golden Layout works, But I can Identify what is the reason behind the Issue.

The problem is actually container re sizing, you can say that after the map starts rendering before the container finish to have its size. So, what you have to do

You need to identify if you have a body onload event or document ready event like things available in Golden Layout, just go there and put following line in there

L.Map.invalidateSize();

In order to test, what I'm saying is correct, load your page, and then change the size of your browser window, you'd see that map has loaded absolutely fine