mapbox / mapbox/mapbox-gl-js

Disable drag rotation on NavigationControl compass

Open
#9,036 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs discussion :speech_balloon:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

Currently, the compass button added by default by a `NavigationControl` allows the user to begin a `dragRotate` interaction by starting a left-button/single-touch drag within the button div, and then continuing to drag across the map, outside of the button. This is achieved by the `NavigationControl` instantiating a new `DragRotateHandler` attached to the left-button - by default in addition to the map's own `DragRotateHandler` attached to the right-button.

This interaction is:
- Difficult to discover
- Unconventional (to my knowledge no other map does this)
- Very buggy - for example:
- Some mobile users may have difficulty executing a click on the compass button because the short touch event is greedily interpreted as a drag (https://github.com/mapbox/mapbox-gl-js/pull/9015)
- If the touch/drag ends outside of the map container, the end event is not picked up by the handler and causes the drag to get "stuck"
- Rotation reverses direction when the drag moves across the top half of the map (this seems to be a general bug in `DragRotateHandler`)

I think we should remove this drag-rotate functionality from the compass button, such that the compass control only:
- Rotates the compass icon in response to the user rotating the map (either with the map's default `DragRotateHandler` or with calls to `setBearing()` or similar)
- Allows the user to click to reset the bearing (and possibly pitch) to zero.

Questions for the crowd:
- Do you rely on the drag rotate functionality of the compass control?
- What problems would you/your users face if we removed it?

cc @ryanhamley @mourner

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 inspecting the NavigationControl and DragRotateHandler entry points to trace how the compass button attaches drag rotation. Confirm that the compass still reflects map bearing changes and supports click-to-reset behavior, while dragging from the compass no longer begins rotation; the issue provides no file or test names.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.