Good morning all I would like to have a position tracking with the leaflet. I managed to display the markers with the positions update every 5 seconds by javascript on an XML file.
I have 2 problems.
The first: the data is well recovered and the markers well positioned, but the markers not being removed from the screen before being re-displayed the old positions remains on the screen. I tried the technique recommended here (Leaflet - How to find existing markers, and delete markers?) but without success. My idea was to do a remove.layer of the markers just before redisplaying them when the position data is up to date.
var personnes = L.layerGroup();
var map_bus = L.map(
"map_bus",
{
center: [<? echo $_GET['lat'] ?>, <? echo $_GET['lon'] ?>],
crs: L.CRS.EPSG3857,
zoom: 17,
zoomControl: true,
preferCanvas: false,
layers: [personnes]
}
);
var myVar = setInterval(chargerXML, 5000);
function chargerXML() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "connectes4.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("personne");
map_bus.removeLayer(personnes);
for (i = 0; i <x.length; i++) {
var nomPersonne = x[i].getElementsByTagName("nom")[0].childNodes[0].nodeValue;
var latitude = x[i].getElementsByTagName("nom")[0].getAttribute("LAT");
var longitude = x[i].getElementsByTagName("nom")[0].getAttribute("LON");
if (x[i].getElementsByTagName("nom")[0].childNodes[0].nodeValue == "<? echo $_GET['pseudo'] ?>"){
marker = L.marker([latitude,longitude], {icon:IconStyleTwo}).bindPopup(nomPersonne);
marker.addTo(personnes);
}
else {
marker = L.marker([latitude,longitude], {icon:IconStyleThree}).bindPopup(nomPersonne);
marker.addTo(personnes);
}
}
My second problem is to be able to save the position and save it with PHP on the server in an XML file. I don't know how to articulate javascript with PHP. Thanks in advance for your advice.