Would anyone know a way to update multiple marker positions live using LeafletJS?
I came across this post: Updating Leaflet Marker Position Every x Seconds with JSON, which works perfect for a single marker, but when I try to add more than one marker, the map beings to lag bad and the markers don't clear they just replicate.
function update_position() {
$.getJSON('https://opensky-network.org/api/states/all', function(data) {
var planes = data.states
for(let i = 0; i < planes.length; i++){
plane = planes[i]
lat = plane[6]
lon = plane[5]
csfilter = plane[1].substring(0,3);
if(csfilter == "EIN"){
if(!aircraft){
//var live_position = [[plane[1], plane[6], plane[5]]]
aircraft = L.marker([lat,lon]).bindPopup("I am "+plane[1]).addTo(mymap);
}
}
}
aircraft.setLatLng([lat,lon]).update();
setTimeout(update_position, 10000);
});
}
update_position();
Would anyone assist or point me in the right direction for where I am going wrong?