mapbox / mapbox/mapbox-gl-js

Symbols with line placement not correctly projected near south pole when using globe and terrain

Open
#12,762 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

3d :triangular_ruler: 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**: v2.15.0

**browser**: latest Safari / Chrome / Brave, on Mobile and Desktop

### Steps to Trigger Behavior

1. Setup Mapbox with globe projection
2. Add terrain with some exaggeration, ex: 8.0 (larger exaggeration will show larger placement error)
3. Add a geojson line near the south pole (ex: -84 latitude) with a string property to use as a label
4. add a line style layer to draw the line
5. add a symbol layer that uses `'symbol-placement': 'line'` layout property
6. Move and pan around the south pole to visualize the label

### Link to Demonstration

https://jsfiddle.net/d0p9gkjt/

Screenshot 2023-06-15 at 6 44 59 PM

### Expected Behavior

The Label should be placed at the globe surface, along the line

### Actual Behavior

Multiple renderings of the label are present, distorted above the surface, the distortion and distance to expected placement intensify when the symbol is closer to the south pole and with larger terrain exaggeration

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 with the linked JSFiddle and reproduce the issue using globe projection, exaggerated terrain, and a line symbol near the south pole. Trace the globe, terrain, and symbol-placement rendering paths to identify the projection error; done means one label follows the line at the globe surface without duplicated or distorted renderings.

Written by the indexing model from the issue text.

Assessment

Tech stack
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.