mapbox / mapbox/mapbox-gl-js

Terrain exaggeration: supporting data-driven styling

Open
#10,775 11 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

3d :triangular_ruler: feature :green_apple:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

I would like to be able to customise exaggeration based on elevation ranges, similar to what is currently possible with fill-extrusion layers (esp. height/colour).

I work with reef bathymetry data (@30-100m x/y resolution) that generally sees depth profiles between 0 to 60m. The reefs often sit on narrow shelfs, bordered by mountains, that quickly drop off to kms depth on the ocean side. Being able to emphasise detail on the reef shelf, while tapering the extremes either side, is quite useful. Stepped/interpolated exaggeration based on the `z` value would allow this.

In the past I have encoded DEMs using a custom height profile. This was primarily to (selectively) squeeze as much detail as possible - in the right places - into an 8bit png, which was all that was supported for upload into Studio at the time. Being able to decode the profile effectively on the front-end (using data-driven styles) was vital, but had the added effect of affording range-specific exaggeration.

Here's an example using a fill extrusion layer with data-driven styles for height (and colour): https://lab.citizensgbr.org/census-map/

## Design Alternatives

The same can be achieved by custom-encoded DEMs alone, however the exaggeration approach is more flexible (no re-encoding large tilesets to make adjustments) and ensures cross-compatibility (supplied elevation values are correct / per standards).

## Design / Mock-Up

Developers / client side implementation would work the same as now, except elevation data would be queryable:
```js
// Pseudo code
map.setTerrain({
source: 'bog-standard-dem',
exaggeration: [
'interpolate',
['linear'],
['get', 'z'], // based on z value, same as accessing in fill-extrusion
0, 2.5,
100, 1.5,
],
});
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No implementation files or tests are named. Start by reviewing the current terrain exaggeration API and the existing fill-extrusion data-driven styling behavior described in the issue; done should allow exaggeration to vary by elevation z using stepped or interpolated expressions while retaining standard elevation values.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.