getBounds() is returning Invalid LngLat object when terrain is enabled and map is at high zooms or large tilt.

[KleggerKoder]

I can only seem to replicate this on Mobile devices.
If I disable terrain mode getBounds() returns correctly.

mapbox-gl-js/src/geo/transform.js

Line 1009 in 798d073

_getBounds3D(): LngLatBounds {

[jaybo]

I'm also experiencing this bug, but also on desktop Chrome. Seems to only happen when all 3 of the following are true simultaneously:

1. 3D is enabled.
2. FlyTo()
3. Large tilt angles.

index.js?a18c:92 onTidesViewReset Error: Invalid LngLat object: (NaN, NaN)
    at new Ah (mapbox-gl.js?8f79:31)
    at Ch.toLngLat (mapbox-gl.js?8f79:31)
    at po.coordinateLocation (mapbox-gl.js?8f79:35)
    at eval (mapbox-gl.js?8f79:35)
    at Array.reduce (<anonymous>)
    at po._getBounds3D (mapbox-gl.js?8f79:35)
    at po.getBounds (mapbox-gl.js?8f79:35)
    at Map.getBounds (mapbox-gl.js?8f79:35)
    at onTidesViewReset (tideEngine.js?cd11:1084)
    at Map.eval (tideEngine.js?cd11:597)

[SnailBones]

@jaybo Can you provide a minimum example that demonstrates the bug? My attempt hasn't been able to reproduce it for me.

[SnailBones]

Closing since we still don't have a reproducible example, and this may be fixed by #10909. @KleggerKoder @jaybo feel free to reopen if the issue can be reproduced in v2.5.

[ted-piotrowski]

I believe I hit this today. It happens when:

1. Pitch is 45 degrees
2. mapbox-dem layer enabled
3. I call map.fitBounds() from a high zoom location to another high zoom location

It happens when I am zoomed in on a location, maybe level 16+, then I call map.fitBounds() to a far away location (also at high zoom, like a street address). Mapbox GL zooms way out and back in and throws the exception as it finishes zooming in on new location

Invalid bounds returned:  Error: Invalid LngLat object: (NaN, NaN)
    Ha mapbox-gl.js:31
    unproject mapbox-gl.js:31
    coordinateLocation mapbox-gl.js:35
    _getBounds mapbox-gl.js:35
    _getBounds3D mapbox-gl.js:35
    getBounds mapbox-gl.js:35
    getBounds mapbox-gl.js:35

It's not deterministic. Using the same starting point and calling fitBounds() to the same destination point does not throw an exception on subsequent attempts.

Maybe something to do with caching or slow downloading DEM data as I notice the tiles don't load when this exception is thrown.

Potential suspect

If elevation.visibleDemTiles is empty array and elevation.exaggeration() > 1 then minmax.min * elevation.exaggeration() will equal Infinity, possibly producing a NaN down the line:

https://github.com/mapbox/mapbox-gl-js/blob/892d34e7725f28868e2eb937c89d404fe05ecfb1/src/geo/transform.js#L1301,L1313

[SnailBones]

@ted-piotrowski Thank you for looking into this! Your potential suspect seems promising to me.

Are you able to create a reproduction of this bug? I'm still not seeing it though I've modified my attempted reproduction to match your instructions.

Could you also please share what browser and OS you're seeing this on? Many thanks!

EDIT: Reproduction is now working, I'm looking into this.

[SnailBones]

@ted-piotrowski Your intuition was spot-on! Just opened a PR to fix this, thanks for the help! 🙇

[ted-piotrowski]

@SnailBones thanks for this. I couldn't get a reproducible example going for you, but I will def verify this on my project once the new release is out.

[ted-piotrowski]

I will def verify this on my project once the new release is out.

I just built and updated my mapbox-gl-js dependency to include this commit and no more invalid bounds errors. Fix looks good. Thanks @SnailBones .

[SnailBones]

Glad that this is working! Thanks for looking into this and confirming @ted-piotrowski.