After finally getting my API set up on my local device, I created my final react web app. It took me a few searches to identify what library to use so that I could have an interactive map as the base map as well as different components for my project. Initially, I just used the default markers that was in leaflet to represent the different flights. I was able to access the latitude and longitude variables for the flights from the API url, using the .map function to loop through all the JSON data in the API and access all the flights. They were then plotted on the leaflet map using the default markers.

Something additional I wanted to add though was a better flight icon that changes colors based on the altitude. While the actual code was simple if statements based on what altitude was detected for each flight in the API, the icon was the difficult part. I learned that you can’t actually change the color of the icon but rather have different svg files (works best for enlarging and changing on leaflet) for each color. I created an icons folder in my public folder for react, then called the relative path to that file based on the conditions I placed for the altitudes.

I ran into a lot of trouble actually figuring out why my app wasn’t loading onto the web page, only to figure out that my index.css file was clashing between the default code and my new additions. So I wiped out all the previous code before adding my own, allowing it to finally work!

After plugging in my antenna and getting the dump1090 set up as well as my database and API, I could actually see the plane icons moving every 10 seconds, which was my designated sleep time, as well as change colors as they moved altitudes!!