Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable drag rotate handler during touch events #2204

Closed
DenisCarriere opened this issue Mar 1, 2016 · 8 comments
Closed

Disable drag rotate handler during touch events #2204

DenisCarriere opened this issue Mar 1, 2016 · 8 comments

Comments

@DenisCarriere
Copy link

When holding down (touch) using a Mobile Device or even using Google Chrome inspect, the map seems to be very glitchy afterwards.

mapbox-gl-js v0.14.3:

Steps to Trigger Behavior

  1. Hold down map using Mobile device

The only way to prevent it from being glitchy was to disable dragRotate.

map.dragRotate.disable()

But that removes the really cool right click rotate functionality.

I tested this bug using a basic MapboxGL example.

ycxfo5qykx

@lucaswoj
Copy link
Contributor

lucaswoj commented Mar 1, 2016

Thanks for the report @DenisCarriere! Could you tell me more about the glitch-iness? What is the exactly map doing? It is hard to tell from the posted gif.

cc @bhousel

@DenisCarriere
Copy link
Author

Yea I know the GIF wasn't very clear, well just test it out using Google
chrome inspect and select mobile view. Hold down touching the map, after
that every time you click on the map it rotates the map at a random
location.

@DenisCarriere
Copy link
Author

Changes to Issue: The error is still the same, however it was the map.dragRotate that was causing the error and not touchZoomRotate.
cc @bhousel

@DenisCarriere
Copy link
Author

My quick fix was to implement a Mobile Detect library and turn off map.dragRotate, this doesn't change any of the functionality on the Browser and on mobile devices you have the Pinch gesture to rotate.

import MobileDetect from 'mobile-detect'

const md = new MobileDetect(window.navigator.userAgent)

// Disable (Mobile)
if (md.mobile()) {
  map.dragRotate.disable()
}

@lucaswoj
Copy link
Contributor

lucaswoj commented Mar 5, 2016

Thanks for the debugging @DenisCarriere! @bhousel do you think we should automatically disable dragRotate for mobile devices? Are there any other follow-ups?

@bhousel
Copy link
Contributor

bhousel commented Mar 5, 2016

@bhousel do you think we should automatically disable dragRotate for mobile devices? Are there any other follow-ups?

Probably a better idea would be to watch for touchstart/touchend and disable the handler if we detect a touch event happening. The touch events fire before the mouse events.

Besides, some devices like new Windows Surface and Chromebooks support both mouse and touch, so the problem isn't just limited to mobile.

@lucaswoj lucaswoj changed the title Touch Hold using Mobile Device causes glitchs Disable drag rotate handler during touch events Jul 29, 2016
@ChrisBellew
Copy link

Added a PR. Please review :) #3457

@jfirebaugh
Copy link
Contributor

I can't reproduce any issues here with 0.44.1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants