CODEWITHSUNDEEP
javascriptangularjsmapbox
dspano
dspano

Reputation: 1640

Mapbox map not rendering correctly on page load

On page load, I am only getting a partial rendering of my Mapbox map. If you change the width of the browser or inspect the page the map seems to snap into place and render correctly. I was able to reproduce this issue in JSFiddle My_Mapbox_Map. I have tried adding the following code after all the map logic is complete.

`setTimeout(function() { map.invalidateSize(); }, 200);`

This works well in the JSFiddle, but in my application it works at best 50% of the time, and never works on FireFox. Refreshing the screen multiple times will eventually cause the map to only partially render.

Upvotes: 0

Views: 1367

Answers (2)

MattTYXM
MattTYXM

Reputation: 133

What if the timeout is not long enough? If you wait until the map is ready to set the view, you will not have that concern. See referenced code and jsfiddle example below.

map.whenReady(function()  {
  map.setView([39.53818, -79.43430000000001], 7);
});

http://jsfiddle.net/matttyxm/88onpp6a/

Upvotes: 1

bl0u0l
bl0u0l

Reputation: 116

Wrapping by $timeout with 0 second worked for me. Confirmed in Firefox too.

$timeout(function(){
    map.setView([39.53818, -79.43430000000001], 7);
},0);

Upvotes: 2

Related Questions