We thought about doing something with elevation data and then said "what if you could draw a line and it would make music". We just kept adding on from there.

What it does

We use elevation data to control the pitch of a synthesizer, along with some other user-specified controls. The user can create many audio clips by drawing on the map, and they can edit and sequence them in the editor. They can export their final creation. There's also some banking-related extra functionality - using elevation data as a whole new way for people to interact with their bank!

How we built it

It's built with JavaScript and a bunch of CSS mostly. We use the Mapbox API (through Leaflet.js) for custom map tiles and elevation information, and a heavily customized audio clip editor component.

Challenges we ran into

  • API limits on elevation data - to get around these, we request special elevation tiles from Mapbox that have their pixels colored corresponding to elevation, and we extract the pixel colors from the map layer.
  • Lots of CSS alignment trouble!
  • Sparse documentation on Tone.js, the library we are using for the synthesizer
  • One of our libraries won't work properly in Safari and we don't know why - so it's only compatible with Chrome and Firefox.

Accomplishments that we're proud of

  • The slick UI
  • The interesting sounds you can get
  • The number of features we added
  • The very unique idea

What we learned

  • CSS tricks
  • Working with elevation data/Mapbox API
  • Working with npm/browserify for client side

What's next for MapMusic

  • ???

Built With

Share this project: