Leafletjs: How to have new marker in first click then update the latlng of marker in second click

Question

I have list of markers that want to render in the map, but I want it one by one. In first click I want to make new marker. Then when I click to another location, I want my marker to just move to the new latLng not to create another marker. Here is my code:

function (licon, coord, data) {
    var self = jQuery(this);
    var map = self.data("map");
    var latlng = new L.LatLng(coord[0], coord[1]);
    //Create Marker

    if (licon) {
        var leafIcon = L.icon(licon);
        console.log(typeof (marker));
        if (typeof (marker) === 'undefined') {
            var marker = L.marker(latlng, {
                icon: leafIcon,
                    "markerData": data,
                draggable: true
            });

        } else {
            console.log('not undefined');
            map.removeLayer(marker);
            marker = L.marker(latlng, {
                icon: leafIcon,
                    "markerData": data,
                draggable: true
            });
        }
    } else {
        var marker = L.marker(latlng, {
            "markerData": data,
            draggable: true
        });

    }

    marker.addTo(map);
    return marker;
}

Should `typeof (marker === 'undefined')` rather be `typeof marker === 'undefined'`? — ghybs, Nov 19 '15 at 19:09
I guess you call your function at each user click on map? In that case, your `var marker` should probably be outside the scope of that function, so that you can retrieve it on next call and check whether is is `undefined` or not. You may also be interested in [`marker.setLatLng()`](http://leafletjs.com/reference.html#marker-setlatlng) rather than removing marker and adding a new one. — ghybs, Nov 19 '15 at 19:49

score 4 · Answer 1 · answered Nov 22 '15 at 02:28

A quick example of the result: http://jsfiddle.net/ve2huzxw/43/

var currentMarker;

map.on("click", function (event) {
    if (currentMarker) {
        currentMarker.setLatLng(event.latlng);
        return;
    }

    currentMarker = L.marker(event.latlng, {
        draggable: true
    }).addTo(map).on("click", function () {
        event.originalEvent.stopPropagation();
    });
});

document.getElementById("done").addEventListener("click", function () {
    currentMarker = null;
});

You can also add a smooth transition to show the marker moving to the new position:

if (currentMarker) {
    currentMarker._icon.style.transition = "transform 0.3s ease-out";
    currentMarker._shadow.style.transition = "transform 0.3s ease-out";

    currentMarker.setLatLng(event.latlng);

    setTimeout(function () {
        currentMarker._icon.style.transition = null;
        currentMarker._shadow.style.transition = null;
    }, 300);
    return;
}

score 0 · Answer 2 · answered Oct 13 '21 at 13:50

a slightly more consolidated solution some years later.

var currentMarker;

map2.on('click', function(e) {
    if (currentMarker){
        currentMarker.setLatLng(e.latlng)
    } else {
        currentMarker = new L.marker(e.latlng).addTo(map2);
    };
    
    //console.log('lat, lon: ', e.latlng.lat, e.latlng.lng);
    
  });

leaflet now defaults to smoothly dragging the point over to the new coords.

Leafletjs: How to have new marker in first click then update the latlng of marker in second click

2 Answers2