3.9.0 Beta - Icon Anchor offset inconsistent

[david-buck]

trafficstars

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.

[pkeeley]

I'm seeing a similar thing with misplaced symbols. I have the following snippet of code that adds a point to the map. In 3.8.0 it displays correctly as shown in the first screen print but in >= 3.9.0 it displays too high as shown in the second screen print.

` self.map.addSource('point', { "type": "geojson", "data": self.geojson });

  self.map.addLayer({
    "id": "point",
    "type": "symbol",
    "source": "point",
    "layout": {
      "icon-anchor": "center",
      "icon-image": "cemetery",
      "icon-size": 0.25,
      "icon-allow-overlap": true,
      "icon-offset": [0, -60]
    },
    "paint": {
      "icon-opacity": 0.80
    }
  });`

[underoot]

Hey, @pkeeley! Maybe it is some another issue. Could you share the source of your marker? How is it rendered in Studio?

[pkeeley]

Here is the source of the marker. It was uploaded to Studio with several other similar ones. I'm not sure what you mean by "how is it rendered in Studio". I uploaded this marker and some similar ones as images.

[pkeeley]

Any updates on this?

[underoot]

@pkeeley, I am unable to reproduce it with the marker that you provided. Worth pointing out that your SVG is not the case for the issue which is described here. We align to center the content of the icon before, but your particular one looks like it covers whole viewBox and we didn't shift it somehow. Maybe you could provide the style that you use, or its copy where you can reproduce the described behaviour? Thank you!