mapbox / mapbox/mapbox-gl-draw
Can expressions be used within an interpolator?
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 612
- Avg merge
- 8d 9h
- Merged PRs (30d)
- 5
Description
**mapbox-gl-js version**: 3.1.2
**mapbox-gl-draw version**: 1.4.3
### Steps to Trigger Behavior
Here's an example of an expression I would expect should work, but seems to not. No errors are shown, but the icon size doesn't change when selected.
```
// try and increase the size of the selected point by 2X
iconPrivateSizeInterpolator: mapboxgl.Expression =
[
"let",
"selectBoost",
["case", ["==", "active", "true"], 2, 1],
[
"interpolate",
["linear"],
["zoom"],
0,
0,
4.5,
["*", ["var", "selectBoost"], 0.4],
15,
["*", ["var", "selectBoost"], 0.7],
],
];
```
which is referenced like:
```
layout: {
"icon-image": ["get", "user_icon"],
...
"icon-size": this.iconPrivateSizeInterpolator,
},
```
What's totally curious, is that I have another interpolator based on a **user** property that works. But what I don't get is why I don't need to preface the variable name with `user_` in functioning example below. Draw is _sooo_ mysterious.
```
// WORKS boost size of text based on properties.starsAverage
iconTextSizeInterpolator: mapboxgl.Expression =
// starsAverage is 0 to 5
[
"let",
"starBoost",
["*", ["coalesce", ["get", "starsAverage"], 0], 0.5], // 0 to 2.5
[
"interpolate",
["linear"],
["zoom"],
0,
0,
11.5,
0,
12,
["+", ["var", "starBoost"], 11],
],
];
```
referenced as:
```
layout: {
"icon-image": ["get", "icon"],
...
"text-size": this.iconTextSizeInterpolator,
},
```
### Expected Behavior
Icon gets twice as large when selected
### Actual Behavior
No change in icon size
Contributor guide
Research direction
Start by reproducing the issue using the provided iconPrivateSizeInterpolator and icon-size layout expression in mapbox-gl-draw with the stated mapbox-gl-js and mapbox-gl-draw versions. Compare it with the working iconTextSizeInterpolator example and trace how the active value and let/var expression are evaluated. Done means the selected point's icon visibly doubles in size.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100