Skip to main content

User Interaction Handlers

Handlers Provides a variety of interactive functions for the map - Mouse interaction, touch interaction, and other gesture interaction functions.

BoxZoomHandler​

BoxZoomHandler Allows the user to zoom the map to fit within the bounding box. You can press and hold shift key and drag the cursor to define the limit box.

Instance members​

disable​

Disable "box zoom" Function.

Case​
map.boxZoom.disable();

enable​

turn on "box zoom" Function.

Case​
map.boxZoom.enable();

isActive​

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

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

isEnabled​

Returns a Boolean value that represents "box zoom" Whether interaction is enabled.

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

DragPanHandler​

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​

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

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​

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​

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

  • = / +：Zoom level increased 1 class.
  • Shift-= / Shift-+：Zoom level increased 2 class.
  • -：Zoom level reduced 1 class.
  • Shift--：Zoom level reduced 2 class.
  • Arrow keys：Pan 100 pixels.
  • Shift+⇢：Increase 15 degree rotation.
  • Shift+⇠：reduce 15 degree rotation.
  • Shift+⇡：Increase 10 degree tilt angle.
  • Shift+⇣：reduce 10 degree tilt angle.

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​

this ScrollZoomHandler Enables users 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.

parameter​
nametypedescribe
optionsObjectRequiredparameter
nametypedescribe
aroundStringRequiredif passed "center" ，Will zoom the map 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.

parameter​
NameTypeDefaultDescription
wheelZoomRateNumber1/450RequiredThe scrolling zoom ratio.
Case​
// Slow down zoom on mouse scroll
map.scrollZoom.setWheelZoomRate(1 / 600);

setZoomRate​

Set the touchpad scaling.

parameter​
NameTypeDefaultDescription
zoomRateNumber1/100RequiredThe touchpad scaling.
Case​
// Speed ​​up touchpad zooming
map.scrollZoom.setZoomRate(1 / 25);

TouchZoomRotateHandler​

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

Instance members​

disable​

Disable "pinch to rotate and zoom" Interactive features.

Case​
map.touchZoomRotate.disable();

disableRotation​

Disable "pinch to rotate" Interactive functions, enabled at the same time "pinch to zoom" Interactive features.

Case​
map.touchZoomRotate.disableRotation();

enable​

turn on "pinch to rotate and zoom" Interactive features.

parameter​
nametypedescribe
optionsObjectRequiredparameter
nametypedescribe
aroundStringRequiredSuch as incoming "center" parameter, the map will be centered around "center" Zoom.
Case​
map.touchZoomRotate.enable();

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

enableRotation​

turn on "pinch to rotate" Interactive features.

Case​
map.touchZoomRotate.enable();

map.touchZoomRotate.enableRotation();

isEnabled​

Returns a Boolean value that represents "pinch to rotate and zoom" Whether the interactive function is enabled.

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