This page is not showing my map tiles properly when you first go to the page.


If I resize the window it centers and distributes the tiles properly.

How can I make sure it tiles and refreshes correctly when the page first opens?

  • Can you turn the edit back into an answer, and mark it as "the answer" to allow this to be closed out? Thanks.
    – BradHards
    Commented Nov 23, 2013 at 6:58

1 Answer 1



I found out what was causing the problem. Jquery document.ready() was interfering with pageinit() in the body onload="pageinit();" call.

Delaying the map load by one frame makes the difference as suggested by this post: https://groups.google.com/d/msg/leaflet-js/KVm6OvaOU3o/rflFy7bG8DkJ

(Having trouble making code show correctly in this venue. Please bear with me.

final code [

$(document).on('pageinit', '#map-page', function(){
setTimeout(function(){ // set up the map to resize one frame after document.ready()

[ various map calls ]

    map.invalidateSize(); // refresh
}, 1); 



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.