URL hash with wrong coordinates throws Error

[mattesCZ]

maplibre-gl-js version: 4.7.1

browser: Chrome 131

Steps to Trigger Behavior

1. Create a copy of example at https://maplibre.org/maplibre-gl-js/docs/examples/hash-router/
2. Create map with center: [36, 129], swapped order means latitude > 90
3. Map won't load, console is full of Error: Invalid LngLat latitude value: must be between -90 and 90

The same happens if center is set correctly, but the hash is incorrect.

Link to Demonstration

https://codepen.io/mattesCZ/pen/gbYbOKm

Expected Behavior

I think at least URL hash should be checked if it's valid coordinate and fallback to some valid coordinate like [0, 0] and zoom 0 if it's invalid.

Actual Behavior

It shows empty map if coordinate is incorrect and throws errors in console.

[HarelM]

Hi, thanks for taking the time to report this issue.
What's the actual use case for this issue?

[mattesCZ]

I can imagine this: App uses Hash routing, so users can save or edit URLs to their locations, but can accidentally create URL with incorrect coordinates. I think the map should not fail, but fallback somehow.

I know the app developers can also check it before it falls down to MapLibre, but I think it would be nice if the MapLibre will fail more gracefully.

[HarelM]

Feel free to sumbit a PR. I think the hash control is mainly for testing and development, but you are welcome to improve it.

[mattesCZ]

I think it's useful for any application like openstreetmap.org or Google Maps to add hash with coordinates. It makes it really easy to reload or share the map view with others. I guess there is a lot of such examples that uses MapLibre (osmapp.org,...).

I'm not very familiar with MapLibre code. Can you please point me quickly where I should start to investigate the code for parsing hash on map load or even check if mapOptions.center is valid? I will try to create a PR then.

[HarelM]

The hash related code is here:

maplibre-gl-js/src/ui/hash.ts

Line 11 in 8dba921

export class Hash {