# Custom Map Controls

## Overriding The Default Map Controller

To change the default behavior of map interaction, you can implement/extend the `MapControls`
class add pass an instance to the `mapControls` prop of `InteractiveMap`.

A simple example to disable mouse wheel:
```js
  /// my-map-controls.js
  import {experimental} from 'react-map-gl';

  export default class MyMapControls extends experimental.MapControls {

    constructor() {
      super();
      // subscribe to additional events
      this.events = ['click'];
    }

    // Override the default handler in MapControls
    handleEvent(event) {
      if (event.type === 'click') {
        console.log('hi!');
      }
      return super.handleEvent(event);
    }
  }
```
Then pass it to the map during render:
```jsx
  const mapControls = new MyMapControls();
  <ReactMapGL mapControls={mapControls} ... />
```


## MapControls Interface

A custom map controls class must implement the following interface:

### 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`, `touchstart`, `touchmove`, `touchend`, `mousedown`, `mousemove`, `mouseup`, `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']`
- `keyboar` - `['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(event)`

Called by `InteractiveMap` to handle pointer events.

##### `setOptions(options)`

Called by `InteractiveMap` when props change.