[bug] map.queryRenderedFeatures() doesn't account for {text,icon}-offset or {text,icon}-rotate

[mike-marcacci]

NOTE: this bug cannot be reproduced in mapbox-gl-js 0.44.0, because it is blocked by this other, more serious bug.

Using v0.43.0, map.queryRenderedFeatures() doesn't account for the icon-rotate layout property of symbol layers, and returns runs as if it were set to 0.

VIEW SCREENCAST

[anandthakker]

The actual issue here was due to icon-offset -- see #6135 (comment)

[mike-marcacci]

Hi @anandthakker, thanks for working on this. Unfortunately, this isn't fixed in 0.44.1. I've made a fiddle that shows the issue: https://jsfiddle.net/xzdsxdd9/22/

Note that the cursor should be set to "pointer" when hovered over the wrench, and "" otherwise. The wrench is rotated 90 degrees, but the "hover" zone doesn't consider the rotation.

[anandthakker]

Oof, thanks @mike-marcacci. Reopening for the icon-rotate case.

[anandthakker]

Per chat with @ChrisLoer, the best way to fix this is most likely to use a covering of circles (like we do for line-placed labels) rather than a box.

[santinogue]

@anandthakker @mike-marcacci is there a workaround for this?

[mike-marcacci]

@santinogue there isn't one that I've found. Fortunately, while this bug is live for us, we're in a "closed beta" of sorts, so we've been able to explain how to "click above the handle" to the limited users... but it's definitely a bad experience :-/

Depending on exactly what you're trying to accomplish, you might consider arranging a set of small transparent icons where you would expect the visual area to be, and use them as click/mouse targets...

[mike-marcacci]

Hey @anandthakker! I just wanted to check up on this – is this guy planned for an upcoming release by chance? If not, I'd be happy to work on it if you could elaborate on your "covering of circles" strategy.

[anandthakker]

Hey @mike-marcacci - nope, this isn't specifically planned for a release yet. The strategy @ChrisLoer and I had in mind was to use "collision circles" to represent rotated symbol features, rather than viewport-aligned rectangles.

Currently, we only use collision circles for text labels that have symbol-placement: line. This happens in CollisionFeature:

mapbox-gl-js/src/symbol/collision_feature.js

Line 75 in 66c0e33

_addLineCollisionCircles(collisionBoxArray: CollisionBoxArray,

, via this call to addSymbol in symbol_layout.js:

mapbox-gl-js/src/symbol/symbol_layout.js

Lines 207 to 211 in 66c0e33

	bucket.symbolInstances.push(addSymbol(bucket, anchor, line, shapedTextOrientations, shapedIcon, bucket.layers[0],
	bucket.collisionBoxArray, feature.index, feature.sourceLayerIndex, bucket.index,
	textBoxScale, textPadding, textAlongLine, textOffset,
	iconBoxScale, iconPadding, iconAlongLine, iconOffset,
	feature, glyphPositionMap, sizes));

So we'd need to refactor these a bit to add an additional path for using a set of collision circles also in the case where we have symbol-placement: point and the symbol is not oriented orthogonal with respect to the viewport.

Also worth noting #5474, which would simplify some of the collision circle logic.

[ChrisLoer]

Agree with @anandthakker that the full fix here is to use collision circles to represent rotated icon geometry -- but just wanted to note that part of the problem may be easier to solve:

1. When icon-rotate is combined with icon-offset, the center of the icon's collision box gets placed in the wrong place. For a lot of (relatively square) icons, the center position may be the really important part. Fixing this should be easier because it doesn't require us to change the way we represent collision geometry.
2. ​​icon-rotate changes the shape of the icon's, ie putting a rectangle at an X degree angle relative to the viewport. This is the harder change. It's definitely something we want to support, but it's probably more important for icons that have a wide aspect ratio (so that the "shape change" is dramatic). Just spitballing: as a placeholder fix that doesn't require a new type of geometry, we could be conservative and do collision based on the smallest viewport-aligned rectangle that contains the rotated rectangle.

[ChrisLoer]

I experimented with a simple implementation of this in collision_feature.js, and at least for point placement it works well (the bus icon and the "GeoJSON Source 1" label both have the same anchor, with different offsets and rotations). The "envelope" strategy seems like it might be fine -- 45 degrees is a worst case in terms of being "too conservative", but visually it doesn't seem like the box is wildly big.

I'm going to look into doing the harder part of #4798 (handling line labels) to see if it makes sense to pull into one PR. I'll also take a look at #4861 (handling rotation-alignment: map) to see if the envelope strategy is promising there.

[hyperknot]

@ChrisLoer, what's the recommended way to use collision circles with queryRenderedFeatures? My idea is to simply use 'circle-opacity': 0, on a fake circle layer, in case I can cover my symbols with a single circle.

How would you cover symbols with multiple circles? Would you add multiple layers with 0 opacity?

I'm trying to find a workaround for #6621

[ChrisLoer]

Hi @hyperknot sorry for the confusion, but "collision circles" here refers to an underlying implementation detail -- there's nothing that's directly accessible to you as an SDK user. The good news is, I think #6621 is mainly a duplicate of a bug that we recently fixed and should ship this week! 😄

[ChrisLoer]

Fixed *-rotate for point-placed symbols in #6631 (didn't make the .45 release, so it'll show up in .46).

@mike-marcacci and @santinogue, will this address your current issues? We're still tracking offsets for line-placed labels separately as #4798 and point labels with rotation-alignment: map in #4861.

[mike-marcacci]

Hi @ChrisLoer! Thank you so much for working on this. I just built master (making sure it includes #6631) and tested it against the example in the fiddle above, and sadly it didn't work. I've got a little bit of time right now to look into this further, so I'll post back once I have more to offer!

[mike-marcacci]

Actually, scratch that. It looks like it built from a stale cache. I can confirm that this is fixed!! Thanks SO much!