Data-driven styling for fill layers in Mapbox GL JS
The latest Mapbox GL JS release (v0.19.0) includes data-driven styling support for fill-color and fill-outline-color. Data-driven styling opens up advanced data vizualization and map design techniques.
Below is a choropleth map that uses fill-color to visualize median income in every county in the United States. Notice how smoothly the map moves, how the map responds visually to mouse hovering, and how the sidebar is populated with map data.
The data visualization uses property functions to assign a fill-color value to an area based on a particular data value:
'fill-color': {
property: 'median-income',
stops: [[20000, '#fff'], [120000, '#f00']]
}
Check out this Mapbox GL JS example to see property functions for fill-color in action.
Make a map!
We would love to see the maps you’re building with data-driven styling! If you have something to share, tweet at @Mapbox.
