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 {

    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:

  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. 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(event)

Called by InteractiveMap to handle pointer events.

setOptions(options)

Called by InteractiveMap when props change.