nuevo en mapbox y disfrutando de mi viaje hasta ahora.
Tengo curiosidad por saber si hay una forma de hacer referencia a una variable de javascript dentro de una expresión.
Estoy tratando de hacer referencia esencialmente a algunos valores de color que son dinámicos. Sin embargo, no he tenido suerte. Revisé los documentos de MB pero no he podido encontrar información u opciones que coincidan con mi acertijo. Gracias por cualquier información, consejos.
const mbFillColorExpressionValue = Object.keys(fills) .map(fips => { return `"${fips}","${fills[fips].fill}"`; }) .concat('"white"') .toString(); (mbFillColorExpressionValue returns a string "18089","#839EBE","18091","#839EBE","18127","#839EBE","white") this.map.setPaintProperty('counties-towns', 'fill-color', [ 'match', ['get', 'GEOID'], geoids, mbFillColorExpressionValue ]);Después de leer los documentos de Mapbox , creo que el resultado final debería parecerse al siguiente código. Cada GEOID se empareja con su fill correspondiente. Y el color white como alternativa a la última línea.
this.map.setPaintProperty('counties-towns', 'fill-color', [ 'match', ['get', 'GEOID'], '18089', '#839EBE', '18091', '#839EBE', '18127', '#839EBE', 'white' ]); Para llegar a ese resultado, primero tenemos que cambiar el método map a flatMap . Esto se debe a que no podemos agregar ninguna clave al mapear una matriz, pero podemos devolver una matriz para cada elemento y aplanarla para convertir todo en una sola matriz.
const mbFillColorExpressionValue = Object.keys(fills).flatMap(fips => [fips, fills[fips].fill]); mbFillColorExpressionValue.push('white'); Desde aquí podemos usar la sintaxis extendida ... para colocar el contenido de la matriz mbFillColorExpressionValue en la expresión.
this.map.setPaintProperty('counties-towns', 'fill-color', [ 'match', ['get', 'GEOID'], ...mbFillColorExpressionValue ]);