Aug 24, 2019
I've been working on my Private Pilot license. As part of training, I've been flying to different airports in the area. I also practice diversions, which are unplanned visits to an airport in a simulated emergency.
When approaching an airport, it's important to know the layouts of the various runways in relation to each other and their patterns. I am very visual when flying, so an airport diagram helps me more than text descriptions, especially with landing pattern indicators overlayed.
On my first cross-countries, I drew a few of these by hand, but for local flight, I thought it would be fun to code something up to make it eisier to do. Enter SVG Airports which can produce images like the following embedded within a web page:
You can also use it, like I have, to generate cheat sheets for all of the airports in an area. See this one for the San Francisco Bay Area Airports
To use SVG airports, simply add to the bottom of your page:
<script src=https://gregable.com/p/svg-airports-1.0.js async></script>
And then wherever you would like an airport to appear, add the HTML:
<airport-diagram width=200 height=200> <airport-runway length-ft=4001 true-heading=132> <runway-id name=12 pattern=left></runway-id> <runway-id name=30 pattern=left></runway-id> </airport-runway> <airport-runway length-ft=3438 true-heading=090 offset-angle=0 offset-x=0 offset-y=700> <runway-id name=8 pattern=left></runway-id> <runway-id name=26 pattern=left></runway-id> </airport-runway> </airport-diagram>
This supports adding as many runways as you would like in the same diagram, custom labels like "7R", etc. To see more documentation on the parameters, check out the README on GitHub.
The code is licensed via an MIT license as free to use however you would like. If you found a good use for it, drop me an email and let me know.