Icon, Layers, app database

gpivaro · Dec 9, 2020 · fdf27e6 · fdf27e6
1 parent 0eb8de4
commit fdf27e6
Show file tree

Hide file tree

Showing 3 changed files with 266 additions and 6 deletions.
diff --git a/app.py b/app.py
@@ -5,10 +5,10 @@
 import json
 
 # Import database user and password
-# from api_keys import mysql_hostname
-# from api_keys import mysql_port
-# from api_keys import mysql_user_project2
-# from api_keys import mysql_pass_project2
+from api_keys import mysql_hostname
+from api_keys import mysql_port
+from api_keys import mysql_user_project2
+from api_keys import mysql_pass_project2
 
 # mysql_hostname = os.environ['MYSQL_HOSTNAME']
 # print(mysql_hostname)
@@ -27,7 +27,7 @@
 # MySQL specific connection string
 try:
     database_uri = os.environ['DATABASE_URL']
-except KeyboardInterrupt:
+except KeyError:
     database_uri = f"mysql+mysqlconnector://{mysql_user_project2}:{mysql_pass_project2}@{mysql_hostname}:{mysql_port}/{database_name}"
 
 print(database_uri)

diff --git a/static/js/logic_Gabriel_v2.js b/static/js/logic_Gabriel_v2.js
@@ -0,0 +1,260 @@
+/* ************************************************************************************************ */
+/* ************************************************************************************************ */
+/* ************************************************************************************************ */
+/* ************************************************************************************************ */
+/* Setup parameters and functions */
+
+// Responsive chart and hide control buttons on Plotly charts
+var config = {
+    responsive: true,
+    displayModeBar: false
+};
+
+
+// To use OpenStreetMap instead of MapBox
+// Define variables for our tile layers
+// To use OpenStreetMap instead of MapBox
+var attribution =
+    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+var titleUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+var OpenStreetTiles = L.tileLayer(titleUrl, { attribution });
+
+
+
+/* Date.prototype.toLocaleDateString()
+     https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString */
+var timeOptions = { year: 'numeric', month: 'numeric', day: 'numeric' };
+// timeOptions.timeZone = 'UTC';
+
+//   Markers With Custom Icons
+var aircraftIcon = L.icon({
+    iconUrl: 'Resources/Airplane_wwwroot_uploads_svg_symbol_0qvhey5-airplane-vector.svg',
+
+    iconSize: [38 / 3, 95 / 3], // size of the icon
+    //     shadowSize:   [50, 64], // size of the shadow
+    iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
+    //     shadowAnchor: [4, 62],  // the same for the shadow
+    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
+});
+
+
+/* ************************************************************************************************ */
+/* ************************************************************************************************ */
+/* ************************************************************************************************ */
+/* ************************************************************************************************ */
+/*  Aircrafts live data */
+
+/* 
+This is the official documentation of the OpenSky Network’s live API. 
+The API lets you retrieve live airspace information for research and non-commerical purposes. 
+Documentation: https://opensky-network.org/apidoc/rest.html
+ */
+
+aircrafts_api_url = "/api/v1.0/aircrafts-data"
+airports_api_url = "/api/v1.0/airports-data"
+
+d3.json(aircrafts_api_url).then((aircraftsData) => {
+    return aircraftsData
+}).then(
+    function (aircraftsData) {
+        d3.json(airports_api_url).then((importedData) => {
+
+            var flightData = aircraftsData;
+
+            // Retrieve the newest meas time and convert the format
+            var newestData = new Date(flightData[0].time * 1000);
+            var newestDataTime = newestData.toLocaleTimeString("en-US", timeOptions);
+
+            // add marker to map for each flight
+            aircrafts = []
+            flightData.forEach(function (element) {
+                circles = L.circle([element.latitude, element.longitude], {
+                    fillOpacity: 0.75,
+                    color: "red",
+                    fillColor: "blue",
+                    // Adjust radius
+                    radius: 20000
+                }).bindPopup(`<h5>Aircraft Info:</h5><hr>
+                            ICAO address: ${element["icao24"]}<br/>
+                            Callsign: <a href='https://flightaware.com/resources/registration/${element["callsign"]}' target="_blank">${element["callsign"]}</a><br/>
+                            Origin country: ${element["origin_country"]}<br/>
+                            Time of position update: ${element["time_position"]} (UTC)<br/>
+                            Time of last update: ${element["last_contact"]} (UTC)<br/>
+                            Longitude: ${element["longitude"]}<br/>
+                            Latitude: ${element["latitude"]}<br/>
+                            Altitude ${element["baro_altitude"]} m | ${Math.round(element["baro_altitude"] * 3.28084)} ft<br/>
+                            On ground: ${element["on_ground"]}<br/>
+                            Velocity: ${element["velocity"]} m/s | ${Math.round(element["velocity"] * 2.23694)} mph <br/>
+                            True track: ${element["true_track"]}° (north=0°)<br/>
+                            Vertical rate: ${element["vertical_rate"]} m/s<br/>
+                            Sensors ID: ${element["sensors"]}<br/>
+                            Geometric altitude: ${element["geo_altitude"]} m | ${Math.round(element["geo_altitude"] * 3.28084)} ft<br/>
+                            Transponder code: ${element["squawk"]}<br/>
+                            Special purpose indicator: ${element["spi"]}<br/>
+                            Position_source: ${element["position_source"]}<br/>
+                            For more details: <a href='https://flightaware.com/live/flight/${element["callsign"]}' target="_blank">link</a>
+                    `, { "background": "#2c3e50" })
+
+                aircrafts.push(circles);
+
+            });
+
+
+            var airportData = importedData;
+
+
+            airportArray = [];
+            airportData.forEach(function (element) {
+                if (element.Country) {
+                    circles = L.circle([element.Latitude, element.Longitude], {
+                        fillOpacity: 0.75,
+                        color: "green",
+                        fillColor: "black",
+                        // Adjust radius
+                        radius: 2000
+                    }).bindPopup(`<h5>${element["Name"]}</h5><hr>
+                          Airport ID: ${element["AirportID"]}<br/>
+                          City: ${element["City"]}<br/>
+                          Country: ${element["Country"]}<br/>
+                          DST: ${element["DST"]}<br/>
+                          IATA: ${element["IATA"]}<br/>
+                          ICAO: ${element["ICAO"]}<br/>
+                          Altitude: ${element["Altitude"]} m<br/>
+                          Latitude: ${element["Latitude"]}<br/>
+                          Longitude: ${element["Longitude"]}<br/>
+                          Source: ${element["Source"]}<br/>
+                          Timezone: ${element["Timezone"]}<br/>
+                          Type: ${element["Type"]}<br/>
+                          Tz database time zone: ${element["Tzdatabasetimezone"]}<br/>
+                          For more details: <a href='https://ourairports.com/airports/${element["ICAO"]}' target="_blank">link</a>`
+                    )
+                    airportArray.push(circles);
+                }
+            });
+
+            // Define a baseMaps object to hold our base layers
+            var baseMaps = {
+                //"Street Map": streetmap,
+                //"Dark Map": darkmap,
+                "OpenStreet": OpenStreetTiles
+            };
+
+            // create a layerGroup for each state's markers.
+            // Now we can handle them as one group instead of referencing each individually.
+            var airportLayer = L.layerGroup(airportArray);
+
+            var aircraftsLayer = L.layerGroup(aircrafts);
+
+            // Create overlay object to hold our overlay layer	
+            var overlayMaps = {
+                "Airports": airportLayer,
+                "Aircrafts": aircraftsLayer
+            };
+
+            // Create our map, giving it the streetmap and earthquakes layers to display on load
+            var myMap = L.map("map", {
+                center: [39, -99],
+                zoom: 4,
+                layers: [OpenStreetTiles, airportLayer, aircraftsLayer]
+
+            });
+
+
+            // Leaflet.Terminator https://github.com/joergdietrich/Leaflet.Terminator
+            L.terminator().addTo(myMap);
+
+
+            // Create a layer control
+            // Pass in our baseMaps and overlayMaps
+            // Add the layer control to the map
+            L.control.layers(baseMaps, overlayMaps, {
+                collapsed: false
+            }).addTo(myMap);
+
+
+
+
+        });
+    }
+);
+
+
+
+
+
+
+
+// airports_api_url = "/api/v1.0/airports-data"
+// d3.json(airports_api_url).then((importedData) => {
+//     // console.log(importedData);
+
+//     var airportData = importedData;
+
+
+//     airportArray = [];
+//     airportData.forEach(function (element) {
+//         if (element.Country) {
+//             circles = L.circle([element.Latitude, element.Longitude], {
+//                 fillOpacity: 0.75,
+//                 color: "green",
+//                 fillColor: "black",
+//                 // Adjust radius
+//                 radius: 2000
+//             }).bindPopup(`<h5>${element["Name"]}</h5><hr>
+//                   Airport ID: ${element["AirportID"]}<br/>
+//                   City: ${element["City"]}<br/>
+//                   Country: ${element["Country"]}<br/>
+//                   DST: ${element["DST"]}<br/>
+//                   IATA: ${element["IATA"]}<br/>
+//                   ICAO: ${element["ICAO"]}<br/>
+//                   Altitude: ${element["Altitude"]} m<br/>
+//                   Latitude: ${element["Latitude"]}<br/>
+//                   Longitude: ${element["Longitude"]}<br/>
+//                   Source: ${element["Source"]}<br/>
+//                   Timezone: ${element["Timezone"]}<br/>
+//                   Type: ${element["Type"]}<br/>
+//                   Tz database time zone: ${element["Tzdatabasetimezone"]}<br/>
+//                   For more details: <a href='https://ourairports.com/airports/${element["ICAO"]}' target="_blank">link</a>`
+//             )
+//             airportArray.push(circles);
+//         }
+//     });
+
+//     // Define a baseMaps object to hold our base layers
+//     var baseMaps = {
+//         //"Street Map": streetmap,
+//         //"Dark Map": darkmap,
+//         "OpenStreet": OpenStreetTiles
+//     };
+
+//     // create a layerGroup for each state's markers.
+//     // Now we can handle them as one group instead of referencing each individually.
+//     var airportLayer = L.layerGroup(airportArray);
+
+//     // Create overlay object to hold our overlay layer	
+//     var overlayMaps = {
+//         "Airports": airportLayer
+//     };
+
+//     // Create our map, giving it the streetmap and earthquakes layers to display on load
+//     var myMap = L.map("map", {
+//         center: [39, -99],
+//         zoom: 5,
+//         layers: [OpenStreetTiles, airportLayer]
+
+//     });
+
+
+//     // Leaflet.Terminator https://github.com/joergdietrich/Leaflet.Terminator
+//     L.terminator().addTo(myMap);
+
+
+//     // Create a layer control
+//     // Pass in our baseMaps and overlayMaps
+//     // Add the layer control to the map
+//     L.control.layers(baseMaps, overlayMaps, {
+//         collapsed: false
+//     }).addTo(myMap);
+
+
+// });
diff --git a/templates/index_Gabriel.html b/templates/index_Gabriel.html
@@ -78,7 +78,7 @@ <h1>Real-Time Air Traffic Map</h1>
   <!-- API key -->
   <script type="text/javascript" src="static/js/config.js"></script>
   <!-- JS -->
-  <script type="text/javascript" src="/static/js/logic_Gabriel.js"></script>
+  <script type="text/javascript" src="/static/js/logic_Gabriel_v2.js"></script>
 </body>
 
 </html>