Clean up Maps, using Leaflet instead

pauljones0 · Sep 13, 2024 · a937785 · a937785
1 parent 8203089
commit a937785
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 28 deletions.
diff --git a/assets/images/iss-icon.png b/assets/images/iss-icon.png
diff --git a/index.html b/index.html
@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
     <title>HÆKÆSHIP: Extraterrestrial Networking Site</title>
     <link rel="icon"type="image/x-icon" href="./assets/icons/favicon.ico">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="./styles/home.css">
-    <script src="https://unpkg.com/axios/dist/axios.min.js" defer></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
 </head>
 <body> 
     <div class="stars"></div>
@@ -63,9 +63,7 @@ <h2 id="main" class="main__heading">Our Past and Now</h2> <!--intro section: wha
 
         <section id="location" class="location">
             <h2 class="location__title">Our Location (Live Updates)</h2>
-            <div class="location__map">
-                <iframe id="map-iframe"></iframe>
-            </div>
+            <div id="map" class="location__map"></div>
         </section> 
 
         <section id="hakaship" class="gallery"><!--detail images of spaceship/look-->
@@ -105,13 +103,15 @@ <h2 class="form__heading">Buzz-Connect With Us</h2>
 
     <a href="#top"><button id="button-up" class="button-image"></button></a>
 
-    <!-- JS -->
-    <script src="./scripts/title.js"></script>
+    <!-- Scripts -->
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/leaflet.rotatedMarker.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
-    <script type="module" src="./scripts/typing.js"></script>
-    <script type="module" src="./scripts/index-page.js"></script>
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5IlpYhATifj2bSew0y2eahEjxri15PuM"></script>
+    <script src="./scripts/stars.js" type="module"></script>
+    <script src="./scripts/title.js" type="module"></script>
+    <script src="./scripts/typing.js" type="module"></script>
+    <script src="./scripts/index-page.js" type="module"></script>
 
-    <script src="./scripts/stars.js"></script>
 </body>
-</html> 
+</html>
diff --git a/scripts/index-page.js b/scripts/index-page.js
@@ -1,29 +1,58 @@
 import { ISSApi } from "./iss-api.js";
 
 let map;
-//holds the ISS marker
 let marker;
 const issApiInstance = new ISSApi;
 
-
-
 const getIssPositionApiCall = async () => {
     try {
         const issPosition = await issApiInstance.getIssPosition();
         return issPosition;
-    } catch(error){
+    } catch (error) {
         console.error(error)
     }
 }
 
+let prevPosition = null;
+
 const issPosititoData = async () => {
-    const position = await getIssPositionApiCall();
-    const { latitude, longitude } = position.iss_position;
-    const iframe = document.getElementById('map-iframe');
-    iframe.src = `https://www.google.com/maps/embed/v1/place?key=AIzaSyB5IlpYhATifj2bSew0y2eahEjxri15PuM&q=${latitude},${longitude}&zoom=4`;
+    try {
+        const { latitude, longitude } = await issApiInstance.getIssPosition();
+
+        const issIcon = L.icon({
+            iconUrl: './assets/images/iss-icon.png',
+            iconSize: [32, 32],
+            iconAnchor: [16, 16],
+        });
+
+        if (!map) {
+            map = L.map('map').setView([latitude, longitude], 3);
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map);
+            marker = L.marker([latitude, longitude], {icon: issIcon, rotationAngle: 0, rotationOrigin: 'center center'}).addTo(map);
+        } else {
+            const newLatLng = [latitude, longitude];
+            if (prevPosition) {
+                const angle = calculateAngle(prevPosition, newLatLng);
+                marker.setRotationAngle(angle);
+            }
+            map.setView(newLatLng, 3);
+            marker.setLatLng(newLatLng);
+        }
+        prevPosition = [latitude, longitude];
+    } catch (error) {
+        console.error("Error updating ISS position:", error);
+    }
+}
+
+function calculateAngle(prev, next) {
+    const dx = next[1] - prev[1];
+    const dy = next[0] - prev[0];
+    const angle = Math.atan2(dy, dx) * 180 / Math.PI;
+    return angle;
 }
 
 await issPosititoData();
+setInterval(issPosititoData, 10000);
 
 //auto-response
 const formResponse = document.querySelector(".form__response");

diff --git a/scripts/iss-api.js b/scripts/iss-api.js
@@ -1,10 +1,18 @@
 export class ISSApi {
     constructor() {
-        this.baseUrl = "http://api.open-notify.org/iss-now.json";
+        this.baseUrl = "https://api.wheretheiss.at/v1/satellites/25544";
     }
 
     async getIssPosition() {
-        const issPosition = await axios.get(this.baseUrl);
-        return issPosition.data;
+        try {
+            const response = await axios.get(this.baseUrl);
+            return {
+                latitude: response.data.latitude,
+                longitude: response.data.longitude
+            };
+        } catch (error) {
+            console.error("Error fetching ISS position:", error);
+            throw error;
+        }
     }
 }
diff --git a/styles/home.css b/styles/home.css
@@ -158,11 +158,21 @@ h2 {
   cursor: pointer;
 }
 
-#map-iframe {
+.leaflet-marker-icon {
+  background: none;
+  border: none;
+  transform-origin: center center;
+}
+
+#map {
   width: 100%;
+  height: 20vw;
   border-radius: 25px;
   border: 5px solid #e5e5e5;
-  height: 30rem;
+}
+#map .leaflet-control-zoom,
+#map .leaflet-control-attribution {
+  display: none;
 }
 
 #button-up {

diff --git a/styles/home.css.map b/styles/home.css.map
diff --git a/styles/home.scss b/styles/home.scss
@@ -178,11 +178,22 @@ h2 {
     }
 }
 
-#map-iframe {
+.leaflet-marker-icon {
+    background: none;
+    border: none;
+    transform-origin: center center;
+}
+
+#map {
     width: 100%;
+    height: 20vw;
     border-radius: 25px;
     border: 5px solid #e5e5e5;
-    height: 30rem;
+
+    .leaflet-control-zoom,
+    .leaflet-control-attribution {
+        display: none;
+    }
 }
 
 #button-up {