Buggy geometry rendering in maplibre-gl-js 3D globe perspective
Measure Distance:
Lines sometimes do not take the shortest route, occasionally going around the Earth for no apparent reason. The distance is still calculated correctly. Placing ghost markers is impossible when the line is curved because the code expects it to be a straight line.
Area Selection Tool:
When selecting an area, the tool sometimes alternates between selecting the "correct" area and selecting an area that wraps around the world.
Both the distance measurement and area selection tools "flicker" between displaying the correct result and one that incorrectly wraps around the Earth.
Edit: similar issue issue, where lines don't go using the closest path was reported here https://github.com/mapbox/mapbox-gl-js/issues/11813#issuecomment-1872461121 , but in that issue the lines don't flicker
Line generation code: https://github.com/openstreetmap-ng/openstreetmap-ng/blob/cbe3575fff62ddad7e2cffc67015c448f9f07ada/app/static/ts/index/_distance.ts#L138-L150
This does seem to be a bug in the library (we are using maplibre-gl and not mapbox-gl): https://github.com/maplibre/maplibre-gl-js
I'll assign a bounty to this issue if someone is willing to work on this issue and push the fix to the maplibre-gl library.
I think that it is caused by this bug: https://github.com/maplibre/maplibre-gl-js/issues/5473
After printing LngLat to the console, you can see that the first value is equal to +- 360.
I found the solution to the problem in the Maplibre code. Please assign me to this issue.
/attempt
@docentYT is still working on it and we are about 50% done 😃