mapbox / mapbox-gl-draw

Draw tools for mapbox-gl-js
https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/
ISC License
953 stars 593 forks source link

Properties can't be used with set or add functions #982

Closed Dahkon closed 4 years ago

Dahkon commented 4 years ago

mapbox-gl-js version: 1.9.1 mapbox-gl-draw version: 1.0.9 (tried 1.20-beta1 too)

Steps to Trigger Behavior

  1. change style of MapboxDraw constructor to use properties as colors
  2. load an existing geojson with set or add functions (tried both)

Expected Behavior

the polygons should use colors defined in the feature properties (green with opacity 48%)

Actual Behavior

polygons stay black (or whatever style you use by default)

Here is the js fiddle : https://jsfiddle.net/Dahkon/jkmrxh56/

I'm aware the style is incomplete in my example, the point is to demonstrate what's missing here. Drawing functions will not work then. I tried changing properties name with no luck, I think something's missing in the mapbox draw api.

Thanks,

adrianababakanian commented 4 years ago

Thanks for opening this issue @Dahkon , the reason why your example is not working is expected is because your GeoJSON object property names are already prepended with user_, but Draw automaticlly prepends all user properties with user_ when the userProperties option is true, as shown in the source code here: https://github.com/mapbox/mapbox-gl-draw/blob/fb37f93d69e16c4c55eaa3fc58991ac70e25df93/src/feature_types/feature.js#L54-L58

So, when I update your style to:

'paint': {
  'fill-color': ['get', 'user_user_fillColor'],
  'fill-opacity': ['get', 'user_user_fillOpacity']
}

in the linked JSFiddle, the arrow renders green as expected.