For seven seasons, Agents Fox Mulder and Dana Scully of The X-Files took us around the world as they investigated the unknown. To celebrate the series reboot, I built an interactive map of every X-File location (real and fictitious) with data from Mapping the X-Files by Jane Roberts.
I started by customizing the Dark style in Mapbox Studio. I played around with layer opacity so that when you click an episode in the sidebar features like roads and landuse fade-in together. I also uploaded custom fonts for the labels to match The X-Files logo.
Next, I used Mapbox GL JS to load the data as GeoJSON markers and to add some interaction. Following the Mapbox GL Style Reference, I made each marker a green circle and then added a symbol layer containing only an “X” on top. For the symbol layer, I played with the opacity again, so that the “X” fades-in at the same time as the features on the map. With help from the hover styles example, I created another layer as an active state (red circle) for when a user selects a location.
The result is a slightly eery, or should I say spooky, map fitting for those episodes that you should watch with the lights on. Click through the seasons in the sidebar or a marker on the map to see if Mulder and Scully investigated an X-File near you:
You can browse the code for the map and data in the X-Files Github repo. I’ll be sure to add the new episodes starting this Sunday!