as shown in the below posted screen-shots, the one titled digit-area represents the geometry the user selected on the map. for the one titled tiff-overlay it should represent the geotiff repective to the geometry the user selected when it overlays it. in other words, tiff-overlay is the overlay layer over digit-area.

the problems now are:

1-as shown in tiff-overlay the area in gray refers to the geometry the user selected which is shown in digit-area, and the rest of the vision port/scope in blacked-out, as shown in the screen-shot, in black. is it possible to remove the black region surrounds the tiff?i know it is a part of the tiff, but is there any way to eliminate it.

2-once the geometry the user selected gets overlayed with the geotiff, i can not neither zoom in or out. why is that happening and how to solve it please.

instance of GeoTIFF

geoTIFFSource = new GeoTIFF({
    wrapX: true,
    normalize: false,
    zoom: 1,
    extent: this.#mapInstance.getView().calculateExtent(this.#mapInstance.getSize()),
    sources: [
        blob: res,
        overviews: ['https://openlayers.org/data/raster/no-overviews.tif.ovr'],
this.#mapBuilderInstance.addTileLayerToMap(this.#mapInstance, geoTIFFSource);


addTileLayerToMap(map, source) {
    if (source) {
        const tileLayer = new TileLayerWebGL({
            source: source,

        if (tileLayer) {
            map.setView(source.getView().then((v) => {
                v.showFullExtent = false;
                return v;


enter image description here tiff-overlay

enter image description here


the combination between parameters set to GeoTIFF instance and the solution of Mike, works fine, and yielded the following sample:

geoTIFFSource = new GeoTIFF({ wrapX: false, normalize: false, sources: [ { blob: res, overviews: ['openlayers.org/data/raster/no-overviews.tif.ovr'], }, ], }); 

updated overlay: enter image description here

nodata:0 enter image description here

  • Coding question on GIS SE site should include relevant existing code of what has been tried so far, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code.
    – TomazicM
    Commented Apr 26 at 14:50
  • @TomazicM yes sure i will add it
    – Amr
    Commented Apr 26 at 14:52
  • 1
    @TomazicM code added, is that ok?
    – Amr
    Commented Apr 26 at 14:54
  • It looks like it is displaying a single band so it is black for no data regions. Try adding nodata: 0 or nodata: NaN to the source options to add an alpha band.
    – Mike
    Commented Apr 26 at 14:59
  • @Mike but why i can not zoom in or zoom out as if the zoom option is locked
    – Amr
    Commented Apr 26 at 15:40

1 Answer 1


To remove extent and resolution constraints from the view you could use

        map.setView(source.getView().then((v) => {
            v.resolution = v.resolutions[v.zoom];
            delete v.extent;
            delete v.resolutions;
            delete v.zoom; 
            return v;

To eliminate black in the output it might be easier to do that in your styling if you cannot get nodata to work, for example

      style: {
        color: [
          ['>', ['band', 1], 0],
            ['band', 1],
            ['band', 1],
            ['band', 1],
          [0, 0, 0, 0],
  • Thank you, I will acknowledge once tested.
    – Amr
    Commented Apr 26 at 20:11
  • good morning, i have just tried the code you posted.unfortunately, when i run the code, there is not tiff overlays the feature or the geometry selected on the map. is there any solution for that please
    – Amr
    Commented Apr 27 at 5:24
  • the code you provided works with combination with the following parameters set to the instance of GeoTIFF: geoTIFFSource = new GeoTIFF({ wrapX: false, normalize: false, sources: [ { blob: res, overviews: ['openlayers.org/data/raster/no-overviews.tif.ovr'], }, ], }); please have a look at the update section added to the question
    – Amr
    Commented Apr 27 at 7:17
  • is there any way to eliminate the that part of the tiff in dark black color surrounds the feature/geometry
    – Amr
    Commented Apr 27 at 7:18
  • Have you tried sources: [ { blob: res, nodata: 0, .... ?
    – Mike
    Commented Apr 27 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.