For my first project for the Mashups class , I built a website –available here– that allows the user to explore graffiti spots in San Fransisco. In this article, I’m going to provide some details on how I went about building the project.
My intention was just to allow any graffiti lovers, no matter where they are in the world, to explore some of the graffiti spotted in the San Francisco area.
Essentially, the site includes a Google map that occupies half of the page. On the map, there are markers. Each one represents the location of a graffiti spot. If the graffiti hasn’t been washed out–it has an “open” status in the dataset–it is represented on the map with a blue marker. A black marker represents a graffiti that has been cleaned.
Since there are about a thousand graffiti in the dataset, when I load all of their respective markers on the map it looks pretty messy. Most markers would sit on top of one another. To fix this, I used a small library called MarkerClusterer.js which groups together all of the markers that are really close to each other. Then when the user clicks on the cluster, it displays all the markers that it contains.
When the user clicks on a given marker, two things happen: 1) the Google street view of the location of that graffiti is loaded on the left 2) on the specific marker is loaded an info window which list the name of the street, the status of the graffiti and if available a link to a picture of the graffiti.
I will hopefully publish the second version soon.