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

310
Views
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
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!