What?
An interesting question that's often overlooked when we look at maps is how they were made. I mean we know what maps represent, but how? With local maps there are often altitude lines that represent the height or change in height throughout an area, this is one way to get around having a flat map that represents a two-dimensional landscape. But how does this apply when we zoom out to capture the whole Earth? Local altitude markers become useless when representing such large-scale geographies, so these are usually ignored but what about the curvature of the Earth.
When we make flat maps we alter parts of the Earth, a great way to see this at home is to take an orange peel and try to flatten it. Some parts stretch too much and rip while other compress altering the peel. This is like what happens with flat maps except we often must remove information to make a map useful.
There are two trade offs that must happen when we flatten the Earth into a map, we either modify the sizes of everything on the map increasing distortion but preserving directionality or we minimize distortion at the detriment to directionality. By directionality I'm referring to why we have maps in the first place, to navigate from A to B. If we change the size of objects on a map, we can keep their use as a navigational device but forgo its use as a learning tool. This is why many people seem to think that Greenland is the size of Africa or that Russia looks like it takes up the same space as all of Asia.
This makes drawing the shortest line between two points kind of a pain. A straight line between each location on a flat map would seem like the shortest path but neglects how the curvature of the Earth will affect the route. A way to take the Earths curvature into consideration is by using the great circle distance and then interpolating between each point. Then to plot it on a map, you need to know what projection you are using and how distorted it is to calculate the position of each point accurately.
By Strebe - Own work, CC BY-SA 3.0, Link
Why?
During my time at the Caltech Mentorship program, I talked to Dr. Joel Lawson (then he was a PhD candidate). He wrote a MATLAB program that would take a list of all the airports he had visited and graph the spherical flight paths on to a flat map. This map was the Kavrayskiy VII projection which was special for minimizing distortion and keeping continents to a consistent size, this also had the effect of making the flight paths beautiful arcs from airport to airport. I asked if I could recreate the project to freshen up my python skills and he agreed.
How?
There were three iterations to this project, the Python version, the Django version, and the React version. Each built off the last before its final form as a website with beautiful buttons and a reactive design.
The first Python iteration was simply a recreation of Joel's MATLAB program. It took the same map and equations then graphed the flight paths using Matplotlib. The program would grab either an excel or txt file with the airports you had visited, would look up the latitude and longitude of the airports, then calculate the path and convert it to points on a map. It was simple but annoying to use.
The second version was my attempt at making the interaction with the program easier. I rewrote my code and used the Django framework to build a website around my application. You could type the airports into the website and it would display and image of the map with your flight paths. It did what it was meant to but was still slow and ugly albeit significantly easier to use.
The final release fixed many of the problems that plagued the first two. I worked with a friend to completely redesign the frontend to use better design language and made the whole experience more intuitive. I then converted the design to code using the React framework along with using ChakraUI to style the interactive elements. To make the website scale to any size monitor and reactive to light and dark modes, I made a custom map based on the Kavrayskiy VII projection but using vector graphics. Finally remade the backend using FastAPI to accelerate the loading of the front end while keeping the business logic largely the same.
I also added some bonus features. The airport input will let you know if an airport code doesn't exist and each flight will show the travel time, travel distance, and the amount of CO2 emissions assuming the use of a Boeing 747.
You can visit FlightMaps.io here.