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

3 Answers 3


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:


You could also do


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

    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? Feb 5, 2013 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, 2013 at 22:33
  • Won't this only create a pop-up bubble, not an actual context menu?
    – James
    Apr 30, 2013 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, 2013 at 22:09
  • Yes, Actually I want to create a menu bar as like Google not a popup bubble. May 5, 2013 at 8:38

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) => {

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) {

//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) {

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.