Evaluate pixel color for pixel perfect picking of symbols in queryRenderedFeatures
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: V.2.2.1
**browser**: Chrome 89
### Steps to Trigger Behavior
1. Create a map with a custom marker-image, this can be SVG or PNG
2. Click around the marker events will go off without being on the marker
This results in click events on the wrong markers because if markers are close to each other they stack on top of each other.
A more basic example of the problem is this image:
**Example with SVG + map.showCollisionBoxes = true; & 'icon-padding': 0,**
I've tested this with both PNG images as markers as SVG.
### Link to Demonstration
https://output.jsbin.com/fudemut/
### Expected Behavior
When the mouse is not on the marker I don't want the click event to fire.
### Actual Behavior
Even if I'm not on the marker the marker catches a click event. It seems that mapbox renders a square around each marker with a big offset. Even if the marker is transparent (PNG/svg)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the JSBin reproduction and the queryRenderedFeatures behavior for closely stacked custom SVG or PNG markers. Trace how symbol hit areas are evaluated, then verify that clicks outside the visible marker pixels no longer trigger the marker; use the reproduction to confirm the expected behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100