Deck.gl: Increase dot radius size on hover

[ibesora]

Is there a way to increase the radius size of the dots in the ScatterPlotLayer on hover?
I suppose I could set a selected property of the picked object to true and recreate the layer changing the radius size via the getRadius property when the object has the selected property set to true but that seems like an overkill.

MapboxGL has a ["feature-state", "hover"] conditional rendering property that can be used to do exactly this.

[tgorkin]

I think this in line with the "overkill" solution you described, but the recommended way to do this would be to use a combination of getRadius and onHover. You would need to keep track of the data element that was last hovered, and check against that in a getRadius function.

If there's a nicer API inspired by MapboxGL, you could flush that out into a feature suggestion for discussion. If you were interested in digging into the internals of deck.gl and contributing such a feature, I think this could be implemented as a generalization of autoHighlight.

[Pessimistress]

A Codepen showing this working with custom shader injection:

https://codepen.io/Pessimistress/pen/ExayRQw

You can read about the shader hooks in https://deck.gl/#/documentation/developer-guide/writing-custom-layers/writing-shaders. This approach relies on a change in luma.gl's 8.1.0-alpha.4.

[dquang-tran]

@Pessimistress The scatterplot highlight shape seems to be a bit pixelated and the edges are a bit cut off. Same issue is visible in your example. Do you have any advices on how to fix this?

[Pessimistress]

@dquang-tran You can shrink the non-picked objects instead of enlarging the picked object (see updated pen). The size difference can then be compensated with radiusScale.