Custom colormaps for add_cog_layer()

[jmarokhovsky]

I'm attempting to create and use a custom colormap to display my COG data, but it only seems to be using one of the given colors and only painting one value. Am I doing something wrong or is this a bug in leafmap or titiler?

The code I'm using is:

country_url = "https://clarkcga-aquaculture.s3.amazonaws.com/data/el_salvador/cover/El_Salvador_Landcover_2022.tif"
custom_cmap = '{"0": "#000000", "1": "#008040", "2": "#ff0000", "3": "#ffff00", "4": "#8000ff", "5": "#8080ff", "6": "#00ff00", "7": "#c0c0c0", "8": "#16002d", "9": "#ff80ff", "10": "#b3ffb3", "11": "#ff8080", "12": "#ffffbf", "13": "#000080", "14": "#808000", "15": "#00ffff"}'
m.add_cog_layer(country_url, "Foo", opacity=0.8, colormap=custom_cmap)

And what I end up seeing is:

Versus what is shown when I pass "viridis" to either palette or colormap_name:

[giswqs]

This seems a Titiler issue. See developmentseed/titiler#788

I tried the following code, it didn't work either.

import leafmap
import json
m = leafmap.Map()
country_url = "https://clarkcga-aquaculture.s3.amazonaws.com/data/el_salvador/cover/El_Salvador_Landcover_2022.tif"
custom_cmap = {"0": "#000000", "1": "#008040", "2": "#ff0000", "3": "#ffff00", "4": "#8000ff", "5": "#8080ff", "6": "#00ff00", "7": "#c0c0c0", "8": "#16002d", "9": "#ff80ff", "10": "#b3ffb3", "11": "#ff8080", "12": "#ffffbf", "13": "#000080", "14": "#808000", "15": "#00ffff"}
m.add_cog_layer(country_url, "Foo", bidx=[1], opacity=0.8, colormap=json.dumps(custom_cmap))
m

[giswqs]

Can you make a minimal example using TiTiler without leafmap to see if it works?. If it does not, report the bug to TiTiler.

https://developmentseed.org/titiler/examples/notebooks/Working_with_CloudOptimizedGeoTIFF_simple

[jmarokhovsky]

Sure thing, writing out something now

[giswqs]

Seem like a leafmap issue.

import json

import httpx

from folium import Map, TileLayer

titiler_endpoint = "https://titiler.xyz"  # Developmentseed Demo endpoint. Please be kind.
url = "https://clarkcga-aquaculture.s3.amazonaws.com/data/el_salvador/cover/El_Salvador_Landcover_2022.tif"
custom_cmap = {"0": "#000000", "1": "#008040", "2": "#ff0000", "3": "#ffff00", "4": "#8000ff", "5": "#8080ff", "6": "#00ff00", "7": "#c0c0c0", "8": "#16002d", "9": "#ff80ff", "10": "#b3ffb3", "11": "#ff8080", "12": "#ffffbf", "13": "#000080", "14": "#808000", "15": "#00ffff"}

r = httpx.get(
    f"{titiler_endpoint}/cog/WebMercatorQuad/tilejson.json",
    params = {
        "url": url,
        "colormap": json.dumps(custom_cmap),
    }
).json()

bounds = r["bounds"]
m = Map(
    location=((bounds[1] + bounds[3]) / 2,(bounds[0] + bounds[2]) / 2),
    zoom_start=r["minzoom"] + 1
)

TileLayer(
    tiles=r["tiles"][0],
    opacity=1,
    attr="Swisstopo"
).add_to(m)
m

[giswqs]

ipyleaflet version

import json
import httpx
from ipyleaflet import Map, TileLayer

titiler_endpoint = "https://titiler.xyz"  # Developmentseed Demo endpoint. Please be kind.
url = "https://clarkcga-aquaculture.s3.amazonaws.com/data/el_salvador/cover/El_Salvador_Landcover_2022.tif"
custom_cmap = {"0": "#000000", "1": "#008040", "2": "#ff0000", "3": "#ffff00", "4": "#8000ff", "5": "#8080ff", "6": "#00ff00", "7": "#c0c0c0", "8": "#16002d", "9": "#ff80ff", "10": "#b3ffb3", "11": "#ff8080", "12": "#ffffbf", "13": "#000080", "14": "#808000", "15": "#00ffff"}

r = httpx.get(
    f"{titiler_endpoint}/cog/WebMercatorQuad/tilejson.json",
    params = {
        "url": url,
        "colormap": json.dumps(custom_cmap),
    }
).json()

bounds = r["bounds"]
m = Map(
    center=((bounds[1] + bounds[3]) / 2,(bounds[0] + bounds[2]) / 2),
    zoom=r["minzoom"] + 1
)

layer = TileLayer(
    url=r["tiles"][0],
    opacity=1,
    attr="Swisstopo"
)
m.add_layer(layer)
m

[giswqs]

This version works with leafmap. I guess something gets lost in add_cog_layer

import json
import httpx
from ipyleaflet import TileLayer
import leafmap

titiler_endpoint = "https://titiler.xyz"  # Developmentseed Demo endpoint. Please be kind.
url = "https://clarkcga-aquaculture.s3.amazonaws.com/data/el_salvador/cover/El_Salvador_Landcover_2022.tif"
custom_cmap = {"0": "#000000", "1": "#008040", "2": "#ff0000", "3": "#ffff00", "4": "#8000ff", "5": "#8080ff", "6": "#00ff00", "7": "#c0c0c0", "8": "#16002d", "9": "#ff80ff", "10": "#b3ffb3", "11": "#ff8080", "12": "#ffffbf", "13": "#000080", "14": "#808000", "15": "#00ffff"}

r = httpx.get(
    f"{titiler_endpoint}/cog/WebMercatorQuad/tilejson.json",
    params = {
        "url": url,
        "colormap": json.dumps(custom_cmap),
    }
).json()

bounds = r["bounds"]
m = leafmap.Map(
    center=((bounds[1] + bounds[3]) / 2,(bounds[0] + bounds[2]) / 2),
    zoom=r["minzoom"] + 1
)

layer = TileLayer(
    url=r["tiles"][0],
    opacity=1,
    attr="Swisstopo"
)
m.add_layer(layer)
m

[jmarokhovsky]

That explains it, thank you!

[giswqs]

Fixed in #868