OpenLayers: not able to render Cloud Optimized GeoTiffs (COG) without georeference

Question

I have built this sample: https://codesandbox.io/s/cog-notgeo-u8pjtd?file=/main.js

It seems to me all right, but I do not have the rendering of the COG.

What am I doing wrong?

import GeoTIFF from "ol/source/GeoTIFF.js";
import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import Projection from "ol/proj/Projection.js";
import View from "ol/View.js";
import { getCenter } from "ol/extent.js";

const extent = [0, 0, 13470, 8670];

const projection = new Projection({
  code: "custom",
  units: "pixels",
  extent: extent
});

const map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new GeoTIFF({
        convertToRGB: true,
        sources: [
          {
            url:
              "https://tmp-asger-public.s3.eu-central-1.amazonaws.com/2017_84_40_1_0015_00008062.cog.tif",
            nodata: 0
          }
        ]
      })
    })
  ],
  view: new View({
    projection: projection,
    center: getCenter(extent),
    extent: extent,
    zoom: 1
  })
});

Answer 1

I must change my import to import TileLayer from "ol/layer/WebGLTile.js"; and also upgrade to OpenLayers 7.3 which includes a bug fix github.com/openlayers/openlayers/pull/14511

Thank you to Mike comment.