Using zoom-driven styling to animate the Stranger Things inspired map

By: Madison Draper

Inspired by the Stranger Things title sequence, the “Upside Down” map style uses zoom-driven styling to animate the map and provide an interactive experience. As you zoom throughout the Upside Down map, the world you know fades, the upside down comes into (blurry) view and lightning strikes. Even when everything returns to “normal” again, lightning flashes to remind you Demogorgons are escaping from the Upside Down into our world.

Styling

Chapter One: The Upside Down

The concept of the Upside Down inspired me to bring the South Up projection into Mapbox. To create this data, I used Natural Earth’s open source data, rotated it 180 degrees in QGIS, exported it as GeoJSON and uploaded it to Mapbox Studio.

Mirroring the letter’s flickering movement and the camera’s zoom effect in the title sequence, the Upside Down map’s upright world vanishes and the Upside Down blurs into focus. I created the blur effect by having multiple low opacity polygons with offsets that converge and increase in opacity as the zoom level increases.

1. Upload the data to a GIS tool like QGIS
2. Rotate the data 180 degrees
3. Export the data to GeoJSON
4. Upload the data to Mapbox Studio
5. Set the upright world and labels to 0 opacity and the Upside Down polygons to .01

6. Set the Translate across zoom level to create the blur in and out effect

Chapter Two: The Lightning

Inspired by Eleven’s powers and the twinkling of lights, I used zoom driven styling on the opacity of country outlines. To make the lines flash intensely, I used heavily contrasting colors and an exaggerated line width.

The lightning layers take up nearly half the layers in the style, so it’s critical to have multiple layers across a single zoom level to replicate the rapidness of lightning.

1. Download the data from Natural Earth
2. Upload it to Mapbox Studio
3. Use data-driven styling to filter the data by a property, such as name
4. Set a high and sudden opacity and then let it fade out over .25 to .35 of a zoom level.
5. Repeat for several layers across zoom level

Add the Upside Down map style to your Mapbox Studio account to build on top of the Stranger Things world and zoom around the map for an immersive experience into the Upside Down!

Madison Draper (@mzdraper) | Twitter

Using zoom-driven styling to animate the Stranger Things inspired map was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.