Fetching And Displaying Data From External REST API

Fetching and Displaying Data from an External REST API

Imagine you're building a Re-Earth plugin, and you want to show the current location of the International Space Station (ISS) in your plugin. You can achieve this by fetching data from an external API that provides ISS location information and then displaying that data within your plugin's UI.

Steps to Achieve This:

Setting Up the UI:

First, you'll create the user interface (UI) of your plugin where the ISS location details will be displayed. You can use HTML and CSS to design how this information will appear to users.

htmlCopy code
<!-- Styling for the UI -->
<style>
  body {
    margin: 0;
    padding: 10px;
    background-color: rgba(111, 111, 111, 0.5);
  }
</style>

<!-- Displaying ISS location information -->
<h1>Current ISS Location</h1>
<p>Latitude: <span id="lat">-</span></p>
<p>Longitude: <span id="lon">-</span></p>
<p>Altitude: <span id="alt">-</span> km</p>
<p><button id="update">Update</button></p>

<!-- JavaScript code to fetch and update ISS location -->
<script>
  // API URL for ISS location data
  const url = "<https://api.wheretheiss.at/v1/satellites/25544>";

  // Function to update ISS location
  function update() {
    fetch(url)
      .then(response => response.json())  // Convert response to JSON
      .then(data => {
        // Update UI with fetched data
        document.getElementById("lat").textContent = data.latitude;
        document.getElementById("lon").textContent = data.longitude;
        document.getElementById("alt").textContent = data.altitude;
      });
  }

  // Attach update function to the button
  document.getElementById("update").addEventListener("click", update);

  // Initially update ISS location
  update();
</script>

Fetching and Displaying Data:
- The url variable holds the API URL where you can get the ISS location data.
- The update function uses the fetch function to get data from the API.
- When the "Update" button is clicked, the update function is called, and it fetches the ISS location data, and then updates the UI elements with latitude, longitude, and altitude information.
Showing the UI in the Plugin:

To display this UI within your Re-Earth plugin, you'll use the reearth.ui.show(html) function.
```
javascriptCopy code
// Display the UI within the Re-Earth plugin
reearth.ui.show(html);
```

Additional Note:

The API you are using, the "Where the ISS at?" API, allows your Re-Earth plugin to access its data because it includes the necessary CORS (Cross-Origin Resource Sharing) headers. These headers indicate that the API can be accessed from different domains, which is required when making requests from within a web browser.

By combining HTML, CSS, and JavaScript along with the fetch function, you're able to dynamically fetch and display real-time ISS location information in your Re-Earth plugin's UI.

Practical example:

const html = `
    <style>
      body {
            margin: 0;
            padding: 10px;
            background-color: rgba(111, 111, 111, 0.5);
        }
    </style>

  <h1>Current ISS location</h1>
  <p>Latitude: <span id="lat">-</span></p>
  <p>Longitude: <span id="lon">-</span></p>
  <p>Altitude: <span id="alt">-</span>km</p>
  <p><button id="update">Update</button></p>

    <script>
    const url = "<https://api.wheretheiss.at/v1/satellites/25544>";

      function update() {
        fetch(url).then(r => r.json()).then(data => {
          document.getElementById("lat").textContent = data.latitude;
          document.getElementById("lon").textContent = data.longitude;
          document.getElementById("alt").textContent = data.altitude;
        });
      };

      document.getElementById("update").addEventListener("click", update);

      update();
    </script>
`;

reearth.ui.show(html);

Note that "Where is the ISS at?" API is available for the Re-Earth plugin because the API responds with Access-Control-Allow-Origin: * header.