Leaflet update position on dragend of marker

Question

I want to update the value of two hidden fields on my form based on marker position. I read this link to get my answer, and this is my final code

<script>
    var map = L.map('map', {
        center: [33.505, 53.9],
        zoom: 5
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    map.on('dblclick', addMarker);

    var Marker;

    function addMarker(e) {
        //remove previous markers
        if (Marker) {
            map.removeLayer(Marker);
            UpdateLatLng(e);
        }
        // Add marker to map at click location; add popup window
        Marker = new L.marker(e.latlng, {
            draggable: true
        }).addTo(map);
    }

    function UpdateLatLng(e) {
        var latValue, lngValue;
        latValue = e.latlng.lat;
        lngValue = e.latlng.lng;
        document.getElementById("map_lat").value = latValue;
        document.getElementById("map_lng").value = lngValue;
        //$("#map_lat").val() = latValue;
    }
    function UpdateLatLng2(e) {
        var latValue, lngValue;
        var position = marker.getLatLng();
        latValue = position.lat;
        lngValue = position.lng;
        document.getElementById("map_lat").value = latValue;
        document.getElementById("map_lng").value = lngValue;
        //$("#map_lat").val() = latValue;
    }
    Marker.on('dragend', UpdateLatLng2);
</script>

The result is that my form fields are not updated on the first double click event, but they get updated on the next double clicks or after marker's dragend event instead. Why?

And why would the following code does not work while getElementById does?

$("#map_lat").val() = latValue;

Any help would be appreciated.

Answer 1

My form fields are not updated on the first double click, but get updated on the next double clicks. The form fields don't get updated after marker dragend; why?

This is how the first time your script runs,

map.on('dblclick', addMarker); //|You attach the double click event handler.
var Marker; //|You instansiate an undefined variable.

function addMarker(e) {
    if (Marker) { //|On the first double click, Marker is undefined. Your code will not get into this if condition.
        map.removeLayer(Marker);
        UpdateLatLng(e); // But your function is here.
    }
    // Add marker to map at click location; add popup window
    Marker = new L.marker(e.latlng, {
        draggable: true
    }).addTo(map);
}

On the first double click, UpdateLatLng(e) will never get called because your Marker is undefined. And the second double click, it will then get called.

You can update your addMarker function like,

function addMarker(e) {
    //remove previous markers
    if (Marker) {
        map.removeLayer(Marker);
    }
    // Add marker to map at click location; add popup window
    Marker = new L.marker(e.latlng, {
        draggable: true
    }).addTo(map);

    UpdateLatLng(e);
}

But that's the worst way to update the marker position. I'd suggest that your code is a bit more like,

<script>
    var map = L.map('map', {
        center: [33.505, 53.9],
        zoom: 5
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    map.on('dblclick', addOrUpdateMarkerPosition);

    var Marker;

    function addOrUpdateMarkerPosition(e) {
        if (!Marker) {
            // Marker is undefined, create a new marker..
            // Add marker to map at click location; add popup window
            Marker = new L.marker(e.latlng, {
                draggable: true
            }).addTo(map);

            // Bind the event handlers
            Marker.addListener('dragend', UpdateLatLng2);
        }
        else {
            // Marker already exists, just update the position
            Marker.setPosition(e.latlng);
        }

    }

    function UpdateLatLng(e) {
        var latValue, lngValue;
        latValue = e.latlng.lat;
        lngValue = e.latlng.lng;
        document.getElementById("map_lat").value = latValue;
        document.getElementById("map_lng").value = lngValue;
    }
    function UpdateLatLng2(e) {
        var latValue, lngValue;
        var position = marker.getLatLng();
        latValue = position.lat;
        lngValue = position.lng;
        document.getElementById("map_lat").value = latValue;
        document.getElementById("map_lng").value = lngValue;
    }
</script>

BTW, do you know why this code is not working but getElementById works?

$("#map_lat").val() = latValue;

This code is using javascript external library which is jQuery. While getElementById is pure JS and does not need any library. To use it, you have basically just have to include the following script in your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>