How to add custom colormap

[mghildiy]

I have cloned github repo. And am able to serve my cog tif with it by launching it as:

titiler: uvicorn titiler.application.main:app --reload --port 8001

Now I want to add a custom color map to be served.. In '\src\titiler\core\titiler\core\dependencies.py', I added thsi:

FCD_COLORMAP = {
    0:  {215, 25, 28, 255},
    15: (254, 196, 123, 255),
    20: (237, 247, 174, 255),
    40: (156, 212, 103, 255),
    60: (91, 181, 84, 255),
    80: (26, 150, 65, 255),
}
default_cmap.register({"fcd": FCD_COLORMAP})
ColorMapParams = create_colormap_dependency(default_cmap)

But 'fcd' is not listed in output of endpoint /colorMaps. I can see default colormaps like rdylgn etc in the result list.

What do I exactly need to do to add a custom colormap so that I can then use it on browser side with data url as:

data: '/cog/tiles/WebMercatorQuad/{z}/{x}/{y}.png?url=http://localhost/cog/sgnp_fcd_3857_cog.tif&rescale=0,100&colormap_name=fcd'

[vincentsarago]

https://developmentseed.org/titiler/advanced/customization/#custom-colormap

[mghildiy]

Thanks for update.

I created my own application, with main.py as:

from fastapi import FastAPI
from rio_tiler.colormap import cmap as default_cmap
from titiler.core.dependencies import create_colormap_dependency
from titiler.core.factory import TilerFactory, ColorMapFactory
from starlette.middleware.cors import CORSMiddleware

app = FastAPI()

# Add CORS middleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Allows all origins (for development - be more specific in production)
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

cmap_values = {
    "fcd": {
        0:  (215, 25, 28, 255),      # 0–20
        20: (253, 174, 97, 255),     # 20–40
        40: (255, 255, 191, 255),    # 40–60
        60: (171, 221, 164, 255),    # 60–80
        80: (43, 131, 186, 255),     # 80–100
        100:(0, 0, 0, 255),
    }
}

# add colormap endpoints
colormap = ColorMapFactory()
app.include_router(colormap.router)

# add custom colormap `fcd` to the default colormaps
cmap = default_cmap.register(cmap_values)
ColorMapParams = create_colormap_dependency(cmap)

# Create a TilerFactory for Cloud-Optimized GeoTIFFs
cog = TilerFactory(colormap_dependency=ColorMapParams)

# add /cog to paths
app.include_router(cog.router, prefix="/cog", tags=["COG"])


@app.get("/")
def read_index():
    return {"message": "Welcome to TiTiler"}

Response for '/colorMaps' doesn't contain 'fcd'.

Shouldn't it? Or am I doing it wrongly?

[vincentsarago]

you also need to pass your custom colormap registery to the ColorMapFactory

colormap  = ColorMapFactory(supported_colormaps=cmap)
app.include_router(colormap.router)

[mghildiy]

Thanks a ton. This worked and now my custom map name is listed in the /colorMap response. But I observe s strange issue with imafe rendering when I pass this colormap in data url:

data: 'http://localhost:8001/cog/tiles/WebMercatorQuad/{z}/{x}/{y}.png?url=http://localhost/cog/sgnp_fcd_3857_cog.tif&colormap_name=fcd

If I dont pass colormap_name parameter, then grayscale raster is correctly rendered, without any color ofcourse.
But with above url(with colornap_name passed as fcd), image is not rendered as expected. Instead I see tiny rectangles scattered here and there within AOI.

What can be the issue here?

[vincentsarago]

you colormap is of type discrete, which will map direct value to RGBA colors

cmap_values = {
    "fcd": {
        0:  (215, 25, 28, 255),      # 0–20
        20: (253, 174, 97, 255),     # 20–40
        40: (255, 255, 191, 255),    # 40–60
        60: (171, 221, 164, 255),    # 60–80
        80: (43, 131, 186, 255),     # 80–100
        100:(0, 0, 0, 255),
    }
}

you better try with interval colormap https://cogeotiff.github.io/rio-tiler/colormap/#intervals-colormaps

cmap_values = {
    "fcd": [
        [(0, 20),  (215, 25, 28, 255)],      # 0–20
        [(20, 40), (253, 174, 97, 255)],     # 20–40
        [(40, 60), (255, 255, 191, 255)],    # 40–60
        [(60, 80), (171, 221, 164, 255)],    # 60–80
        [(80, 100), (43, 131, 186, 255)],     # 80–100
        [(100, 255),(0, 0, 0, 255)],
    ]
}

this is assuming your data if of type UINT8 with values between 0 -> 255, else you'll need to applying linear rescaling (using rescale={min},{max} parameter

[mghildiy]

Thanks for this. It helps make me progress,