react-map-gl/docs/api-reference/map-controller.md

MapController

The easiest way to create a custom map control is to extend the default MapController class.

Properties

events (Array)

A list of additional event names that this control subscribes to.

Available events: click, dblclick, tap, doubletap, press, pinch, pinchin, pinchout, pinchstart, pinchmove, pinchend, pinchcancel, rotate, rotatestart, rotatemove, rotateend, rotatecancel, pan, panstart, panmove, panup, pandown, panleft, panright, panend, pancancel, swipe, swipeleft, swiperight, swipeup, swipedown, pointerdown, pointermove, pointerup, keydown, and keyup.

The following events are toggled on/off by InteractiveMap props:

• scrollZoom - ['wheel']
• dragPan and dragRotate - ['panstart', 'panmove', 'panend']
• touchZoomRotate - ['pinchstart', 'pinchmove', 'pinchend']
• doubleClickZoom - ['doubletap']
• keyboard - ['keydown']

Event object is generated by mjolnir.js. It always has the following properties:

• type (string) - The event type to which the event handler is subscribed, e.g. 'click' or 'pointermove'
• center (Object {x, y}) - The center of the event location (e.g. the centroid of a touch) relative to the viewport (basically, clientX/Y)
• offsetCenter (Object {x, y}) - The center of the event location relative to the map.
• target (Object) - The target of the event, as specified by the original srcEvent
• srcEvent (Object) - The original event object dispatched by the browser to the JS runtime

Additionally, event objects for different event types contain a subset of the following properties:

• key (number) - The keycode of the keyboard event
• leftButton (boolean) - Flag indicating whether the left button is involved during the event
• middleButton (boolean) - Flag indicating whether the middle button is involved during the event
• rightButton (boolean) - Flag indicating whether the right button is involved during the event
• pointerType (string) - A string indicating the type of input (e.g. 'mouse', 'touch', 'pointer')
• delta (number) - The scroll magnitude/distance of a wheel event

Methods

handleEvent

handleEvent(event)

Called by the event manager to handle pointer events. This method delegate to the following methods to handle the default events:

• _onPanStart(event)
• _onPan(event)
• _onPanEnd(event)
• _onPinchStart(event)
• _onPinch(event)
• _onPinchEnd(event)
• _onDoubleTap(event)
• _onWheel(event)
• _onKeyDown(event)

getMapState

getMapState(overrides)

Get a new descriptor object of the map state. If specified, props in the overrides object override the current map props.

setOptions

setOptions(options)

Add/remove event listeners based on the latest InteractiveMap props.

updateViewport

updateViewport(newMapState, extraProps, interactionState)

Invoke onViewportChange callback with a new map state.

Source

map-controller.js