radiantearth / stac-browser

A full-fledged UI in Vue for browsing and searching static STAC catalogs and STAC APIs
https://radiantearth.github.io/stac-browser
ISC License
276 stars 137 forks source link

Browser showing smeared thumbnails #369

Open jlaura opened 1 year ago

jlaura commented 1 year ago

See: https://stac.astrogeology.usgs.gov/browser-dev/#/api/collections/lunar_orbiter_laser_altimeter?.language=en

Screenshot 2023-09-12 at 3 17 59 PM

Is this perhaps because the projection is being described at the item level and the browser is assuming that the projection information also applies to the thumbnail? Or is something else happening causing the thumbnails to display at some upper left origin and then smear across the context map?

DanielJDufour commented 1 year ago

Hi, @jlaura . Just wanted to let you know that I saw this. If I had to guess, I'd say it's an issue with georaster-layer-for-leaflet stumbling on the custom projection or a custom geotransform. I don't think we are currently trying to reproject thumbnails. I'll try to look into it within a fortnight. I'm sorry for the inconvenience this is causing. Looks like a really cool dataset!

DanielJDufour commented 12 months ago

I looked into this a little more. I think my assumption that the issue was with georaster-layer-for-leaflet is incorrect for this specific example. It looks like the issues appear in the overlay pane, which is consistent with displaying ImageOverlay layers. The thumbnails appear almost square-like, but for some reason Leaflet is rendering them as very non-square rectangles. My best guess is that the code is tripping up over the projection or miscalculating the bounds of the thumbnail some how. Maybe the answer can be found here? https://github.com/stac-utils/stac-layer/blob/main/src/add.js#L178

In either case, very interesting problem indeed. Thank you for bringing this to our attention and for providing such an awesome use case!

Screenshot 2023-09-24 at 12 51 15 PM
DanielJDufour commented 12 months ago

Tagging @m-mohr , who might have an idea!

m-mohr commented 12 months ago

Will check in October once I'm back at work.

m-mohr commented 11 months ago

The issue likely comes from https://github.com/stac-utils/stac-layer/blob/v0.15.0/src/utils/bboxToLatLngBounds.js

There it expects the bbox to consist of 4 numbers, but here we get 6 (includes z). That will likely make the bounds invalid and as such the images get smeared. I think it should be fixed by the new stac-layer codebase, but it hasn't be integrated in STAC Browser yet.

The least time consuming option to solve this would be to release v0.15.1 with a fix, but I'm not sure whether anyone has time/funding to work on this right now?

m-mohr commented 11 months ago

Indeed, if I fix this function, the images don't get distorted (but in 1.0.0 they get shown too large, so there's more work to do). I don't have enough time right now to dig deeper unfortunately.

Related (draft) PRs: