Today we’re introducing data-driven styling capabilities in Mapbox GL JS with property functions. Property functions allow you to style map features based on their properties. As of Mapbox GL JS v0.17.0, you can use property functions with the circle-radius and circle-color style properties. Over the coming months, we plan to roll out support for property functions across all style properties, Mapbox Mobile, and Mapbox Studio.
The map below uses property functions for circle-style and circle-color to visualize the volume of pedestrian foot traffic at intersections in Toronto:
The variable size and color of the circles add a dimension to the data. You can see how neighborhood centers tend to have higher foot traffic than the surrounding intersections. With maps like this, retailers can better decide where to put their next store and urban planners can assess what areas of their cities draw the most crowds.
Style based on zoom
You may already be familiar with zoom functions which allow the appearance of a map feature to be a function of the map’s zoom. The pedestrian foot traffic map uses zoom functions to create the illusion of depth and control data density. Circles have a radius of 1px at zoom level 8, a radius of 6px at zoom level 11, and a radius of 40px at zoom level 16.
'circle-radius':{stops:[[8,1],[11,6],[16,40]]}
Style based on a property
The pedestrian foot traffic map uses property functions to make the color of each circle a function of its sqrt property. When sqrt is 0 or less, the circle is colored #f1f075. When sqrt is 250 or more, the circle is colored #e55e5e. When sqrt is between 0 and 250, the circle color is proportionally interpolated between those two colors.
'circle-color':{property:'sqrt',stops:[[0,'#f1f075'],[250,'#e55e5e']]}
Style based on zoom and a property
You can style based on both zoom and data property in the same function.
'circle-radius':{property:'sqrt',stops:[[{zoom:8,value:0},0],[{zoom:8,value:250},1],[{zoom:11,value:0},0],[{zoom:11,value:250},6],[{zoom:16,value:0},0],[{zoom:16,value:250},40]]}
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.