Custom Color Ramp Between Two Values

[gagecarto]

I'd like to create a custom color ramp that stretches between two colors for the min & max values in my raster (0,100). I know how to set ranges and color data by bins like below.

// here data 0:50 would be green and 50:100 would be red
[
	[[0,50],'#0CFF00']
	[[50,100],'#FF0000']	
]

What if I just wanted to stretch between green and red with green starting at 0 and red ending at 100? Is that possible?

[hrodmn]

Hi @gagecarto - there is a page with some examples for custom colormaps in the rio-tiler docs: https://cogeotiff.github.io/rio-tiler/colormap/#custom-colormaps. It can be tricky to pass an entire linear colormap as a parameter in a GET request so it is much simpler to pick one of the built-in colormaps! If you must use a custom one you can register extra colormaps in your application.

One trick you can try is to create many small intervals using the approach you described above and it might fit under the URL length limit:

import json
import urllib.parse

import httpx
import matplotlib
import numpy

# generate linear segmented colormap
greenred = matplotlib.colors.LinearSegmentedColormap.from_list(
    'greenred', [
        '#0CFF00',
        '#FF0000',
    ],
    256,
)

x = numpy.linspace(0, 1, 256)
cmap_vals = greenred(x)[:, :]
cmap_uint8 = (cmap_vals * 255).astype("uint8")

# create intervals with length 3 to shorten the url length
interval_len = 3
cmap_list = [
    [
        [idx, (idx + interval_len)],
        [int(x) for x in tuple(value)[:3]]
    ] 
    for idx, value in enumerate(cmap_uint8) if not idx % interval_len
]

You can request a tilejson like this:

tilejson_request = httpx.get(
    "https://titiler.xyz/cog/WebMercatorQuad/tilejson.json",
    params={
        "url": "https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif",
        "colormap": json.dumps(cmap_list),
        "rescale": "0,400",
        "bidx": 1,
    },
)

tilejson_request.json()

Edit (vs): Important, since this example image is not uint8 data type you'll need to use the rescale parameter to make sure the image is scaled well for the colormap. (0,400) works well for this image but it will depend on the data you are working with.