Table of Contents

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.

Parameters

isEnabled

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

Returns boolean true if the “box zoom” interaction is enabled.

isActive

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.

enable

Enables the “box zoom” interaction.

Examples

map.boxZoom.enable();

disable

Disables the “box zoom” interaction.

Examples

map.boxZoom.disable();

TouchPitchHandler

Extends TwoTouchHandler

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

isEnabled

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

Returns boolean true if the “drag to pitch” interaction is enabled.

isActive

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.

enable

Enables the “drag to pitch” interaction.

Examples

map.touchPitch.enable();

disable

Disables the “drag to pitch” interaction.

Examples

map.touchPitch.disable();

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.

enable

Enables the “keyboard rotate and zoom” interaction.

Examples

map.keyboard.enable();

disable

Disables the “keyboard rotate and zoom” interaction.

Examples

map.keyboard.disable();

isEnabled

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.

isActive

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.

disableRotation

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

Examples

map.keyboard.disableRotation();

enableRotation

Enables the “keyboard pan/rotate” interaction.

Examples

map.keyboard.enable();
  map.keyboard.enableRotation();

ScrollZoomHandler

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

Parameters

  • map Map
  • handler HandlerManager

setZoomRate

Set the zoom rate of a trackpad

Parameters

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

Examples

// Speed up trackpad zoom
map.scrollZoom.setZoomRate(1/25);

setWheelZoomRate

Set the zoom rate of a mouse wheel

Parameters

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

Examples

// Slow down zoom of mouse wheel
map.scrollZoom.setWheelZoomRate(1/600);

isEnabled

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

Returns boolean true if the “scroll to zoom” interaction is enabled.

enable

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

Examples

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

disable

Disables the “scroll to zoom” interaction.

Examples

map.scrollZoom.disable();

DoubleClickZoomHandler

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

Parameters

  • clickZoom ClickZoomHandler
  • TapZoom TapZoomHandler

enable

Enables the “double click to zoom” interaction.

Examples

map.doubleClickZoom.enable();

disable

Disables the “double click to zoom” interaction.

Examples

map.doubleClickZoom.disable();

isEnabled

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.

isActive

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.

DragPanHandler

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

Parameters

  • el HTMLElement
  • mousePan MousePanHandler
  • touchPan TouchPanHandler

enable

Enables the “drag to pan” interaction.

Parameters

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

Examples

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

disable

Disables the “drag to pan” interaction.

Examples

map.dragPan.disable();

isEnabled

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

Returns boolean true if the “drag to pan” interaction is enabled.

isActive

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.

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.

Parameters

  • options Object?
  • mouseRotate MouseRotateHandler
  • mousePitch MousePitchHandler

enable

Enables the “drag to rotate” interaction.

Examples

map.dragRotate.enable();

disable

Disables the “drag to rotate” interaction.

Examples

map.dragRotate.disable();

isEnabled

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

Returns boolean true if the “drag to rotate” interaction is enabled.

isActive

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.

TouchZoomRotateHandler

The TouchZoomRotateHandler 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.

Parameters

  • el HTMLElement
  • touchZoom TouchZoomHandler
  • touchRotate TouchRotateHandler
  • tapDragZoom TapDragZoomHandler

enable

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

Examples

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

disable

Disables the “pinch to rotate and zoom” interaction.

Examples

map.touchZoomRotate.disable();

isEnabled

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.

isActive

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

Returns boolean //eslint-disable-line

disableRotation

Disables the “pinch to rotate” interaction, leaving the “pinch to zoom” interaction enabled.

Examples

map.touchZoomRotate.disableRotation();

enableRotation

Enables the “pinch to rotate” interaction.

Examples

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