Data Viz + GIS

by aganesan_

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

    <style>
      #issMap {
        height: 180px;
      }

    </style>

    <title>Fetch JSON from API and map lat lon</title>
  </head>

  <body>
    <h1>Where is the ISS?</h1>

    <p>
      latitude: <span id="lat"></span>°<br />
      longitude: <span id="lon"></span>°
    </p>

    <div id="issMap"></div>

    <script>
      // Making a map and tiles
      const mymap = L.map('issMap').setView([0, 0], 1);
      const marker = L.marker([0, 0]).addTo(mymap);
      const attribution =
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

      const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      const tiles = L.tileLayer(tileUrl, {
        attribution
      });
      tiles.addTo(mymap);

      const api_url = 'https://api.wheretheiss.at/v1/satellites/25544';

      let firstTime = true;

      async function getISS() {
        const response = await fetch(api_url);
        const data = await response.json();
        const {
          latitude,
          longitude
        } = data;

        marker.setLatLng([latitude, longitude]);
        if (firstTime) {
          mymap.setView([latitude, longitude], 2);
          firstTime = false;
        }

        document.getElementById('lat').textContent = latitude;
        document.getElementById('lon').textContent = longitude;
      }

      getISS();
 ...