Example for ol-source-geo-tiff doesn't work

[christophfriedrich]

Describe the bug

The example on how to use the GeoTIFF component (ol-source-geo-tiff) doesn't work:

Screenshot of https://vue3openlayers.netlify.app/componentsguide/sources/geotiff/

This is what it looks like in Firefox 123. I didn't have an instance of Chrome at hand to test it there, but did open Edge (which is Chromium-based) for a very brief moment to test it there and the result was identical.

Looking at the Network tab in the dev panel, one sees that the COG does get loaded in the background, but the map stays white anyway. It's the same in my own application using e.g. this COG. Note that both are files with multiple bands. Using multiple files with a single band each works, i.e. replacing the sources array with e.g. this:

[
  {
    url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/33/U/UV/2023/7/S2A_33UUV_20230715_0_L2A/B04.tif',
    max: 10000,
  },
  {
    url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/33/U/UV/2023/7/S2A_33UUV_20230715_0_L2A/B03.tif',
    max: 10000,
  },
  {
    url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/33/U/UV/2023/7/S2A_33UUV_20230715_0_L2A/B02.tif',
    max: 10000,
  },
]

NB: The Stackblitz starter template still uses an 0.x version of vue3-openlayers, not an 3.x+ one where this component is available.

Affected version(s)

On my local machine npm list --depth=0 vue vue3-openlayers ol ol-ext ol-contextmenu returns:

├── ol-contextmenu@5.3.0
├── ol-ext@4.0.12
├── ol@8.2.0
├── vue@3.3.8
└── vue3-openlayers@3.1.0

(I just noticed that meanwhile there's version 6.x (I love the active development here!) -- I'm sorry if it's already fixed in a newer release, I'll check that with my local code base tomorrow, but as the official example page is affected too I'm gonna send this issue now anyway.)

To Reproduce Steps to reproduce the behavior:

1. Go to https://vue3openlayers.netlify.app/componentsguide/sources/geotiff/
2. See error

Expected behavior A non-white map that correctly displays the COG.

Screenshots See above

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Firefox 123

[christophfriedrich]

Okay, I just upgraded my local codebase to v6.1.0 (which as a side effect produced PR #311) and can confirm that the behaviour is still the same: No multi-band COG to be seen.

Edit: I just re-tried my code that uses multiple single-band COGs (which used to work with 3.1.0) and must report that this now ceased working too :/ So upgrading actually made it worse for me...

New npm list --depth=0 vue vue3-openlayers ol ol-ext ol-contextmenu:

├── ol-contextmenu@5.4.0
├── ol-ext@4.0.17
├── ol@9.0.0
├── vue@3.4.21
└── vue3-openlayers@6.1.0

[christophfriedrich]

I hunted this down a bit more and have come to the conclusion that vue3-openlayers v3.2.1 introduced a breaking change.

Steps to reproduce:

1. git clone https://github.com/eo2cube/hsnb-wuenschdirwas.git
2. cd hsnb-wuenschdirwas
3. git checkout geotiff-experiments (important!)
4. npm install (gets vue3-openlayers v3.1.0 due to package-lock.json)
5. npm run dev
6. Open link in browser
7. Wait 10 seconds or so (data loading)
8. See a COG-based vegetation difference layer on top of the OSM map 👍
9. Strg+C to exit dev server
10. npm install vue3-openlayers@3.2.0
11. npm run dev
12. Wait the 10 seconds
13. See it's still working 👍
14. Strg+C
15. npm install vue3-openlayers@3.2.1
16. npm run dev
17. You wait, and wait, and wait...
18. No COG layer to be seen 👎

Therefore it's to be suspected that c1408beee0674960dbf9b60e68bb6bd315f3ae3f / 8f1376cd0a0598534a4971e81241b97813526440 / 733fde88e8ccd8a22d36560334852aceda230673 by @bmanojlovic / @d-koppenhagen that were meant to fix #277 via #278 had some side effects that killed both the demo and my little application.

I tried to understand what of the change could've caused this and experimented with adding :opacity="0.5", :visible="true" or :zindex="1001" to the <ol-webgl-tile-layer>, but to no success.

[bmanojlovic]

i have tried it and it does work for me when there is opacity (but CORS issue i get can't resolve), but i do agree this is not correct "fix" at all

diff --git a/src/App.vue b/src/App.vue
index 547fa17..ef56ed3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -29,7 +29,7 @@
       <ol-source-osm />
     </ol-tile-layer>

-    <ol-webgl-tile-layer :style="evi" ref="layer">
+    <ol-webgl-tile-layer :opacity="1" :style="evi" ref="layer">
       <ol-source-geo-tiff ref="source"
         :sources="[
           {

[christophfriedrich]

Thanks for looking into it Boris, but sadly I can't confirm. As I said I already tried adding :opacity="1". After your comment I tried again, but no, it doesn't fix it. Guessing from your screenshot, I think you took the wrong thing as "success" -- this is what it should look like:

The CORS error can be ignored, it's from an unrelated part (a request to an API that we moved since I wrote that code).

[d-koppenhagen]

Fixed in latest versions:

• 4.1.2
• 5.0.2
• 6.1.2

[christophfriedrich]

Thanks for the fix Danny! Very much appreciate it! Works beautifully now.

I spotted that you changed ref back to computed in OlWebglTileLayer only, while in the bugged commit the same change was also applied in OlTileLayer, and in OlImageLayer there is also only a ref. Would the same fix need to be applied there too?

[d-koppenhagen]

I didn't find out why but for the other ones it seems to work as it is right now.