visgl / visgl/deck.gl

[Feat] Add enhanced highlight options

Open
#9,852 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

feature
Dominant language
TypeScript
Stars
14.6k
Forks
2.3k
Avg merge
2d 9h
Merged PRs (30d)
42

Description

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:
Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating deck.gl's existing highlightColor implementation and the point, line, and polygon rendering APIs it uses. Compare the proposed fill, outline, color, width, scale, units, and minPixels options, then define the behavior and tests or examples needed to show that selected and hovered polygons support fill, outline, or both.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.