CollisionTile minScale/maxScale range is too small for overzoomed tiles, causing labels to disappear

[flypdx]

Migrating from v0.35.1 to v0.39.1 I noticed that my symbol features show erratic behavior (symbols disappear or become severed) when you zoom into a grouping of symbols, set pitch, and start rotating. See GIF above. I do not have this issue in v0.35.1 (please see version details below for more info).

mapbox-gl-js version: 0.39.1

Testing back versions I noticed the same issue with v0.39.0 and v0.38.0.

The issue is not seen in v0.37.0 and earlier releases.

Steps to Trigger Behavior

1. Add a symbol type layer via URL to your map with a text-field….

          map.addLayer({
                "id": "layer-id-here",
                "type": "symbol",
                "source": {
                    'type': 'geojson',
                    'data': 'data URL here’

                },
                "layout": {
                    "text-field": "{text-field-here}",
                    "icon-allow-overlap": true,
                    "text-allow-overlap": true
                },
                "paint": {
                    "text-color": 'red',
                    "text-halo-color": 'white',
                    "text-halo-width": 1.5,

                },
            });

2. Zoom to a dense grouping of text from the symbol feature and activate pitch and start rotating.

Expected Behavior
Symbol text should not disappear from the map when map is at a pitch and rotated.

Actual Behavior
See GIF above. Symbol text disappears when the view is at a pitch and the map is rotated.

[jfirebaugh]

Thanks for using Mapbox, and sorry to hear you're running into an issue. In order for us to diagnose this issue, we'll need to be able to reproduce it ourselves. Could you please create a minimal self-contained JSFiddle that demonstrates the issue?

[flypdx]

Here you go… https://jsfiddle.net/woupa6L0/ Needs access token. Rotate a full 360 at current Zoom level a few times to see the issue. BTW. Just noticed that the same behavior is happening with AOI labeling within the basemap style too. From: John Firebaugh [mailto:[email protected]] Sent: Tuesday, August 01, 2017 10:41 AM To: mapbox/mapbox-gl-js <[email protected]> Cc: GISProgram <[email protected]>; Author <[email protected]> Subject: Re: [mapbox/mapbox-gl-js] Feature Type Symbols Disappear on Pitch and Rotation (#5072) Thanks for using Mapbox, and sorry to hear you're running into an issue. In order for us to diagnose this issue, we'll need to be able to reproduce it ourselves. Could you please create a minimal self-contained JSFiddle that demonstrates the issue? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#5072 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ARTx81lctnh0r0g5PpX0HQGQzjBv2ymaks5sT2MZgaJpZM4OqCcm>.

[ChrisLoer]

Hi @flypdx, I tried running the JSFiddle you posted (thanks!) but didn't see any behavior like the bulk disappearing labels you recorded in that original GIF. We did make changes in v0.38 that changed how text was rendered in pitched views (text now gets larger relative to the map when it's in the distance, in order to stay more legible), so it's likely those changes are affecting the behavior you're seeing.

Is it possible you could figure out how to trigger the behavior using the easeTo animation API? That might help us reproduce the problem here. Also, in your original post you showed a layer with text-allow-overlap: true, but I don't see that in the JSFiddle -- that's a pretty important property for label collision behavior. Sorry if I'm missing what you were trying to show...

These two debugging options might help you understand what's going on, too:

    map.showCollisionBoxes = true;
    map.showTileBoundaries = true;

The first one will show the boxes that are used for detecting when labels collide with each other. When the boxes go from green to red, that means a collision has been detected and the label will be hidden. The second one shows the boundaries between different tiles of the map -- I suspect what you might see is that labels are disappearing one tile at a time (which might be a good hint about what's going wrong).

[flypdx]

Hi @ChrisLoer. Thanks for the additional info. The debugging options are helpful. I won't have time to investigate with the easeTo API this week...however...I created a new JSFiddle that better shows the bulk disappearance and text severing here (needs API key): https://jsfiddle.net/woupa6L0/3/

I'll try to find time to continue investigating....but please take a look at the new JSFiddle above ( includes map.showCollisionBoxes = true; & map.showTileBoundaries = true;).

Also....text-allow-overlap: true or false produces the same result.

[ChrisLoer]

Thanks, @flypdx I can see the problem very easily in the new JSFiddle. It does look like a whole tile is getting dropped at once, but the "tile debug boundaries" aren't showing it because the symbols are actually in a GeoJSON tile at zoom level 20, while the tile debug view is showing the boundaries of the base map vector tiles, which max out at zoom level 16. I'll investigate...

[ChrisLoer]

Aha! So the problem is that in order to make collision detection faster, we only calculate collisions over a scale range from 50% to 200%. In pitched views, we adjust that range based on how far the tile is from the camera. The problem here is that the tile is overzoomed (the GeoJSON source defaults to a maxzoom of 18, and we're showing at zoom 20 in your example). From the renderer's point of view, an overzoomed tile is really big (bigger than the viewport), and since it's pitched, that means there's a very large difference in the "effective" scale between something in the distance (much smaller) and something in the foreground (much larger). Our 4x (from 50% to 200%) scale range isn't big enough to handle it, and that's why a bunch of labels get dropped.

Luckily, I think there's an easy workaround that should work for you. Just add this line to your GeoJSON source:

"maxzoom": 20

(or maybe even higher, depending on what zoom level you want to support). Under the hood, that will make GL JS generate more (higher-zoom) tiles out of the GeoJSON you provide.

This is closely related to issue #5095, and like that one, we'll fix the underlying issue with our work on global/viewport collision detection.

[flypdx]

Thanks, @ChrisLoer you rock! "maxzoom": 20 fixed the issue.... a huge relief on our side. Will keep an eye on issue #5095

[ChrisLoer]

#5150 fixed this by completely removing the minScale/maxScale concept.