Got Flights Added to My Website

0 💕 0 ↩️ 0 🔄

Since getting my domain, I’ve been making efforts of putting what social media-y things I wanted to share on the Internet on that instead of using any other website or service if I can help it. For nearly everything else it was pretty easy since (aside from Scuttlebutt) I don’t really use any other social networks unless I’m directly messaging friends and other contacts. However, MyFlightradar24 is a different case. Having to import all my flights from it to another system is a cause of extreme inertia, and the data visualizations are too nice.

Still, I’d like to put it on my site instead. So after some thought I finally have flights on my site!

Nearly Five Years of Flight Data Logged

MyFlightradar24 is still a pretty cool way of logging my flight information. In addition, it also provides some really fun visualizations and statistics of my flights. I particularly liked seeing the total hours I’ve spent in a plane, the total amount of miles I’ve logged, and what my estimated emissions are. Its flight input is a bit annoying in that it’s multiple pages, but I stuck with it because there were very few other options that worked well.

(As background, flight attendants, unlike pilots, don’t need to keep logs of the flights they work. So most things made for aviation professionals tailor to pilots and wasn’t exactly the kind of thing suited for my purposes.)

In addition, it’s essentially just a database that stores my flights and presents the data into a pretty format. This is something I can achieve on my own site and I wouldn’t have to worry about losing this functionality in the future.

Started with Data

I started off with the data first, because in my head having a sense of how everything is structured makes its presentation so much easier. In Hugo I created a few new folders in the data folder for airports, airlines, and aircraft. In each of those folders I created (in YAML):

{ICAO Type Code for Airline}.yaml = a19n.yaml

name: Airbus A319neo
ata: 31N

{IATA Airline Code}.yaml = dl.yaml

name: Delta Air Lines
icao: DAL
callsign: DELTA
  first: Delta One/First Class
  business: Premium Select
  prem_econ: Comfort+
  economy: Main Cabin

{IATA Airport Code}.yaml = atl.yaml

name: Hartsfield-Jackson Atlanta International Airport
icao: KATL
  street_address: 6000 North Terminal Parkway
  locality: Atlanta
  region: Georgia
  postal_code: "30320"
  country_name: United States
    latitude: 33.6366996
    longitude: -84.4278640
    altitude: 312.8

After this, I worked on an archetype for flights posts (

title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
airline:                 # ATA, ICAO, Callsign, or Full Airline Name
flight_number:           # Flight number without the Airline Code
departure_airport:       # ATA or ICAO of airport
departure_datetime:      # Datetime should be local to the airport
arrival_airport:         # ATA or ICAO of airport
arrival_datetime:        # Datetime should be local to the airport
flight_duration:         # Duration in ISO8601: P[n]Y[n]M[n]DT[n]H[n]M[n]S
aircraft_type:           # ICAO (A20N), IATA Type (32N) or Aircraft Name (A320neo)
aircraft_registration:   # Like N720FR
flight_class:            # first, business, prem_econ, economy, or private
flight_seat_type:        # window, middle, or aisle
flight_seat_number:      # Like 13F
flight_reason:           # leisure, business, crew, or other
Content goes here!

From There it’s all Templates

Providing data about an airline, aircraft, and airport; and providing such data in the front matter of each Flights post, makes it a matter of just calling up the right data into templates to make each entry. In my head it was easier to figure out what data was and where data was stored before I sorted out how to present it, and after I got a model in my head it was just an hour’s work of HTML, JavaScript, and some Go Templating to present my flight logs into a nice page.

Because of my current obsession with describing everything with RDFa, and also to harmonize with current efforts of the IndieWeb community (whose resources have helped immensely as a whole for my site), I’ve described my flights with the h-entry and h-event microformats and’s BlogPosting and Flight definitions.

The previews of the flights are a static image provided by Mapbox’s static image service, while Leaflet provides an interactive map with the flight arc drawn thanks to Leaflet.Arc. OpenStreetMap provides the tile layers for the interactive map.

Right now, I’ve also created some JavaScript that calculates distance using the Haversine formula, with a possible override of a literal distance of the flight in the front matter on a per-page basis. However, I am not currently using that until I figure out…

Next Goal: Data Visualization

I’m currently displaying basic data on a per-flight basis, and presenting it in my site’s default list template. It works; it’s not ideal. More specifically, I currently don’t have all the data visualizations fleshed out yet–particularly not in the amount that MyFlightradar24 has. I’m thinking that I’m going to want to use some sort of JavaScript library for data visualization, but I’ll need to figure out where said data should be stored. I’m using a Static Site and the place where I’m hosting does not provide server-side scripting, so I’m going to need to be creative. But before even that…

Before Next Goal: Data Entry

This is going to be a slog. Not only will I need to export my data from MyFlightradar24 and put them up as pages in my site, I will also need to input data of all the airports that I’ve flown into, all the planes I’ve ridden in, and all the airlines I’ve flown with! That’s going to be a ton of work at first, but once finished should make it easy to just using my site.

(I should really consider if, perhaps, such a store of data on airports, airplanes, and airlines in YAML would be helpful for someone and if I should distribute it somewhere. Hm.)

This Is Enough For Now

Even without getting to the next goal post, being able to own my flight data on my own site is a huge thing. Huge enough that I should be able to eventually just own and host everything I post on the Internet from now on.

View on Twitter View on Mastodon