Interactive Map Front-end Dev
For my final front-end project at CICE in Madrid in 2013, I was given the task of developing a brand and building a website. The brand I created, Mapably, is a travel inspiration brand. The digital product is an interactive desktop map to which users can post their own markers via a browser bookmarklet.
This is one of the more ‘fluffy’ projects in my portfolio, but it shows my grit and desire for learning whatever it takes to execute an idea.
I was the Visual Designer and Front end developer on this project. I learned how to use the Google Maps API, and I worked closely with a Java developer to store the map markers in a database.
Create a brand to inspire others to explore the world and cultures.
Build an interactive map where visitors could pin their own markers and content.
Allow users to visually see where content comes from on the map.
Reduce visual complexity of the map to enable easy digestion of multiple markers at one time.
Learn the technologies required to build a map and a bookmarklet.
Work closely with a developer to ensure requirements are met.
For the map to be a collective effort, I had to create a feature that allowed markers to be added by anyone who wishes to contribute. To do so, I explored how Pinterest allowed users to Pin items with a bookmarklet in the browser toolbar, and I developed my own bookmarklet for Mapably.
It works! When the user chooses a category (food, film, travel, art, photography, or music) from the top of the map, all markers from that category appear in their respective coordinates on the map.
When the user hovers over an individual marker, a tooltip appears with a picture and a description of the content that was marked.
On click, the website opens in a new tab where the user can read the content that was on the map.
Just for fun, I maintain a travel Instagram account under the name Mapably.