User interaction handlers
Items related to the ways in which the map responds to user input.
BoxZoomHandler
The BoxZoomHandler allows the user to zoom the map to fit within a bounding box.
The bounding box is defined by clicking and holding shift while dragging the cursor.
Methods
CooperativeGesturesHandler
src/ui/handler/cooperative_gestures.ts
A CooperativeGesturesHandler is a control that adds
cooperative gesture info when user tries to zoom in/out.
cooperativegestureprevented event.
Example
Properties
This is the key ("ctrlKey" | "metaKey")
that will allow to bypass the cooperative gesture protection.
Methods
This is used to indicate if the handler is currently active or not. In case a handler is active, it will block other handlers from getting the relevant events. There is an allow list of handlers that can be active at the same time, which is configured when adding a handler.
Returns
boolean:
true
if the cooperative gestures interaction is enabled.
Can be called by the manager at any time and must reset everything to it's original state.
ScrollZoomHandler
The ScrollZoomHandler allows the user to zoom the map by scrolling.
Methods
Enables the "scroll to zoom" interaction.
Parameters
(Object?)Options
object.
| options.around | If "center" is passed, map will zoom around center of map |
|---|
Example
DragPanHandler
src/ui/handler/shim/drag_pan.ts
The DragPanHandler allows the user to pan the map by clicking and dragging
the cursor.
Methods
Enables the "drag to pan" interaction.
Parameters
(Object?)Options
object
| options.linearity
default: 0
|
factor used to scale the drag velocity |
|---|---|
| options.easing
default: bezier(0,0,0.3,1)
|
easing function applled to
map.panTo
when applying the drag.
|
| options.maxSpeed
default: 1400
|
the maximum value of the drag velocity. |
| options.deceleration
default: 2500
|
the rate at which the speed reduces after the pan ends. |
Example
DragRotateHandler
src/ui/handler/shim/drag_rotate.ts
The DragRotateHandler allows the user to rotate the map by clicking and
dragging the cursor while holding the right mouse button or ctrl key.
Methods
KeyboardHandler
The KeyboardHandler allows the user to zoom, rotate, and pan the map using
the following keyboard shortcuts:
=/+: Increase the zoom level by 1.Shift-=/Shift-+: Increase the zoom level by 2.-: Decrease the zoom level by 1.Shift--: Decrease the zoom level by 2.- Arrow keys: Pan by 100 pixels.
Shift+⇢: Increase the rotation by 15 degrees.Shift+⇠: Decrease the rotation by 15 degrees.Shift+⇡: Increase the pitch by 10 degrees.Shift+⇣: Decrease the pitch by 10 degrees.
Methods
Disables the "keyboard pan/rotate" interaction, leaving the "keyboard zoom" interaction enabled.
Example
DoubleClickZoomHandler
src/ui/handler/shim/dblclick_zoom.ts
The DoubleClickZoomHandler allows the user to zoom the map at a point by
double clicking or double tapping.
Methods
TwoFingersTouchPitchHandler
src/ui/handler/two_fingers_touch.ts
The TwoFingersTouchPitchHandler allows the user to pitch the map by dragging up and down with two fingers.
Methods
Enables the "drag to pitch" interaction.
Parameters
(Object?)Options
object.
| options.around | If "center" is passed, map will zoom around the center |
|---|
Example
TwoFingersTouchRotateHandler
src/ui/handler/two_fingers_touch.ts
The TwoFingersTouchRotateHandler allows the user to rotate with two fingers.
Methods
Enables the "drag to pitch" interaction.
Parameters
(Object?)Options
object.
| options.around | If "center" is passed, map will zoom around the center |
|---|
Example
TwoFingersTouchZoomHandler
src/ui/handler/shim/two_fingers_touch.ts
The TwoFingersTouchZoomHandler allows the user to zoom the map two fingers.
Methods
Enables the "drag to zoom" interaction.
Parameters
(Object?)Options
object.
| options.around | If "center" is passed, map will zoom around the center |
|---|
Example
TwoFingersTouchZoomRotateHandler
src/ui/handler/shim/two_fingers_touch.ts
The TwoFingersTouchZoomRotateHandler allows the user to zoom and rotate the map by
pinching on a touchscreen.
They can zoom with one finger by double tapping and dragging. On the second tap, hold the finger down and drag up or down to zoom in or out.
Methods
Disables the "pinch to rotate" interaction, leaving the "pinch to zoom" interaction enabled.
Example
Enables the "pinch to rotate and zoom" interaction.
Parameters
(Object?)Options
object.
| options.around | If "center" is passed, map will zoom around the center |
|---|
Example