Gestures behavior

[jeankruger]

Platform: Android
Mapbox SDK version: 5.0.0-beta.3

There are some problems about the behavior of gestures.

The most problematic issue regards pinch to zoom. Unwanted rotation occurs when the fingers touch each other. This is worse on some devices, especially on the Nexus 5X (7.1.1).

Regarding the pinch to zoom there are also:

• Some fast gestures are ignored
• There is no inertia

Demo

And concerning the scrolls:

• There is no inertia on the movements when the map is tilt
• On low zoom level and tilt 0 the inertia seems too strong

Otherwise, thank you very much for your work, and congratulations for better performance than Google Map.

[tobrun]

The most problematic issue regards pinch to zoom. Unwanted rotation occurs when the fingers touch each other. This is worse on some devices, especially on the Nexus 5X (7.1.1) + some fast gestures are ignored.

The issue is actually that the pinch to zoom gesture stops too soon and allows other gestures as rotate to execute as we disable rotation while pinching to zoom is executing. In the gif below you can see the ScaleGestureDetector#onScaleEnd called too soon:

The ScaleGestureDetector class is part of the AOSP sources and it's implementation can differ between Android OS versions. This particular bug seems to be only impacting Android nougat devices as I'm unable to reproduce this on older handsets. The related bug report for this issue is found here. Feel free to 👍 that issue as much as this one.

There is no inertia

We currently change the zoom directly when we receive the MotionEvent. The other approach possible here, is to measure the velocity of a ScaleGesture and calculate a zoom ahead of time and perform an animation with an interpolater instead (this is what Google Maps is doing). Our current used gesture library doesn't expose such an ScaleGestureDetector (though we are thinking of rewriting this part). FWIW the one used in Google Maps isn't open source.

concerning the scrolls: there is no inertia on the movements when the map is tilt

This is to workaround the following issue: #5281.
This will be fixed if we implement platform side animations in #8175.

On low zoom level and tilt 0 the inertia seems too strong

This is something that can be configured in native_map_view.cpp by plauing around with the UnitBezier (for interpolation) and the duration set in in the code above.

void NativeMapView::moveBy(jni::JNIEnv&, jni::jdouble dx, jni::jdouble dy, jni::jlong duration) {
    mbgl::AnimationOptions animationOptions;
    if (duration > 0) {
       animationOptions.duration.emplace(mbgl::Milliseconds(duration));
       animationOptions.easing.emplace(mbgl::util::UnitBezier { 0, 0.3, 0.6, 1.0 });
    }
    map->moveBy({dx, dy}, animationOptions);
}

Feel free to play around with these values and provide a PR if you found a better configuration.

[jliebrand]

@tobrun is there any update on this? I too noticed that mapbox on Android seems to have weird pinch behaviour. We've turned rotation off, since it was far too easy to trigger. But we still see the issue you referred to where the zoom ends too quickly. Making it appear like the zoom snaps to certain levels.

The google bug you've linked to has since been closed as wontfix. So is there something that can be done on the mapbox side?

[tobrun]

@jliebrand have you taken the latest 5.2.0-beta.4 for a spin? It contains #10202 which improves the experience a lot around pinch zooming. Feel free to provide feedback on those changes.

[jliebrand]

I'm actually using the mapbox react-native version, so i suspect that's not been updated to the latest... lemme see if I can update things to test

[jliebrand]

Hmm I tried to upgrade the android sdk in react-native-mapbox-gl but that didn't quite work (it just starts up a complete white screen, no map, and nothing in the console either. I guess I'll just sit back and wait for these fixes to reach stable and subsequently the react-native component

[tobrun]

This is going to be handled with the gesture rewrite in #10016. Thank you for reporting this.