January 17, 2011

Overseas and Off-Campus Programs Blog

Project Development Update: Fun with Flickr Places & Google Maps

Author Name

Jeremy McWilliams

Author Program

New York City

Program Semester and Year

Fall 2010

On of our big goals of the project is to have different New York City neighborhood views. This would take advantage of two really useful Flickr API methods:

  • This lets us ask the question, “Can you please give us a list of NYC neighborhoods that have photos that meet our conditions?” This is great for building the UI, as we can incorporate this neighborhood list into our site.

  • Flickr Photos Search - given our neighborhood list, we can now ask, “Can you please give us a list of images from a certain neighborhood that meet our conditions?” This will constitute the foundation for our neighborhood pages.

Speaking of, we have a very rough functional mockup of a neighborhood view here. We’ll make it fit into our design framework over the forthcoming weeks. For now, there’s one aspect of the mockup that is worth noting.

Mainly, the Google Map markers can serve as navigation: if you were interested in a particular point on the map, you can click the marker, and get the image and metadata in the “large image” area of the page. It’s sort of like having enhanced Google Maps info windows. This can work because the Google Maps API and programming is all javascript. It’s pretty common to write code so that clicking on a marker will open a window, but it’s just as easy to make the clicking initiate some jQuery code (which is also javascript) to use AJAX, manipulate the DOM, etc. So if all you cared about was viewing images based on location, you can do that. This may be a subtle point, but I think it’s neat. It’s worth noting that clicking on a thumbnail image can serve as navigation as well: the large image and metadata will appear, and the map marker turns green.

So, at this point, we still have a bit to go to reach the finish line. With that said, we’re optimistic about where things are headed. As things progress, we’ll post more.