En este artículo queremos presentar el API de Panoramio, por el que podemos obtener fotografías de lugares del mundo que los usuarios de Panoramio han enviado al servidor. Todas las fotos están localizadas geográficamente, por lo que se pueden utilizar para ilustrar páginas web de lugares del mundo o para añadir información gráfica a nuestros mapas de Google.

El API de Panoramio en realidad es muy sencillo de usar, porque consiste únicamente en una URL dirigida al sitio web de Panoramio, en la que indicamos una serie de parámetros, que se envían por GET en la propia URL, con los que especificar las fotos que queremos obtener. Podemos especificar el lugar geográfico donde se deben buscar fotos, el tamaño de las mismas, la cantidad de fotos que queremos recibir, etc.

Lo cierto es que no caben muchas explicaciones con respecto al uso del API, sino simplemente unas notas sobre qué podemos hacer para mostrarlas. Para el uso del API os enviamos directamente a la propia página del API, donde se explica en español la configuración de la URL para recibir las fotos:

API de Panoramio

Por ejemplo, para recibir 10 fotos de la ciudad de León, en España, de tamaño medio, ordenadas por popularidad, podríamos componer una URL como esta:

http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&
to=10&minx=-5.8&miny=42.59&maxx=-5.5&maxy=42.65&size=medium

Qué recibimos con la URL de consulta al API de Panoramio

Cuando recibimos datos de la URL con la que se realiza la consulta al API de Panoramio, en realidad lo que estamos recibiendo no son las fotos propiamente dichas, sino un texto con los datos de las fotos que se han encontrado y seleccionado conforme a la configuración de la URL.

Los datos recibidos están generados en JSON, una especificación de un lenguaje con una notación de objetos de Javascript. JSON permite escribir con código fuente, fácilmente entendible por seres humanos, declaraciones de objetos. En el caso del API de Panoramio, estos objetos son las propias fotos seleccionadas con nuestra consulta.

Podemos ver más información de JSON en español en la propia página de especificación de JSON.

La complicación entonces será procesar ese texto recibido de la consulta al API de Panoramio, en lenguaje JSON, con los datos de las propias fotos, con el objetivo final de mostrarlas en una página web.

Para ello conviene dejarse ayudar por algún sistema que permita procesar los JSON de una manera cómoda. Existen diversos sistemas para procesar objetos JSON en diferentes lenguajes para desarrolladores del web, como Javascript, PHP, ASP, Action Script, etc. Incluso hay librerías que nos facilitan la tarea a unas pocas líneas de código. Yo me he dedicado a jugar un poco con el API de Panoramio utilizando el Framework Javascript Mootools, que tiene interesantes funciones para recibir un archivo de código de objetos JSON y procesarlo, de modo que podamos utilizarlo en nuestros propios scripts Javascript.

Todo el procesamiento del JSON lo basamos en un método de Mootools llamado Json.Remote, que es el que recibe el texto con los objetos y nos permite volcarlo a objetos Mootools. Este ejemplo de uso del API de Panoramio también puede servir de ejemplo de utilización de JSON en Mootools.

Lo malo es que todo esto tiene cierta dificultad, que no voy a tratar en este artículo, por falta de tiempo. Pero espero que se pueda entender algo. Cabe decir que estamos publicando un manual de Mootools en DesarrolloWeb.com donde podréis aprender algo de Mootools con lo que entender un poco más todas estas cosas y donde esperamos en breve explicar temas avanzados que nos hagan dominar este ejemplo y perfeccionarlo más aún.

En la página web he colocado una capa donde mostraré las fotos recibidas del API de Panoramio.

<div id="muestrafotos"></div>

Por ahora la capa está vacía, pero la llenaré una vez recibidas y procesadas las imágenes. Para ello utilizo este código:

var requiero_fotos = new Json.Remote("http://www.panoramio.com/map/get_panoramas.php?order=popularity&
set=full&from=0&to=10&minx=-5.8&miny=42.59&maxx=-5.5&maxy=42.65&size=medium", {onComplete: function(fotos){
   HTMLfotos = "";
   for (i=0; i<fotos.photos.length; i++){
      HTMLfotos += "<img src='" + fotos.photos[i].photo_file_url + "'>";
      HTMLfotos += "<br>";
      HTMLfotos += fotos.photos[i].photo_title;
      HTMLfotos += "<br>";
      HTMLfotos += "Foto de: " + fotos.photos[i].owner_name
      HTMLfotos += "<br>";
      HTMLfotos += "<a href='" + fotos.photos[i].photo_url + "' target=_blank>Ver la foto en Panoramio</a>";
      HTMLfotos += "<p>";
   }
   
   $('muestrafotos').setHTML(HTMLfotos);
}});
requiero_fotos.send();

Como decía, la complicación está en entender el Json.Remote, que espero poder explicarlo en un futuro próximo.

Por el momento, dejo un enlace con el ejemplo en marcha de uso del API de Panoramio.

Problema de acceso a una URL de otro servidor con Ajax y Json.Remote

El código, tal como lo he dado, me funciona en local en Internet Explorer y en remoto (publicado en el servidor de DesarrolloWeb.com) no funciona en ningún navegador. El problema es que Ajax da un "Permiso denegado" al intentar acceder a un archivo remoto.

La solución pasaría por llamar a un archivo en local, publicado en nuestro propio servidor, que contenga el código JSON de las fotos. Algo como esto:

var requiero_fotos = new Json.Remote("get_panoramas.txt", {onComplete: function(fotos){
…

El archivo get_panoramas.txt, que he colocado en nuestro servidor, contiene el texto del código JSON con los objetos de las fotos que he consultado en Panoramio y luego guardado con la opción guardar como del navegador. Con ello he obtenido el listado de las fotos y las he colocado en nuestro servidor para hacer pruebas.

Lo malo de este sistema es que las fotos no se actualizan, sino que siempre son las mismas que obtuve el día que guardé el archivo get_panoramas.txt. La solución a esto podría ser obtener ese archivo por medio del servidor, con programación PHP y luego guardarlo en nuestro servidor antes de procesarlo con Mootools. O simplemente lo podría obtener con PHP y procesarlo directamente con este lenguaje en el servidor, que también tiene librerías de soporte a JSON.

Espero que todos estos problemas no desanimen y sirvan para aprender. Intentaré más adelante dar nuevas claves o trucos para el trabajo con el API de Panoramio.