Tengo un componente mapbox React.js implementado con DeckGl
Estoy tratando de hacer que mi Pathlayer cambie de color con cada clic del mouse (onClick), usando onClick , getColor , getFillColor . Como puede ver, ya tengo el mecanismo que detecta que se hace clic en un elemento elemento seleccionado que devuelve un objeto (con todas las informaciones del elemento) pero el cambio de color no parece funcionar.
const [selectedItem, setSelectedItem] = useState(""); const layers = [ new PathLayer({ id: "CanalisationData", data: reseauData, pickable: true, widthScale: 3, widthMinPixels: 2, autoHighlight: true, highlightColor: [255, 255, 255], getPath: (d) => d.GEOJSON.coordinates, onHover: (info) => setHoverCanalisations(info), onClick: (d) => setSelectedItem(d.object), getColor: d => findColor(d), getFillColor: d => selectedItem ? [255,0,0] : [119, 136, 153], updateTriggers: { getFillColor: [selectedItem] })],Mi idea es decirle al código:
if selectedItem ===> hacer que el elemento seleccionado se vea [255,0,0] color else ===> simplemente déjalo con el color básico .
Qué estoy haciendo mal ?
Editar: después de la respuesta de AdriSolid, modifiqué mi código PathLayer de esta manera, sabiendo que obtengo mi elemento seleccionado de un gancho useState setSelectedItem que está vinculado al OnClick justo arriba:
const [selectedItem, setSelectedItem] = useState(""); const layers = [ new PathLayer({ id: "CanalisationData", data: reseauData, pickable: true, widthScale: 3, widthMinPixels: 2, autoHighlight: true, highlightColor: [255, 255, 255], getPath: (d) => d.GEOJSON.coordinates, onHover: (info) => setHoverCanalisations(info), onClick: (d) => setSelectedItem(d.object), getColor: d => selectedItem?[255,200,0]: [119, 136, 153], updateTriggers: { getColor: {selectedItem} }, }),Parece que mi compañero no detecta que en realidad estoy seleccionando un elemento,
getFillColor: d => selectedItem ? [255,0,0] : [255, 255, 255],
No parece funcionar.
Aquí hay una imagen en mi mapa, el objetivo es hacer que las líneas grises cambien de color haciendo clic en cada una de ellas...
