Dancing buildings with Mapbox GL
By: John Firebaugh
The Mapbox GL team has made it our mission to give you complete control over the appearance and behavior of your map, enabling location-based apps that are interactive, creative, surprising, and fun.
In that spirit, we recently set a day aside to do some free-form hacking. I connected the runtime styling API with the Web Audio API and built a map where the 3D buildings dance to the rhythm of your ambient environment:
Click through to the bite, allow microphone access, and put on your favorite jam.
How I built it
Want to try building something similar?
I used several features of the Mapbox GL JS runtime styling API to drive the animation. First I divided the buildings into 16 bins based on their true height, using a layer filter:
Then I set up a Web Audio AudioContext and AnalyzerNode, configured to return the same number of bins of audio frequency data. I use that data to drive updates to the fill-extrusion-heightproperty:
Finally, for additional variation, I animate the map bearing and light color over time, and make the light more intense when the audio is louder:
For more details, check out the source.
What will you build? Share it with us on Twitter using the hashtag #BuiltWithMapbox!
