ALOS (30m) colors seem weirdly off

[Pomax]

Describe the bug

I tried your example code with an ALOS (30m) geotiff, and even though I can get the objectively correct elevation data out of that by performing lookups on the TIFF itself, the colors that I'm seeing when rendered as leaflet layer seem super off? How do I tell the library to color the elevation data in the normal "highest value is white, lowest value is black" or "highest value is opaque, lowest value is fully transparent"?

To Reproduce Steps to reproduce the behavior:

1. Use the readme code, set a default map coordinate to something with mountains running to the sea,
2. download the ALOS (30m) tile that covers that location from https://www.eorc.jaxa.jp/ALOS/en/dataset/aw3d30/aw3d30_e.htm (free sign up, free data use, not free to distribute and the tiles are big so attaching a 25MB tiff to this issue is not a good idea ;)
3. load the DSM tiff as georaster
4. notice that the peaks are apparently black, and sea level is white.

Expected behavior

Higher numbers in the geotiff have brighter colors, lower numbers have colors closer to black.

Screenshots

Additional context This is using the unpkg versions of this library (which for some reason has no version in its name) as well as the unpkg version of georaster.

[staffordsmith83]

Possibly related to: https://github.com/GeoTIFF/georaster-layer-for-leaflet/issues/122#issuecomment-1608574204

Does your raster have the ColorInterp=Gray metadata tag? You can find with gdalinfo, or QGIS>Raster>Miscellaneous>Raster Information

[Pomax]

It's a GeoTIFF, so: yes. By definition, GeoTIFF use 16 bit signed ints to represent elevation, since values run from roughly -450m to roughly 9000m.

[staffordsmith83]

@Pomax if you look at that other ticket https://github.com/GeoTIFF/georaster-layer-for-leaflet/issues/122#issuecomment-1539370353 you can see that the author of the library thinks it might not be respecting that ColorInterp=Gray metadata tag correctly. I have the same issue

[Pomax]

Ah. I ended up writing my own TIFF to PNG converter (using the node tiff package to read files, and a custom PNG writer) so I can work with images that are natively supported in the browser, with better compression than TIFF uses (a 25MB GeoTIFF will generally turn into a PNG that's at most half that size) with the Geo information stored as a JSON text block at the end of the PNG file. Loading a file as a byte array is pretty trivial with modern web APIs, so getting that text back out is just a matter of finding the GeoTags keyword and then grabbing everything between {" and the last instance of "} (or, equally easy, finding the keyword, looking back a few bytes to get the chunk's length in bytes, then slicing the array).

As long as your data uses web mercator, no transforms required, just draw the image in a Leaflet layer with the correct NW and SE corners (provided you already use paths that include the map positions, of course. But that's just sensible house keeping).

And if you want it hill-shaded, that's doable as long as you're willing to do do some preprocessing before feeding the data to Leaflet.

[DanielJDufour]

Hey, just following up on the conversation. @Pomax , looks like a really nifty solution you found. Interested in spinning your code out into another open-source library? :-) I'd love to see support for pngs with geospatial metadata added to georaster some day!

Also, just wanted to add that the color expression / band arithmetic can always be overwritten with pixelValuesToColorFn. It's a solution that can work when people just have a tif they want to appear correctly, but definitely understand it doesn't scale to arbitrary tiffs.

We are also working on improving the default visualization of COGs in the "big refactor". More to come.

[Pomax]

I've updated the link in the previous comment - I'm shuffling code around and the link for the custom png writer had turned into a 404. I'm pretty busy at the moment completely rewriting that entire repo so any ALOS work (including spinning off the geotiff-to-geopng code as its own library) will have to wait until that's (mostly) done =)