By
@Jhenil
A Flight Tracker. I did start making this on a globe but because the globe is something you see from far away that's why you can't see the fine detail like exact location for airplanes. That is why I shifted to a map version called "SkyTrace".
I have made a flight tracker which provides live updates of aircrafts within 250 nm. Sometimes, I just go and sit on flight trackers and just view many different flights and look at them. I always wanted to make one of my own, so here it is.
Features of the tracker are you can track a live flight (250nm), view live updating aircraft info, replay the flight history, an aircraft trail, aircraft route and airport information panel. You also can adjust the map type you want. You can choose from Standard, Dark, Satellite & Terrain. You can also turn on a weather option which shows you the weather information at a particular location.
I hope you like my tracker. Thank you for testing!
Devlog - 9
This is my last devlog before the shipment of this project. In this last hour I have added a curved path as seen in the picture which makes it look better than a straightline. Then I encountered an API issue which was that mu current route API was giving me an 502 error which was because it was down so instead of being too dependent on it, I modified the code to have two API links which the code tries the first and If it doesn’t work then it tries the second one and it works now. Thank you for being a part of this project!
Devlog - 8
Okay so I wanted to make it apart from a regular flight tracker and I was brainstorming ideas and thought of an idea of making a flight replay. So what I did is now the app stores the latitude and longitude of flights on a temporary basis and then when the user clicks on the replay button the code goes to the starting point and will show you the whole flight journey. I have also made a smaller window seen in the picture which is on the bottom right which shows you the replay details like how the altitude changed or like how speed changed and all things like that. The user can also select at what speed they want to watch the replay and all. Thank you and stay tuned!
Devlog - 7
A longer coding session spanning two days. I have added a couple of things which have made the tracker better and gives it a more professional look than it was before. Firstly I changed the info panel for the aircraft. Before it was a small pop up which came at the top left of the screen but it wasn’t the best so I made it a sliding panel where it slides out from the left side of the screen. Then what I added is adding the airline name inside the panel when an aircraft is selected before using just the flight tracking API I had to hardcode like the callsign to the actual airline name but now it works using an another API which is used for routes as well. Then I added route information inside the panel and for that I used another API (same as the airline name one) which gives information about from where it departed and where is it going. Then I added a route dashed path which gives the user an idea of the aircraft’s intended path and lastly I added so that the panel refreshes every 5 seconds updating the information inside it. I had the most time struggling with API keys and all but at the end I got it working. You can see the changes in the pictures below. Thank and stay tuned!
Devlog - 6
Finally finally I have gotten the API for the flight tracking to work. I had to use Vercel functions to actually get it to work but here it is. You can see it in the video attached below. I also made it like an animation so I have an interval of 5 seconds but before reaching to its updated location between those 5 seconds it looks like it is covering distance which makes it look so realistic. I have made it so if you zoom out then you see more aircrafts rather than being zoomed in. I will be changing the UI and will be adding live statistics so that the data in the panel updates while you are looking at the aircraft moving. Thank you and stay tuned!
Devlog - 5
Kind of a slow day today and wasn’t able to do much for today. I only added airport markers and created a panel for it. I have currently hardcoded two airport details and made it around that but I have already found an API for many airport data and it was way easier than finding the API for flight tracking. The key will be implemented in the next devlog and if you guys have any suggestions about flight tracking API then please let me know as it will help me a lot. Thank you and stay tuned!
Devlog - 4
I know I took a bit long this time too to post a devlog but I am here. I was mainly searching for APIs and all but there are many out there but with too many restrictions or has less rate limits for the free tier. I have stumbled upon one adsb.lol but that gives me a CORS error and I have thought to build a proxy to bypass that and all but before that I have emailed them regarding if it is fine If I do it that way. If you guys have suggestions about it then I will happily accept those. But then I wans’t going to just sit so I coded a hard coded flight details but in a way so that even after I plug in the API link it will still work so my work would not go down the drain. I have coded a panel where it lets you know about flight details and all. I have coded a function which can handle multiple aircrafts by placing the markers where they suppose to be. I will be working on making the information panel a bit better and will make it look professional and all. This is the work I have done till now. Thank you and stay tuned!
Devlog - 3
I have been not paying attention to this project since my last devlog because I was finishing up my other project LifeLab but now I am fully focused on this project. I have been working on adding weather radar on the map so that the users can see what the weather is like and you can see that in the images attached below. I spent some time figuring out the API and it wasn’t working then went back to debugging and coding and debugging but at the end the weather API now works. I was also working on making that menu like a button I spent a lot of time to make the whole panel a button but for some reasons the console kept throwing errors on to me and I kept overhauling the code and all and spent a lot of time on it but just couldn’t get it working. I know it is a simple thing but I don’t know what is happening. I have kept that idea aside for now. Thank you and stay tuned!
Devlog - 2
My main goal was to add a few aircrafts on the map and get the actual tracking system started but I just can’t find a good API for now. I will get an API soon and will get the tracking system on. But till then I can’t waste time until I find one, so I started working on the UI. Like 30-40min of this time is like experimenting new API keys but the rest of time I spent on letting the user choose what type of map they want to use to use the tracker. Currently I have Standard which is a normal map, Dark which is dark themed map, Satellite and Terrain which show elevations on the map. I have made a small window on the top right so that the user can choose which one to use according to their liking. Thank you and stay tuned for more!
Devlog - 1
This devlog marks the starting of SkyTrace. It is a flight tracker and will try to make it the best out there. I initially started this project on a globe which going forward I changed my mind because as global wasn’t able to deliver those fine details that aviation fans like. That made it hard to actually spot a aircraft as many just were bundled into one. That is why I started on this. It took me a while to start on this because I was working on different project which is LifeLab, you can find that in my projects. So yea this is the starting for this project! I got the map using a LeafLet as they provided with map libraries and it saved a lot of time as it was simple to use, I did try some other library but it didn’t provide a good map so I switched over to Leaflet. Stay tuned for more!
