How do I get the latlng after the dragend event in leaflet?

Question

I'm trying to update the lat/lng value of a marker after it is moved. The example provided uses a popup window to display the lat/lng.

I have a "dragend" event listener for the marker, but when I alert the value of e.latlng it returns undefined.

javascript:

function markerDrag(e){
    alert("You dragged to: " + e.latlng);
}

function initialize() {
    // Initialize the map
    var map = L.map('map').setView([38.487, -75.641], 8);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 18
    }).addTo(map);

    // Event Handlers
    map.on('click', function(e){
        var marker = new L.Marker(e.latlng, {draggable:true});
        marker.bindPopup("<strong>"+e.latlng+"</strong>").addTo(map);

        marker.on('dragend', markerDrag);
    });
}


$(document).ready(initialize());

http://jsfiddle.net/rhewitt/Msrpq/4/

score 22 · Answer 1 · edited Apr 01 '23 at 10:05

22

Use e.target.getLatLng() to get the latlng of the updated position.

// Script for adding marker on map click
function onMapClick(e) {

    var marker = L.marker(e.latlng, {
             draggable:true,
             title:"Resource location",
             alt:"Resource Location",
             riseOnHover:true
            }).addTo(map)
              .bindPopup(e.latlng.toString()).openPopup();

    // #12 : Update marker popup content on changing it's position
    marker.on("dragend",function(e){

        var changedPos = e.target.getLatLng();
        this.bindPopup(changedPos.toString()).openPopup();

    });
}

JSFiddle demo

edited Apr 01 '23 at 10:05

Alexander Farber

21,519
75
241
416

answered Mar 23 '14 at 19:42

Kedar.Aitawdekar

2,364
1
23
25

The key piece of this that answers the OP's question is `ev.target.getLatLng()`. – Matt Feb 28 '18 at 14:01
Is there anyway for folium, I can't find this answer for folium. – AnonymousUser Nov 01 '21 at 04:45
This is what I want, but on folium. – AnonymousUser Nov 05 '21 at 04:43

score 15 · Accepted Answer · answered Aug 22 '13 at 14:41

15

latlng value is not in e.latlng but in e.target._latlng . Use console.

answered Aug 22 '13 at 14:41

lintu

1,092
11
24

2

How did you use the console to find that it was actually `e.target._latlng`? – Roy Aug 22 '13 at 15:45
put a debugger in fiddle – lintu Aug 22 '13 at 16:00
Give an example? I don't know how to console out a property I'm not aware of. – Roy Aug 22 '13 at 16:27
9

write "debugger"; where you want to break and open the console.(reload the page :) ) . Once the break point is hit, hover over the property or type in console. You can see all the contents. this will help.. https://developers.google.com/chrome-developer-tools/docs/javascript-debugging – lintu Aug 23 '13 at 14:14
7

It's better to use `e.target.getLatLng()`; that way we're not exposing any private variables. – user2441511 Nov 16 '16 at 20:35

score 10 · Answer 3 · edited May 23 '17 at 10:31

10

While using e.target._latlng works (as proposed by this other answer), it's better practice to use

e.target.getLatLng();

That way we're not exposing any private variables, as is recommended by Leaflet:

Private properties and methods start with an underscore (_). This doesn’t make them private, just recommends developers not to use them directly.

edited May 23 '17 at 10:31

Community

1
1

answered Nov 16 '16 at 20:38

user2441511

11,036
3
25
50

e.target.getLatLng is not a function – Aral Roca Apr 22 '17 at 08:39
1

BTW, `const { lat, lng } = e.target.getCenter();` is working perfectly for me – Aral Roca Apr 22 '17 at 08:45

score 9 · Answer 4 · answered Apr 22 '17 at 08:47

9

I think the API changed.

Nowadays is: const { lat, lng } = e.target.getCenter();

answered Apr 22 '17 at 08:47

Aral Roca

5,442
8
47
78

What object are you clicking on and what version of Leaflet? I only see the `getCenter()` method available for `L.map`, `L.latLngBounds` and `L.polyline` for [Leaflet 1.0.3](http://leafletjs.com/reference-1.0.3.html). On the other hand, `getLatLng()` is available for `L.marker`, `L.popup`, and `L.circleMarker`. – user2441511 Apr 24 '17 at 14:15
The API has not changed. In 1.3.0, for markers, this is still `e.target.getLatLng()`. – Matt Feb 28 '18 at 14:01
This helped! On Leaflet version 1.0.3 here. No `getLatLng` method. I got as far to looking in the console and found various `L.Point` classes, but this was the data I wanted. Even in the source version of Leaflet, I only saw the `target` object as `NewClass`, which didn't help for looking through the docs online, and I also did not see much in the way of a "move" event that I was using. – Pysis Apr 20 '18 at 22:40

score 0 · Answer 5 · answered Sep 03 '22 at 01:35

0

if anyone is using react than you should use :

const map = useMap()
map.addEventListener("dragend" , ()=> {
const {lat , lng} = map.getCenter()
})

answered Sep 03 '22 at 01:35

gouder hicham

123
10

How do I get the latlng after the dragend event in leaflet?

5 Answers5

Linked