maps - mapbox : fill-color expression depending of a value (not a color value) from the geojson

Question

how could I set the color of a shape depending of the value of one of its property in the geoJson ?

let's say I have this features collection :

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "district_type": "foo"
      },
      "geometry": {
        "coordinates": [...],
        "type": "Polygon"
      }
    },
    {
      "type": "Feature",
      "properties": {
        "district_type": "bar"
      },
      "geometry": {
        "coordinates": [...],
        "type": "Polygon"
      }
    }
  ]
}

And this array to match colors :

    var colors = {
      foo:'#111111',
      bar:'#222222',
    }

Now, I want to add a layer where the shapes have the color from my colors var, matching the distric_type property of the features.

map.addLayer({
  'id': 'districts-fill',
  'type': 'fill',
  'source': 'geo-districts',
  'paint': {
    'fill-color': ..., //which expression here ?
    'fill-opacity': 0.4
  }
});

Thanks !

question from:https://stackoverflow.com/questions/65915906/mapbox-fill-color-expression-depending-of-a-value-not-a-color-value-from-the

Answer 1

I found out... That's so nice !

map.addLayer({
  'id': 'districts-fill',
  'type': 'fill',
  'source': 'geo-districts',
  'paint': {
    'fill-color': [
      'match', ['get', 'district_type'],
      'foo', '#111111',
      'bar', '#222222',
      'white'// otherwise
   ],
   'fill-opacity': 0.4
  },