Update position marker on Leaflet map on double click

Question

I have this code to add to Leaflet map marker genereted by JSON file

jQuery().ready(function (){ 
$.getJSON(
    '/EUREKA/json/map_container/json_map_container.php',
    function(data){
        for ( var i=0; i < data.length; ++i )
        {
            k=i;
            var myIcon = L.icon({
            iconUrl: 'maps/images/' + data[i].type + '.png',
            iconRetinaUrl: 'maps/images/' + data[i].type + '.png',
            iconSize: [42, 55],
            iconAnchor: [9, 21],
            popupAnchor: [0, -14]
            });
            markerArray[i] = L.marker( [data[i].latitude, data[i].longitude], {id: data[i].id, icon: myIcon, draggable:'true'} )
            .bindPopup( '<div>' + '<b>PDL di riferimento:</b> ' + data[i].codice + '<br/>'
                + '<b>Riferimento appaltatore:</b> '
                + data[i].companyId + '<br/>'
                + '<b>Tipo contenitore:</b> '
                + data[i].type + '<br/>'
                + '<b>Numero RDP:</b> '
                + data[i].rdpNumber + '<br/>'
                + '<b>Preposto di riferimento:</b> '
                + data[i].preposto + '<br/>'
                + '<b>Descrizione del rifiuto:</b> '
                + data[i].description
                + '</div>',
                {direction: 'left'} )
            .addTo( map );
            //markerArray[i] = marker1;
            markerArray[i].on('dblclick', function(e){                  
                console.log("ID Marker Array: " + markerArray[k].options.id);
                var latitudeMarker = markerArray[k].getLatLng().lat;
                var longitudeMarker = markerArray[k].getLatLng().lng;
                $.getJSON(
                '/EUREKA/json/map_container/json_update_position.php?&lat=' + latitudeMarker + '&lng=' + longitudeMarker + '&id=' + markerArray[k].options.id,
                function(data){
                    console.log("Posizione aggiornata")
                });
            });
        }
});

The JSON 'json_map_container.php' file return date from a sql query. I want to update the position of a marker in the map when i drag it in a new position at the doubleclick event, I think to call a JSON 'json_update_position.php' with new position and id of marker and The JSON execute a UPDATE query on my db but when I doubleclick on marker I have ever the last id generated. Can anyone help me?

score 0 · Accepted Answer · answered Apr 20 '18 at 09:27

Read about closures in JavaScript, and have a look at example 5 in this excellent answer that describes your problem : basically, k will always be the last value set when read in your callback.

You could apply what's explained in this answer or get the reference to the marker in the event object passed to your callback by e.target:

markerArray[i].on('dblclick', function(e){  
    var marker = e.target;

    console.log("ID Marker Array: " + marker.options.id);
    var latitudeMarker = marker.getLatLng().lat;
    var longitudeMarker = marker.getLatLng().lng;
    $.getJSON(
    '/EUREKA/json/map_container/json_update_position.php?&lat=' + latitudeMarker + '&lng=' + longitudeMarker + '&id=' + marker.options.id,
    function(data){
        console.log("Posizione aggiornata")
    });
});

Update position marker on Leaflet map on double click

1 Answers1