mapbox / mapbox/mapbox-gl-js

Markers moves to incorrect positions when using a "globe" projection with a non-integer zoom level

Open
#12,592 8 comments 2 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

Markers are moving out-of-position when dragging the map when using a "globe" projection with a non-integer zoom level (either set programmatically or when a user is zooming in / zooming out)

mapbox-gl-js version: 2.13.0

browser: Chrome 110.0.5481.178

Steps to Trigger Behavior
  1. Use mapbox://styles/mapbox/streets-v12 (or the globe projection mode) with a zoom: 5.5
  2. Set a marker somewhere (like on [-0.481707, 48.916776])
  3. Move the map far to the left and the right, and see the marker moving in wrong positions
Link to Demonstration

Simple repro: https://codepen.io/benoit42/pen/yLxVMMo

Expected Behavior

Marker stays at a correct position when dragging the map

Actual Behavior

Marker moves to incorrect positions when dragging the map from left to right:
2023-02-27 00_16_27-Repro Mapbox globe markers issues when moving map
2023-02-27 00_16_19-Repro Mapbox globe markers issues when moving map

Workaround

Not great, but setting the projection mode to mercator fixes the issue:

    let map = new mapboxgl.Map({
     /* ... */
      projection: { name: "mercator" },
    });

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

Run the linked CodePen reproduction with the streets-v12 style, globe projection, and zoom 5.5, then drag the map left and right while observing the marker. Compare the behavior with the documented mercator workaround; done means the marker remains correctly positioned during dragging at non-integer zoom levels.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.