Change color of Pathlayer on Click, MapBox DeckGl React.js

471 Views Asked by At

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

0

There are 0 best solutions below