Using text-translate in symbol paint doesn't update collision boxes

[timsluis]

When adding a text-translate property to a layer the collision boxes won't move together with the labels. Also click and hovers are registered on the original place of the label before the translate.

maplibre-gl-js version: 1.15.2

browser: Chrome 91

Steps to Trigger Behavior

1. Add a symbol layer
2. Provide a text-translate on the paint property of a layer

Link to Demonstration

See: https://codepen.io/timsluis/pen/qBmRYQM

Expected Behavior

Collision boxes are updated.

Actual Behavior

Collision boxes are not updated and labels flow over each other.

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[xabbu42]

This bug still exists and the issue should stay open.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity.

[wipfli]

Wasn't there something related in the terrain3d pull request? @timsluis would you be interested in fixing this?

[mrflix]

The bug is still very much there: I'm using both text-translate and icon-translate to offset symbols so that the pin points to the exact location. I would like to use icon-offset and text-offset instead, but I can't because I use text-variable-anchor and text-radial-offset for dynamic label placement and that overwrites text-offset.

This is the result of using text-translate and icon-translate:

Outlined in 🟦 is the original position, 🟥 the translated position. The mouseover and click area is 🟦.
So only the bottom right of the visual area can be clicked 😟

[HarelM]

Reopening.
I think it's somewhat related to:

• Weird interaction between text-rotation-alignment and text-translate-anchor #3456

The collision box logic is not great in general...

[kubapelc]

I think I might have fixed this, see #3456

[mrflix]

@kubapelc thanks for looking into this and sharing your work. I tested it with http://kvaleya.gitlab.io/maplibre/aligndemo2/maplibre-gl-dev.js. Unfortunately the labels all move into the top left corner of the canvas:

These are my layout and paint settings: (I removed some text formatting and styling that I think doesn't influence the position – e.g. text-size, text-font, text-field, text-opacity)

{
  layout: {
    'text-variable-anchor': ['left', 'right', 'bottom', 'top'],
    'text-radial-offset': 1.25,
    'text-optional': true,
    'text-overlap': 'cooperative'
  },
  paint: {
    'text-translate': ["interpolate", ["linear", 1],
      ["zoom"], 8, ["literal", [-2, -1.7]], 17, ["literal", [-20, -17]],
    ],
  }
}

[kubapelc]

@mrflix thank you for the layout settings, I'll use them for testing. It seems that variable anchors don't work at all in my branch. I'll try to fix it. Symbols without variable anchors should work though.

[kubapelc]

@mrflix Hi, is the bug still present if you use the maplibre build from https://kvaleya.gitlab.io/maplibre/aligndemo3/combineddemo.html ? I had a bug in text-variable-anchor handling that was causing the symbols to be placed in the top left corner, it should now be fixed.

[mrflix]

@kubapelc the click areas seem to be correct now but the text is placed incorrectly:

How it should be placed: (live version)

[kubapelc]

@mrflix I fixed another bug with text-variable-anchor + text-translate interaction: maplibre build. This should fix the wrong placement. But I think text-variable-anchor + text-translate + text-pitch-alignment: 'map' will still behave in weird ways, but that doesn't seem to be used in your map.

[kubapelc]

I've (hopefully) finished adapting symbols for globe, see the PR mention, and now I'm fairly confident that most reasonable combinations of text, icon, text/icon-translate, text/icon-translate-anchor, text-variable-anchor, text-pitch-alignment, text-rotation-alignment should work, along with proper collisions and click areas (but I can't rule out some broken edgecases remaining). The PR includes bugfixes for symbols even for the regular mercator projection. If you want to try it out, see here:

Globe demo

MapLibre build used in globe demo (different build than what is linked in the previous comment).