Merge branch 'release/1.2.0'

README.md

@@ -13,7 +13,7 @@ This project is a web application where the user can track all the space objects
 
 * Clear the map by pressing `Clear Map` button on the home page.
 
-![space stuff](images/map_tut.png)
+![space stuff](images/map_color_marker.png)
 
 ## Acknowledgements
 

index.html

@@ -58,7 +58,14 @@ <h1 align="center">Track Space Objects</h1>
                     <input type="submit" class="btn btn-danger" name="" value="Clear Map">
                 </form>
             </div>
+            <hr>
+            <div class="mt-2">
+                <h6>Map Legends to identify objects based upon their orbit</h6>
+                <p><img src="images/hexagon-fill-red.svg" alt="red hexagon"> Low Earth Orbit (180-2000 km)</p>
+                <p><img src="images/hexagon-fill-blue.svg" alt="blue hexagon"> Medium Earth Orbit (2000-35,780 km)</p>
+                <p><img src="images/hexagon-fill-black.svg" alt="black hexagon"> High Earth and Geosynchronous Earth Orbit (> 35,780 km)</p>
 
+            </div>
             <div class="row mt-1">
                 <div class="" id="map">
                 </div>

index.js

@@ -10,11 +10,6 @@ document.addEventListener('DOMContentLoaded', function() {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(map);
 
-    var spaceObject = L.icon({
-        iconUrl: 'images/hexagon-fill.svg',
-        iconSize: [14, 14]
-    });
-
     // Submitting the form to get all the space objects on the map
     document.querySelector('form').onsubmit = function() {
         const name = document.querySelector('#satellite').value;
@@ -29,8 +24,16 @@ document.addEventListener('DOMContentLoaded', function() {
                 .then(position => {
                     var latitude = position["geodetic"]["latitude"];
                     var longitude = position["geodetic"]["longitude"];
-                    var label = position["tle"]["name"];
-                    console.log(`Latitude: ${latitude}, Longitude: ${longitude}`)
+                    var altitude = position["geodetic"]["altitude"].toFixed(2);
+                    var velocity = position["vector"]["velocity"]["r"].toFixed(2);
+                    var label = "<strong>ID</strong>: " + String(position["parameters"]["satelliteId"]) + "<br>"
+                                + "<strong>Name</strong>:" + String(position["tle"]["name"]) + "<br>"
+                                + "<strong>Altitude</strong>:" + String(altitude) + " km" + "<br>"
+                                + "<strong>Velocity</strong>:" + String(velocity) + " km/s";
+
+                    console.log(`Latitude: ${latitude}, Longitude: ${longitude}, Altitude: ${altitude}, Velocity: ${velocity}`);
+
+                    var spaceObject = getIconColor(altitude);
 
                     // Adding marker
                     L.marker([latitude, longitude], {icon: spaceObject}).bindPopup(label).addTo(map);
@@ -47,8 +50,16 @@ document.addEventListener('DOMContentLoaded', function() {
                     .then(position => {
                         var latitude = position["geodetic"]["latitude"];
                         var longitude = position["geodetic"]["longitude"];
-                        var label = position["tle"]["name"];
-                        console.log(`Latitude: ${latitude}, Longitude: ${longitude}`)
+                        var altitude = position["geodetic"]["altitude"].toFixed(2);
+                        var velocity = position["vector"]["velocity"]["r"].toFixed(2);
+                        var label = "<strong>ID</strong>: " + String(position["parameters"]["satelliteId"]) + "<br>"
+                                    + "<strong>Name</strong>:" + String(position["tle"]["name"]) + "<br>"
+                                    + "<strong>Altitude</strong>:" + String(altitude) + " km" + "<br>"
+                                    + "<strong>Velocity</strong>:" + String(velocity) + " km/s";
+
+                        console.log(`Latitude: ${latitude}, Longitude: ${longitude}, Altitude: ${altitude}, Velocity: ${velocity}`);
+
+                        var spaceObject = getIconColor(altitude);
 
                         // Adding marker
                         L.marker([latitude, longitude], {icon: spaceObject}).bindPopup(label).addTo(map);
@@ -81,3 +92,25 @@ async function fetchSatellite(name) {
     const satellites = await response.json();
     return satellites;
 }
+
+function getIconColor(altitude) {
+    // Low earth orbit
+    if (altitude < 2000) {
+        icon = 'images/hexagon-fill-red.svg';
+    }
+    // Medium earth orbit
+    else if (altitude < 35780) {
+        icon = 'images/hexagon-fill-blue.svg';
+    }
+    // Geosynchronous orbit and high earth orbit
+    else {
+        icon = 'images/hexagon-fill-black.svg'
+    }
+
+    var spaceObject = L.icon({
+        iconUrl: icon,
+        iconSize: [14, 14]
+    });
+
+    return spaceObject;
+}

tutorials.html

@@ -131,7 +131,7 @@ <h2><i class="bi bi-geo-alt"></i> Map</h2>
                     </p>
                     <p>You should see the satellites as follows after you hit the <button type="button" class="btn btn-primary disabled btn-sm" name="button">Submit</button> </p>
 
-                    <img src="images/map_tut.png" class="img-fluid" alt="space stuff">
+                    <img src="images/map_color_marker.png" class="img-fluid" alt="space stuff">
                 </div>
 
             </div>