3D map freezes when camera is adjusted against map bounds (in dev environment only (?))

[larsmaxfield]

maplibre-gl-js version: 4.5.1

browser: Edge 126.0.2592.102 (64-bit), Firefox 128.0 (64-bit)

Development environment on Windows 10 WSL

Steps to Trigger Behavior

1. In a development environment, open a 3D terrain map (npm run start; localhost:XXXX/test/examples/3d-terrain.html).
2. Enable 3D and pitch the map.
3. Pan to the map's latitude bounds.
4. Adjust the camera (pan, zoom, pitch, rotate) against the bounds.
5. Map freezes due to uncaught error in CanonicalTileID with zxy out of bounds.

Link to Demonstration

I can't seem to trigger this in the online docs — only in a local development environment.

Expected Behavior

The map should not freeze when adjusting the camera against the map bounds.

Actual Behavior

The map freezes.

[larsmaxfield]

The issue is occurring because getElevationForLngLatZoom is making requests for OverscaledTileID with LngLat outside the map bounds:

maplibre-gl-js/src/render/terrain.ts

Lines 186 to 189 in 2207519

	getElevationForLngLatZoom(lnglat: LngLat, zoom: number) {
	const {tileID, mercatorX, mercatorY} = this._getOverscaledTileIDFromLngLatZoom(lnglat, zoom);
	return this.getElevation(tileID, mercatorX % EXTENT, mercatorY % EXTENT, EXTENT);
	}

This can be fixed by first checking if the LngLat and zoom are in bounds before the request to the OverscaledTileID. If it's out of bounds, the function returns an elevation of 0:

maplibre-gl-js/src/render/terrain.ts

Lines 186 to 191 in f850046

	getElevationForLngLatZoom(lnglat: LngLat, zoom: number) {
	const {x, y} = MercatorCoordinate.fromLngLat(lnglat.wrap());
	if (y < 0 || y >= 1 || zoom < 0 || zoom > 25 || x < 0 || x >= 1) return 0;
	const {tileID, mercatorX, mercatorY} = this._getOverscaledTileIDFromLngLatZoom(lnglat, zoom);
	return this.getElevation(tileID, mercatorX % EXTENT, mercatorY % EXTENT, EXTENT);
	}

The function getDEMElevation employs a similar check and return of 0 for invalid xy tile values, so adding a check in getElevationForLngLatZoom seems like an appropriate fix to me.

[HarelM]

Feel free to submit a PR.
If there's a check already, I would prefer to have it somewhere centralized (utils.ts maybe) so that changing it once will work for all the relevant places.
Especially if we ever decide to change the max zoom or min zoom.

[larsmaxfield]

Good point.

I centralized the new constants MAX_TILE_ZOOM = 25 and MIN_TILE_ZOOM = 0 in util.ts. I found a couple instances where those were hardcoded and replaced them accordingly.

However, I kept the bounds check functions in tile_id.ts. The check isInBoundsForZoomLngLat (which is used to fix this issue) relies on LngLat. If I put that in util.ts, it caused a circular dependency.

*I moved the bounds checks isInBoundsForZoomXY and isInBoundsForZoomLngLat to a new src/util/world_bounds.ts.

[larsmaxfield]

Thanks for reviewing!