0

Here's the page I'm working on. Just click on "Forecasts" tab. On Chrome and FF browsers. http://www.weather.gov/mfr/dot

Once on the forecasts tab, you'll see a map below the text links. Much of the map is grey upon loading. I saw that this can happen if CSS is not loaded, but I have the latest CSS loaded on there. Can anyone help with this problem?

Thanks!

Steve
  • 25,806
  • 2
  • 33
  • 43
user1610717
  • 471
  • 5
  • 16

1 Answers1

0

since the map container is being created dynamically, you need to call map.invalidateSize() when the 'Forecast' panel is toggled.

john gravois
  • 392
  • 2
  • 8
  • Thanks! That pointed me in the right direction, but I'm still getting the partial tile loading. http://www.weather.gov/mfr/dot Can you help with the implementation some? I don't have control over the entire page's code since it's in a CMS environment and controlled elsewhere. You can see in the code where I added var mymap = L.map('mapid').setView([44, -123], 13); L.Util.requestAnimFrame(mymap.invalidateSize,mymap,!1,mymap._container); Thanks again. – user1610717 May 22 '17 at 10:35
  • you're calling the method too soon. if you open the browser developer tools and call `mymap.invalidateSize()` *after* toggling the forecast panel, you'll see that it causes all the tiles to load. – john gravois May 23 '17 at 18:23