feat(BaseMap): Add support for map contextMenu event.

packages/base-map/__mocks__/ContextMenuDemo.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from "react";
+import BaseMap from "..";
+
+export default class ContextMenuDemo extends Component {
+  constructor() {
+    super();
+
+    this.state = { location: null };
+  }
+
+  handleContextMenu = e => {
+    this.setState({ location: [e.latlng.lat, e.latlng.lng] });
+  };
+
+  render() {
+    const { location } = this.state;
+    const center = [45.522862, -122.667837];
+
+    return (
+      <div>
+        <BaseMap
+          center={center}
+          popup={{ location, contents: <h1>Context Menu</h1> }}
+          onContextMenu={this.handleContextMenu}
+        />
+      </div>
+    );
+  }
+}

packages/base-map/src/index.js

@@ -118,6 +118,7 @@ class BaseMap extends Component {
       children,
       maxZoom,
       popup,
+      onContextMenu,
       onPopupClosed,
       zoom
     } = this.props;
@@ -146,6 +147,7 @@ class BaseMap extends Component {
         maxZoom={maxZoom}
         // onClick={this.onLeftClick}
         // Note: Map-click is handled via single-click plugin, set up in componentDidMount()
+        onContextMenu={onContextMenu}
         onOverlayAdd={this.handleOverlayAdded}
         onOverlayRemove={this.handleOverlayRemoved}
         onViewportChanged={this.handleViewportChanged}
@@ -253,6 +255,11 @@ BaseMap.propTypes = {
    * See https://leafletjs.com/reference-1.6.0.html#map-click for details.
    */
   onClick: PropTypes.func,
+  /**
+   * Triggered when the user right-clicks on the map or, on a mobile device, presses the map for a second ("long-press").
+   * See https://leafletjs.com/reference-1.6.0.html#map-contextmenu for details.
+   */
+  onContextMenu: PropTypes.func,
   /**
    * Triggered when the user makes an overlay visible using the map's layers control.
    * See https://leafletjs.com/reference-1.6.0.html#map-overlayadd for details.
@@ -303,6 +310,7 @@ BaseMap.defaultProps = {
   ],
   maxZoom: 20,
   onClick: null,
+  onContextMenu: null,
   onOverlayAdded: null,
   onOverlayRemoved: null,
   onPopupClosed: null,

packages/base-map/src/index.story.js

@@ -6,6 +6,7 @@ import { withInfo } from "@storybook/addon-info";
 import BaseMap from ".";
 import SelectVehicles from "../__mocks__/SelectVehicles";
 import AllVehiclesOverlay from "../__mocks__/AllVehicles";
+import ContextMenuDemo from "../__mocks__/ContextMenuDemo";
 
 import "../assets/map.css";
 
@@ -64,6 +65,7 @@ const samplePopup = (
 );
 
 const onClick = action("onClick");
+const onContextMenu = action("onContextMenu");
 const onPopupClosed = action("onPopupClosed");
 const onOverlayAdded = action("onOverlayAdded");
 const onOverlayRemoved = action("onOverlayRemoved");
@@ -77,6 +79,7 @@ export const clickAndViewportchangedEvents = () => (
   <BaseMap
     center={center}
     onClick={onClick}
+    onContextMenu={onContextMenu}
     onViewportChanged={onViewportChanged}
   ></BaseMap>
 );
@@ -152,3 +155,5 @@ export const customLocationPopupContent = () => (
     onPopupClosed={onPopupClosed}
   />
 );
+
+export const onContextMenuPopup = () => <ContextMenuDemo />;