mapbox / mapbox/mapbox-gl-js

3.9.0 Beta - Icon Anchor offset inconsistent

Open
#13,354 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs information :pray:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

mapbox-gl-js version:
3.9.0 beta

browser:
Chrome 131

Steps to Trigger Behavior

I have a sprite that was created with a built-in offset to make it easier to overlay on another icon on a map
the sprite looks like this in mapbox

image

but actually is framed like this

image

on my map using < 3.9.0 (currently 3.8.0) the overlaid icons render like this

image

but in 3.9.0, the icon-anchor seems to be offsetting and appears like this
image

the pertinent part of my code being

    mapInstance.addLayer({
      id: "pointer-layer",
      type: "symbol",
      source: "vehicles",
      layout: {
        "icon-image": "vehicle-arrow",
        "icon-rotate": [
          "get", "bearing"
        ],
        "icon-size": [
          "interpolate",
          ["linear"],
          ["zoom"],
          10,
          0.4,
          16,
          0.85,
          22,
          1.6,
        ],
        "icon-allow-overlap": true,
        "icon-anchor": "bottom",
        "icon-rotation-alignment": "map",
      },
    });
Expected Behavior

Unsure if the 3.8.0 behaviour is as intended and 3.9.0 is broken or vice-versa but this is a change.

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 by reproducing the reported symbol-layer behavior with the supplied addLayer configuration, comparing mapbox-gl-js 3.8.0 and 3.9.0 beta in Chrome 131. Investigate how icon-anchor "bottom" interacts with the built-in sprite offset, icon rotation, and zoom-dependent icon size. Done means determining which version is correct and confirming consistent overlay positioning.

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
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.