mapbox / mapbox/mapbox-gl-js

Symbols collision boxes have a wrong position when using symbol-placement:line and icon-offset

Open
#11,541 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

mapbox-gl-js version: 2.7

browser: chrome 98

Steps to Trigger Behavior
map.addLayer({
   'type': 'symbol',
   'layout': {
      'icon-offset': [0, 32],
      'symbol-placement': "line",
   },
});
Link to Demonstration

https://codepen.io/ChristAsselin/pen/podVRGr

Expected Behavior

The collision box should be located at the same position as the symbol.

Actual Behavior

Depending of the map rotation, the collision box isn't located at the same position as the symbol.
As a result, I have some missing symbols because it collide when it should not.
When rotating the map, the symbol's collision box appears to rotate around the symbol's initial point (before the applied offset).
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

Reproduce the issue using the map.addLayer configuration and the linked CodePen, rotating the map with symbol-placement set to line and icon-offset applied. Trace the symbol placement and collision-box handling, then verify that the collision box remains aligned with the offset symbol at different rotations and that symbols are no longer incorrectly hidden.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.