Style circles with a data-driven property
This example adds circles to a map to represent individual responses to the 2010 U.S. Census, and then sets the color of each circle according to the ethnicity property for each point.
The point features in the vector tileset source each have an ethnicity property, as shown in this sample feature:
{
"type": "Feature",
"properties": {
"ethnicity": "Asian"
},
"geometry": {
"type": "Point",
"coordinates": [-122.447303, 37.753574]
}
}
The example uses a match data expression to set the circle-color paint property for each point, using #fbb03b for White, #223b53 for Black, #e55e5e for Hispanic, #3bb2d0 for Asian, and #ccc for any other value.
This example uses 2010 U.S. Census data uploaded to Mapbox as a vector tileset. This data is not updated or maintained and should not be used in production applications. If you're interested in creating an application that uses U.S. Census data, you can download a Shapefile from census.gov's data portal and upload it from your Mapbox Studio Tilesets page.
<!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">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.9.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/light-v11',
zoom: 12,
center: [-122.4473, 37.7535]
});
map.on('load', () => {
// Add the vector tileset as a source.
map.addSource('ethnicity', {
type: 'vector',
url: 'mapbox://examples.8fgz4egr'
});
map.addLayer(
{
'id': 'population',
'type': 'circle',
'source': 'ethnicity',
'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.
'circle-color': [
'match',
['get', 'ethnicity'],
'White',
'#fbb03b',
'Black',
'#223b53',
'Hispanic',
'#e55e5e',
'Asian',
'#3bb2d0',
/* other */ '#ccc'
]
}
},
// Place polygons under labels, roads and buildings.
'aeroway-polygon'
);
});
</script>
</body>
</html>
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/light-v11',
zoom: 12,
center: [-122.4473, 37.7535]
});
mapRef.current.on('load', () => {
mapRef.current.addSource('ethnicity', {
type: 'vector',
url: 'mapbox://examples.8fgz4egr'
});
mapRef.current.addLayer(
{
id: 'population',
type: 'circle',
source: 'ethnicity',
'source-layer': 'sf2010',
paint: {
'circle-radius': {
base: 1.75,
stops: [
[12, 2],
[22, 180]
]
},
'circle-color': [
'match',
['get', 'ethnicity'],
'White',
'#fbb03b',
'Black',
'#223b53',
'Hispanic',
'#e55e5e',
'Asian',
'#3bb2d0',
'#ccc'
]
}
},
'aeroway-polygon'
);
});
}, []);
return <div id="map" ref={mapContainerRef} style={{ height: '100%' }}></div>;
};
export default MapboxExample;
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.