MapBox GL - Render GeoJson Thematically Based on Data in Client

Question

I have a geoJson layer showing U.S. states, with only an ID, and no other properties.

I also have a local array of data in memory with lots of properties about those states: things like population, acres of farmland, sales tax rate etc. One of the properties is the ID that's in the geoJson layer. So I should be able to join the local array with features in the geoJson layer.

I would like to be able to thematically style the states based on any of those properties, allowing the user the ability to choose the property. All the examples I have seen for thematic styling of GeoJson layers in MapBox require (1) that the properties exist in the geoJson itself, and (2) that you define the property and styling rules in advance (I'm not sure if there's a way to change this at a later point).

In other map libraries, I think including Leaflet, you can define a paint function, and pass in the feature. Is there anything like this in MapBox GL?

Thanks.

Answer 1

You can make your life easier by joining the geojson data with your "properties" data into a single geojson feature collection.

Once you got that going, you can use map.setPaintProperty(layerId, ...) to update the layer style based on user interaction: https://docs.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty

As of the documentation:

value(any) The value of the paint property to set. Must be of a type appropriate for the property, as defined in the Mapbox Style Specification .

You can set anything the style spec supports, even interpolated data-driven properties, wich means you can set & update any property of the layer you would be able to configure when newly adding that layer. Sure, you can not set multiple paint/layout properties with a single call, but that is something you can easily abstract away yourself.

This might be a bit far fetched, but assuming what you call a "theme" is just a collection of paint properties and values which you derived from an user interaction. You can just encode your "theme" as a valid mapbox style and use map.setStyle(...) to efficiently change multiple properties with a single call. Remeber setStyle() can receive a a style url but also a complete style object.