Skip to content

Commit

Permalink
Fix rotation bug for non-pitched compasses (#8605)
Browse files Browse the repository at this point in the history
* apply proper rotation to non-pitched compasses

* scale up tilted compasses slightly to enhance legibility

* fix documentation

* lint
  • Loading branch information
petersirota authored and ryanhamley committed Aug 9, 2019
1 parent 86d0152 commit 9f9e001
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions src/ui/control/navigation_control.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const defaultOptions: Options = {
* @param {Object} [options]
* @param {Boolean} [options.showCompass=true] If `true` the compass button is included.
* @param {Boolean} [options.showZoom=true] If `true` the zoom-in and zoom-out buttons are included.
* @param {Boolean} [options.visualizePitch=false] If `true` the pitch is visualized by rotating Y-axis of compass.
* @param {Boolean} [options.visualizePitch=false] If `true` the pitch is visualized by rotating X-axis of compass.
* @example
* var nav = new mapboxgl.NavigationControl();
* map.addControl(nav, 'top-left');
Expand Down Expand Up @@ -86,8 +86,8 @@ class NavigationControl {

_rotateCompassArrow() {
const rotate = this.options.visualizePitch ?
`rotateX(${this._map.transform.pitch}deg) rotateZ(${this._map.transform.angle * (180 / Math.PI)}deg)` :
`rotate(${this._map.transform.angle}deg)`;
`scale(${1 / Math.pow(Math.cos(this._map.transform.pitch * (Math.PI / 180)), 0.5)}) rotateX(${this._map.transform.pitch}deg) rotateZ(${this._map.transform.angle * (180 / Math.PI)}deg)` :
`rotate(${this._map.transform.angle * (180 / Math.PI)}deg)`;

this._compassArrow.style.transform = rotate;
}
Expand Down

0 comments on commit 9f9e001

Please sign in to comment.