react-map-gl/docs/advanced/custom-map-controls.md

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:

  /// my-map-controls.js
  import {experimental} from 'react-map-gl';

  export default class MyMapControls extends experimental.MapControls {

    // override the default handler in MapControls
    handle(event) {
      if (event.type === 'wheel') {
        return false;
      }
      return super.handle(event);
    }
  }

Then pass it to the map during render:

  <ReactMapGL mapControls={new MyMapControls()} ... />

MapControls Interface

A custom map controls class must implement the following interface:

Properties

events (Array)

A list of event names that this control subscribes to.

Available events: click, 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, and mouseup.

Event object is generated by hammer.js.

Methods

setState(state)

Used by InteractiveMap to update this control's state.

handle(event)

Called by InteractiveMap to handle pointer events.