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 {
        
      }

    </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-->



    </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 -->


    <script>
      //TODO: Make a map, marker object, and add tiles (in Leaflet Quick Start Guide)

      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 apiUrl = 'https://api.wheretheiss.at/v1/satellites/25544';

      let firstTime = true;
      /* The getISS() function will use the fetch method which accepts the URL of the 
      API as a parameter to request a response to update the data*/
      // TODO: Create getISS() function here
			async function getISS()
      const response= await fetch(apiUrl);
      const data = await response.json();
      const {
          latitude,
          longitude
        } = data;
     ...