Leaflet on drag updating lat, lng variables

Question

I am trying to allow the user to create only one marker on my leaflet map. This is working fine:

var map = L.map("map").setView([-41.5, 173], 6);
var lat = 0.0;
var lon = 0.0;
var marker;

// on map click: get lat, lon - only allowed to happen once
var onClick = function(e) {
    map.off('click', onClick); //turn off listener for map click
    marker = L.marker(e.latlng,{icon: pin, draggable: true}).addTo(map);
    lat = e.latlng.lat;
    lon = e.latlng.lng;
    document.getElementById('outlat').innerHTML = e.latlng.lat;
    document.getElementById('outlon').innerHTML = e.latlng.lng;
};
map.on('click', onClick); //calling

The problem is that I need the coordinate variables to update when the single marker is dragged to a new location. I have tried a few ways of doing this with no luck:

marker.addListener('down', onDrag);
marker.addListener('drag', onDrag);
marker.addListener('dragend', onDrag);

// on drag: update lat and lon
var onDrag = function (e) {
    lat = e.latlng.lat;
    lon = e.latlng.lng;
    document.getElementById('outlat').innerHTML = lat;
    document.getElementById('outlon').innerHTML = lon;
};
map.on('down', onDrag);
map.on('dragstart', onDrag);    
map.on('dragend', onDrag);

Thanks

Answer 1

1. You're listening to drag events on the map but you should be listening to the marker (and the drag event should be enough):

   var onClick = function(e) {
       // ...
   
       marker.on('drag', onDrag);
   };
   

2. Dragging events in Leaflet are mostly base events and don't expose a latlng property. You can get the current coordinates via marker.getLatLng() :

   var onDrag = function (e) {
       var latlng = marker.getLatLng();
       document.getElementById('outlat').innerHTML = latlng.lat;
       document.getElementById('outlon').innerHTML = latlng.lng;
   };
   

And a demo

var map = L.map("map").setView([-41.5, 173], 6);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var lat = 0.0;
var lon = 0.0;
var marker;

var onDrag = function (e) {
	var latlng = marker.getLatLng();
    document.getElementById('outlat').innerHTML = latlng.lat;
    document.getElementById('outlon').innerHTML = latlng.lng;
};

var onClick = function(e) {
    map.off('click', onClick); //turn off listener for map click
    marker = L.marker(e.latlng, {draggable: true}).addTo(map);
    lat = e.latlng.lat;
    lon = e.latlng.lng;
    document.getElementById('outlat').innerHTML = e.latlng.lat;
    document.getElementById('outlon').innerHTML = e.latlng.lng;

    marker.on('drag', onDrag);
};
map.on('click', onClick);

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 200px;
}

.leaflet-tooltip {
pointer-events: auto
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
   
<div id='map'></div>
Lat: <span id='outlat'></span>
Lon: <span id='outlon'></span>