Is there example there extend react-leaflet Map component to use leaflet.contextmenu?

Question

react-leaflet-context-menu is the react version of leaflet.contextmenu. However it uses the original leaflet map to realize the plugin in react but not using react-leaflet.

I adopted react-leaflet in my app, using component. I went through Internet but not many example to show how to extend Map correctly.

Here is my code for map in my app:

<LeafletMap
        ref={m => {this.leafletMap = m;}}
        center={this.state.center}
        zoom={this.state.zoom}
        maxZoom={this.state.maxZoom}
        preferCanvas={this.state.preferCanvas}
        contextmenu={this.state.contextmenu}
        contextmenuWidth={this.state.contextmenuWidth}
        contextmenuItems={this.state.contextmenuItems}>
        <TileLayer
          url={mapsource}
          />
        <MarkerClusterGroup showCoverageOnHover={false} zoomToBoundsOnClick={false} maxClusterRadius={30}>
          {CamMarkers}
        </MarkerClusterGroup>
        <ScaleControl imperial={false} metric={true}/>
</LeafletMap>

I expect by extending component of react-leaflet, it can support leaflet.contextmenu directly. The props contextmenu, contextmenuWidth, contextmenuItems will be input to the extended component and will show some control upon right click on map.

React-leaflet has a lot of things changed and the plugins for older versions aren't working. I ran into a similar problem - trying to build a context menu for right click on a map and I'm still looking for solutions. We might end up doing something hacky - like getting the left, top from the contextmenu (right click) event and show/hide a component which has our menu. Please let me know if you found a solution. :) — Nagkumar Arkalgud
Nagkumar, did you find a solution? I am in your exact situation — Paul

Deepa Deepa · Accepted Answer · 2020-07-17T11:48:13

Install leaflet-contextmenu in your app, then add this in your code :

import "leaflet-contextmenu";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";

It will work.

Is there example there extend react-leaflet Map component to use leaflet.contextmenu?

1 Answers