-
Notifications
You must be signed in to change notification settings - Fork 1.3k
[ios] add user interaction guide #7937
Changes from 8 commits
e92606d
7551322
c250f2a
357c372
732fc11
1ae2dde
9585071
e97f2bb
fd55a71
032c518
c02c8d9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
# User Interactions in the Mapbox iOS SDK | ||
|
||
The Mapbox iOS SDK provides a set of built-in gesture recognizers to developers. These interactions can be customized to fit your use case. You see what gesture recognizers are on your `MGLMapView` by accessing the `gestureRecognizers` property on your map. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remove “to developers”: the built-in gesture recognizers are primarily provided for the benefit of end users, not developers. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Avoid passive voice:
|
||
|
||
## Configuring user interaction | ||
|
||
There are several properties on a `MGLMapView` that are built-in ways to enable or disable a set of gesture recognizers. Boolean values are set to `true` by default. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Replace There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. s/There are several properties on a |
||
|
||
- `zoomEnabled` - Allows the user to zoom in and out by pinching two fingers, double tapping, or using "quick zoom". Accepts Boolean values. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: s/double tapping/double-tapping/ There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Avoid the term “quick zoom” in documentation, since this term is little-known among iOS developers. Instead, say “or double-tapping then dragging vertically”. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Double-tapping is how you zoom in. Tapping with two fingers is how you zoom out. |
||
- `scrollEnabled` - Allows the user to scroll by dragging or swiping one finger. Accepts Boolean values. | ||
- `rotateEnabled` - Allows the user to rotate by moving two fingers in a circular motion. Accepts Boolean values. | ||
- `pitchEnabled` - Allows the user to tilt the map by vertically dragging two fingers. Accepts Boolean values. | ||
- `decelerationRate` - Determines the rate of deceleration after the user lifts their finger. You can set the value using the `MGLMapViewDecelerationRateNormal`, `MGLMapViewDecelerationRateFast`, or `MGLMapViewDecelerationRateImmediate` constants. | ||
|
||
## Individual gestures | ||
|
||
|Gesture | name | Description | Related Property | | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Inconsistent capitalization: use title case. |
||
|:-------:|:---------|----------------| -----------| | ||
|Pinch | `handlePinchGesture:` |Zooms in or out on the map's anchor point | `zoomEnabled` | | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remove the |
||
|Rotation | `handleRotateGesture:` | Changes the MGLMapView direction based on the user rotating two fingers in a circular motion | `rotateEnabled` | | ||
|Single Tap |`handleSingleTapGesture:` | Selects/Deselects the annotation that you tap. | | | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use sentence case instead of title case within this table. |
||
|Double Tap |`handleDoubleTapGesture:` | Zooms in on the map's anchor point | `zoomEnabled` | | ||
|Two Finger Tap:| `handleTwoFingerTapGesture:` | Zooms out with the map's anchor point centered | `zoomEnabled` | | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: “Two-finger tap” |
||
|Pan Gesture| `handlePanGesture:`| Scrolls across mapView (_Note: If_ `MGLUserTrackingModeFollow` _is being used, it will be disabled once the user pans_)| `scrollEnabled` | | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. “Gesture” is redundant. |
||
|Two Finger Drag | `handleTwoFingerDragGesture:` | Adjusts the pitch of the `MGLMapView` | `pitchEnabled` | | ||
|"Quick Zoom" |`handleQuickZoomGesture:` |Tap twice. On second tap, hold your finger on the map and pan up to zoom in, or down to zoom out | `zoomEnabled`| | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As above, we shouldn’t use the term “quick zoom” in documentation, especially since it isn’t any quicker than pinching. (If we want to coin a term for this gesture, “one-finger zoom” would be more apt.) |
||
|
||
![quick zoom](img/user-interaction/quickzoom.gif) ![rotation](img/user-interaction/RotateSydney.gif) | ||
|
||
## Adding custom gesture recognizers | ||
|
||
You can add `UIGestureRecognizers` to your map programmatically or via storyboard. Adding custom responses to gesture recognizers can enhance your user's experience, but try to use standard gestures where possible. | ||
|
||
The gesture recognizers that you add will take priority over the built-in gesture recognizer. You can also set up your own gesture recognizer to work simultaneously with built-in gesture recognizers by using `-gestureRecognizer:shouldRecognizeSimultaneouslyWithGestureRecognizer:`, allowing you to enhance already existing gesture recognizers. | ||
|
||
You can also add gesture recognizers that are only called when the default gesture recognizer fails (and vice versa), such as when a user taps on a part of the map that is not an annotation. For example: | ||
|
||
`let gestureRecognizers = mapView.gestureRecognizers | ||
let singleTapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(myCustomFunction)) | ||
for recognizer in gestureRecognizers where recognizer is UITapGestureRecognizer { | ||
singleTapGestureRecognizer.require(toFail: recognizer) | ||
} | ||
mapView.addGestureRecognizer(singleTapGestureRecognizer)` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Delimit code blocks with three backticks, not one. Additionally, this code block duplicates the example code in MGLMapView. Unlike this guide, that example code is subject to unit tests. Remove this duplication and refer the developer to the MGLMapView documentation. |
||
|
||
If you would like to disable a specific set of gesture recognizers, such as zoom, you can set the Boolean value for the appropriate property to `false`. You can then add your own gesture recognizers to perform those actions. | ||
|
||
With [runtime styling](runtime-styling.html), you can also use user interactions to style the map! | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is an unusual sentence to end the guide with. Runtime styling isn’t closely related to gestures, so let’s leave it out. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -23,6 +23,7 @@ custom_categories: | |
- Working with GeoJSON Data | ||
- For Style Authors | ||
- Info.plist Keys | ||
- Using Gesture Recognizers | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The name of the .md file must match the entry in this list verbatim. Rename the file “Gesture Recognizers.md” and update this line. |
||
- name: Maps | ||
children: | ||
- MGLAccountManager | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Titles of guides don’t need to say “Mapbox iOS SDK”, since the guides are part of the iOS SDK docset.