it render slow with small file

[shinnobi]

i have a problem

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

but it took me longer than 2s to render one tiff file to leaflet. (about 5-7s from old tiff file remove from the leaflet map and new tiff file is display in leaflet map

I have already tried to load all tiff file first but it take me about 15-30s for first render all 24 files at the begining

i have already applied Cloud Optimized GeoTIFF and make the data as small as possible . My .tiff file is about 100KB

can you provide me some hint or solution for my case thanks

 async loadFileTiff(filename) {
    var plottyRenderer = L.LeafletGeotiff.plotty({
      displayMin: 0,
      displayMax 1,
      clampLow: false,
      clampHigh: true,
      colorScale :"greys",
      noDataValue: -999,
      clearBeforeMove: false,
      applyDisplayRange: false
    });

[danwild]

Hi @shinnobi,

I would probably try pre-loading/initialising all of your geotiff layers up front, then hiding all except the layer for current time interval.
Couple of ways you achieve do this:

1. add/remove layers to the map
2. add all layers to map, update their opacity
3. if the datasets are spatially overlapping, you could potentially add each layer to its own pane, then use z-index order to put active slice on top of the stack

[shinnobi]

hi @danwild thank you for your answer . I have already did it (pre-loading/initialising all of your geotiff layers then add/remove layers to the map) but it took me about 10-20s for pre-loading in localhost ) and i need a little faster approach . may be about 5-10s for about 24 x 100kb tiff files. could you please suggest me thanks

[danwild]

Can you show a reproducible example?

The overloaded onAdd leaflet method has some overhead which might cause some delay, the opacity approach might be more suitable.

[danwild]

The 10-20s pre-load time sounds like a lot, it would be good to see an example.

[shinnobi]

this is my deploy website for this case
https://jica.weathervietnam.vn/satellite

my approach is
async loadFileTiff(filename) { var plottyRenderer = L.LeafletGeotiff.plotty({ displayMin: 0, displayMax 1, clampLow: false, clampHigh: true, colorScale :"greys", noDataValue: -999, clearBeforeMove: false, applyDisplayRange: false }); let layer = L.leafletGeotiff( this.satelliteFolder + filename, { renderer: plottyRenderer, pane:'pane450', // useWorker: true, blockSize: 65536, sourceFunction: GeoTIFF.fromUrl, } ) return layer
then i have a array [layer1,...layer23]
(it take me about 10-20s for this)

then when next layer i just remove old layer from the pane then add a new one (add or remove take small time )

[shinnobi]

The 10-20s pre-load time sounds like a lot, it would be good to see an example.

Hi @danwild i provide sandbox for this
https://codesandbox.io/s/determined-browser-oqjyr?file=/src/App.js
would you please help me