mapbox change circle color dynamically when changing property value

Question

I am trying to make mapbox layer to change the color of circles when I change the value a property. But the color of the circle didn`t change.

I use mapbox-gl-draw

Here the jsbin : https://jsbin.com/lojuwak/edit?html,output

Here the style of the layer with the expressions in circle-color to change color according to the value of

{
  'id': 'gl-draw-point-inactive',
  'type': 'circle',
  'filter': ['all',
    ['==', 'active', 'false'],
    ['==', '$type', 'Point'],
    ['==', 'meta', 'feature'],
    ['!=', 'mode', 'static']
  ],
  'paint': {
    'circle-radius': 12,
    'circle-blur': 0.5,      
    'circle-color': ["case",
        ['!',['has', 'isProcessed']], '#FF0000',
        '#214AED'
      ]
  }

My data are geojson that had a property 'isProcessed' defined of not.

This part is working fine when I initially load the geojson.

The problem raised when I change add prroperty to the selected feature

I add the property 'isProcessed' of the feature by doing :

selectedFeature = this.draw.getSelected();
selectedFeature.features[0].properties.isProcessed = true;
this.draw.add(selectedFeature);

But the color of the updated feature do not change.

Whan step did I miss ?

Thanks

Answer 1

If opts.userProperties is set to true the properties of a feature will also be available for styling. All user properties are prefixed with user_ to make sure they do not clash with the Draw properties.

[ https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#styling-draw ]

So you need to add a user_ prefix to the property in styles:

'paint': {
    'circle-radius': 12,
    'circle-blur': 0.5,      
    'circle-color': ["case",
        ['!',['has', 'user_isProcessed']], '#FF0000',
        '#214AED'
      ]
}

[ https://jsfiddle.net/c9kdf51t/ ]