Recently, I decided to create a heatmap of all flights on Infinite Flight’s Expert Server over a 24 hour period initially, then a 7-day period. To get this data, I fetched location data from the New Live API every 10 minutes.
Heatmaps were something I hadn’t done before. Originally, I was going to generate a single image in Node. However, after exploring how this could work, I decided it would be easier and have a better result to do it using Leaflet and heatmap.js. Having worked with Leaflet before, it wasn’t long before I had a nice map on a webpage running locally.
It looked cool, but something was off. The color was not based on the traffic density in that area. Instead, each aircraft produced a small red dot that was (to an extent) independent. After some tinkering, I found this was a gimmick of heatmap.js and was happening because I loaded the data after the configuration. Heatmap has getters and setters for all properties, so it was easy enough from here to just set the configuration after adding the data.
I also made an animation using a library for the creator of heatmap.js. More or less, it just rewrote the data every half second, which presented some performance issues. To fix this, I just unset variables here and there to free up some memory.
The full result is available here.