Mapbox GL JS
All docschevron-rightMapbox GL JSchevron-rightarrow-leftAPI Referencechevron-rightUser interaction handlers

User interaction handlers

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

BoxZoomHandler

githubsrc/ui/handler/box_zoom.js

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

Was this section on BoxZoomHandler helpful?

DoubleClickZoomHandler

githubsrc/ui/handler/shim/dblclick_zoom.js

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

Instance Members

Was this section on DoubleClickZoomHandler helpful?

DragPanHandler

githubsrc/ui/handler/shim/drag_pan.js

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

Instance Members

Was this section on DragPanHandler helpful?

DragRotateHandler

githubsrc/ui/handler/shim/drag_rotate.js

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

Was this section on DragRotateHandler helpful?

KeyboardHandler

githubsrc/ui/handler/keyboard.js

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

Was this section on KeyboardHandler helpful?

ScrollZoomHandler

githubsrc/ui/handler/scroll_zoom.js

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

Instance Members

Was this section on ScrollZoomHandler helpful?

TouchPitchHandler

githubsrc/ui/handler/touch_zoom_rotate.js

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

Extends TwoTouchHandler.
new TouchPitchHandler(map: Map)

Parameters

map(Map)
Was this section on TouchPitchHandler helpful?

TouchZoomRotateHandler

githubsrc/ui/handler/shim/touch_zoom_rotate.js

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.

Instance Members

Was this section on TouchZoomRotateHandler helpful?