Skip to main content

Elevation coloring and CSS colors

Elevation coloring and common CSS colors (08.15b)

color-relief uses a common raster-dem source. color-relief-color accepts a constant CSS color, a linear interpolate ramp or a step ramp with "elevation" in meters. Up to 32 strictly increasing numeric stops are supported, each with an absolute limit of 1e8 and a constant color. Default is black. Linear interpolates RGBA and clamps outside its range; step adopts the new color at a threshold. Negative heights are supported; transparent nodata stays transparent. The input is scoped to the elevation ramp and does not become a feature field.

map.addLayer({id:'relief',type:'color-relief',source:'dem',paint:{
 'color-relief-color':['interpolate',['linear'],['elevation'],
   -100,'#2563eb',0,'lime',2000,'rgb(160 100 40)',5000,'white'],
 'color-relief-opacity':0.8
}});
map.setPaintProperty('relief','color-relief-color',[
 'step',['elevation'],'blue',0,'lime',2000,'brown',5000,'white'
]);
await map.sqs.flush({render:true});

Opacity defaults to 1, ranges from 0 to 1, and accepts common zoom expressions. Final alpha multiplies color alpha by opacity once. Layers reuse decoded DEMs; palette/opacity, ordering, zoom and visibility updates change derived texture revisions without editing elevations. Vector features, feature-state and filters are unavailable. Globe, 3D draping, other interpolation modes, dynamic stop colors and further elevation-specific expressions remain pending. Budgets match raster-dem/hillshade.

Common circle/line/fill/fill-extrusion, symbol, background, heatmap and elevation colors now reuse the existing CSS parser: hex, 148 named colors, RGB/RGBA and HSL/HSLA, case variations, percentages, whitespace/slash syntax and angle units. Interpolation uses sRGB bytes. Invalid/nonfinite inputs reject; other color spaces are not promised.

The complete HTML/CSS/button example uses SqsMap-generated demonstration heights, not real terrain. Replace the source and display provider-required credits. Naming follows the MapLibre color-relief specification; SqsMap implements its own rendering.