Show interactive airport markers

.gitignore

@@ -1 +1,2 @@
+data
 node_modules

assets/client.js

@@ -2,7 +2,7 @@
 
 const aircraftIndex = {}
 const infoPanel = document.getElementById('info')
-let map, selectedMarker, planeIcon, currentPosition
+let map, selectedMarker, planeIcon, currentPosition, openInfoWindow
 
 if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function (position) {
@@ -38,6 +38,12 @@ function initMap () {
   })
 
   onJQuery(function () {
+    // eslint-disable-next-line no-undef
+    $.getJSON('airports', plotAirports)
+      .fail(function (jqXHR, textStatus, err) {
+        throw err
+      })
+
     setInterval(function () {
       // eslint-disable-next-line no-undef
       $.getJSON('aircrafts', plotAircrafts)
@@ -48,6 +54,44 @@ function initMap () {
   })
 }
 
+function plotAirports (airports) {
+  const airportIcon = {
+    path: 'M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8 c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z',
+    anchor: new google.maps.Point(182, 560), // eslint-disable-line no-undef
+    fillColor: '#00aeef',
+    fillOpacity: 1,
+    scale: 0.03
+  }
+
+  airports.forEach(function (airport) {
+    // eslint-disable-next-line no-undef
+    const marker = new google.maps.Marker({
+      position: {lat: airport.lat, lng: airport.lng},
+      map: map,
+      title: airport.name,
+      icon: airportIcon
+    })
+    // eslint-disable-next-line no-undef
+    const infoWindow = new google.maps.InfoWindow({
+      content: `
+        <h3>${airport.name}</h3>
+        <table class="list">
+          <tr><th>IATA</th><td>${airport.IATA || 'n/a'}</td></tr>
+          <tr><th>ICAO</th><td>${airport.ICAO || 'n/a'}</td></tr>
+          <tr><th>Altitude</th><td>${airport.altitude === null ? 'n/a' : airport.altitude + ' ft'}</td></tr>
+        </table>
+      `
+    })
+    marker.addListener('click', airportClick.bind(infoWindow, marker))
+  })
+
+  function airportClick (marker) {
+    if (openInfoWindow) openInfoWindow.close()
+    this.open(map, marker)
+    openInfoWindow = this
+  }
+}
+
 function plotAircrafts (aircrafts) {
   aircrafts.forEach(function (_aircraft) {
     const aircraft = aircraftIndex[_aircraft.icao] = aircraftIndex[_aircraft.icao] || new Aircraft()

assets/style.css

@@ -27,3 +27,7 @@ html, body {
 #info dl {
   margin-top: 0;
 }
+
+table.list th {
+  text-align: left;
+}

package.json

@@ -4,6 +4,7 @@
   "description": "📡✈️ App that picks up ADS-B radio signals from airplanes and plots them in real time on a map in your browser",
   "bin": "server.js",
   "dependencies": {
+    "csv-parser": "^1.12.0",
     "debug": "^3.1.0",
     "get-port": "^3.2.0",
     "mime-types": "^2.1.17",
@@ -18,6 +19,8 @@
     "standard": "^10.0.3"
   },
   "scripts": {
+    "data": "mkdir -p data && curl -o data/airports.csv https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat",
+    "postinstall": "npm run data",
     "test": "standard"
   },
   "repository": {

server.js

@@ -8,6 +8,7 @@ const http = require('http')
 const debug = require('debug')('airplanejs')
 const getPort = require('get-port')
 const opn = require('opn')
+const csv = require('csv-parser')
 const patterns = require('patterns')()
 const mime = require('mime-types')
 const rtlsdr = require('rtl-sdr')
@@ -131,6 +132,35 @@ function startServer () {
     fs.createReadStream(path.join(__dirname, 'assets', filename)).pipe(res)
   })
 
+  patterns.add('GET /airports', function (req, res) {
+    let first = true
+    res.setHeader('Content-Type', 'application/json')
+
+    fs.createReadStream(path.join(__dirname, 'data', 'airports.csv'))
+      .pipe(csv(['id', 'name', 'city', 'country', 'IATA', 'ICAO', 'lat', 'lng', 'altitude', 'utcOffset', 'DST', 'tz', 'type', 'source']))
+      .on('error', function (err) {
+        console.error(err.stack)
+        if (first) res.writeHead(500)
+        res.end()
+      })
+      .on('data', function (row) {
+        Object.keys(row).forEach(function (key) {
+          if (row[key] === '\\N') row[key] = null
+        })
+        row.id = Number.parseInt(row.id, 10)
+        row.lat = row.lat ? Number.parseFloat(row.lat) : null
+        row.lng = row.lng ? Number.parseFloat(row.lng) : null
+        row.utcOffset = row.utcOffset ? Number.parseFloat(row.utcOffset) : null
+        row.altitude = row.altitude ? Number.parseInt(row.altitude, 10) : null
+
+        res.write((first ? '[\n' : ',') + JSON.stringify(row) + '\n')
+        first = false
+      })
+      .on('end', function () {
+        res.end(']')
+      })
+  })
+
   patterns.add('GET /aircrafts', function (req, res) {
     const aircrafts = store
       .getAircrafts()