How to open popup menu on right click in Leaflet

Question

I want to open a popup menu list on right click with Leaflet map. I have tried the ContextMenu of leaflet but couldn't do it. Here is the sort of code I used.

map.on('contextmenu', L.popup()
.setContent('<p>Hello world!<br />This is a nice popup.</p>'));

Answer 1

You're not opening the popup, you're just creating it, try obtaining the result of L.popup():

var popup = L.popup().setContent('<p>Hello world!<br />This is a nice popup.</p>'); 

This creates a popup then you need to make it open on a right click, the second argument to 'on' only accepts a function, that will run with the first parameter being the event. In other words, the function can't end in parentheses. It's usually easier to just wrap what you want to do in an anonymous function as shown bellow:

map.on('contextmenu',function(){
    popup.openOn(map);
});

You could also do

map.openPopup(popup);

either is equivalent. make sure to avoid bindPopup because that assumes you want to use regular left clicks.

Edit: so to make it look more menu like you need to use a library to create a popup menu like one of these

map.on('contextmenu',function(e){
    plugin run!
});

Answer 2

Opens new popup on right click, don't forget to set the coordinate where the popup window should be placed by calling setLatLng function, otherwise you will get following error: leaflet.js:5 Uncaught TypeError: Cannot read property 'lat' of undefined at Object.project

map.on('contextmenu',(e) => {
  L.popup()
  .setLatLng(e.latlng)
  .setContent('<pre>Hello</pre>')
  .addTo(map)
  .openOn(map);
});

Answer 3

Another answer ;)

To have event everywhere you right click in Leaflet map

Go on web page http://leafletjs.com/examples/geojson-example.html

Type in the console

//Right click on the map activated
map.on('contextmenu', function(e) {
    alert(e.latlng);
});


//Right click on the different layers
var layers_and_features = map._layers;
for (var lay in layers_and_features) {
    //Hacky way to get geojson type layer (can work for other vector layer, see Leaflet API, searching keyword contextmenu)
  if (layers_and_features[lay].addData) {
  layers_and_features[lay].on('contextmenu', function(e) {
    alert(e.latlng);
  });
  }
}

For some UI for your right click menu, see http://www.jquery4u.com/menus/right-click-context-menu-plugins/