Building a flight tracker
Back in 2016 I wanted to see where I have been in Toronto. This motivated me to build a simple web app that would show me in a simple map overview. I always had my phone-gps on and Google location history provides a way to download this data. Google maps provided an API to display this information. After some old-school digging in Javascript and next-level googling I put together a simple together and got my data nicely displayed in a heatmap. This was back on 2016 and I thought it was time to do some new cool things with Google Maps.
Since I’m now a Vue-Fanatic I started my project using Vue. A friend of mine works as an aircraft mechanic and was working on an app to simplify his (and his team’s) work process. This inspired me to make a flight-tracker app (yes another one…). The purpose was for me to rekindle my Google maps code while making something that has more eye candy than my previous projects.
It took me some time but after a decent hour of googling I found the OpenSky network. This site serves traffic data for free and has a simple rest api. This data contains the longitue/latitue information which can be easily drawon on Google Maps. With Vue I quickly found a Vue plugin that wraps the google maps api in a Vue component: vue2-google-maps. Using Vue to retrieve the data from OpenSky and draw the markers on the map was effortless. I spent more time changing the marker drawing to an airplane using an SVG path.
Now that it is finished I don’t really know what to do with it or how to improve it. But I guess this means it’s time to move on to the next project!