I am working with the mapbox-gl-js library I have some filters of a dot layer but one of these filters would like to paint in another color. Is this possible? I already checked the documentation for mapbox-gl-js but I can't find anything concrete. Specifically, I would like to paint in another color when I filter the "Urbana" option.
This is how I have created my filter
document
.getElementById("filters")
.addEventListener("change", function (e) {
var zona = e.target.value;
map.setLayoutProperty('pnud', 'visibility', 'none' );
map.setLayoutProperty('cluster-count', 'visibility', 'none' );
map.setLayoutProperty('unclustered-point', 'visibility', 'none' );
map.setLayoutProperty('participacion_75', 'visibility', 'none' );
map.setLayoutProperty('filtros', 'visibility', 'visible' );
// update the map filter
if (zona === "all") {
filterZona = ["!=", ["string", ["get", "zona"]], "placeholder"];
} else if (zona === "rural") {
filterZona = ["match", ["get", "zona"], ["Rural"], true, false];
} else if (zona === "urbana") {
filterZona = ["match", ["get", "zona"], ["Urbana"], true, false];
} else {
console.log("error");
}
map.setFilter(["filtros"], [
"all",
filterZona,
filterRegion,
filterComp,
filterCat1,
]);
});
And so I create the layer
map.addLayer({
id: "filtros",
type: "circle",
source: 'sin_cluster',
filter: ['has', 'point_count'],
paint: {
'circle-color': '#03047D',
'circle-radius': 7
}
});
You can achieve that with circle-color which is a paint property.
In the example below, we're mapping colours to the ethnicity property from the geojson. Each ethnicity value gets the colour below it. Notice in the end their are 2 consecutive colours. The one directly under "Asian" belongs to the "Asian" category, while the last one simply specifies a colour for other ethnicities that may be present in the data.
'circle-color': [
'match',
['get', 'ethnicity'],
'White',
'#fbb03b',
'Black',
'#223b53',
'Hispanic',
'#e55e5e',
'Asian',
'#3bb2d0',
/* other */ '#ccc'
]
Find the documentation here.
In your example you'll be able to use ["get", "zona"] to specify a color for your Urbana's.