Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

312
Visualizações
Change color of Pathlayer on Click, MapBox DeckGl React.js

I have a mapbox React.js component implemented with DeckGl

I am trying to make my Pathlayer color changes on evenry mouse click (onClick), using onClick, getColor, getFillColor. As you see I have already the mechanism that detects that an item is clicked selectedItem which returns an object (with all item's infos) but the color change does not seem to work.

  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]
  })],

My idea is to say to the code :

if selectedItem ===> make the selected item look [255,0,0] color else ===> just let it with the basic color.

What Am I doing wrong ?

Edit : After AdriSolid's answer I have modified my PathLayer code like this, knowing that I get my selectedItem from a useState hook setSelectedItem that is linked to the OnClick just above :

  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}
  },
}), 

It seems like that my coe is not detecting that I am actually selecting an item,

getFillColor: d => selectedItem ? [255,0,0] : [255, 255, 255],

Doesn't seem to work.

Here is an image on my map, the objectif is to make the grays lines change color by clicking on each of them ...

SCREENSHOT OF MY MAP

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda