International Space Station tracker Async/Await
Display the coordinates and the country of the ISS


























Leaflet | © OpenStreetMap contributors
Display the position of the ISS (International Space Station) on a map.
The map is created with leaflet.js (code already available in the script).
Also display the coordinates (rounded to 6 decimal places) and the country over which the ISS is located.
-
Locate ISS
- Fetch, every 5 seconds, the position of the ISS from: https://api.wheretheiss.at/v1/satellites/25544
- Update the
lat
andlng
values of theiss
object - Call de function
updateIssMarker()
to update the map
-
Find the country over which the ISS flies
-
Use
OpenStreetMaps reverse geocoding service
to search for the country e.g:
Thomas More - campus Geel
Atlantic ocean
-
Update the
country
value of theiss
object (set the value to 'unknown' if no country was found) - Display the coordinates and the country in the green box above the map
-
Use
OpenStreetMaps reverse geocoding service
to search for the country e.g:
-
Custom marker (optional)
- Find an icon that matches the theme and replace the default marker with this icon
- Info: https://leafletjs.com/examples.html
const issPositionUrl = 'https://api.wheretheiss.at/v1/satellites/25544';
const reverseGeoUrl = 'https://nominatim.openstreetmap.org/reverse?format=json';
// default coordinates are for Thomas More, campus Geel
const iss = {
lat: 51.16095,
lng: 4.96166,
zoom: 3,
country: 'Belgium',
};
// initialize new Leaflet map
const map = L.map('map').setView([0, 0], iss.zoom);
// add marker (latitude = 0 and longitude = 0) to the map
const issMarker = L.marker([0, 0]).addTo(map);
// display openstreetmap tile layer on the map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
// call this function to update the map
function updateIssMarker() {
issMarker.setLatLng([iss.lat, iss.lng]);
map.setView([iss.lat, iss.lng], map.getZoom());
}
updateIssMarker();