Interactive Map Front-end Dev
Background
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.
My Role
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.
OBJECTIVES
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.
CHALLENGES
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.
The Process
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.
The web app is built using HTML, CSS, and Javascript. To build the map, I researched how to integrate the Google Maps API into my site and learned how to implement the marker and tooltip functionality. I customized the colors and visual design, and I built the browser bookmarklet. To manage marker data in a database, a developer helped build the back end in Java.
OUTCOME
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.
On hover over marker, information is shown in a tooltip about the website that was marked.
The website is opened in a new tab on click.
FOLLOW ME
Just for fun, I maintain a travel Instagram account under the name Mapably.