How This Was Built

Most of my mapping work focuses on Earth, whether that's land use analysis, infrastructure planning, or regulatory compliance. For today's "Out of This World" challenge, I wanted to push Mapbox GL JS beyond its typical boundaries by rendering actual lunar imagery as an interactive 3D globe.

The tiles come from NASA's Lunar Reconnaissance Orbiter Camera (LROC), specifically the Wide Angle Camera mosaic hosted on NASA Trek. This is real imagery captured by the LRO spacecraft as it orbits the Moon. By feeding these tiles into Mapbox's globe projection, we get a surprisingly smooth experience for planetary visualization.

The interesting technical challenge was that Mapbox expects Earth coordinates, so the Moon's surface is mapped using the same lat/lon system we use here. Apollo 11's landing site at Mare Tranquillitatis becomes coordinates you can fly to, just like any city on Earth. The auto-rotation uses requestAnimationFrame for smooth performance, and pauses automatically when you interact with the globe so you can explore at your own pace.

It's a good reminder that web mapping tools are more flexible than their primary use cases suggest. The same libraries we use for county boundaries and infrastructure networks can handle planetary data when you know where to find the tiles.