Leaflet map not updating background tile correctly until resize or pan is made

Question

I am using mapbox-gl-leaflet to render vector layers in leaflet. I have a set of background tiles where they can be added via layers control. Initially when opening the map for the first time and choosing every layer from the layers control there are no loading or update issues. The problem can appear when panning to a new area and choosing other background tiles from the layers control. The map can't load until a rezise or pan action is made. Example of background tile load stuck issue

    map.on('baselayerchange', function (e) {
      console.log("Layer Changed");
      //map._update();
      //map.invalidateSize();
      //map._resize();
      //map.resize();
      //setTimeout(function(){ map.invalidateSize()}, 400);
      //setTimeout(function(){ map.resize()}, 3000);
    });

Commented out are all the functions I tried to call in order to solve the bug but so far none of the functions did the trick.

Normaly map.invalidateSize() fix this problem. Maybe you call it to early, try: setTimeout(function(){ map.invalidateSize()}, 400); — Falke Design
Tried that , it is in one of the commented out functions. Unfortunately it doesn't resolve the issue. — Archelaos
Are the problematic background tiles normal Leaflet Tile Layer, or a Layer from mapbox-gl? — ghybs
It's a mapbox GL layer created in a Leaflet compatible wrapper. So pretty much the library I used is a binding from Mapbox GL JS to the Leaflet API. — Archelaos

Simon Harvey Simon Harvey · Accepted Answer · 2020-05-27T08:59:40

I've come up with a workaround that works smoothly in my use case. I run this function when switching back to a previously loaded mapbox-gl layer that had been hidden:

$('#mapcontainer').width('0');
mymap.invalidateSize();
$('#mapcontainer').width('50%');
mymap.invalidateSize();

50% is the original map container width.

I haven't tested it using vanilla JS but works well with jQuery.

Leaflet map not updating background tile correctly until resize or pan is made

1 Answers