Leaflet - Update position of different markers on drag

Question

I created several markers from data saved in an array. Now, I want to make draggable these markers and get the new positions of them in some inputs. Unfortunately I don't understand how to update these different input on the base of the different marker dragged.

My current code:

<script>
                mapdiv = document.getElementById("map")

                var icona = L.icon({
                    iconUrl: 'img/map-marker.svg'
                })

                var markers = [];

                if (data.lenght != 0) {
                    for (i = 0; i < data.length; i++) {
                        if ((data[i][3] != 0.000) || (data[i][4] != 0.000)) {
                            marker = new L.marker([data[i][3], data[i][4]], {
                                    icon: icona,
                                    draggable: true
                                })
                                .bindTooltip(data[i][0], {
                                    permanent: true,
                                    direction: 'center',
                                    offset: [19, 23],
                                    className: "my-labels"
                                })
                                .bindPopup("<b>ID modulo: </b>" + data[i][0] + ", " + "<b>Seriale modulo: </b>" + data[i][1] + "<br>" + (data[i][5] != undefined ? ("<b>ID ottimizzatore: </b>" + data[i][5] + ", " + "<b>Seriale ottimizzatore: </b>" + data[i][6]) : ''), {
                                    offset: [19, 5]
                                })
                                .addTo(map);
                            marker.ID = i;
                            marker._icon.classList.add("huechange");

                            document.getElementById("lat" + i).value = marker.getLatLng().lat.toFixed(3);
                            document.getElementById("long" + i).value = marker.getLatLng().lng.toFixed(3);

                            markers.push(marker);
                        }
                    }
                    marker.on('dragend', function(e) {
                        document.getElementById("lat" + i).value = e.target.getLatLng().lat.toFixed(3);
                        document.getElementById("long" + i).value = e.target.getLatLng().lng.toFixed(3);
                    });
                }
            </script>

If I substitude the last part of my code with something like:

markers[0].on('dragend', function(e) {
                        document.getElementById("lat" + markers[0].ID).value = e.target.getLatLng().lat.toFixed(3);
                        document.getElementById("long" + markers[0].ID).value = e.target.getLatLng().lng.toFixed(3);
                    });

it works for the first marker. The fact is that I want to do it works for all the markers and without know in advance how many they are.

Answer 1

You are assigning value of 'marker' variable with every iteration. Therfore your event handler will work only for last element in the markers lists. And also marker is not declared with any var/lat keyword and therefore js makes it globally accessible. Try to use variable declaration always. To fix this particular problem you need to move market.on event handler function into for loop. That will assign event handler to every marker.

Working code:

<script>
                mapdiv = document.getElementById("map")

                var icona = L.icon({
                    iconUrl: 'img/map-marker.svg'
                })

                var markers = [];

                if (data.lenght != 0) {
                    for (i = 0; i < data.length; i++) {
                        if ((data[i][3] != 0.000) || (data[i][4] != 0.000)) {
                            let marker = new L.marker([data[i][3], data[i][4]], {
                                    icon: icona,
                                    draggable: true
                                })
                                .bindTooltip(data[i][0], {
                                    permanent: true,
                                    direction: 'center',
                                    offset: [19, 23],
                                    className: "my-labels"
                                })
                                .bindPopup("<b>ID modulo: </b>" + data[i][0] + ", " + "<b>Seriale modulo: </b>" + data[i][1] + "<br>" + (data[i][5] != undefined ? ("<b>ID ottimizzatore: </b>" + data[i][5] + ", " + "<b>Seriale ottimizzatore: </b>" + data[i][6]) : ''), {
                                    offset: [19, 5]
                                })
                                .addTo(map);
                            marker.ID = i;
                            marker._icon.classList.add("huechange");

                            document.getElementById("lat" + i).value = marker.getLatLng().lat.toFixed(3);
                            document.getElementById("long" + i).value = marker.getLatLng().lng.toFixed(3);

                            marker.on('dragend', function(e) {
                               document.getElementById("lat" + i).value = e.target.getLatLng().lat.toFixed(3);
                               document.getElementById("long" + i).value = e.target.getLatLng().lng.toFixed(3);

                            markers.push(marker);
                        }
                    }
                    
                    });
                }
            </script>