title: Adding Panoramio Photos To An OpenLayers Map
body: <p>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 <a href="http://www.gisandchips.org/2010/05/04/openlayers-y-panoramio/" rel="nofollow noreferrer">http://www.gisandchips.org/2010/05/04/openlayers-y-panoramio/</a> 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 :-/</p>
  
  <p>Here is my portion of the code that demonstrates my use of that tutorial and what I have attempted so far:</p>
  
  <pre><code>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 &lt; 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
  </code></pre>
  
  <p>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.</p>
  
  <p>Thank you,</p>
  
  <p>elshae</p>