Add onContextMenu prop (#529)

docs/components/interactive-map.md

@@ -148,6 +148,12 @@ Parameters
     [queryRenderedFeatures](https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures) API.
     To make a layer interactive, set the `interactive` property in the layer style to `true`.
 
+##### `onContextMenu` {Function}
+
+Called when the context menu is activated. Prevent default here to enable right button interaction.
+
+Default: `event => event.preventDefault()`
+
 ##### `getCursor` {Function}
 
 Accessor that returns a cursor style to show interactive state. Called when the component is being rendered.

src/components/interactive-map.js

@@ -86,6 +86,10 @@ const propTypes = Object.assign({}, StaticMap.propTypes, {
     * https://www.mapbox.com/mapbox-gl-style-spec/#layer-interactive
     */
   onClick: PropTypes.func,
+  /**
+    * Called when the context menu is activated.
+    */
+  onContextMenu: PropTypes.func,
 
   /** Custom touch-action CSS for the event canvas. Defaults to 'none' */
   touchAction: PropTypes.string,
@@ -125,6 +129,7 @@ const defaultProps = Object.assign({},
     onViewportChange: null,
     onClick: null,
     onHover: null,
+    onContextMenu: event => event.preventDefault(),
 
     scrollZoom: true,
     dragPan: true,
@@ -168,7 +173,6 @@ export default class InteractiveMap extends PureComponent {
     this._mapControls = props.mapControls || new MapControls();
 
     this._eventManager = new EventManager(null, {
-      rightButton: true,
       legacyBlockScroll: false,
       touchAction: props.touchAction
     });
@@ -179,8 +183,6 @@ export default class InteractiveMap extends PureComponent {
     this._getFeatures = this._getFeatures.bind(this);
     this._onInteractiveStateChange = this._onInteractiveStateChange.bind(this);
     this._getPos = this._getPos.bind(this);
-    this._onMouseMove = this._onMouseMove.bind(this);
-    this._onMouseClick = this._onMouseClick.bind(this);
     this._eventCanvasLoaded = this._eventCanvasLoaded.bind(this);
     this._staticMapLoaded = this._staticMapLoaded.bind(this);
   }
@@ -197,8 +199,11 @@ export default class InteractiveMap extends PureComponent {
     const eventManager = this._eventManager;
 
     // Register additional event handlers for click and hover
-    eventManager.on('mousemove', this._onMouseMove);
-    eventManager.on('click', this._onMouseClick);
+    eventManager.on({
+      mousemove: this._onMouseMove.bind(this),
+      click: this._onMouseClick.bind(this),
+      contextmenu: this._onContextMenu.bind(this)
+    });
 
     this._mapControls.setOptions(Object.assign({}, this.props, this.props.viewState, {
       onStateChange: this._onInteractiveStateChange,
@@ -300,6 +305,12 @@ export default class InteractiveMap extends PureComponent {
     }
   }
 
+  _onContextMenu(event) {
+    if (this.props.onContextMenu) {
+      this.props.onContextMenu(event);
+    }
+  }
+
   _eventCanvasLoaded(ref) {
     // This will be called with `null` after unmount, releasing event manager resource
     this._eventManager.setElement(ref);