map crashes when panning through mountains in 3D terrain (even on maplibre docs itself)

[Fabioni]

maplibre-gl-js version: 4.3.2

browser: Chrome

Link to Demonstration

Your own documentation: https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/

Behavior

Zoon in a bit and than pan forwards so the camera goes through the mountains in Innsbruck. This crashed the map meaning the map turn white and the console repeatedly outputs this error. Nothing works anymore and only reloading the website helps.

lng_lat.ts:63 Uncaught 
Error: Invalid LngLat object: (NaN, NaN)
    at new Sc (lng_lat.ts:63:19)
    at Cc.toLngLat (mercator_coordinate.ts:126:16)
    at pa.coordinateLocation (transform.ts:584:31)
    at pa.pointLocation (transform.ts:565:21)
    at t.Map.unproject (map.ts:1173:31)
    at new Ea (events.ts:527:28)
    at Da.mousemove (map_event.ts:122:24)
    at HTMLDivElement.handleEvent (handler_manager.ts:391:51)

[HarelM]

I believe once #1542 is solved, this issue would not be relevant, right?

• 1542

[chrneumann]

Guess so, at least I can't reproduce this bug with my local fix of #1542. There might be some edge cases though.

[kudlav]

I can even zoom in to NaN when scrolling. Zooming in can cause zooming into the terrain when using a map with tilted terrain.

Uncaught Error: failed to invert matrix
Uncaught Error: Invalid LngLat object: (NaN, NaN)

[AEiosApp]

Got same issue on Android browser - WebView with Chrome 60+ Same code works fine:

• on Chrome on Macbook
• on WkWebview (Safari like) on iPhone

Steps to reproduce:

• zoom the map less than your hillshade tiles maxzoom (e.g. 12)
• turn on terrain
• if I move through the map on this zoom level - everything is fine
• if I zoom in (e.g. 14) - map crashes with Invalid LngLat object error

Full error log:

Error: Invalid LngLat object: (NaN, NaN)
    at new ws (Map.1aed241a.js:8:160617)
    at lu.toLngLat (Map.1aed241a.js:8:162016)
    at tl.coordinateLocation (Map.1aed241a.js:583:82648)
    at tl.pointLocation (Map.1aed241a.js:583:82521)
    at P.Map.unproject (Map.1aed241a.js:583:195710)
    at new Vi (Map.1aed241a.js:583:93120)
    at sl.mousemove (Map.1aed241a.js:583:94984)
    at HTMLDivElement.handleEvent (Map.1aed241a.js:583:117250)

https://github.com/user-attachments/assets/f44b67e8-7c89-4820-9558-b7bdd0a225c4

[HarelM]

4.5.2 Should be out shortly, please test to see if this issue is still relevant after the relevant fix was introduced.

[AEiosApp]

@HarelM Just tested with 4.5.2 - issue has gone!

Great work, thanks!

[HarelM]

Fixed by #4300

[kudlav]

I can still zoom into hills on https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/ page:

Uncaught Error: Invalid LngLat object: (NaN, NaN)

[Fabioni]

Big thanks to @HarelM for your help.

In the documentation https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/, the map still crashed if I pan into a hill. It just needs a bit more attempts than before. It runs 4.5.2

Console logs:

transform.ts:987 Uncaught Error: failed to invert matrix
    at ga._calcMatrices (transform.ts:987:23)
    at ga.resize (transform.ts:472:14)
    at t.Map.resize (map.ts:836:37)
    at map.ts:632:26
    at r (throttle.ts:13:16)
    at throttle.ts:24:13
    at ResizeObserver.<anonymous> (map.ts:640:17)
_calcMatrices @ transform.ts:987
resize @ transform.ts:472
resize @ map.ts:836
(anonymous) @ map.ts:632
r @ throttle.ts:13
(anonymous) @ throttle.ts:24
(anonymous) @ map.ts:640

[HarelM]

@chrneumann can you check this report?

[chrneumann]

Seems related to https://github.com/maplibre/maplibre-gl-js/pull/3836. The transform's recalculateZoom method calculates a zoom that is NaN which leads to the crash.

[chrneumann]

From the comments it seems that the calculations there are not supposed to be correct? Maybe at least some additional checks should prevent that the map crashes, e.g. for the NaN case. So if the calculated zoom is NaN, don't set it / give a warning instead until this is fixed.

[chrneumann]

It's easy to see the wrong calculation if you "Pause on exceptions" in browser debugger.

[HarelM]

I've reopened the following bug as I can still get to a state where the camera is inside the terrain using accepted user behavior (pan, zoom, didn't try rotate but this should be checked too). Let's see if fixing the bug below does not solve this issue and I'll reopen this one, or open a different bug.

• https://github.com/maplibre/maplibre-gl-js/issues/1542

Let's keep the conversation in the above linked bug as I think they are related.