An assessment for Tailwind Scientific that plots a few airports in Canada and planes that are currently flying to and from those airports.
- General Info
- Technologies Used
- Features
- Screenshots
- Setup
- Usage
- Project Status
- Room for Improvement
- Acknowledgements
- Contact
As part of an interview assessment for Tailwind Scientific I was asked to connect to their API and plot some live and static data to a map. It was my first time building anything with Angular, and I learned on the fly! My biggest roadblock was actually the Typescript that I obviously need more practice with! I used Leaflet with Open Street Map to create the map.
Map:
The blue pins are the locations of the airports provided by the API.
The green circles are planes in flight with locations given by the API. These locations are live and change with every refresh.
As an added feature, the small blue dots are the capital cities of the Canadian provinces.
Close Up:
Close up view.
This project was generated with Angular CLI version 15.2.4.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artefacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
Status: Complete
Improvement Thoughts:
The project is finished as per specs from Tailwind, but as it was a fun project I have some thoughts to improve it later on:
- Figure out how to change the markers to icons and change the flight icons to plans, and airports to something else.
- Change the displayed data to map layers so you can show different selected information.
- Implement an automatic reload to refresh after a certain amount of time and allow the user to set what time interval that will be. This will come with a countdown clock on the screen.
- Display a detailed list of the current flights as well as upcoming scheduled flights.
As part of these improvements, there are some currently unused components and styling that have been created with the hopes of continuing to build the app. These are things such as a button component as well as flight and airport components to display detailed information.
I have left a few TODO notes around the app to help me remember all these things.
To do:
- change flight & airport markers
- create layers for the map
- create list of current & upcoming flights
- automatic refresh timer
Many thanks to Brad Traversy for his easy to follow Angular tutorial. Thanks also to Chris Engelsma for their two part Angular + Leaflet guide which was a` big help displaying the map, connecting Leaflet to the API and displaying the response data.
Created by @azulverdosa - feel free to contact me!
Contributions, issues, and feature requests are welcome!
Give a ⭐️ if you like this project!
MIT Licence Copyright (c) [2023] [AvaElise]