Flight Tracker

Started September 09, 2020

Published September 18, 2020

https://mannylopez.github.io/flightTracker/

3D altitude map for current flights anywhere in the world

Got the idea to build a real-time flight tracker from Geodose's Build Your Own Flight Tracking Application with Python and Open Air Traffic Data post. The tutorial is built using Python, and I'm going to try to do it in JavaScript.

Resources

• OpenSky Network: Open air traffic data
• OpenSky REST API docs
• How to make HTTP requests like a pro with Axios
• HTTP requests using Axios
• bboxfinder.com
• A Guide to Solving Those Mystifying CORS Issues
• Where we're going, we don't need servers on how to use Netlify and deploy a simple backend.
• How do you convert normal geographic json coming from server into geoJson?
• GeoJSON Wikipedia page
• Geometric vs. Barometric Altitude

To do

• Create an array of objects by combining the keys and values from Opensky network REST response
• Place markers on map for each airplane
• Add plane marker with plane facing direction of travel
• Add flight card with flight info when airplane is clicked
• Add plane trajectory
• Refresh flights automatically
• Add OpenSky attribution to page
• Design and add flight card with metadata

Log

September 10, 2020

1. Created structured data from the Opensky API response and then used that data to
2. Add markers to the map using the object's latitude and longitude

September 11, 2020

1. Add plane marker with plane facing direction of travel
2. Add flight card with flight info when airplane is clicked
3. Notes:
   • The /tracks endpoint does not seem to be working
   • Found /routes and /airports endpoints by inspecting the network calls made in OpenSky Explorer](https://opensky-network.org/network/explorer)

September 13, 2020

Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present. The endpoints are not publicly available. Dang. Learnt more about CORS and why I can get results from those endpoints using Postman and my terminal, but not when using the browser.

September 14, 2020

Explored OpenSky's /aircraft endpoint and figured out that it does not return current flights. It returns data for flights that have started and ended. I need to find another API to get the current departure and arrival airport for any given flight.

September 15, 2020

I'm going to pause trying to get realtime data for a flight in progress. The API I found, aviationstack, provides a free tier for personal projects, but I would be exposing my private API key since my app is all frontend. I need to learn about servers and making the call in the backend. I'll come back to this once I learn how to work with servers.

September 17, 2020

Pivot! Since I can't get departure and arrival information for free, I'm going to work with the data I do have.

The map now shows 3D points representing the altitude of the plane. The layers are all generated from the GeoJSON file I create on the fly after receiving the data from the API call.

September 18, 2020

Finished product!

Map on load

After "Altitude" button is pressed

Pushing this to https://mannylopez.github.io/flightTracker/