Adding dynamic legend based on colormap

[dvd3v]

Hi,

We are using Titiler for showing various data data maps, like elevation rasters. I would like to build a 'GetLegendGraphic' endpoint where we can get a legend based on scaling and/or custom (rio-tiler) colormaps. What would be the best approach create such a get legend endpoint? My idea is to use the band statistics and the rio_tiler.colormap lib to get the cmap for the chosen colormap. Is it possible to get these cmap values for the default rio-tiler's colormaps?
Thanks!

[vincentsarago]

👋 @dvd3v

Sounds like a nice addition (as long as we avoid adding new requirements). I'm not quite sure about the best approach here tbh.

I'm not sure we want this directly within the BaseTilerFactory, maybe we can create something like

def register_legend_endpoint(app: FastAPI, **kwargs):

    @app.get("/legend")
    def get_legend_graphic(
        colormap: Depends(ColorMapParams)
        min: int,
        max: int,
    ):
        ...

and then let the user register this endpoint to the main application

[dvd3v]

Thanks for pointing me in the right direction! I agree that this would be a useful addition and it seems that it should be doable without any new requirements. I will try to build a generic solution and send a PR if it is good enough.

[dvd3v]

Update on the progress:
Unfortunately I could not think of a solution without introducing new dependencies. I've build a get legend graphic endpoint using a custom version of rio-tiler's ColorMaps class, make_lut function and Matplotlib for plotting the colorbar. As I deploy TiTiler in Lambda I've created a separate Lambda for this endpoint in order to keep TiTiler as light as possible.
Let me know if anyone is interested in the solution, I'm happy to share.

[scottstanie]

@dvd3v I would be interested to see that! I'd also like to show what the current colorbar looks like based on cmap_name/vmin/vmax

[scottstanie]

Just sharing what I used for making an image of the colorbar next to the map for reference:

# FastAPI endpoint
@app.get("/colorbar/{cmap_name}")
async def get_colorbar(cmap_name: str):
    """Get a WEBP image of a matplotlib colorbar."""
    try:
        colorbar_bytes = generate_colorbar(cmap_name)
        return Response(content=colorbar_bytes, media_type="image/webp")
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))



@cache
def generate_colorbar(cmap_name: str) -> bytes:
    """Generate a colorbar image using a specified matplotlib colormap.

    Parameters
    ----------
    cmap_name : str
        Name of the colormap to be used.

    Returns
    -------
    bytes
        WEBP image data as bytes
    """
    from io import BytesIO

    import matplotlib.pyplot as plt
    import numpy as np

    gradient = np.array([[0, 1]])
    fig, ax = plt.subplots(figsize=(9, 1.5))
    ax.imshow(gradient, cmap=cmap_name)
    ax.set_visible(False)

    # Create colorbar in a tightly fitted axis
    cax = fig.add_axes([0.05, 0.2, 0.9, 0.6])
    colorbar = plt.colorbar(
        ax.imshow(gradient, cmap=cmap_name), cax=cax, orientation="horizontal"
    )
    colorbar.set_ticks([])

    # Adjust subplot parameters and apply tight layout
    plt.subplots_adjust(left=0, right=1, top=1, bottom=0)

    buf = BytesIO()
    plt.savefig(buf, format="webp", bbox_inches="tight", pad_inches=0)
    plt.close(fig)
    buf.seek(0)
    return buf.read()

I also had to add a hack to get around the difference in case sensitivity (e.g. titiler wants "rdbu", matplotlib wants "RbBu")

def desensitize_mpl_case():
    """Make `cmap` case insensitive by registering repeated cmap names."""
    import matplotlib as mpl

    cmap_names = list(mpl.colormaps)
    for name in cmap_names:
        if name.lower() in mpl.colormaps:
            continue
        mpl.colormaps.register(mpl.colormaps[name], name=name.lower())

[j08lue]

We have a similar need for our STAC/TiTiler-based application VEDA UI that currently among others powers https://earth.gov.

However, we do not want a static legend image generated but just a couple of hex codes extracted from the colormap, similar to this code snippet:

import matplotlib as mpl
import numpy as np

cmap = mpl.colormaps['Spectral_r']

for step in np.linspace(0, 1, 5):
    print(mpl.colors.rgb2hex(cmap(step)))

Our frontend application can then generate a nice interactive UI component for the legend, as it already does.

So I think we could provide a pretty generic feature by adding an endpoint that accepts the TiTiler parameters that specify a colormap, plus a number of stops to extract, or the coordinates (pixel values) for those stops.

Would it make sense to add this as a default endpoint in TiTiler?

[vincentsarago]

Dear all,

I've started #796 to implement 2 new endpoints:

• /colormaps: return a list of available colormaps
• /colormaps/{colormapId}: return the colormap values as Dict or Image

Would be lovely to have some feedback.

Note: I haven't implemented custom colormap for now!

[j08lue]

This would work nicely for the VEDA UI use case:

1. For continuous, registered colormaps, legends can be constructed from the full list of color map colors (in hex codes or RGBA tuples)
   https://github.com/NASA-IMPACT/veda-config/blob/1baef8521ec6b57d9d36f3cb4cb0d103a9fc2f37/datasets/no2.data.mdx#L80-L89
2. For categorical and/or custom colormaps, the client provides the RGB tuples anyways, so that information is already available in the client (VEDA UI).
   https://github.com/NASA-IMPACT/veda-config/blob/1baef8521ec6b57d9d36f3cb4cb0d103a9fc2f37/datasets/geoglam.data.mdx#L27-L51

Also the /colormaps endpoint is useful - we have talked to users who want to change the color map and listing the available options (plus rendering them) will be possible with these endpoints.

💯