mapbox / mapbox/mapbox-gl-js

Using source state in layer expressions

Open
#8,962 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

cross-platform :tv: feature :green_apple:
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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.