Tiles wrongly placed after switching view

[Enkosz]

Hello there,

I've been trying to use maplibre-gl with react-leaflet to display satellite and roadmap layers from an external provider. I noticed a random behaviour when switching from one to another.

As you can notice from the screenshot below, when switching from satellite to roadmap the map / layers are shifted to the left and not correctly loading. Interacting with the map however will make it work again.

React Leaflet tile layer:

import L from 'leaflet';

import '@maplibre/maplibre-gl-leaflet';

const MapLibreTileLayer = createTileLayerComponent(
    function createTileLayer({ url, attribution, ...options }, context) {
        const instance = L.maplibreGL(
            { style: url, attribution: attribution, noWrap: true },
            withPane(options, context),
        );
        return Object.freeze({ instance, context });
    },
    function updateTileLayer(layer, props, prevProps) {
        updateGridLayer(layer, props, prevProps);

        const { url, attribution } = props;
        if (url != null && url !== prevProps.url) {
            layer.getMaplibreMap().setStyle(url);
        }

        if (attribution != null && attribution !== prevProps.attribution) {
            layer.options.attribution = attribution;
        }
    },
);

export default MapLibreTileLayer;

versions:

@maplibre/maplibre-gl-leaflet": "0.0.19",
react-leaflet: "3.2.5",
maplibre-gl: "3.3.1",
leaflet: "1.9.3",

[lseelenbinder]

@Enkosz Have you tried calling layer.getMaplibreMap().resize() or layer.getMaplibreMap().redraw()?

I suspect it's not properly triggering a redraw after setStyle is being called.

[Enkosz]

@Enkosz Have you tried calling layer.getMaplibreMap().resize() or layer.getMaplibreMap().redraw()?

I suspect it's not properly triggering a redraw after setStyle is being called.

Yep, I tried both in the Tile component and also some more "heavy" approaches like invalidating the Leaflet map instance when switching to another Layer but nothing. I couldn't find the reason why it happens randomly and not for every tile.
Might having a reproducible example help?

[lseelenbinder]

Yes, if you can create a reproducer, that'd be great.

[Enkosz]

Yes, if you can create a reproducer, that'd be great.

Thanks for your patience. I got stuck in 9-5, here's a sandbox but it's based on Stadia's tutorial for it and will need a valid API key to fetch vector stuff: https://codesandbox.io/s/festive-joliot-tsp3rl?file=/src/AppVector.js.
A good way to reproduce it it's to simply try to play with it, starting from the the tile layer moves around, switch back to vector and the map center should be decentered

[Enkosz]

@lseelenbinder Hey hey, got any news?

[mapcentia]

I'm having the same problem. Did you find a solution?