mapbox gl data driven styles (choropleth maps)

Question

I'm trying to create a choropleth map using mapbox-gl. In the example choropleth maps, it looks like they set the feature's paint fill colour based on the properties of the feature. Is there a way to set the colour by accessing a map?

ie. I have tiles each with a unique id in the feature property called id. I also have a json which maps each id with a value and would like to access those values to set the colour.

Is this possible? or am i limited to only being able to access values in the feature properties?

Answer 1

I'm not entirely sure if I understood your question correctly. But I think what you are trying to achieve can be done with expressions:

const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        id: 'foo'
      },
      geometry: {
        /* */
      }
    }
  ]
};

const values = {
  foo: 'green',
  bar: 'red',
  baz: 'blue'
};

map.addLayer({
  // ...
  paint: {
    'fill-color': [
      [
        'get',
        // get the id property and use it as a key into "values"
        ['get', 'id'],
        values
      ]
    ]
  }
});

See the get expression: https://www.mapbox.com/mapbox-gl-js/style-spec#expressions-get