Mouse events do not trigger correctly on LineStrings that are offset with line-offset
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**: 1.8.1
**browser**: Chrome 80
### Steps to Trigger Behavior
1. Draw a LineString and offset it with line-offset by any amount (e.g. line-offset: 25)
2. Add a map click event and use map.queryRenderedFeatures() to query the features under the mouse pointer.
3. The mouse event will trigger inconsistently along the line. It seems at one end of the line the mouse event is in sync with the painted line and while moving along the line towards the other end it seems the line-offset is not respected any longer.
### Link to Demonstration
In the image below the dark green line is the LineString with a line-offset as drawn by mapbox. The yellow line (added via photoshop) represents where the mouse pointer needs to be to trigger a click or hover event on that green line.

### Expected Behavior
I expect that the mouse event triggers precisely when the mouse pointer is over the offset line. In my example image above I would expect both lines (the green and the yellow) to match up.
### Actual Behavior
The mouse event triggers inconsistently along the line.
It seems the features that get returned from queryRenderedFeatures are not the same features that are painted on a layer.
I also found these issues about text-offset and icon-offset, maybe this related?
https://github.com/mapbox/mapbox-gl-js/issues/6624
https://github.com/mapbox/mapbox-gl-js/issues/6075
https://github.com/mapbox/mapbox-gl-js/issues/4798
Also something to note: if I use line-translate instead of line-offset the mouse events trigger correctly.
Any help or advice is greatly appreciated. Thanks!
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 by reproducing the issue with a LineString using line-offset: 25, then compare the painted line with results from map.queryRenderedFeatures() during click or hover events. Check whether line-offset is consistently respected along the line, and compare the behavior with line-translate. Done means pointer events and queried features align with the visibly offset line.
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
- 45/100