Aplicar estilo a círculos con una propiedad basada en datos
cuerpo { margen: 0; relleno: 0; }
#map { posición: absoluta; arriba: 0; abajo: 0; ancho: 100%; }

mapboxgl.accessToken = ' ';
var mapa = nuevo mapboxgl.Map({
contenedor: 'mapa',
estilo: 'mapbox://styles/mapbox/light-v10',
zoom: 12,
centro: [-122.447303, 37.753574]
});

map.on('cargar', función() {
/* Característica de muestra del conjunto de mosaicos `examples.8fgz4egr`:
{
"tipo": "Característica",
"propiedades": {
"etnicidad": "blanco"
},
"geometría": {
"tipo": "Punto",
"coordenadas": [-122.447303, 37.753574]
}
}
*/
map.addSource('etnia', {
tipo: 'vector',
URL: 'mapbox://ejemplos.8fgz4egr'
});
mapa.addLayer({
'id': 'población',
'tipo': 'círculo',
'fuente': 'etnicidad',
'capa-fuente': 'sf2010',
'pintar': {
// agranda los círculos a medida que el usuario hace zoom de z12 a z22
'radio-círculo': {
'base': 1,75,
'para': [[12, 2], [22, 180]]
},
// colorea los círculos por etnia, usando una expresión de coincidencia
// https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
'color-círculo': [
'fósforo',
['obtener', 'etnia'],
'Blanco',
'#fbb03b',
'Negro',
'#223b53',
'Hispano',
'#e55e5e',
'Asiático',
'#3bb2d0',
/* otro */ '#ccc'
]
}
});
});