Skip to main content

User interaction (Interaction)

Handlers provide a variety of interactive functions for maps - mouse interaction, touch interaction, and other gesture interaction functions.

BoxZoomHandler​

Allows the user to zoom the map to fit within the bounding box. You can define the bounding box by holding down the shift key and dragging the cursor.

Instance members​

disable​

Disable "box zoom" functionality.

Case​
map.boxZoom.disable();

enable​

Enable "box zoom" function.

Case​
map.boxZoom.enable();

isActive​

Returns a Boolean value indicating whether the "box zoom" interaction is active (that is, whether it is currently in use).

Case​
const isBoxZoomActive = map.boxZoom.isActive();

isEnabled​

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

Case​
const isBoxZoomEnabled = map.boxZoom.isEnabled();

DragPanHandler​

Allows the user to pan the map by clicking and dragging the cursor.

Instance members​

disable​

Disable "drag and pan" interaction.

Case​
map.dragPan.disable();

enable​

Turn on the "drag and pan" interactive function.

Case​
map.dragPan.enable();

isActive​

Returns a Boolean value indicating whether the "drag pan" interaction function is active (that is, whether it is currently in use).

Case​
const isDragPanActive = map.dragPan.isActive();

isEnabled​

Returns a Boolean value indicating whether the "drag and pan" interactive function is enabled.

Case​
const isDragPanEnabled = map.dragPan.isEnabled();

DragRotateHandler​

Allows the user to rotate the map by holding down the right mouse button and dragging the cursor, or holding down the ctrl key and dragging the cursor.

Instance members​

disable​

Disable "Drag to Rotate" interactivity.

Case​
map.dragRotate.disable();

enable​

Turn on the "drag and rotate" interactive function.

Case​
map.dragRotate.enable();

isActive​

Returns a Boolean value indicating whether the Drag to Rotate interaction is active (i.e., currently in use).

Case​
const isDragRotateActive = map.dragRotate.isActive();

isEnabled​

Returns a Boolean value indicating whether the "drag and rotate" interactive function is enabled.

Case​
const isDragRotateEnabled = map.dragRotate.isEnabled();

DoubleClickZoomHandler​

Allows the user to zoom in and out of the map by double-clicking on it.

Instance members​

disable​

Disable "double-click to zoom" interactivity.

Case​
map.doubleClickZoom.disable();

enable​

Turn on the "double-click to zoom" interactive function.

Case​
map.doubleClickZoom.enable();

isActive​

Returns a Boolean value indicating whether the Double-click to Zoom interaction feature is active (that is, whether it is currently in use).

Case​
const isDoubleClickZoomActive = map.doubleClickZoom.isActive();

isEnabled​

Returns a Boolean value indicating whether the "double-click to zoom" interactive function is enabled.

Case​
const isDoubleClickZoomEnabled = map.doubleClickZoom.isEnabled();

KeyboardHandler​

Allows users to zoom, rotate, and pan the map using the following keyboard shortcuts:

  • = / +: Increase the zoom level by 1 level.
  • Shift-= / Shift-+: Increase the zoom level by 2 levels.
  • -: Decrease the zoom level by 1 level.
  • Shift--: Decrease the zoom level by 2 levels.
  • Arrow keys: Pan 100 pixels.
  • Shift+⇢: Increase rotation by 15 degrees.
  • Shift+⇠: Decrease rotation by 15 degrees.
  • Shift+⇡: Increase tilt angle by 10 degrees.
  • Shift+⇣: Decrease tilt angle by 10 degrees.

Instance members​

disable​

Disable keyboard interaction.

Case​
map.keyboard.disable();

enable​

Enable keyboard interaction.

Case​
map.keyboard.enable();

isEnabled​

Returns a Boolean value indicating whether the keyboard interaction function is enabled.

Case​
const isKeyboardEnabled = map.keyboard.isEnabled();

ScrollZoomHandler​

Allows the user to zoom in and out of the map by scrolling.

Instance members​

disable​

Disable the "Scroll to Zoom" interaction feature.

Case​
map.scrollZoom.disable();

enable​

Turn on the "Scroll to Zoom" interactive function.

Parameters​
NameTypeDescription
optionsObjectRequiredparameter
nametypedescription
aroundStringRequiredIf "center" is passed, the map will be scaled centered on the current map.
Case​
map.scrollZoom.enable();

map.scrollZoom.enable({ around:'center'});

isEnabled​

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

Case​
const isScrollZoomEnabled = map.scrollZoom.isEnabled();

setWheelZoomRate​

Set the scrolling zoom ratio.

Parameters​
nametypedefault valuedescription
wheelZoomRateNumber1/450RequiredScrolling zoom ratio.
Case​
// Slow down the zoom of mouse scrolling
map.scrollZoom.setWheelZoomRate(1 / 600);

setZoomRate​

Set the touchpad scaling.

Parameters​
nametypedefault valuedescription
zoomRateNumber1/100RequiredThe zoom ratio of the touchpad.
Case​
// Accelerate touchpad zooming
map.scrollZoom.setZoomRate(1 / 25);

TouchZoomRotateHandler​

Allows users to zoom and rotate the map by pinching the touch screen.

Instance members​

disable​

Disable the "pinch to rotate and zoom" interaction feature.

Case​
map.touchZoomRotate.disable();

disableRotation​

Disable the "pinch to rotate" interaction function and enable the "pinch to zoom" interaction function.

Case​
map.touchZoomRotate.disableRotation();

enable​

Turn on the "Pinch to Rotate and Zoom" interaction feature.

Parameters​
NameTypeDescription
optionsObjectRequiredparameter
nametypedescription
aroundStringRequiredIf the "center" parameter is passed in, the map will be zoomed around "center".
Case​
map.touchZoomRotate.enable();

map.touchZoomRotate.enable({ around: 'center' });

enableRotation​

Turn on the "Pinch to Rotate" interactive feature.

Case​
map.touchZoomRotate.enable();

map.touchZoomRotate.enableRotation();

isEnabled​

Returns a Boolean value indicating whether the "pinch to rotate and zoom" interactive function is turned on.

Case​
const isTouchZoomRotateEnabled = map.touchZoomRotate.isEnabled();