Data Viz + GIS Shell

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>

    <!-- TODO: Set a defined height (in pixels) for the map container-->

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

    </style>

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

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

    <p>
      <!--The span tag is used to group and style content-->
      <!--This is the degree sign to use ° -->
      <!--TODO: Add latitude and longitude id information using span tag-->
      latitude: <span id="lat"></span>°<br />
      longitude: <span id="lon"></span>°
    </p>
    <!--The div element defines a section in the document-->
    <!--TODO: Place a div element with a certain id where you want the map to be -->
    <div id="issMap">

    </div>

    <script>
      //TODO: Make a map, marker object, and add tiles (in Leaflet Quick Start Guide)
			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 apiUrl = 'https://api.wheretheiss.at/v1/satellites/25544';

      let firstTime = true;
      /* The getISS() function will use the fetch method which...