Estoy trabajando con la biblioteca mapbox-gl-js. Tengo algunos filtros de una capa de puntos, pero a uno de estos filtros le gustaría pintar en otro color. es posible? Ya revisé la documentación de mapbox-gl-js pero no puedo encontrar nada concreto. Específicamente, me gustaría pintar en otro color cuando filtro la opción "Urbana".
Así es como he creado mi filtro.
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, ]); });
Y así creo la capa.
map.addLayer({ id: "filtros", type: "circle", source: 'sin_cluster', filter: ['has', 'point_count'], paint: { 'circle-color': '#03047D', 'circle-radius': 7 } });
Puede lograrlo con circle-color
que es una propiedad de la paint
.
En el siguiente ejemplo, estamos asignando colores a la propiedad de ethnicity
de geojson
. Cada valor de etnicidad obtiene el color debajo de él. Fíjate que al final son 2 colores consecutivos. El que está directamente debajo de "Asiático" pertenece a la categoría "Asiático", mientras que el último simplemente especifica un color para otras etnias que pueden estar presentes en los datos.
'circle-color': [ 'match', ['get', 'ethnicity'], 'White', '#fbb03b', 'Black', '#223b53', 'Hispanic', '#e55e5e', 'Asian', '#3bb2d0', /* other */ '#ccc' ]
Encuentre la documentación aquí .
En su ejemplo, podrá usar ["get", "zona"]
para especificar un color para su Urbana
.