User interaction
Users interacting with the Mapbox map in your application can explore the map by performing standard iOS and Android gestures on the touchscreen.
The Maps SDK’s GesturesSettings powers what happens with each gesture. You can allow users to move the map using default gestures and enable/disable specific gestures.
Default map gestures
By default the following standard gestures will allow the user to explore the map:
- Pan around: Hold one finger down on the screen and move it in any direction.
- Adjust pitch: Hold two fingers down on the screen and move them vertically across the screen.
- Gradually zoom in/out and rotate: Pinch with two fingers to adjust the zoom level and rotate the map. Move fingers apart to zoom in, move fingers closer together to zoom out, and move fingers in a circular motion to rotate the map (adjust the bearing).
- Zoom in one zoom level: Double tap on the screen with one finger to zoom in towards the tapped location.
- Zoom out one zoom level: Single tap on the screen with two fingers to zoom out away from the midpoint of the tapped locations.
- Quick zoom: Double tap and drag up on the screen to zoom out or double tap and drag down to zoom in.
Enable and disable default gestures
Adjust or completely disable pan, rotate, pinch, and double tap gesture recognition by configuring GesturesSettings.
You can do this at runtime with the .updateSettings() method on .gestures. Pass a new GesturesSettings with the desired boolean for the gestures you want to change:
mapboxMap.gestures.updateSettings(GesturesSettings(rotateEnabled: false));
You can find a full list of gestures that can be enabled or disabled in the GesturesSettings.
Disabling map gestures doesn't affect whether you can change the camera position programmatically.
Listening for interactions
The Maps SDK for Flutter has an extensive system for listening to Tap and Long Press gestures on the map. Add your preferred listener to MapWidget to receive these events.
// Add an onTapListener to the `MapWidget`
final MapWidget mapWidget = MapWidget(
key: ValueKey("mapWidget"),
onTapListener: _onTap,
);
// Print out map coordinates and screen position at tapped location
_onTap(MapContentGestureContext context) {
print("OnTap coordinate: {${context.point.coordinates.lng}, ${context.point.coordinates.lat}}" +
" point: {x: ${context.touchPosition.x}, y: ${context.touchPosition.y}}");
}