Load colormaps from TiTiler to ensure tiles and legend agree

[j08lue]

Currently, we have to configure both the TiTiler dynamic tiling parameters for a colormap and the stops for the legend component. In principle, the stops could be generated dynamically, ideally by TiTiler, since it receives the rendering specs and we need to make sure legend and tiles agree.

I added a comment to this existing TiTiler feature request:

• Adding dynamic legend based on colormap developmentseed/titiler#509

Acceptance criteria

• Colormaps are loaded from TiTiler

[j08lue]

TiTiler implemented a method to get the full color table (usually 255 stops), which should work fine for our purpose as well.

• add colormap endpoints developmentseed/titiler#796

Btw, other projects I learned about have been loading colormaps from D3, at least those identical with TiTiler's.

[j08lue]

The/colormaps endpoint (docs here) does not seem to be added to the GHG Center and VEDA APIs yet.

• https://staging-raster.delta-backend.com/docs
• https://ghg.center/api/raster/docs

Might need a ticket in veda-backend.

[slesaad]

It can be a part of upgrading titiler-pgstac to the latest version

• Plans for upgrading to TiTiler-PgSTAC 1.0? veda-backend#364.

[j08lue]

• VEDA production: https://openveda.cloud/api/raster/docs#/ColorMaps/getColorMaps

[j08lue]

Context and Problem Statement

A TiTiler UI wants to offer to the user a curated list of colormaps to choose from, with visual previews or the colormaps.

Decision Drivers

1. Agreement between legend and rendered colors. Small differences could compromise the information people derive from the maps - possibly unnoticed. Larger differences break the user experience.
2. Ease of implementation and maintenance
3. Decent performance
4. Support for custom colormaps. TiTiler can have registered custom colormaps. For the GHG Center, for example, we have a custom colormap for the EPA methane datasets - included in the code here. However, it seems like /colorMaps does not return it.

Considered Options

1. Hard-code the colormaps (name, hex/rgb values) in the UI code, pass common name (e.g. viridis) to TiTiler
2. Hard-code the colormaps (hex/rgb values) in the UI code, pass hex codes to Titiler
3. Load the colormaps from D3 (they should, as rio-tiler's, be derived from Matplotlib and agree), pass common name
4. Load the list of colormaps from TiTIler's /colorMaps endpoint and fetch the hex codes one by one from /colorMaps/{colorMapId}

Decision Outcome

Chosen option: "???", because ...

Pros and Cons of the Options

Option 1 - Hard-coded, pass name

1. Good, because: simple & flexible
2. Bad, because: Loads of extra code
3. Bad, because: Agreement between legend and rendered colors NOT guaranteed

Option 2 - Hard-coded, pass values

1. Good, because: Agreement between legend and rendered colors guaranteed
2. Bad, because: Loads of extra code
3. Bad, because: More data gets passed
4. Bad, because: Not making use of TiTiler builtins or custom colormaps

Option 3 - Load from D3, pass name

1. Good, because: No extra code
2. Bad, because: Agreement between legend and rendered colors NOT guaranteed (afaik there are no formal specifications for colormaps, only common practice - is that good enough?)
3. Bad, because: Need to hard-code any custom colormaps registered in TiTiler

Option 4 - Load from TiTiler, pass name

1. Good, because: Agreement between legend and rendered colors guaranteed
2. Good, because: Custom colormaps registered in TiTiler are available (NOT at this point! Needs to be fixed.)
3. Good, because: No duplication of colormap specifications in the code or dependencies (D3)
4. Bad, because: Requires whitelisting of colormaps for curated list
5. Bad, because: Requires a request for each colormap to get the rgb/hex values or images for preview

[aboydnw]

Duplicate of #994