21. An Interactive Map


In this assignment, you are asked to write code in order to create an interactive plot of a large geographic dataset.

You may use any programming environment you prefer. However, you are cautioned that the dataset is relatively large (138MB; 499000+ rows). Many display toolkits will be brought to their knees when asked to display a half-million data-points at interactive frame rates. For this reason you are strongly encouraged (…but not required…) to use a C++ based arts-engineering library such as openFrameworks or Cinder that is specifically designed for fast client-side graphics.

An alternative, for example, would be to use a browser-based mapping library. Here are some possibilities:

  • TileMill, by MapBox, creates stunning interactive maps using JavaScript;
  • Leaflet, a lightweight and easy-to-use JavaScript library by Cloudmade;
  • OpenLayers, a hefty and featureful mapping library for use with a variety of GIS applications;
  • Google Maps API, which is ubiquitous and feature-rich; it requires an API key.

I can’t vouch for its performance with this amount of data, but you’re also welcome to try the Unfolding mapping library for Processing, or simply try using Processing’s OpenGL renderer. That said, we will be using openFrameworks again in Assignment 22… so it might be most efficient to use that.

Here, with gratitude to Jer Thorp and courtesy of the good folks at Hotelsbase, is a tilde-separated textfile (138MB) containing a database of all of the hotels in the world:

Below is the file’s header row, and an example data row. (For more information about the data encoding, please consult Hotelsbase.)


80171~Fafa Island Resort~3~172~NukuAloa~~TO~Tonga~Fafa Island PO Box 1444~NukuAlofa,Tonga~~~-21.0862~-175.16~15905~7~0~~2|3|5|9|13|20|22|31|34|40|53|59|60|65|66|72|108|202|203|209|210|211|~~~0

Learning Objectives.
This exercise is primarily intended to stretch your technical capacities as a creative technologist, ensuring that you are able to :

  • Handle a reasonably large, real-world dataset containing (on the order of) a million datapoints;
  • Command a powerful graphics toolset to create a real-time, interactive display;
  • Plot geographic information from latitude/longitude data.


  • Develop an interactive software application that displays the provided data. The “interactivity” is up to you, but might take the form of an interaction that allows the user to zoom, sort, filter, and/or query the data.
  • The above describes the minimally satisfactory product; naturally, more is possible. Does your visualization reveal interesting patterns or unexpected features of the data? Did you become curious, did you ask an interesting question of the data, did you discover an answer? (For example: what is the most remote hotel in the world, what hotels are the highest above sea level, etc.) This is up to you.
  • Document your application in a video, using screen-capture software. It’s helpful if your video has narration or titles. Upload this video to YouTube or Vimeo.
  • In a blog post, categorized 21-Interactive-Map, embed your video.
  • In the blog post, please include a few screenshot images as well.
  • In approximately 100-200 words, describe your solution. What did you learn in making it? What does it reveal about the data? What design choices did you make?
  • Include a link to your Github repository where your code for the project is kept.