Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
    
do you have a live link? it is easier to debug. <script src="../../js/OpenLayers-2.8/lib/OpenLayers.js"> need full urls if not copied to your local drive. –  Mapperz Nov 16 '10 at 16:52
    
Unfortunately I do not have a public live link :(, apologies for that one. My Libraries are definitely included properly, as I can see them loaded in FireBug... –  elshae Nov 16 '10 at 17:00
add comment

1 Answer 1

Aren't you missing the key part of adding the image paths as your external graphics?

externalGraphic: "panoramio-marker.png"

should be a dynamic variable (of the image URL) for each image:

externalGraphic: "${photo_file_url}"

Also copy and paste your code into http://www.jslint.com/ as there are a couple of minor syntax fixes to check.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.