Is it possible to use terrain data in a custom style layer to shade the map?

[larsmaxfield]

Let me know if this is not the appropriate forum to ask this question.

Is possible to use terrain data in a custom style layer to color the map based on elevation?

My goal is to have a custom layer which achieves this:

I achieved that^ by editing the existing shaders in the hillshading layer because they already have methods to calculate the elevation and shade the terrain.

I'd like to now properly implement this elevation coloring using the API.

Custom layers appear to be the way to do this because I can render custom WebGL content in them. However, I have not found a way forward which allows me to access terrain data and therefore determine elevation — that is why I'm asking here if it is even possible to do so.

[HarelM]

Terrain data can be fetched from the tiles, source cache, and stuff like that.
Custom layer can use the map object which can use some more "internal" stuff.
In theory, I think you can use the terrain-rgb tiles as "regular" raster tiles and simply use the terrain to make the 3D effect.
But I might not be correct here.
You can also use addProtocol to manipulate incoming data to achieve raster coloring.
But you'll need to play around with stuff to get to what you need.
I am looking for a more straight forward way to incorporate shaders into the code in terms of hooks, but I don't have a good enough understanding to actually design such hooks, so any help would be appreciated.

[larsmaxfield]

Thanks for the tips — and thanks for moving to discussions.

I'm in a similar spot not having a good enough understanding to jump in. The addProtocol mechanic I see is used to add contour lines. Will take a look. But indeed a solution using shaders (from what I know) would be the most efficient.

[acalcutt]

This is an example I made using addProtocol to make color relief based on terrainrgb using rainbow.js
https://stackblitz.com/edit/web-platform-g15hva?file=index.html .

my example returns back a image that gets used as raster tiles, but the maplibre-contour plugin example you pointed out works similar but returns vector tiles
https://github.com/onthegomap/maplibre-contour?tab=readme-ov-file#how-it-works

[acalcutt]

It would be great to see some faster build in support for this though, like is in the discussion for contour
maplibre/maplibre-style-spec#583

[larsmaxfield]

@acalcutt awesome! Quite a straightforward solution, and reminds me of leaflet-topography.

Built-in would be slick. I've started to play around with making an elevation source/layer as a way to learn how hillshading is implemented.

[acalcutt]

The visual part of it was based on leaflet examples from a blog article. Unfortunatly looking back I am not able to find the article I had read when making that example. It does look similar to that leaflet-topology though.

The addProtocol part actually came from the examples at the bottom of https://maplibre.org/news/2022-06-10-mierune-announcement/
https://jsbin.com/vonixulezo/edit?html,output
when I saw their example it really helped adapt the leaflet terrain coloring examples I was looking at, since the code was visually similar.