mapbox / mapbox/mapbox-gl-js

LngLat.toBounds can cause an out-of-range latitude error when given a big enough radius

Open
#12,440 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

mapbox-gl-js version: 2.11.0

browser: Firefox 107

Steps to Trigger Behavior
  1. Run toBounds with a large radius on a LngLat, large enough that it passes the pole.
const ll = new mapboxgl.LngLat(-123, 49);
console.log("ll", ll);
console.log("fine with 1e6 radius", ll.toBounds(1e5));
try {
  console.log("This throws; you won't see this", ll.toBounds(1e7));
} catch (error) {
  console.error("breaks with 1e7 radius: " + error.toString());
}
Link to Demonstration

https://codepen.io/tremby/pen/xxzmjyV?editors=1111

Expected Behavior

Valid bounds wrapping around the pole if possible, or at least an understandable error message.

Actual Behavior

"Error: Invalid LngLat latitude value: must be between -90 and 90"

Now that I've investigated it's clear that some LngLat is produced by toBounds with an out-of-bounds coordinate. Whether this is a bug or not is up to the maintainers. But that error was not at all indicative of the actual cause, which was a too-large radius, and it made tracing the actual problem in my code quite difficult.

It's also not clear how to work around this. The centre and radius are being input by the user. I imagine if for example a very northern centre is given, the maximum allowable radius before toBounds throws is smaller.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the LngLat.toBounds entry point and reproduce the issue with the provided large-radius example or CodePen. Determine how bounds behave when the radius crosses a pole, then verify that the result is valid or that the error clearly identifies the excessive radius.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.