mapbox / mapbox/mapbox-gl-draw

Expressions not working the same way for different style types

Open
#1,063 5 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
1.1k
Forks
612
Avg merge
8d 9h
Merged PRs (30d)
5

Description

**mapbox-gl-js version**: 2.3.1
**mapbox-gl-draw version**: 1.3.0

I am trying to style features based on its properties. All the features I want to render have a property called 'my_property' whose value is either null or an integer. I have an expression like this which I want to use in the paint properties -
`['case', ['==', ['get', 'user_my_property'], null], '#fff', '#000']`

Example -
I have 3 features- 1 MultiLineString feature(Feature 1) for which my_property is not null and 2 lineString features(Feature 2, Feature 3) with my_property null. These are the styles I'm applying -
```
{
id: 'gl-draw-line-inactive',
type: 'line',
filter: ['all',
['==', 'active', 'false'],
['==', '$type', 'LineString'],
['!=', 'mode', 'static'],
],
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': ['case', ['==', ['get', 'user_my_property'], null], '#fff', '#000'],
'line-width': 2,
},
},
{
id: 'gl-draw-line-active',
type: 'line',
filter: ['all',
['==', '$type', 'LineString'],
['==', 'active', 'true'],
],
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': ['case', ['==', ['get', 'user_my_property'], null], '#fff', '#000'],
'line-width': 2,
},
},
{
id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
type: 'circle',
filter: ['all',
['==', 'meta', 'vertex'],
['==', '$type', 'Point'],
['!=', 'mode', 'static'],
],
paint: {
'circle-radius': 12,
'circle-color': ['case', ['==', ['get', 'user_my_property'], null], '#fff', '#000'],
},
},
{
id: 'gl-draw-polygon-and-line-vertex-inactive',
type: 'circle',
filter: ['all',
['==', 'meta', 'vertex'],
['==', '$type', 'Point'],
['!=', 'mode', 'static'],
],
paint: {
'circle-radius': ['case', ['==', ['get', 'user_my_property'], null], 5, 10],
'circle-color': ['case', ['==', ['get', 'user_my_property'], null], '#fff', '#000'],
},
},
```

### Expected Behavior

When the features are not selected-
- Feature 1 should be black. Feature 2 and Feature 3 should be white

When the features are selected (simple_select or direct_select) and have vertices -
- Vertices of Feature 1 should be black and have radius 10
- Vertices of Feature 2 and Feature 3 should be white and have radius 5

### Actual Behavior

When the features are not selected-
- Feature 1 is black. Feature 2 and Feature 3 are white (works as expected)

When the features are selected (simple_select or direct_select) and have vertices -
- Vertices of Feature 1 are white and have radius 5 (not working as expected)
- Vertices of Feature 2 and Feature 3 are white and have radius 5 (works as expected)

(this is when features are not selected)
features

(this is when Feature 1 is in simple_select, the vertices are expected to be black and have radius 10)
Screen Shot 2021-07-13 at 5 33 42 PM

(this is when Feature 2 is in simple_select, the vertices are styled as expected)
Screen Shot 2021-07-13 at 5 34 16 PM

I think the problem is that the expression works for styles of type 'line' and 'fill' but not for type 'circle'.
Am I missing something?

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

Reproduce the reported styles with mapbox-gl-js 2.3.1 and mapbox-gl-draw 1.3.0, comparing the line and circle layers for features with null and integer my_property values. Check whether the circle vertex layers evaluate the same expression context as the line layers; done means selected Feature 1 vertices are black with radius 10 while null-valued vertices remain white with radius 5.

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.