Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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>'));
share|improve this question
    
Have you looked at this:stackoverflow.com/questions/4909167/… You can get the screen.x & Screen.Y from the e inside the event listner. –  Devdatta Tengshe May 7 '13 at 15:21
add comment

2 Answers 2

your not opening the popup your just creating it, try

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!
});
share|improve this answer
    
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
show 2 more comments

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/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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