How to use Mapbox Terrain-RGB tileset with Mapbox GL JS?

Question

Mapbox releases elevation data using as RGB raster tiles ("Mapbox Terrain-RGB"), available here: https://docs.mapbox.com/help/troubleshooting/access-elevation-data/#mapbox-terrain-rgb

I am struggling to figure out how to consume this data using Mapbox GL JS; I can't figure out a way to do the RGB decoding either in the style editor studio or on the client.

Looking for examples, I can only find a Mapbox example where this data is used in leaflet.js, not Mapbox GL JS: https://blog.mapbox.com/global-elevation-data-6689f1d0ba65

The equivalent openlayers code which I am trying to reproduce is this:


function flood(pixels, data) {
  var pixel = pixels[0];
  if (pixel[3]) {
    var height = -10000 + ((pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1);

    if (height <= 100 && height > 0) {
      pixel[0] = 255;
      pixel[1] = 15;
      pixel[2] = 15;
      pixel[3] = (255 - height * 2.5);
    } else {
      pixel[3] = 0;
    }
  }
  return pixel;
}

const elevation = new XYZ({
  url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
  crossOrigin: 'anonymous',
  transition: 0
});

var raster = new RasterSource({
  sources: [elevation],
  operation: flood
});

but I cannot figure out any way to do this on the client using Mapbox GL JS.

Ideally I would avoid direct API calls; I'm trying to work within the Mapbox GL JS client to avoid incurring high costs with direct API access. But I'd start with any way to do this at all.

(I'm fairly new to this, so I apologize if there are deeper misunderstandings at play)

Steve Bennett Steve Bennett · Accepted Answer · 2019-07-10T02:19:49

You can't do arbitrary operations on raster pixels, such as raster-colorizing. You can do either of two things:

Display the raster as an image (using the raster source type with the raster layer type).
Treat the raster as a DEM, and display it as hillshading (using the raster-dem source type, with the hillshade layer type).

For an example of the latter, see https://docs.mapbox.com/studio-manual/examples/hillshade/

How to use Mapbox Terrain-RGB tileset with Mapbox GL JS?

1 Answers