NetMedia Final: NYC Skyscrapers


NYC Skyscrapers is a simple website that displays georeferenced information about the tallest buildings in New York City. It uses Google Maps Api to provide a map interface showing each building’s location and static information, and Flickr API to display geo-tagged photographs as a dynamic content that changes over time.


The main JavaScript file sketch.js creates a div called ‘b-map‘ to load the Google Map, which can be configured and styled thanks to the API functionality. Over this map I created custom png markups for each skyscraper to load their specific information, stored in the file building.js.
I used infobox.js library to load this information into pop-up boxes, in order to create a flexible interface instead of showing each element in a separate HTML page. Then, I created a div to hold the title, menu and general information.

The second part was adding dynamic content through Flickr API. The most important part of this process is creating this JSON File to stores recent photos from Flickr containing the tag ‘skyscraper‘. The ‘$.getJSON’ jQuery method reads in this data and calls a function to display the images. The good thing about Flickr is that each photo contains meta data which can be easily used. In this case, ‘has_geo=1’ and extras=geo were added to the JSON file address to get the latitude and longitude for each picture.

In the website, if you click on the ‘Load skyscraper photos’ button you’ll see the images being drawn from Flickr.

This project was very useful to learn how to combine different APIs in one simple interface. I wanted to work with maps information as a way to visualize and give a meaning to the digital content that can be created and shared in the web, overlapping the physical space. In this case, mixing the static locations from the buildings with the dynamic photos uploaded to Flickr is a very interesting thing to visualize.

Leave a Reply