Leaflet Map Shrinked - Page Onload Issue ?

[phdphd]

Hi All,

I have a page organized in tabs, each with its own div.

I have a js that displays a given div when the user clicks the matching tab.

There is a leaflet map in the first div, built from thousands of markers.

There is a login form in the other div.

Displaying a div by clicking its tab works great.

If the user fails the login process, the page is reloaded and he is redirected back to the login div (and a message displays about the error that occured).

Now here is the issue. Suppose the login process fails. If the user clicks the map tab, he will see a badly-formed map, like shrinked in the upper left corner of its container.

My feeling is that the js that deals with the tabs runs before the end of the execution of the js that builds the map.

The body has an onload="init()" associated with the tabs script. Thus I guess the tabs script would run only after the page has loaded.

Since this does not seem to take into accound the map DOM, I tried and found a solution by applying a short settimeout (500 ms) in the tab js, more precisely to the function that grabs the tab links and content divs from the page.

Now if the user fails the login process and clicks the map tab, he will see a well-formed and fully interactive map.

However I think this is just a workaround. Is there a better solution?

Thanks !