By: Becky Harris
Over the last 15 years, Lee Martin, has built playful digital experiences for artists and bands including Guns n’ Roses, Foo Fighters, Beck, Sonic Youth, and others. His work usually involves elements of personalization that give fans an experience they haven’t seen before. Lee just earned a CLIO Award for his work on the global album launch of Lord Huron’s “Vide Noir.” We spoke to Lee about Follow the Emerald Star, the experience he developed for the launch campaign, built with Mapbox and Turf.js.
What was the inspiration for Follow the Emerald Star?
I always loved the idea of getting people moving in the real world for music. We now live in a post-Pokémon Go world and product design will tell us that once users understand a UX, they are more likely to engage in it.
How does it work?
Fans are encouraged to visit www.followtheemeraldstar.com on their mobile devices. From here, they can share access to their current geo-location right from the browser. Our application then figures out which handpicked destination is nearest and encourages the user to make the journey. A visual compass helps the user head in the right direction and informs them of when they have arrived. Once the user arrives within a preset radius of the destination, we unlock a track off the new record “Vide Noir” for them to stream.
The experience is intentionally kept simple due to lack of bandwidth and the importance of safety in real-world situations. The band chose obscure, nature-friendly destinations which act as a backdrop to the listening experience.
Why did you use Turf.js, and how did you use it?
Turf.js is an incredibly well-written JavaScipt library for geospatial analysis within the browser. It contains several methods to power this experience, once we’ve pulled geolocation for the user.
First, we define our destinations and user location as points.
From here, we can easily find the nearest location with Turf’s aptly named nearestPoint function. Once we locate the nearest destination, we’ll want to figure out its distance and bearing to our user. (I used Turf’s bearingToAzimuth function to convert the bearing to a number between 0 and 360.) We’ll then be able to inform the user of how close they are and also power the unlock if they’re within a meter radius we specify.
I’m simplifying things a bit but the geolocation API and Turf does make things that easy. Once you have this core functionality down, you can spend a bit of time building up the user interface. This campaign is the perfect example of how a few lines of code can create a seemingly magical experience when it works correctly.
What’s your favorite song/place combination from the experience?
When testing something like Lord Huron’s campaign I will pick a physical location which is close to where I live. This could be the coffee shop I frequent or a local landmark (I live in New Orleans.) For this campaign, it was a rusty bridge (The Rusty Rainbow) located in the river park I live near. It was amazing to then see local fans actually venture to that location. The song was “Emerald Star.”
To read more about Lee and how he built Follow the Emerald Start, visit his blog post.
How the Rock n’ Roll Cartographer built an award-winning listening experience with Turf.js was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.