Possible to add multiple geotiff files?

[mttucl]

I'm using FileReader to add multiple files. It works fine for one file but when adding more files, only the last file is rendered correctly. I think it an issue with transform(rasterImageData, args) function as it is trying to apply data from the last file to the other files. Below is the relevant code and here is working example in JSFiddle.

   document.getElementById("input-file").addEventListener("change", function(event) {
   let file = event.target.files[0];
   let reader = new FileReader();
   let result = reader.result;
    
    reader.onloadend = function() {
        const layer = L.leafletGeotiff(result, {
          renderer: plottyRenderer,
          sourceFunction: GeoTIFF.fromArrayBuffer,
          arrayBuffer: result 
        });
        layer.addTo(map);

        layerControl.addOverlay(layer, file.name);
    };

    reader.readAsArrayBuffer(file);
  });

Another minor issue, I get [object%20ArrayBuffer] 404 (Not Found) error from layer.addTo(map);. It renders the layer correctly but it seems related to FileReader (async) and onAdd @ leaflet-geotiff.js:116. No issue if layer is not added to the map.

[danwild]

Hi @mttucl, I had not encountered this use case yet.

Is there a reason for not creating a leaflet layer for each file you want to render?

[mttucl]

Hi @danwild, please excuse my terrible skills in JS but I thought this what I'm doing. Isn't this what the layer variable is doing in the code snippet above?

[danwild]

Apologies @mttucl - you were right! I misread your problem.

I think the issue comes from sharing the renderer between layers - each layer needs it's own renderer, try this: https://jsfiddle.net/sfnuLopj/

[mttucl]

Excellent. Thanks @danwild. Any thoughts on the error mentioned at the bottom of my OP? I don't see it in JSFiddle but only in my local server. It doesn't seem to cause any issue other than the error message in Console.
Also, please feel free to close this issue, and thanks again.