19

I'm trying to use Leaflet to get the map coordinates of somewhere a user has right clicked. I've been going through the Leaflet API and so far I've figured out that I need to listen to the contextmenu event and use mouseEventToLatLng method to get the coordinates when clicked. However, when I go through and debug my code I'm not seeing an accessible latLng variable anywhere. Did I miss understand something in the API?

function setMarkers() {
        document.getElementById("transitmap").addEventListener("contextmenu", function( event ) {
            // Prevent the browser's context menu from appearing
            event.preventDefault();

            var coords = L.mouseEventToLatLng( event );
        });
    };
2
  • What you want is to make "coords" variable accesible from everywhere? Commented May 30, 2016 at 0:49
  • Actually, I'm wating to access coords from within that function. The issue is when I run the code the console gives me an error message saying mouseEventToLatLng is not defined.
    – Pallas
    Commented May 30, 2016 at 1:00

2 Answers 2

21

What you want to get is mousemove event. This is basically how you do it,

var lat, lng;

map.addEventListener('mousemove', function(ev) {
   lat = ev.latlng.lat;
   lng = ev.latlng.lng;
});

document.getElementById("transitmap").addEventListener("contextmenu", function (event) {
    // Prevent the browser's context menu from appearing
    event.preventDefault();

    // Add marker
    // L.marker([lat, lng], ....).addTo(map);
    alert(lat + ' - ' + lng);

    return false; // To disable default popup.
});
4
  • But one of my use cases is to set the marker by right clicking on the map that way I can still use the left click to move the map around. If I use mousemove then it'll continuously be resetting the marker as the mouse moves around the map. Did I misunderstand something about your snippet?
    – Pallas
    Commented May 30, 2016 at 1:19
  • @RandomlyKnighted The map's mousemove event won't continuously be resetting the marker. You can also still use left click to move the map around. What this basically does, is to capture where your cursor on the map is and translate it to latlng. Then, when you right-click on the map, it should only create the marker where that latlng is..
    – choz
    Commented May 30, 2016 at 1:22
  • 2
    Thanks that helped a lot!
    – Pallas
    Commented May 30, 2016 at 2:22
  • Sadly this no longer seems to work on Leaflet 1.7.1
    – Martin
    Commented Sep 28, 2020 at 11:23
13

The coordinates of the right click event should be directly available as latlng property of the event argument of the "contextmenu" listener.

map.on("contextmenu", function (event) {
  console.log("Coordinates: " + event.latlng.toString());
  L.marker(event.latlng).addTo(map);
});

Demo: http://plnkr.co/edit/9vm81YsQxnkAFs35N8Jo?p=preview

3
  • Thanks! That's exactly what I was looking for.
    – Pallas
    Commented May 30, 2016 at 3:52
  • 1
    @Martin: seems to be working fine with Leaflet v1.7.1 plnkr.co/edit/aCkd7oosk2cBS62u
    – ghybs
    Commented Sep 28, 2020 at 15:51
  • 1
    @ghybs sorry this comment was for the above answer code, not sure how that managed to appear on your answer as well. I'd actually previously already upvoted this answer, too :-)
    – Martin
    Commented Sep 28, 2020 at 19:45

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