mapbox/mapbox-gl-js

map.fitBounds() with bearing does not fit the entire bounds

Open

#10,064 opened on Nov 1, 2020

View on GitHub
 (7 comments) (0 reactions) (0 assignees)JavaScript (10,532 stars) (2,203 forks)batch import
bug :lady_beetle:good first issue

Description

When map.fitBounds(...) is called with a bearing option passed in, it seems like the bearing is not taken into the account on calculating the appropriate zoom, resulting in part of the bounded area to not be in view.

mapbox-gl-js version: 1.12.0

browser: Chrome

Steps to Trigger Behavior

  1. Create a bounded area with a list of coordinates
  2. Call map.fitBounds(...) with bearing option set

Link to Demonstration

https://jsfiddle.net/_blahblahblah/k4vL6s5r/

Expected Behavior

When clicking on the 'Fit to Line at 29º Bearing' button in the demo link, all 6 stations should be in view.

Actual Behavior

Only 4 of the 6 stations are in view.

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Understanding of mapbox gl js APIBasic geometry for map boundsJavaScript proficiency
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the `fitBounds` implementation in the Mapbox GL JS source code (likely in `src/ui/map.js`). The calculation for zoom level does not account for bearing, causing bounds to be partially visible. Consider modifying the algorithm to compute the bounding box after applying the rotation, or use a different method to ensure all points are within the viewport. Review comments in the issue for any suggested fixes or related PRs.
map.fitBounds() with bearing does not fit the entire bounds · mapbox/mapbox-gl-js#10064 | Good First Issue