GeoTIFF / georaster-layer-for-leaflet

Display GeoTIFFs and soon other types of raster on your Leaflet Map
https://geotiff.github.io/georaster-layer-for-leaflet-example/
Apache License 2.0
296 stars 58 forks source link

COG not projected correctly #122

Open brianloss opened 1 year ago

brianloss commented 1 year ago

Describe the bug Georaster for leaflet does not appear to be projecting some COGs correctly. The scale, orientation, and shading are all incorrect. The image appears to have the grayscale colors inverted, and it does not appear to be honoring the EPSG:32630 projection in the source COG.

To Reproduce Steps to reproduce the behavior:

  1. View the sample at https://geotiff.github.io/georaster-layer-for-leaflet-example/examples/load-cog-via-url-param.html?url=https%3A%2F%2Fumbra-open-data-catalog.s3.amazonaws.com%2Fsar-data%2Ftasks%2FShetland%2C%2520UK%2Fa31bcff7-bc99-4d8b-b4a0-a8b93f799a00%2F2023-02-12-20-56-56_UMBRA-04%2F2023-02-12-20-56-56_UMBRA-04_GEC.tif

Expected behavior The image should display using the proper scale, orientation, and shading.

Screenshots Here's what I see loading that sample image in the load-cog-via-url-param example:

image

Here's what I see when loading the image in qGIS. Note that the image is correctly oriented, and the shading is correct too:

image

Desktop (please complete the following information):

Additional context I have verified with GDAL and rasterio that the image appears to be a valid COG. If I re-project to EPSG:4326 using GDAL, the image orientation seems to be ok, but the shading is still incorrect. Everything looks great in qGIS.

DanielJDufour commented 1 year ago

Hi, @brianloss . Thank you for reporting this issue. I think the bad orientation is a result of poor geotransform support in the georaster ecosystem. I'm in the process of improving that, but it will probably take some more time though.

I'm not sure about the rendering difference. My best guess is that georaster-layer-for-leaflet isn't respecting that ColorInterp=Gray metadata tag (as described by gdalinfo). I'll have to look into this.

staffordsmith83 commented 1 year ago

If this helps, I also have this issue, with a dataset that specifies ColorInterp=Gray: Should be (in QGIS):

image

in Leaflet:

image

Here is the dataset (public): https://dea-public-data.s3.ap-southeast-2.amazonaws.com/derivative/ga_ls_tc_pc_cyear_3/1-0-0/x17/y37/2022--P1Y/ga_ls_tc_pc_cyear_3_x17y37_2022--P1Y_final_wet_pc_50.tif

jcphill commented 1 year ago

This is likely a duplicate of #77.

staffordsmith83 commented 1 year ago

This is likely a duplicate of #77.

Except that #77 does not deal with the colouring issue. I suggest it be split into two separate issues.

jcphill commented 1 year ago

@staffordsmith83 your misalignment issues are definitely #77 since they go away when loaded via an ArrayBuffer. I suspect @brianloss is a different projection problem but I can't find his data file.

staffordsmith83 commented 1 year ago

@jcphill yes I agree, the misalignment part is definitely #77 . But the incorrect colouring is not covered in #77 and should be a separate ticket. Daniel says "I'm not sure about the rendering difference. My best guess is that georaster-layer-for-leaflet isn't respecting that ColorInterp=Gray metadata tag (as described by gdalinfo). I'll have to look into this." .Just trying to help, thanks.

brianloss commented 1 year ago

I suspect @brianloss is a different projection problem but I can't find his data file.

@jcphill It looks like maybe the bucket changed, but I get the incorrect projection and shading with any GEC image from Umbra. The entry point to their public data set is here: https://registry.opendata.aws/umbra-open-data/. Here's an updated example (image is of the Panama Canal): https://geotiff.github.io/georaster-layer-for-leaflet-example/examples/load-cog-via-url-param.html?url=https://umbra-open-data-catalog.s3.amazonaws.com/sar-data/tasks/Panama%20Canal,%20Panama/4ced9d34-b5da-490b-a564-7454e7d86b71/2023-02-20-14-43-17_UMBRA-05/2023-02-20-14-43-17_UMBRA-05_GEC.tif

jcphill commented 1 year ago

Thanks @brianloss, from gdalinfo I see that these files have a GeoTransform applying a scaling and rotation:

GeoTransform = 658779.3238674796, -0.2856291336674265, -0.3120072027493168 992366.6772630807, -0.3120072027493272, 0.2856291336674293

The geotiff.js library reads this as fileDirectory.ModelTransformation but doesn't handle the rotation part outside of getBoundingBox() and nothing else in the stack even looks for it.

DanielJDufour commented 10 months ago

Hey, all. Thanks so much for digging into this. Definitely loads of opportunity to improve the ecosystem!

A few newish updates:

At the moment, I can't think of any other libraries that support custom geotransforms, yet, so definitely lots more work to do, but just wanted to provide a progress update. The future is bright!