I have some problems to update the current position of different markers on leaflet. Here the script:
<script>
let coordinate = <?php
if (isset($_SESSION['layout_data'])) {
$var = $_SESSION['layout_data'];
} else {
$var = "vuoto";
}
echo json_encode($var);
?>;
var map = L.map('map', {
crs: L.CRS.Simple,
minZoom: 0
});
var bounds = [
[0, 0],
[1200, 1200]
];
var sfondo = <?php echo json_encode($_SESSION['imageFile']) ?>;
sfondo = sfondo[0].replace('..', '../GC_Solar_Hub');
var image = L.imageOverlay(sfondo, bounds).addTo(map);
map.fitBounds(bounds);
mapdiv = document.getElementById("map")
/* Marker */
var icona = L.icon({
iconUrl: 'img/map-marker.svg'
})
var marker = [];
if (coordinate.lenght != 0) {
for (i = 0; i < coordinate.length; i++) {
marker[i] = L.marker([coordinate[i][1], coordinate[i][2]], {
icon: icona,
draggable: true,
})
.bindTooltip(coordinate[i][0], {
permanent: true,
direction: 'center',
offset: [19, 23],
className: "my-labels"
})
.bindPopup("<b>ID modulo: </b>" + coordinate[i][0] + ", " + "<b>Seriale modulo: </b>" + coordinate[i][3] + "<br>" + (coordinate[i][6] != undefined ? ("<b>ID ottimizzatore: </b>" + coordinate[i][6] + ", " + "<b>Seriale ottimizzatore: </b>" + coordinate[i][5]) : ''), {
offset: [19, 5]
})
.addTo(map);
document.getElementById("lat" + i).value = marker[i].getLatLng().lat.toFixed(3);
document.getElementById("long" + i).value = marker[i].getLatLng().lng.toFixed(3);
/* ev.target.appendChild(document.getElementById(dati)); */
marker[i].on('dragend', function(e) {
document.getElementById("lat" + i).value = marker[i].getLatLng().lat.toFixed(3);
document.getElementById("long" + i).value = marker[i].getLatLng().lng.toFixed(3);
});
}
};
</script>
The script works until the last part. I’m able to show the start position of all markers but not update the current one if I move one of them in the map. Thanks for the help!