Globe projection rendering issues around the poles

[JosefWN]

mapbox-gl-js version:

v2.9.1

browser:

Tested with the same outcome in latest versions of Google Chrome, Firefox and Safari.

Steps to Trigger Behavior

Draw a polyline passing near the North Pole, use satellite map (I used the bathymetry map).

Link to Demonstration

I can email a link if need be, not a public site.

Bugs

1. Layers are not always fetched at a higher resolution on floating point zoom, such as when scrolling, causing the viewport to remain a low-res raster indefinitely (note vector layer is also rasterized), see 1.png. Resolves if I zoom in more.
2. Little white dots along tile boundaries (subtle, but highlighted with orange arc superimposed on the image under the dots), see 1.png. More glaring when panning.
3. Clipping causing large white triangles/polygons near the pole, see 2.png.
4. A red polyline near the pole shows as an enormous red polygon (interpolation to fill the gap near the pole also affecting layers on top of the base style?), see 2.png.

[SkySails]

I have an issue that seems quite related. I used the Animate point along a route example and just changed the coordinates around a bit to make the route cross the north pole. This causes a bunch of rendering artifacts and the most obvious ones look very similar to your screenshots!

Here is the codepen: https://codepen.io/SkySails/pen/VwXwJOY?editors=0010

I understand that this is not a "new" issue - similar bugs can be found in Google Maps & Google Earth:

[SnailBones]

I looked into bug 3 a bit, which seems related to #12167 (which I can't reproduce).

The poles borrow their color from the adjacent tile, so if no tile is loaded, the pole color is transparent. We should instead borrow the color from a neighboring tile if no tile is directly adjacent.

Another solution could be just setting the North pole color to be the ocean color (and the south pole to the color of Antarctica) instead of transparent, though this would be less robust with satellite maps or more unique styles (i.e. a map of the moon).

[JosefWN]

Several of these issues, such as tiles loading at very low resolution (or some tiles loading high-res and some tiles loading low-res within the viewport) and polylines showing up rasterized at very low resolution, only appear at about 68N/68S and onward.

Still, "around the poles", which is part of the title of this issue, is a subjective measure which makes it sound very local. Down south, pretty much all of Antarctica is affected by the bugs, that's a continent larger than Europe. It's like saying there is a bug around Paris, which actually affects the entire continent. Multiply that area by two to include the northern hemisphere as well.

On Antarctica, a partial graticule or tile boundaries also appeared out of nowhere:

All of these issues persist in v2.14.1, in Chrome/Firefox/Safari on Windows/macOS.

[JosefWN]

Maybe some these issues could be related to the fact that when you pan north, Mapbox automatically zooms in on the globe. I saw it works with the scale bar for example (it changes as I pan in globe view), but does this change in zoom level also propagate to the layers on the map, prompting them to re-load (if need be) and re-render?

It seems to me that the zoom is continuously offset, causing low-res tiles and rasterized vectors.

[DylanCulfogienis]

I think I'm going to attempt fixing this as our application needs to be able to render data and draw shapes over the poles.

Is there anything I should know about this issue that the contributors would be able to share before I dive in?

[ElectronicPanda]

Last few weeks I have been flying around north pole for search&rescue missions. When I added data to my mapbox application, I realized mapbox cannot calculate rectangler region close to poles.

Here where I fly usually:

Here test data I used. Changed values a bit because also mapbox cannot show points near to poles well so, I cannot focus cam to poles:
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"coordinates":[5,70],"type":"Point"}},{"type":"Feature","properties":{},"geometry":{"coordinates":[355,70],"type":"Point"}},{"type":"Feature","properties":{},"geometry":{"coordinates":[185,70],"type":"Point"}},{"type":"Feature","properties":{},"geometry":{"coordinates":[175,70],"type":"Point"}},{"type":"Feature","properties":{},"geometry":{"coordinates":[0,90],"type":"Point"}},{"type":"Feature","properties":{},"geometry":{"coordinates":[[[5,70],[355,70],[185,70],[175,70],[5,70]]],"type":"Polygon"}}]}

You can paste data directly to:
https://geojson.io/#map=3.23/84.45/-100.08