OpenLayers: GeoTIFF on top of OSM layer shows large border

Question

I am trying to load a GeoTIFF on top of an OSM layer with the openlayers library (v10.2.1).

The code to load the GeoTIFF roughly looks like this:

      this.modelLayerSource = new GeoTIFF({
        projection: 'EPSG:4326',
        interpolate: true,
        normalize: false,
        sources: [
          {
            url: this.modelService.getModelFileUrl(c),
            bands: [1]
          },
        ],
      });

      if (!this.modelLayer) {
        this.modelLayer = new TileLayer({
          style: {
            color: [
              'interpolate',
              ['linear'],
              ['band', 1],
              2,
              [255, 255, 255],
              2.5,
              [4,90,141]
            ]
          },
          source: this.modelLayerSource
        });
      }
      
      this.modelLayer.setSource(this.modelLayerSource);

      if (!this.map.getLayers().getArray().includes(this.modelLayer)) {
        this.map.getLayers().insertAt(1, this.modelLayer);
      }

      this.modelLayer.changed();
      this.modelLayerSource.refresh();

The map with the OSM layer is initialized as follows:

    useGeographic();
    proj4.defs("EPSG:32718","+proj=utm +zone=18 +south +datum=WGS84 +units=m +no_defs +type=crs");
    proj4.defs("EPSG:3857","+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs");
    proj4.defs("EPSG:4326","+proj=longlat +datum=WGS84 +no_defs +type=crs");

    register(proj4);

    this.map = new Map({
      target: this.myMap.nativeElement,
      layers: [
        this.osmLayer,
        this.vectorLayer
      ],
      view: new View({
        projection: 'EPSG:3857'
        // center: fromLonLat([-76.2591842, -6.5692892]),
        // zoom: 6
      }),
    });

The result looks like this (ignore the colored circles and grey squares these come from a vector layer that is displayed correctly):

Here is another screenshot from QGIS with the same file:

How can I get rid of the large white border around the GeoTIFF in openlayers?

Answer 1

You need to use an alpha band when styling. The source may already have one (although if it exactly fits tiles in EPSG:4326 it may not need it in that projection). If there is no alpha band and you are reprojecting to a different tile grid you can force one to be added by specifying a nodata value.

  this.modelLayerSource = new GeoTIFF({
    projection: 'EPSG:4326',
    interpolate: true,
    normalize: false,
    sources: [
      {
        url: this.modelService.getModelFileUrl(c),
        bands: [1],
        nodata: NaN,
      },
    ],
  });

  if (!this.modelLayer) {
    this.modelLayer = new TileLayer({
      style: {
        color: [
          'case',
          ['==', ['band', 2], 0],
          [0, 0, 0, 0],
          [
            'interpolate',
            ['linear'],
            ['band', 1],
            2,
            [255, 255, 255],
            2.5,
            [4, 90, 141]
          ]
        ]
      },
      source: this.modelLayerSource
    });
  }