Points

Global Airport Network Visualization

For Day 1 of the #30DayMapChallenge, I created an interactive visualization of the world's airports using OpenStreetMap data. The map demonstrates effective point symbolization through color-coded airport types: blue circles for international airports, red circles for military airfields, and gray circles for other aerodromes. The circles scale dynamically based on zoom level, providing clear visual hierarchy from global to local context.

Data Extraction

The airport data was extracted from OpenStreetMap using Overpass Ultra, a powerful query interface for OSM data. I used Claude to write an Overpass QL query that pulled all aeroway nodes and ways tagged with aerodrome information globally. This resulted in a comprehensive dataset of over a million airport points, including international airports, regional airports, military airbases, heliports, and small airstrips.

[out:json][timeout:180];
// Get all airports
(
  node["aeroway"="aerodrome"];
  way["aeroway"="aerodrome"];
  relation["aeroway"="aerodrome"];
);
// Output with all tags
out center tags;

Technical Implementation

The visualization is built with modern web mapping technologies:

• react-map-gl – React wrapper for map rendering with seamless component integration
• MapLibre GL JS – Open-source vector map rendering engine with WebGL acceleration
• OpenFreeMap – Free basemap tiles using the clean Positron style

The GeoJSON data is rendered client-side with efficient vector layer styling. Interactive toggles allow users to filter airport types dynamically, and the map supports smooth zoom transitions with scale-dependent symbolization. All rendering happens in the browser using WebGL, making it surprisingly performant despite the large dataset.