eei2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <title>EEI2</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. const strong1 = document.querySelector('#lat');
  35. const strong2 = document.querySelector('#lon');
  36. strong1.textContent = lat;
  37. strong2.textContent = lon;
  38. marcador.setLatLng([lat, lon]);
  39. }
  40.  
  41. var mimapa;
  42. var marcador;
  43.  
  44. function principal() {
  45. // Crear el mapa
  46. const derechos = '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>';
  47. var latitud = 0;
  48. var longitud = 0;
  49. var zoom = 3;
  50. mimapa = L.map('mapa').setView([latitud, longitud], zoom);
  51.  
  52. // Poner las imágenes del map
  53. const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
  54. const baldosas = L.tileLayer(url, { attribution: derechos });
  55. baldosas.addTo(mimapa);
  56.  
  57. // Poner un marcador
  58. marcador = L.marker([0, 0]);
  59. marcador.addTo(mimapa);
  60. }
  61.  
  62. </script>
  63. #mapa {
  64. height:480px;
  65. }
  66. </style>
  67. </head>
  68. <body onload="principal()">
  69. <h1>¿Dónde está la Estación Espacial Internacional?</h1>
  70. <p>
  71. <button onclick="consultar()">Consultar</button>
  72. </p>
  73. <p>
  74. Latitud: <strong id="lat"></strong>,
  75. Longitud: <strong id="lon"></strong>
  76. </p>
  77.  
  78. <div id="mapa"></div>
  79.  
  80. </body>
  81. </html>

Proinf.net