mapbox / mapbox/mapbox-gl-js

Support a color feature state on the buildings featureset

Open
#13,592 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

## Motivation

The new featureset concept is pretty clean as a way to curate an API for imported styles. But of course, it comes with the tradeoff that developers can't just mess with whatever they want anymore, and so it limits the things we can build.

In my particular case, I want to render each building on the map with a specific color. We're a general dataviz provider but an example would be each building having a color based on median rental price for a listing platform.
I used to do this with an extruded OSM building layer and a color feature state. I'm trying to upgrade to Standard and this is a blocker.

I see `colorBuildingHighlight` and `colorBuildingSelect` which basically do what I need but they're just 2 colors driven by boolean feature states. Could we add a string feature state to have any color at all?

Related question: do `colorBuildingHighlight` and `colorBuildingSelect` work on the new building models? It would be good if they did, since "classic" 3d buildings and "model based" 3d buildings are pretty much the same thing for a non-tech user and having a different behavior would make features based on this feature more difficult to roll out. I think this is especially true since you could replace a "classic" 3d buildings by a "model based" one anytime if I understand that well (this is super cool by the way).

## Design Alternatives

Stick to old Mapbox to be able to color any building freely 💔.

## Design

- Add a feature state for `color` (I guess a less conflict-prone name)

### Mock-Up

Devs (just for testing by clicking a building and setting a random color):
```js
map.addInteraction('buildings-click-interaction', {
type: 'click',
target: { featuresetId: 'buildings', importId: 'basemap' },
handler: (e) => {
map.setFeatureState(e.feature, { color: '#ff0000' }) // a beautiful red
},
})
```

Users: a city with buildings in data-driven colors.

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 at the map.setFeatureState interaction shown in the issue and trace how the buildings featureset handles colorBuildingHighlight and colorBuildingSelect. Completion means supporting a string color feature state for per-building colors and resolving whether those states work on model-based buildings.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.