Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

229
Views
Cómo pintar el resultado de un filtro en MAPBOX de un color diferente

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 } });
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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 .

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!