Collision boxes don't account for symbol-placement:point/rotation-alignment: map

[ChrisLoer]

As far as I can tell this has always been the case:

Labels with rotation-alignment: map are usually more likely to use symbol-placement: line, and they're mostly fine because collision detection is done with a series of small boxes (icons with lopsided aspect ratios might be an exception here).

This would be straightforward to fix if we moved to an approach of global collision detection using current camera parameters (discussed somewhat in #4704).

/cc @ansis

[ChrisLoer]

/cc @mollymerp

[ChrisLoer]

This would be straightforward to fix if we moved to an approach of global collision detection using current camera parameters (discussed somewhat in #4704).

It turns out not to be totally straightforward to fix with global collision detection because we still don't have an easy/fast way to represent rectangular geometries that aren't viewport-axis-aligned.

For text line labels, we've started representing their geometry with a series of circles (which have the advantage of keeping the same shape during rotation operations) -- it's possible we could solve this problem by breaking map-aligned rectangles (whether for text or icons) into a series of circles. However, we're not tackling that problem yet in the global collision PR #5150).

/cc @nickidlugash

[ChrisLoer]

When we fix this, we should also switch icons with symbol-placement: line to use the same behavior (with rotation alignment based on the tangent to the line). We attempted to do that in the past with #1981, but removed that behavior as part of #5150.

[ChrisLoer]

Issue #6075 got me experimenting with using the viewport-aligned envelope of the map-aligned collision box. It's pretty easy to do at collision detection time in placeCollisionBox:

        if (rotate) {
            const tl = new Point(tlX, tlY);
            const tr = new Point(brX, tlY);
            const bl = new Point(tlX, brY);
            const br = new Point(brX, brY);
            const center = new Point((brX + tlX) / 2, (brY + tlY) / 2);

            tl._rotateAround(rotate, center);
            tr._rotateAround(rotate, center);
            bl._rotateAround(rotate, center);
            br._rotateAround(rotate, center);

            // Collision features require an "on-axis" geometry,
            // so take the envelope of the rotated geometry
            // (may be quite large for wide labels rotated 45 degrees)
            tlX = Math.min(tl.x, tr.x, bl.x, br.x);
            brX = Math.max(tl.x, tr.x, bl.x, br.x);
            tlY = Math.min(tl.y, tr.y, bl.y, br.y);
            brY = Math.max(tl.y, tr.y, bl.y, br.y);
        }

Implementing the right collision debug behavior is more annoying, however, in part because icons and text both use the same buffers to store debug collision boxes, but icon-rotation-alignment and text-rotation-alignment could have different values.

[smerchek]

I just ran into this issue. We use a symbol rotated in this way as a hover/click target and it's very disorienting for users once the map is rotated, because they can only click on a small part of the symbol (since the rest of the click target is below the symbol).

Curious if there are any workarounds or fix in sight?

I thought maybe I could simulate a point placement but with a small LineString since symbol-placement=line works with map rotation, but it doesn't really give me the precision I need (and there is also a bug preventing this workaround since the symbol will easily collide #9715).