Google Data

A few weeks ago, we launched two layers on maps.google.com, accessible via the "More.." button. The photos layer displays Panoramio photos, continuously loading in more photos as you zoom in, and letting you click the photos to see the info window with more information. Behind the scenes, the implementation is basically a GTileLayerOverlay plus array of pixel bounds specifying the clickable areas. It's a clever technique that can be used whenever you have vast amounts of potentially clickable data, and a server that can render out tiles. However, I'm here today to show you how to create a similar effect using MarkerManager plus Panoramio's API.

The Panoramio API lets you specify a bounding box query, sort by popularity, and output its data in JSON format. The MarkerManager lets you specify marker batches per zoom level ranges, and only displays the markers for the current viewport. Using these features, we can then do the following:

1. Create an empty MarkerManager.
2. Create an empty hash table to store photo ids.
3. Assign a listener to the map "moveend" event. This function calls the Panoramio API, sends in the current bounding box, and asks for the 10 most popular photos. The query looks like this:

   http://www.panoramio.com/map/get_panoramas.php?
   order=popularity&set=public&from=0&to=10&
   minx=-124.29382324218749&miny=36.089060460282006&
   maxx=-119.8773193359375&maxy=38.724090458956965&
   callback=MyCallback
   

4. When the query responds, iterate through the results, and for each result whose ID isn't already in the hash table, add it to the MarkerManager for the current zoom level, and add it to the hash table.

The effect to the user is that additional photos stream in and populate the map as they zoom in - check it out below or here. You can use this technique whenever you have a database that can be queried by bounding box and rank the results.

But if you want to just put a Panoramio button on your site, you can copy the code & scripts from this example. If you're a Panoramio user yourself, you can actually restrict the layer to only your photos by passing in your user ID to the API call. Developer Ade is experimenting with this on his ibizaA-Z site in order to just display his Ibiza photos.