disable animation

[shinnobi]

Hi !

i need to load multiple file tiff (24 file) then i play it (with interval 2s then next to next tiff ) my approach is:

1. try pre-loading 24 tiff file to GeoRasterLayer
2. then add/remove layers to the map when event interval

it's work so good but there is some animation when add new layer, how can stop it,

///add to georasterlayer
var layer = new GeoRasterLayer({
        pane: isRadar ? "pane460" : "pane450",
        georaster: georaster,
        opacity: 1,
        pixelValuesToColorFn: function (pixelValues) {
          var pixelValue = pixelValues[0]; // there's just one band in this raster
          if (pixelValue === 0 || pixelValue === -999.0) return null;
          var color = isRadar
            ? radar(pixelValue).hex()
            : satellite(pixelValue).hex();
          return color;
        },
        resolution: 256,
      });
      return { filename: filename, layer: layer };
    }

////add to layer group
    this.sateLayer.clearLayers();
    this.radarLayerGroup.clearLayers();
 if (satelliteLayer.layer) {
      satelliteLayer.layer.addTo(this.sateLayer);
      satelliteLayer.layer.setZIndex(1);   
    }

[DanielJDufour]

hi, @shinnobi . unfortunately, I'm not sure I can be of much help, but I'll do my best! Have you tried using a custom pane and then hiding/showing the map pane? It might help avoid some of the animation you are referencing. I'm not sure though. Here's some information about custom panes: https://leafletjs.com/examples/map-panes/

[shinnobi]

@DanielJDufour Thank you for your answer i just provide example gif. When i click to layer control i want this layer only show when fully load ( disable animation)

[DanielJDufour]

Hi, @shinnobi . Thank you for the extra details. I think I understand your problem now. Unfortunately, I don't have a clear solution to this issue. GeoRasterLayer is built on top of Leaflet's GridLayer and thus the mental model is about creating and displaying tiles as they are available. However, I love hacky workarounds, so let's try!

You might be able to pass in a really large tile size when creating GeoRasterLayer. This will essentially represent one view of the map with one tile. For example:

new GeoRasterLayer({ georaster, tileSize: 256 * 4 })

Does that work for your use case?

[DanielJDufour]

Here's link to the Leaflet Documentation on tileSize: https://leafletjs.com/reference.html#gridlayer-tilesize

[shinnobi]

@DanielJDufour thanks you for your solution, setting larger title size makes animation not showing but it makes my layer so terrible :(

[HairyFotr]

Increasing the resolution works to remove the blockiness that appears with larger tiles, but then rendering may become slow.