Goong Documents
Javascript API
User interaction handlers

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.

Instance Members

Disables the "box zoom" interaction.

Example
map.boxZoom.disable();

Enables the "box zoom" interaction.

Example
map.boxZoom.enable();

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.

ScrollZoomHandler

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

Instance Members

Disables the "scroll to zoom" interaction.

Example
map.scrollZoom.disable();

Enable the "scroll to zoom" interaction.

Parameters

options (Object?)

NameDescription
options.around
string?		If "center" is passed, map will zoom around center of map
Example
map.scrollZoom.enable();

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

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

Returns

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

Set the zoom rate of a mouse wheel

Parameters

wheelZoomRate (number)(default 1/450)

Set the zoom rate of a trackpad

Parameters

zoomRate (number)(default 1/100)

DragPanHandler

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

Instance Members

Disables the "drag to pan" interaction.

Example
map.dragPan.disable();

Enables the "drag to pan" interaction.

Parameters

options (Object?)

NameDescription
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
map.dragPan.enable();

map.dragpan.enable({
    linearity: 0.3,
    easing: bezier(0, 0, 0.3, 1),
    maxSpeed: 1400,
    deceleration: 2500,
  });

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

The DragRotateHandler allows the user to rotate the map by clicking and dragging the cursor while holding the right mouse button or ctrl key.

Instance Members

Disables the "drag to rotate" interaction.

Example
map.dragRotate.disable();

Enables the "drag to rotate" interaction.

Example
map.dragRotate.enable();

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

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.

Instance Members

Disables keyboard interaction.

Example
map.keyboard.disable();

Enables keyboard interaction.

Example
map.keyboard.enable();

Returns a Boolean indicating whether keyboard interaction is enabled.

Returns

boolean: true if keyboard interaction is enabled.

DoubleClickZoomHandler

The DoubleClickZoomHandler allows the user to zoom the map at a point by double clicking or double tapping.

Instance Members

Disables the "double click to zoom" interaction.

Example
map.doubleClickZoom.disable();

Enables the "double click to zoom" interaction.

Example
map.doubleClickZoom.enable();

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.

TouchZoomRotateHandler

The TouchZoomRotateHandler allows the user to zoom and rotate the map by pinching on a touchscreen.

static Members

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

Returns

boolean:

Instance Members

Disables the "pinch to rotate and zoom" interaction.

Example
map.touchZoomRotate.disable();

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

Example
map.touchZoomRotate.disableRotation();

Enables the "pinch to rotate and zoom" interaction.

Parameters

options(Object?)

NameDescription
options.around
string?		If "center" is passed, map will zoom around the center
Example
map.touchZoomRotate.enable();

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

Enables the "pinch to rotate" interaction.

Example
map.touchZoomRotate.enable();
map.touchZoomRotate.enableRotation();

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.