How to keep old tiles until each new tile is loaded when redrawing a layer in Leaflet?

Question

I'm using a combined tilelayer, which I have to refresh (using .redraw() currently) each time a new layer has been added or an old has been removed. There are no technical problems with my implementation, but when a layer is toggled, there is a brief flicker as the old tiles are instantly removed, but the new ones obviously take a few moments to load in.

Is there any way to keep each of these old tiles until its replacement has been loaded, resulting in a smoother transition?

I have considered using a temporary layer, and loading the new tiles above the old ones, but this would cause a lot of extra work and loading, so I'm hoping leaflet has something more elegant built in, like a delayRemoval option or something.

---

Here's a jsfiddle: http://jsfiddle.net/Q6586/

If you click the map, it will redraw itself, instantly removing the old tiles, and the map will briefly flash gray before the new ones are loaded.

I want to get rid of that flash. I have temporarily solved this by creating a new layer on top of the old one, but I feel that's a very unelegant solution.

Answer 1

You could create another layer that you would bring to front while you are redrawing.

The event 'load' will tell you when all tiles are loaded

map.on('click', function(e) {
    layer2.bringToFront();
    layer.on('load', function(e) {
        console.log('loaded');
        layer.bringToFront();
    });
    layer.redraw();
});

Have look at this JSFiddle: http://jsfiddle.net/FranceImage/5452r/

I call different tiles so that you can see. Obviously, you will use the same template for both tile layers.