Adding Panoramio Photos To An OpenLayers Map

Question

I have a pretty well integrated OpenLayers map that I want to add photos from the Panoramio API to. Unfortunately, it seems both API's are under documented on this subject. I found one great tutorial here http://www.gisandchips.org/2010/05/04/openlayers-y-panoramio/ but as I am new to all of this, could be why I cannot complete this on my own. I feel like even using this tutorial I have a lot of blank spaces in my mind and not to mention, the photos are NOT appearing on my map :-/

Here is my portion of the code that demonstrates my use of that tutorial and what I have attempted so far:

 var url = "http://www.panoramio.com/map/get_panoramas.php";
                var parameters = {
                   order:'popularity',
                   set:'full',
                   from:0,
                   to:20,
                   minx: 84.05,
                   miny: 31.36,
                   maxx: 91.89,
                   maxy: 32.30,
                   size:'thumbnail'
                }//end parameters

                OpenLayers.loadURL(url, parameters, this, displayPhotos);

                function displayPhotos(response) {
                    var json = new OpenLayers.Format.JSON();
                    var panoramio = json.read(response.responseText);
                    var features = new Array(panoramio.photos.length);

                    for (var i = 0; i < panoramio.photos.length; i++)
                    {
                        var upload_date = panoramio.photos[i].upload_date;
                        var owner_name = panoramio.photos[i].owner_name;
                        var photo_id = panoramio.photos[i].photo_id;
                        var longitude =panoramio.photos[i].longitude;
                        var latitude = panoramio.photos[i].latitude;
                        var pheight = panoramio.photos[i].height;
                        var pwidth = panoramio.photos[i].width;
                        var photo_title = panoramio.photos[i].photo_title;
                        var owner_url = panoramio.photos[i].owner_url;
                        var owner_id = panoramio.photos[i].owner_id;
                        var photo_file_url = panoramio.photos[i].photo_file_url;
                        var photo_url = panoramio.photos[i].photo_url;


                        var fpoint = new OpenLayers.Geometry.Point(longitude,latitude);

                        var attributes = {
                               'upload_date' : upload_date,
                               'owner_name':owner_name,
                               'photo_id':photo_id,
                               'longitude':longitude,
                               'latitude':latitude,
                               'pheight':pheight,
                               'pwidth':pwidth,
                               'pheight':pheight,
                               'photo_title':photo_title,
                               'owner_url':owner_url,
                               'owner_id':owner_id,
                               'photo_file_url':photo_file_url,
                               'photo_url':photo_url
                        }//end attributes

                        features[i] = new OpenLayers.Feature.Vector(fpoint,attributes);

                    }//end for

                    var panoramio_style2 = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({
                        pointRadius: 7,
                        fillColor: "red",
                        fillOpacity: 1,
                        strokeColor: "black",
                        externalGraphic: "panoramio-marker.png"
                    }, OpenLayers.Feature.Vector.style["default"]));

                    var vectorPano = new OpenLayers.Layer.Vector("Panoramio Photos", {
                           styleMap: panoramio_style2
                    });

                    vectorPano.addFeatures(features);
                    map.addLayer(vectorPano);

                }//end displayPhotos

In my mind this code should work perfectly. Giving me a result of some Panoramio thumbnails on my slippy map. Unfortunately it seems that the layer is there, but blank..When I look at the response text in Firebug I can see that the JSON is returned with attributes of photos from Panoramio, in the location I have specified (Tibet). I appreciate your help and time to consider my issues.

Thank you,

elshae

Answer 1

I don't know how proficient you are in OpenLayers, but the project is certainly not underdocumented. There is an extensive api documentation and also numerous examples that should help to get you started.

But now back to your problem: likely, this is a projection issue. Panoramio returns WSG-84 (GPS) Coordinates for all the photos it found, and the openstreetmap baselayer of your map is in Spherical Mercator projection ('EPSG:900913'). So you have to convert the coordinates from WSG-84 to Spherical Mercator using something like

var curPic = panoramio.photos[i];

var panLonLat = new OpenLayers.LonLat(curPic.longitude, curPic.latitude);
panLonLat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection('EPSG:900913'));

and then use the converted point for your geometry