FreakZion: JQUERY: Get pics from PANORAMIO

domingo 27 de diciembre de 2009

JQUERY: Get pics from PANORAMIO

Lately I've posting just a bit of bytes, ...hollidays, family, friends, christmas, moving to other country..., soon I will be back to mydaily basis, I promise!!. Talking about hollidays, many of you may have travelled to different locations during christmas, and many of you would probably have checked panoramio to get photos of the new place you will visit, ...haven't you??. Why don't you add pics of panoramio to your site??. It is very easy with Panoramio API!!!

Let's use JQuery for our example, although as we are going to pick up the data from Panoramio Rest Service using JSON, any other language language and library will handle it without difficulties.

As usual let's have a div area where we would place the results from panoramio, in this case the id of the are would be "thePics":

<div id="thePics"></div>

The Panoramio Rest Service works like this (Picked from Panoramio API where it is very well explained):

It's a very simple REST api, you only have to do a GET on:
http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&
to=10&minx=-3.59&miny=37.17&maxx=-3.79&maxy=37.37&size=medium

for "order" you can use:

popularity
upload_date

for "set" you can use:

public (popular photos)
full (all photos)
user ID number

for "size" you can use:

original
medium (default value)
small
thumbnailsquare
mini_square

the minx, miny, maxx, maxy define the area to show photos from (minimum longitude, latitude, maximum longitude and latitude, respectively).

You can define the number of photos to be displayed using "from=X" and "to=Y", where Y-X is the number of photos included. The value 0 represents the latest photo uploaded to Panoramio. For example, "from=0 to=20" will extract a set of the last 20 photos uploaded to Panoramio, "from=20 to=40" the previous set of 20 photos and so on. The maximum number of photos you can retrieve in one query is 100.

And the the javascript code (the latitude and longitud are set to get Granada at Spain):

$.getJSON("http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&

to=10&minx=-3.59&miny=37.17&maxx=-3.79&maxy=37.37&size=medium",

   {},

   function(data) {

       var thePicsHTML;

       $(data).each(function(i, item) {

         thePhoto=$(this)[0].photos[i];

         thePicsHTML +="<img src='" + thePhoto.photo_file_url + "'>";

         thePicsHTML += "";

         thePicsHTML += thePhoto.photo_title;

         thePicsHTML += "";

         thePicsHTML += "Photo from: " + thePhoto.owner_name;

         thePicsHTML += "";

         thePicsHTML += "<a href='" + thePhoto.photo_url + "' target=_blank>Check the photo at Panoramio</a>";

        thePicsHTML += "<p>";

       })

      $("#thePics").html(thePicsHTML);

   }

);