Google Maps in Flickr
In the earlier days of Flickr (before August 2006), there was no built-in feature that allowed a user to show pictures on a map. The Google Maps in Flickr (GMiF) script was created to fill in that gap by letting you see a Flickr photo on a Google map. Today, even with Flickr’s built-in map of geotagged photos, which uses Yahoo! Maps technology, GMiF remains a valuable mashup. GMiF allows users to use a Google map, which many prefer over Yahoo! Maps, to display their photos. Moreover, GMiF also integrates Google Earth, a feature not currently built into Flickr. GMiF provides an excellent case study of how you can extend an application such as Flickr to fit user preferences.
What Is Being Combined?
GMiF (http://webdev.yuan.cc/gmif/) brings together Flickr pictures, Google Maps, and Google Earth within the Firefox browser via a Greasemonkey script. I’ll break this down for you:
Flickr (
http://flickr.com) is a popular photo-sharing site.Google Maps (
http://maps.google.com/) is an online mapping system.Google Earth (
http://earth.google.com/) is a desktop "magic-carpet" interface that lets you pan and zoom around the globe.The Firefox web browser (
http://www.mozilla.com/firefox/) is an open source web browser. Notable among its features is its extension/add-on architecture, which allows developers to add functionality to the browser.The Greasemonkey extension (
http://www.greasespot.net/) is a Firefox extension that “allows users to install scripts that make on-the-fly changes to specific web pages. As the Greasemonkey scripts are persistent, the changes made to the web pages are executed every time the page is opened, making them effectively permanent for the user running the script.”[13]
Why Are the Constituent Elements Being Combined? What’s the Problem Being Solved?
GMiF is a Greasemonkey script that allows you as a user to display a Flickr picture on a Google map or in Google Earth at the geographic location associated with that picture. GMiF was written to support geotagging in Flickr. Geotagging, in the context of Flickr, is the process of associating a location with a given photo, which is typically but not necessarily the location where the photo was taken.
Until geotagging was officially integrated into Flickr with the use of Yahoo! Maps in August 2006,[14]
Let’s take a look at how GMiF works. Consider one of my own photos, shown in Figure 1-2 (also available at http://flickr.com/photos/raymondyee/18389540/). Notice two things:
This photo has associated geotagging information (for example,
geo:lat=37.8721,geo:lon=-122.257704, and the taggeotagged).Note the presence of the rightmost GMap button above the photo. This button is the result of the GMiF script, which inserts the GMap button. In other words, if you do not have the GMiF Greasemonkey script installed, you won’t see this button.
Figure 1.2. Figure 1-2. The Flickr photo “Campanile in fog” (http://flickr.com/photos/raymondyee/18389540/) with associated geocoding embedded in the tags. (Reproduced with permission of Yahoo! Inc. ® 2007 by Yahoo! Inc. YAHOO! and the YAHOO! logo are trademarks of Yahoo! Inc.)
Clicking the GMap button opens a Google map embedded in the Flickr web page, with a pin indicating the location of the picture in question (as shown in Figure 1-3). Note the red pin indicating the location of the photo. The blue pins correlate to other geotagged photos. The map also has a thumbnail of the photo in the upper-right corner.
Figure 1.3. Figure 1-3. Clicking the GMap button opens a Google map in the browser. (Reproduced with permission of Yahoo! Inc. ® 2007 by Yahoo! Inc. YAHOO! and the YAHOO! logo are trademarks of Yahoo! Inc.)
Clicking the pin opens a callout with a picture and options of other things to do with the picture. Note how the latitude and longitude listed correspond to the information in the geo:lat and geo:lon tags, respectively (as shown in Figure 1-4).
Figure 1.4. Figure 1-4. Clicking the red pin opens a balloon containing the photo and further geotagging functionality offered by GMiF. (Reproduced with permission of Yahoo! Inc. ® 2007 by Yahoo! Inc. YAHOO! and the YAHOO! logo are trademarks of Yahoo! Inc.)
Among the GMiF functions is integration with Google Earth. If you hit the Fly To button, you will be presented with a file to download. If you have Google Earth installed and it is configured in the default fashion, downloading the file launches Google Earth, and you will be “flown” to the location of the Flickr photo (as shown in Figure 1-5).
Figure 1.5. Figure 1-5. Clicking the GMiF Fly To button launches Google Earth, which then displays the photo at the latitude and longitude associated with the photo.
How Are These Elements Being Combined?
The GMiF Greasemonkey script rewrites the HTML of the Flickr page to insert the GMap button (this rewriting of the HTML DOM is akin to looking in the HTML source for where the Flickr buttons are and inserting HTML code for the button). Furthermore, JavaScript code is added to embed a Google map in the Flickr page, when you (as the user) click the GMap button.
Integration happens in the context of Flickr web page, loaded in the user’s browser. Note how powerful this is: you don’t have to go to another application to see the picture on a Google map because you get to use a slightly modified version of Flickr. These modifications do not require the intervention of Flickr itself. Hence, there is room for a lot of customization.
![[Note]](../docbook_images/note.png) | Note |
|---|---|
Of course, there are potential pitfalls with GMiF. GMiF, as with all Greasemonkey scripts, can cease to function if the HTML and JavaScript source of the underlying web page the script operates on changes. Also, with enough Greasemonkey scripts at play, instead of having a strong communal experience of Flickr, users have many different fragmented understandings of the interface. I think these benefits of being able to radically customize your interaction with a web site by actually changing your own version of the interface are worth dealing with these risks. |
How is the integration of GMiF with Google Earth created? The downloaded file is a KML file. KML is a dialect of XML, which is the closest thing we have to a lingua franca for exchanging data. The KML file contains the latitude and longitude associated with the picture and a URL of the picture. KML is used to exchange geographic type data that is understood by Google Earth. In other words, GMiF takes information from one source (the URL of the picture and the latitude and longitude of the picture embedded in tags from Flickr) and translates that information into a form that is understood by the destination application, namely, KML for Google Earth. Once you translate that information, you still need to get the information to the destination; in this case, the transport happens through the formation and downloading of the KML file.
Admittedly, GMiF is a bit “hackerish,” requiring the installation of the Firefox web browser (which does not come by default on Windows or Mac OS X), the Greasemonkey extension, and the GMiF script. But I bring this up here to talk about the lengths to which people are willing to go to experiment with their tools to combine technologies.
Comparable Mashups
Mappr (http://www.mappr.com/), “an interactive environment for exploring place based on the photos people take,” is a mashup of Flickr and a Flash-based map.