User interaction handlers

Items related to the ways in which the map responds to user input.

BoxZoomHandler

GitHubLogo src/ui/handler/box_zoom.ts

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

Disables the "box zoom" interaction.

Example

Enables the "box zoom" interaction.

Example

Returns a Boolean indicating whether the "box zoom" interaction is active, i.e. currently being used.

Returns

boolean: true if the "box zoom" interaction is active.

Returns a Boolean indicating whether the "box zoom" interaction is enabled.

Returns

boolean: true if the "box zoom" interaction is enabled.

CooperativeGesturesHandler

GitHubLogo src/ui/handler/cooperative_gestures.ts

A CooperativeGesturesHandler is a control that adds cooperative gesture info when user tries to zoom in/out.

When the CooperativeGestureHandler blocks a gesture, it will emit a 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

GitHubLogo src/ui/handler/scroll_zoom.ts

The ScrollZoomHandler allows the user to zoom the map by scrolling.

Methods

Disables the "scroll to zoom" interaction.

Example

enable(options?)

Enables the "scroll to zoom" interaction.

Parameters

options(Object?)Options object.

options.around string?	If "center" is passed, map will zoom around center of map

Example

Returns a Boolean indicating whether the "scroll to zoom" interaction is enabled.

Returns

boolean: true if the "scroll to zoom" interaction is enabled.

setWheelZoomRate(wheelZoomRate)

Set the zoom rate of a mouse wheel

Parameters

wheelZoomRate(number)(default 1/450)The rate used to scale mouse wheel movement to a zoom value.

Example

setZoomRate(zoomRate)

Set the zoom rate of a trackpad

Parameters

zoomRate(number)(default 1/100)The rate used to scale trackpad movement to a zoom value.

Example

DragPanHandler

GitHubLogo src/ui/handler/shim/drag_pan.ts

The DragPanHandler allows the user to pan the map by clicking and dragging the cursor.

Methods

Disables the "drag to pan" interaction.

Example

enable(options?)

Enables the "drag to pan" interaction.

Parameters

options(Object?)Options object

options.linearity number default: 0	factor used to scale the drag velocity
options.easing Function default: bezier(0,0,0.3,1)	easing function applled to `map.panTo` when applying the drag.
options.maxSpeed number default: 1400	the maximum value of the drag velocity.
options.deceleration number default: 2500	the rate at which the speed reduces after the pan ends.

Example

Returns a Boolean indicating whether the "drag to pan" interaction is active, i.e. currently being used.

Returns

boolean: true if the "drag to pan" interaction is active.

Returns a Boolean indicating whether the "drag to pan" interaction is enabled.

Returns

boolean: true if the "drag to pan" interaction is enabled.

DragRotateHandler

GitHubLogo 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

Disables the "drag to rotate" interaction.

Example

Enables the "drag to rotate" interaction.

Example

Returns a Boolean indicating whether the "drag to rotate" interaction is active, i.e. currently being used.

Returns

boolean: true if the "drag to rotate" interaction is active.

Returns a Boolean indicating whether the "drag to rotate" interaction is enabled.

Returns

boolean: true if the "drag to rotate" interaction is enabled.

KeyboardHandler

GitHubLogo src/ui/handler/keyboard.ts

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 rotate and zoom" interaction.

Example

disableRotation()

Disables the "keyboard pan/rotate" interaction, leaving the "keyboard zoom" interaction enabled.

Example

Enables the "keyboard rotate and zoom" interaction.

Example

enableRotation()

Enables the "keyboard pan/rotate" interaction.

Example

Returns true if the handler is enabled and has detected the start of a zoom/rotate gesture.

Returns

boolean: true if the handler is enabled and has detected the start of a zoom/rotate gesture.

Returns a Boolean indicating whether the "keyboard rotate and zoom" interaction is enabled.

Returns

boolean: true if the "keyboard rotate and zoom" interaction is enabled.

DoubleClickZoomHandler

GitHubLogo 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

Disables the "double click to zoom" interaction.

Example

Enables the "double click to zoom" interaction.

Example

Returns a Boolean indicating whether the "double click to zoom" interaction is active, i.e. currently being used.

Returns

boolean: true if the "double click to zoom" interaction is active.

Returns a Boolean indicating whether the "double click to zoom" interaction is enabled.

Returns

boolean: true if the "double click to zoom" interaction is enabled.

TwoFingersTouchPitchHandler

GitHubLogo src/ui/handler/two_fingers_touch.ts

The TwoFingersTouchPitchHandler allows the user to pitch the map by dragging up and down with two fingers.

Extends TwoFingersTouchHandler.

Methods

Disables the "drag to pitch" interaction.

Example

enable(options?)

Enables the "drag to pitch" interaction.

Parameters

options(Object?)Options object.

options.around string?	If "center" is passed, map will zoom around the center

Example

Returns a Boolean indicating whether the "drag to pitch" interaction is active, i.e. currently being used.

Returns

boolean: true if the "drag to pitch" interaction is active.

Returns a Boolean indicating whether the "drag to pitch" interaction is enabled.

Returns

boolean: true if the "drag to pitch" interaction is enabled.

TwoFingersTouchRotateHandler

GitHubLogo src/ui/handler/two_fingers_touch.ts

The TwoFingersTouchRotateHandler allows the user to rotate with two fingers.

Extends TwoFingersTouchHandler.

Methods

Disables the "drag to rotate" interaction.

Example

enable(options?)

Enables the "drag to pitch" interaction.

Parameters

options(Object?)Options object.

options.around string?	If "center" is passed, map will zoom around the center

Example

Returns a Boolean indicating whether the "drag to pitch" interaction is active, i.e. currently being used.

Returns

boolean: true if the "drag to pitch" interaction is active.

Returns a Boolean indicating whether the "drag to pitch" interaction is enabled.

Returns

boolean: true if the "drag to pitch" interaction is enabled.

TwoFingersTouchZoomHandler

GitHubLogo src/ui/handler/shim/two_fingers_touch.ts

The TwoFingersTouchZoomHandler allows the user to zoom the map two fingers.

Methods

Disables the "pinch to rotate and zoom" interaction.

Example

enable(options?)

Enables the "drag to zoom" interaction.

Parameters

options(Object?)Options object.

options.around string?	If "center" is passed, map will zoom around the center

Example

Returns true if the handler is enabled and has detected the start of a zoom/rotate gesture.

Returns

boolean: //eslint-disable-line

Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is enabled.

Returns

boolean: true if the "pinch to rotate and zoom" interaction is enabled.

TwoFingersTouchZoomRotateHandler

GitHubLogo 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 and zoom" interaction.

Example

disableRotation()

Disables the "pinch to rotate" interaction, leaving the "pinch to zoom" interaction enabled.

Example

enable(options?)

Enables the "pinch to rotate and zoom" interaction.

Parameters

options(Object?)Options object.

options.around string?	If "center" is passed, map will zoom around the center

Example

enableRotation()

Enables the "pinch to rotate" interaction.

Example

Returns true if the handler is enabled and has detected the start of a zoom/rotate gesture.

Returns

boolean: //eslint-disable-line

Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is enabled.

Returns

boolean: true if the "pinch to rotate and zoom" interaction is enabled.

Reference documentation of MapTiler SDK JS, an extension of MapLibre GL JS

Examples

More than 100 examples

SDK JS Reference

SDK Modules

JS Frameworks

On this page