3.9.0 Beta - Icon Anchor offset inconsistent

[david-buck]

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

but actually is framed like this

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

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

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.

[david-buck]

This difference is still present in 3.9.0 (non-beta) but not mentioned in the release notes.

[underoot]

Hey, @david-buck! Thank you for your report. Currently, we have inconsistency between client rasterization of vector icons and how we rasterize them in our sprites API. To quickly solve the problem with your style, you can do one of the following:

• Change icon-anchor to center to reflect the change in the client-side rendering behavior (your arrow position will be the same as you have in your original SVG)
• Move back to raster icons by passing spriteFormat: 'raster'

[david-buck]

Thanks, @underoot for the advice.

When I changed the anchor to center, it rendered in a third, new way. I've just updated my zoom and anchor rules to accommodate the difference and can update again later.