How to update, redraw a Grid Layer without blinking

Question

My question is how to update my grid layer in leaflet without some strange "blink" effect.

I use Leaflet.VectorGrid to display my geojson on canvas. The problem is when i want to redraw my layer, because my data was updated. I use that code to redraw layer:

tileLayer.redraw();

When i have been using this function, my layer is disappearing for a while, and then it appears with changed data. So the final effect is nice, but the question is:

How to eliminate this moment when the map is "empty"?

I want to redraw my layer, without this strange moment, when for a few milliseconds the layer is clear.

Answer 1

I know this is well after the fact, but I found your question when I was looking for a solution. I finally got something that works and wanted to include it here in case you are still having issues or others are experiencing the problem.

I found several answers that talked about displaying your results on multiple layers and then removing the old layers "after some time", but that didn't feel clean to me. Using the leaflet events, I found a solution that follows the spirit of those answers, but still feels clean. I'm using vectorGrid.slicer to create my grid, so replace that with whatever you are using to create your grid layer.

  // Function to handle event from leaflet when all tiles are loaded
  // for the grid layer
  const onLoad = (e) => {
    // Use a brief timeout so the new layer has time to draw before
    // the old layer is removed.  This prevents a brief blink of the layers.
    setTimeout(
      () => {
        // Remove the old grid layer from the map
        this.graphicsLayer.remove();
        // Stop listening to the load event
        e.target.off('load', onLoad);
        // Save the new graphics layer into the member variable
        this.graphicsLayer = e.target;
      },
      250
    );
  };

  // Create the grid layer, and listen to the load event
  L.vectorGrid.slicer(geographyResults, slicerStyle)
    .on('load', onLoad).addTo(this.map);