<!DOCTYPE html>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
async function consultar() {
/*
En esta dirección hay un JSON con los datos
de ubicación de la EEI.
*/
const url = "https://api.wheretheiss.at/v1/satellites/25544";
/*
La función fecth nos da el contenido que hay en la URL
Esta función es asíncrona. La función tarda un tiempo indeterminado en responder.
*await* se utiliza para esperar que una función asíncrona acabe
La función contenedora debe declararse como asíncrona
con la palabra clave *async*
*/
const respuesta = await fetch(url);
const json = await respuesta.json();
//console.log(json);
mostrar(json.latitude, json.longitude);
}
function mostrar(lat, lon) {
marcador.setLatLng([lat, lon]);
}
var mimapa;
var marcador;
function principal() {
// Crear el mapa
const derechos = '
© <a href="https://openstreetmap.org/copyright">OpenStreetMap
</a>';
var latitud = 0;
var longitud = 0;
var zoom = 3;
mimapa = L.map('mapa').setView([latitud, longitud], zoom);
// Poner las imágenes del map
const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const baldosas = L.tileLayer(url, { attribution: derechos });
baldosas.addTo(mimapa);
// Poner un marcador
marcador = L.marker([0, 0]);
marcador.addTo(mimapa);
// Consulta la posición cada segundo
setInterval(consultar, 1000);
consultar(); // Opcional
}
#mapa {
height:480px;
}
<body onload="principal()"> <h1>¿Dónde está la Estación Espacial Internacional?
</h1>