eei3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EEI3</title>
 
    <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=="
    crossorigin=""></script>
 
    <script>
        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 = '&copy; <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
        }
 
    </script>
    <style>
        #mapa {
            height:480px;
        }    
    </style>
</head>
<body onload="principal()">
    <h1>¿Dónde está la Estación Espacial Internacional?</h1>    
    <div id="mapa"></div>
</body>
</html>
Proinf.net