Render multiple COG files using OpenLayers

Question

I am able to render a single COG (Cloud Optimized GeoTIFF) file using OpenLayers examples

But, when when I go for rendering of multiple COG files, then it gives error.

How can I render multiple COG files using Open Layers?

Source Code: https://openlayers.org/en/latest/examples/cog.html

This works (as single file working OK)

const source = new GeoTIFF({
    sources: [
        {
            url: 'https://indgeos-cog-test-1.s3.ap-south-1.amazonaws.com/cog0.tif'
        },
    ],
});

This Fails (as multiple files break)

const source = new GeoTIFF({
    sources: [
        {
            url: 'https://indgeos-cog-test-1.s3.ap-south-1.amazonaws.com/cog0.tif'
        },
        {
            url: 'https://indgeos-cog-test-1.s3.ap-south-1.amazonaws.com/cog1.tif'
        },
    ],
});

Error at Browser (on multiple rendering)

Answer 1

COGs within a GeoTIFF source must be able to use the same tile grid, but as in https://openlayers.org/en/latest/examples/multiple-cogs.html a layer can also have multiple GeoTIFF sources, so this should work

const source0 = new GeoTIFF({
  sources: [
    {
      url: 'https://indgeos-cog-test-1.s3.ap-south-1.amazonaws.com/cog0.tif'
    },
  ],
});

const source1 = new GeoTIFF({
  sources: [
    {
      url: 'https://indgeos-cog-test-1.s3.ap-south-1.amazonaws.com/cog1.tif'
    },
  ],
});

const layer = new TileLayer({
  sources: [source0, source1],
});