mapbox / mapbox/mapbox-gl-js

Polygon extrusion coloring according to different elevation values.

Open
#12,710 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

**mapbox-gl-js version**: Latest

### Question

I truly appreciate Mapbox's push to support 3D visualizations. It's very performant compared to other 3D map engines.

I was trying to color the polygon's extrusion based on elevation values, but I don't think it's possible. I want to use the same polygon, but the colorset is segmented into two based on a reference value, for example blue and green. There can be multiple regions inside the polygon which can belong to either blue or green segmentation. Is there a way I could achieve it?

![mapbox-polygon](https://github.com/mapbox/mapbox-gl-js/assets/21227016/f32e5630-428b-4050-9512-f140612cb936)

If I cannot implement it with the current API, I plan on using mapbox custom layer API combined with ThreeJS. Could I use the elevation data in present the elevation tiles and create such an outward projection which cuts off along the boundary of the polygon and provides the necessary color segmentation?

### Links to related documentation
- https://docs.mapbox.com/data/tilesets/guides/access-elevation-data/
- https://labs.mapbox.com/education/thematic-map-types/3d-extrusions/

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

Start with the linked access-elevation-data and 3D-extrusions documentation, then review the custom layer API and ThreeJS approach described in the issue. Determine whether current elevation tiles and polygon extrusion styling can support threshold-based color segmentation; done means a documented supported path or a clearly recorded API limitation.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, three.js, typescript
Domain
api, computer-graphics, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.