MVTLayer URL change causes flicker on tile replace

[reececasey]

I am using the MVTLayer which I load a url from our own tile server. We allow the user to change query parameters that in turn update the tile url. During this transition there is a slight flicker as the new layer comes in. Often this is quite noticeable as the original points will still be there so will flicker as they replace again.

Is there anything I can do to combat this possibly? I had the thought of setting up a new layer and doing a cheap show hide transition but wondered if that should be delt with anyway?

I assume as the URL is changed the layer is binned and a new one is added so it has no concept of knowing the tile with data gain ready for example? As when the new params are selected I see from debug logs invalidated happen on the layer then the new one Initializing

Any tips would be great.

Thanks in advance

[ibgreen]

Without testing my expectation is that if you change the URL, the layer will clear out the loaded tiles and start loading new ones. If the new ones load fast there would just be some flicker, if they load slow it could be blank for a while.

Keeping loaded tiles from previous URL until the new ones are loaded could be a feature request. It is probably not very hard to do, though there are many requirements going into the TileLayer so the logic is increasingly more complex.

You might be able to fork the TileLayer and implement such changes yourself but it may require digging into the code.

[reececasey]

Correct this is exactly what is happening, our tiles are around 200ms-1s at times (if they are not from cache) so the flicker is fairly quick but still noticeable and makes it harder for the eye to compare actual differences, e.g. new markers or change in polygons.

Happy to make something custom, just checking before I did that, that I am not missing anything out the box as such. I guess its normal for the url change to instantly destroy the layer and then await the new tiles hence always going to be a flicker using it as is?

Thanks for the help @ibgreen

[kylebarron]

One possibility is to create a new TileLayer with the new url, placing it on top of the older tile layer, then hiding the older tile layer once the new one is fully loaded (aka onViewportLoad has been called)

[reececasey]

@kylebarron agreed that was the bit I mentioned about cheap show hide transition. By that I mean get the new tile layer loaded before binning the old one. Good to know it wasn’t such a mad idea 😉

Also good shout on using the onViewportLoad 👍🏼