Blank tiles after calling map.fitBounds()

[chriszrc]

This one really stumped me at first. I unfortunately don't have a link to share to replicate, but I can work on that if others are finding this a problem too. Basically, I have a menu in my app where I can select/deselect tables to be included in my vector tile layer, as well optional filters, that zoom to specific county area. When switching to a different layer, I would find the bounds of the new area, zoom to it, and then re-add the vectorgrid layer using the updated layer list. But the map would be blank. If I zoomed or moved around, the tiles would load as normal.

I tracked the problem to this function:

https://github.com/Leaflet/Leaflet.VectorGrid/blob/13315057d285bfa5d5cb74d2abb442e925825b55/src/Leaflet.VectorGrid.Protobuf.js#L89-L103

Which is called from _getVectorTilePromise. After some debugging, I saw that the this._map._animateToZoom level was not matching the level in the coords. I realize that the animateToZoom level is probably being used to catch the zoom transition before the tile requests are made, but in my case, it resulted in a blank map.

I worked around the problem by manually updating the this._map._animateToZoom value in this specific case in my app.

zoomEnd$.take(1).subscribe(()=>{
      //make sure leaflet's internal _animateToZoom matches the current zoom
      if((this.leafletMap as any)._animateToZoom !== this.leafletMap.getZoom()){
        (this.leafletMap as any)._animateToZoom = this.leafletMap.getZoom();
      }

      let mvtTiles = this.leafletLayerService.getMvtTileLayer(cfb,this.leafletMap);

I'm not sure if this is really a vectorgrid problem or a leaflet bug/limitation, but it was tricky to track down, so hopefully this helps someone-