diff --git a/packages/base-map/__mocks__/ContextMenuDemo.js b/packages/base-map/__mocks__/ContextMenuDemo.js
new file mode 100644
index 000000000..fa81628ce
--- /dev/null
+++ b/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 (
+
+ Context Menu }}
+ onContextMenu={this.handleContextMenu}
+ />
+
+ );
+ }
+}
diff --git a/packages/base-map/src/index.js b/packages/base-map/src/index.js
index 902aac97e..e8f9ff61f 100644
--- a/packages/base-map/src/index.js
+++ b/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,
diff --git a/packages/base-map/src/index.story.js b/packages/base-map/src/index.story.js
index 74954a691..76e55aa0a 100644
--- a/packages/base-map/src/index.story.js
+++ b/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 = () => (
);
@@ -152,3 +155,5 @@ export const customLocationPopupContent = () => (
onPopupClosed={onPopupClosed}
/>
);
+
+export const onContextMenuPopup = () => ;