[Feat] Add enhanced highlight options

[rory-orennia]

Target Use Case

It would be great if there was some more options for the highlighting of features on your map. For example we'd like to outline the selected or hovered polygon rather than just fill it in with a different color. We're currently working around this by making a new "selected-item" layer every time you select something, but I think everyone would benefit from it being built into deck.gl instead

Proposal

We currently have highlightColor and that's your only option for stying a highlight. I think there's a couple options we could add:

1. Simply add a new highlightStyle: "fill" | "outline" | "both" option, and then a secondary option like highlightOutlineWidth. hightlightStyle probably doesn't do anything on lines, but you could still increase the size of the outline width to get your highlighted line to pop out more
2. Add full customization similar to how the normal rendering of points/lines/polygons works:
   2.1 - add highlightFillColor and highlightOutlineColor
   2.2 - "style" is determined by if these are set or not. So you would just render the outline if that was set, or just the fill if that was set. And then if both are there you can make a nice highlight where the outline is 100% opacity and the fill is 30%
   2.3 - add highlightOutlineWidth, maybe all the scale, units, minPixels, etc from Line properties

With that 2nd option you can have something similar to this:

[felixpalmer]

Nice idea, it is true that the current autohighlighting is a bit ugly. Some thoughts:

PolygonLayer

PolygonLayer is CompositeLayer, so I think you could also achieve this now by using _subLayerProps by specifying a different highlight color for each subLayer.

ScatterplotLayer

This is an example of a layer which accepts both a fill and stroke color, but draws them both in the same pass.

New API/props

Users will just want to be able to set the highlight stroke/fill color in a unified way and not think about how the layer actually does the drawing. I don't think we should go overboard adding many new props, as autohighlighting is a lightweight feature to quickly implement highlighting - for more complex visuals a custom layer should be rendered on hover.

I would propose adding these props:

• highlightColor (already exists, but will now also accept null) (Color | Function | null, optional)
• highlightLineColor (Color | Function | null, optional)
• highlightLineWidthScale (number, optional)

By allowing null for the colors, it is possible to specify which form of highlighting should be enabled/disabled. I don't think is necessary to a highlightStyle prop then.

Blending

Also see #9291

@Pessimistress @ibgreen @chrisgervang any thoughts?

[tim-salabim]

May I add that sometimes it is also very nice to adjust transparency on hover to highlight things. In general, I guess it would be great to be able to update all styling props via onHover. Leaflet allows this quite conveniently, IIRC.