Using source state in layer expressions
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
Motivation
I have a circle layer with an interpolation for the color property:
paint: {
'circle-radius': ['case', ['boolean', ['feature-state', 'hover'], false], 6, 4],
'circle-color': [
'interpolate',
['linear'],
['get', propName],
propRange.min,
'#00FF00',
propRange.min + propRange.range / 2,
'#FFFF00',
propRange.max,
'#FF0000',
],
...
}
I want this interpolation to be relative to the minimum and maximum values of some dynamically chosen property of a geojson feature collection.
Design Alternatives
Something akin to feature state, but more like "source-state" that is usable in expressions would be great. This interpolation only needs to recalculate when my geojson feature collection changes (which happens as I move the map), or when the user chooses a new property to visualize with interpolated colors. I'd love to use this "source-state" concept as follows:
paint: {
'circle-radius': ['case', ['boolean', ['feature-state', 'hover'], false], 6, 4],
'circle-color': [
'interpolate',
['linear'],
['get', ['source-state', 'interpolateBy']],
['source-state', 'min'],
'#00FF00',
['+', ['source-state', 'min'], ['/', ['source-state', 'range'], 2]]
'#FFFF00',
['source-state', 'max'],
'#FF0000',
],
...
}
const onUpdateFeatures = newFeatures => {
source.setData(newFeatures);
const { interpolateBy } = mapInstance.getSourceState(source);
const { min, max, range } = findRange(newFeatures, interpolateBy);
mapInstance.setSourceState(source, { min, max, range });
};
const onChangeProp = newPropName => {
const { min, max, range } = findRange(newFeatures, newPropName);
mapInstance.setSourceState(source, { min, max, range, interpolateBy: newPropName });
};
Design
The above design fits nicely in with "feature-state" in terms of usage and api etc. I am not familiar enough with mapbox's innards to know how difficult this implementation is or to really provide an example implementation.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no implementation file or test; begin by tracing the existing feature-state expression handling and the source.setData API in mapbox-gl-js. Determine whether source-level state can be exposed to expressions, then define the API and verify interpolation updates when source data or the selected property changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100