mapbox / mapbox/mapbox-gl-draw

Can expressions be used within an interpolator?

Open
#1,211 0 comments 0 reactions 0 assignees View on GitHub
auto-triaged needs information
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.