Motown Map
Motown Map
Motown Map

Previous case study: Internet Fusion

Next case study: Banana Kick

Motown Map

Exploring the sights and sounds of Motown.

Project summary

As huge fans of classic soul we’ve always loved Motown. We saw a great opportunity to combine our love of music with various web APIs to produce a cutting-edge, immersive and interactive piece so we did just that.

The concept was clear – we wanted to be able to navigate around Detroit by clicking on areas of interest and get access to everything we wanted to know about that location – A customised street view, descriptions about the location as well as photos and related music to round off the experience.

Responsibilities

  • Concept creation
  • Front end design
  • Copywriting
  • Front end production, HTML5, CSS3, JQuery
  • Back end production, PHP
  • API integration

View this project

Open this site

Google Maps API integration

Google Maps integration

The map was the main focus of the piece so we leveraged the power of the Google Maps JavaScript API v3 library. Our locations are stored in an external JSON data file and are loaded in and dropped onto the map.

As well as pulling in our location data we also load in a customised street view so the user can explore the location in more detail. We also use cutting-edge CSS techniques to greyscale and sepia this street view where supported to give an air of history to the piece.

Spotify integration

Motown was all about the music. Therefore no experience would be complete without that famous Motown sound. We integrated carefully curated songs from Spotify directly into the map so the user could hear music relevant to the location they were viewing.

By navigating around the map you’ll hear embedded tracks that mirror the history of Motown. You can also link through to the full playlist on Spotify so you can enjoy the music later.

Motown Map Spotify playlist

Back to top