MapController

Since v4.0

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