How to move markers on openstreetmap using leaflet?

user_10727181 0
Viewed 681

I'm using an API which gives real time aircraft positions.

With leaflet I use the Latitude and Longitude to display a marker of each plane on the map. I would like to move the marker when I create a new one each time my script refreshes.

setInterval(() => {
fetch("https://opensky-network.org/api/states/all")
    .then((res) => {
        return res.json();
    })
    .then((res) => {

            for (let i = 0; i < res.states.length; i++) {
                if (res.states[i][2] == 'France') {
                    if (res.states[i][5] != null || res.states[i][6] != null) {
                        posA = res.states[i][5];
                        posB = res.states[i][6];
                        marker = L.marker([posB, posA]);
                        marker.addTo(mymap);
                    }
                }

            }


    })
    .catch((err) => {
        if (err) throw err
    })
}, 3000);

I tried this but didn't work: 

var newLatLng = new L.LatLng(posB, posA);
marker.setLatLng(newLatLng);
leaflet api javascript
1 Answers

You could keep a hash to look up if a marker already exists for a given ICAO, create a marker if necessary or update its position. Something like:

function fetchData() {
    return fetch("https://opensky-network.org/api/states/all")
        .then((res) => {
            return res.json();
        })
        .then((res) => {
            return res.states.filter((state) => {
                return (state[2] === 'France') && (state[5]) && (state[6]);
            });
        })
        .catch((err) => {
            if (err) throw err
        });
}

function plotStates(map, markers) {
    fetchData().then(function(states) {
        states.forEach((state) => {
            const lat = state[6],
                  lng = state[5],
                  icao24 = state[0];

            if (markers[icao24]) {
                markers[icao24].setLatLng([lat, lng]);
            } else {
                markers[icao24] = L.marker([lat, lng]);
                markers[icao24].addTo(map);
            }
        });
        setTimeout(() => plotStates(map, markers), 3000);
    });
}

const markers = {};
plotStates(map, markers);

And a demo

function fetchData() {
return fetch("https://opensky-network.org/api/states/all")
    .then((res) => {
        return res.json();
    })
    .then((res) => {
        return res.states.filter((state) => {
            return (state[2] === 'France')
              && (state[5]) && (state[6]);
        });
    })
    .catch((err) => {
        if (err) throw err
    })
}

function plotStates(map, markers) {
    fetchData().then(function(states) {
        states.forEach((state) => {
            const lat = state[6],
                  lng = state[5],
                  icao24 = state[0];

            if (markers[icao24]) {
                markers[icao24].setLatLng([lat, lng]);
            } else {
                markers[icao24] = L.marker([lat, lng]);
                markers[icao24].addTo(map);
            }
        });
        setTimeout(() => plotStates(map, markers), 3000);
    });
}

var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([48.8583736, 2.2922926]).addTo(map);

const markers = {};
plotStates(map, markers);
html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

<div id='map'></div>

user_10716300
Related