# How to open popup menu on right click in Leaflet

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>'));


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 it 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!
});

• I have added the code but its not working. Moreover its not loading map also. Actually I want something like Google, Clodemade etc uses right click for Direction from her or to here menu bar with right click. Is it possible? – Devils Dream Feb 5 '13 at 21:48
• There was a typo in my code, I just fixed it. Leaflet doesn't come with a built in routing service so you'd have to find a plugin that deals with that or roll your own, possible yes, easy I don't know you might want to start a new question. – Calvin Feb 5 '13 at 22:33
• Won't this only create a pop-up bubble, not an actual context menu? – James Apr 30 '13 at 21:38
• yes it does the event is called contextmenu because it gets triggered anytime a context menu would be triggered. – Calvin Apr 30 '13 at 22:09
• Yes, Actually I want to create a menu bar as like Google not a popup bubble. – Devils Dream May 5 '13 at 8:38

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
});

//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)
});
}
}


map.on('contextmenu',(e) => {