eei3.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <title>EEI3</title>
  5.  
  6. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
  7. integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  8. crossorigin=""/>
  9. <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
  10. integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
  11. crossorigin=""></script>
  12.  
  13. async function consultar() {
  14. /*
  15. En esta dirección hay un JSON con los datos
  16. de ubicación de la EEI.
  17. */
  18. const url = "https://api.wheretheiss.at/v1/satellites/25544";
  19.  
  20. /*
  21. La función fecth nos da el contenido que hay en la URL
  22. Esta función es asíncrona. La función tarda un tiempo indeterminado en responder.
  23. *await* se utiliza para esperar que una función asíncrona acabe
  24. La función contenedora debe declararse como asíncrona
  25. con la palabra clave *async*
  26. */
  27. const respuesta = await fetch(url);
  28. const json = await respuesta.json();
  29. //console.log(json);
  30. mostrar(json.latitude, json.longitude);
  31. }
  32.  
  33. function mostrar(lat, lon) {
  34. marcador.setLatLng([lat, lon]);
  35. }
  36.  
  37. var mimapa;
  38. var marcador;
  39.  
  40. function principal() {
  41. // Crear el mapa
  42. const derechos = '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>';
  43. var latitud = 0;
  44. var longitud = 0;
  45. var zoom = 3;
  46. mimapa = L.map('mapa').setView([latitud, longitud], zoom);
  47.  
  48. // Poner las imágenes del map
  49. const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
  50. const baldosas = L.tileLayer(url, { attribution: derechos });
  51. baldosas.addTo(mimapa);
  52.  
  53. // Poner un marcador
  54. marcador = L.marker([0, 0]);
  55. marcador.addTo(mimapa);
  56.  
  57. // Consulta la posición cada segundo
  58. setInterval(consultar, 1000);
  59.  
  60. consultar(); // Opcional
  61. }
  62.  
  63. </script>
  64. #mapa {
  65. height:480px;
  66. }
  67. </style>
  68. </head>
  69. <body onload="principal()">
  70. <h1>¿Dónde está la Estación Espacial Internacional?</h1>
  71. <div id="mapa"></div>
  72. </body>
  73. </html>

Proinf.net