best way to highlight onHover object on map?

[tamir-jether]

I want to make objects on the map highlighted when the user hovers on them. I was wondering what's the best way to do so when using react + deck.gl.

Right now I'm using react + redux, and in the state object, I'm saving the data of the onHover object (which have a unique ID). Every time I render my Layer, on the getFillColor function for example, I check if my current object ID is the same ID of the currently onHover object I have in my global state. If it is I give it a different color.

Sometimes it's slow since I re-color everything every time I hover on an object.

My question is this - is that the "best way" to handle highlighting, or is there a different better way to do so?

[AdriSolid]

You can use the following props to speed it up:

pickable: true,
autoHighlight: true,
highlightColor: [0, 255, 0]

[AdriSolid]

That's not broken, autoHighlight logic is made to highlight features when the mouse hovers any feature. If you want to hold the highlighted color after the event, you will need to implement some other approach then.

[tamir-jether]

i see, thanks!

on a similar subject (dont want to open a new thread).
is it somehow possible to control which object is being highlighted from the code?
e.g - when the user clicks a button, i want to navigate to a specific object and highlight it

[AdriSolid]

I think you are looking for highlightedObjectIndex prop, check this out

[tamir-jether]

thanks!
to support something like that, i will keep the index of my current "zoomed" object in a redux state, and use that index in the highlightedObjectIndex. technically, instead of using autoHighLight, i could just change the onHover code to set the current "zoomed" index in my global state to the object my mouse is hovering, and it would work, right? (seems like that way it wouldnt flicker like with the autoHighLight)

[AdriSolid]

Indeed should work :D