# MapController

![Since v4.0](https://img.shields.io/badge/since-v4.0-green)

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](https://github.com/uber-web/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`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX))
* `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.

##### `setState`

`setState(newState)`

Save a persistent state (e.g. isDragging) for future use.

##### `updateViewport`

`updateViewport(newMapState, extraProps, extraState)`

Invoke `onViewportChange` callback with a new map state.


## Source

[map-controller.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/utils/map-controller.js)