mapbox / mapbox/mapbox-gl-js

Zoom to bounding box (fitBounds) zooming in too far with non-Mercator projections

Open
#11,284 12 comments 4 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.6.0

**browser**: Chrome

### Steps to Trigger Behavior
1. Set up GL JS map using a non-Mercator projection
2. Use fitBounds to zoom map to a defined bounding box
3. Most apparent if the bounding box is being used ensure an entire area (e.g. admin boundary) is displayed in a window. I notice it happen more obviously if the window is small.
4. No console errors or warnings observed.
5. Not sure if this is related to https://github.com/mapbox/mapbox-gl-js/issues/11246 or not

Mercator (expected behavior): ![zoom-to-bbox-mercator](https://user-images.githubusercontent.com/29718272/141870818-82dc380b-b062-4ee9-ae3c-66a16542728d.gif)

Natural Earth projection: ![zoom-to-bbox-naturalearth](https://user-images.githubusercontent.com/29718272/141870836-5b5b03fd-63b5-4df5-beef-b1e466d1c912.gif)

Equal Earth projection: ![zoom-to-bbox-equalearth](https://user-images.githubusercontent.com/29718272/141870840-bba0759d-983a-48e1-847c-6f971ea7df80.gif)

### Link to Demonstration

Made using the 'Fly To' GL JS demo: https://jsbin.com/huhataxilu/edit?html,output

Also two counties that demonstrate this issue quite clearly, reported to me:
> Boulder County [-105.694362, 39.912886, -105.052774, 40.262785]
> Dane County [-89.838567, 42.845036, -89.008729, 43.294198]

### Expected Behavior
Zoom to display the full bounding box (not cut off any area within the bounding box)

### Actual Behavior
Zooms slightly too far in, cutting off part of the bounding box area.
Workaround solution is to increase the padding as a 'buffer' around the bounding box.

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 by reproducing the issue with the linked Fly To GL JS demo, using fitBounds with Natural Earth or Equal Earth and comparing it with Mercator. Trace the fitBounds behavior for non-Mercator projections and verify the result against the Boulder or Dane County bounding boxes. Done means the full bounding box remains visible without requiring extra padding.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.