Style circles with a data-driven property
Creating a visualization with a data expression for circle-color
.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Style circles with a data-driven property</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js"></script><link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; };</style></head><body><div id="map"></div><script> mapboxgl.accessToken = '<your access token here>';var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/light-v10',zoom: 12,center: [-122.447303, 37.753574]}); map.on('load', function() {/* Sample feature from the `examples.8fgz4egr` tileset:{"type": "Feature","properties": {"ethnicity": "White"},"geometry": {"type": "Point","coordinates": [ -122.447303, 37.753574 ]}}*/map.addLayer({'id': 'population','type': 'circle','source': {type: 'vector',url: 'mapbox://examples.8fgz4egr'},'source-layer': 'sf2010','paint': {// make circles larger as the user zooms from z12 to z22'circle-radius': {'base': 1.75,'stops': [[12, 2],[22, 180]]},// color circles by ethnicity, using a match expression// https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match'circle-color': ['match',['get', 'ethnicity'],'White','#fbb03b','Black','#223b53','Hispanic','#e55e5e','Asian','#3bb2d0',/* other */ '#ccc']}});});</script> </body></html>
Was this example helpful?