Virgin Islands Interactive Map

I often post photos from my travels and my trip to St. John of the Virgin Islands inspired me to create an interactive map of my experience there.  The island was small enough that I was able to explore most of it in just under a week.  This gave me the idea to create a map-based interactive overview that conveyed a better sense of where everything was, and make it more contextually fun to navigate the different places I visited on the island.

Project Highlights

  • Combined my growing interests in photography and Flash into one pretty neat example of interactive design.
  • Developed a neat zoom-in / zoom-out mechanic to explore St. John in greater detail.
  • Integrated both photography and video into the slideshow with a focus on making some photos more interactively panoramic.
  • Developed a data structure to organize more than 100 images and caption and way to intelligently load each of those photos into view to optimize bandwidth.

Project Info

Client

Personal Project

Agency

Personal Project

Work

Interactive Design, Flash, Actionscript

Map of St. John

This is the island of St. John. Below the map is a list of all the places I explored on the island. I designed a system that allows one to explore the island and the places I visited in a number of ways.

 

Explore St. John in Detail

You can click on the map to zoom in to geographically explore the island in greater detail and then click any of the markers to view photos from that area further.

 

Quick Navigation

Or you can simply use the legend below the map to quickly choose a spot of interest and view photos and video from there.

 

Try it out!

Instructions

Map View

  • Click anywhere on the map to zoom in, click again to zoom back out.
  • Click "Show Labels" to view an overlay of the places we visited.
  • Places we visited are listed below the map.
  • Rollover each location in the list to view it on the map.
  • Click a location to view photos from our trip.

Photo View

  • Click the right side of a photo to view the next photo; click on the left side to view the previous.
  • Some photos are large panoramas and can be explored by moving the mouse around.
  • Click "Back to Map" to zoom back out to the Map View.