javascript - OpenLayers Format JSON is Returning Empty responseText String -
after week of posting @ openlayers forum , not receiving responses questions, have decided here. have googled , googled , googled , found wonderful tutorial concerning topic, in spanish, written google translate able translate perfectly.
gisandchips.org/2010/05/04/openlayers-y-panoramio/
so have followed tutorial , trying access panoramio data api query photos , display them on map. however, code fails @ line:
var panoramio = json.read(response.responsetext);
according firebug , alert(response.responsetext), responsetext empty string...
in firebug have url http://localhost/cgi-bin/proxy.cgi?url=http%3a%2f%2fwww.panoramio.com%2fmap%2fget_panoramas.php%3forder%3dpopularity%26set%3dfull%26from%3d0%26to%3d40%26minx%3d-20037508.3392%26miny%3d-20037508.3392%26maxx%3d20037508.3392%26maxy%3d20037508.3392%26size%3dthumbnail
this shows me valid json. , know response object isn't null because alert(response) shows getting [object xmlhttprequest]
honestly out of ideas. before trying parse json, trying parse xml , had absolutely no luck. idea of pulling rss , api data onto map. below attaching code, appreciate feedback can offer :)
thank you,
elshae
var map, popup, selectcontrol, selectedfeature; var vectorlayer, panoramio_style; ext.onready(function () { var options = { controls: [new openlayers.control.navigation()], //needed use geoext controls such zoomslider maxextent: new openlayers.bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), units: 'm', alloverlays: false } this.map = new openlayers.map(options); var ghyb = new openlayers.layer.google( "google hybrid", {type: google.maps.maptypeid.hybrid, numzoomlevels: 20} ); var gmap = new openlayers.layer.google( "google streets", // default {type: google.maps.maptypeid.roadmap, numzoomlevels: 20} ); var gphy = new openlayers.layer.google( "google physical", {type: google.maps.maptypeid.terrain, numzoomlevels: 20} // used {type: g_physical_map} ); var osm = new openlayers.layer.osm(); map.addlayers([osm, gphy, gmap, ghyb]); openlayers.proxyhost = "http://localhost/cgi-bin/proxy.cgi?url="; var mappanel = new geoext.mappanel({ title: "map", map: this.map, center: new openlayers.lonlat(93.9, 29.53).transform(new openlayers.projection("epsg:4326"), new openlayers.projection("epsg:900913")), zoom: 2, region: "center" }); //obtain bbox coords var proj = new openlayers.projection("epsg:900913"); var ext = mappanel.map.getmaxextent().transform(mappanel.map.getprojectionobject(), proj); var minx = ext.left; var miny = ext.bottom; var maxx = ext.right; var maxy = ext.top; alert(minx + " " + miny + " " + maxx + " " + maxy); url = "http://www.panoramio.com/map/get_panoramas.php"; var parameters = { order: 'popularity', set: 'full', from: 0, to: 40, minx: minx, miny: miny, maxx: maxx, maxy: maxy, size: 'thumbnail' } new ext.panel({ width: 1800, height: 600, layout: "border", renderto: document.body, items: [mappanel] }); openlayers.loadurl(url, parameters, this, showphotos); //alert(openlayers.request.xmlhttprequest); }); function showphotos(response) { var json = new openlayers.format.json(); var panoramio = json.read(response.responsetext); //something wrong here!!! var features = new array(panoramio.photos.length); (var = 0; < 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 } features[i] = new openlayers.feature.vector(fpoint, attributes); }//outside loop panoramio_style = new openlayers.stylemap(openlayers.util.applydefaults({ pointradius: 7, fillcolor: "red", fillopacity: 1, strokecolor: "black", externalgraphic: "panoramio-marker.png" }, openlayers.feature.vector.style["default"])); vectorlayer = new openlayers.layer.vector("panoramio photos", { stylemap: panoramio_style }); vectorlayer.addfeatures(features); this.map.addlayer(vectorlayer); selectcontrol = new openlayers.control.selectfeature(vectorlayer, {onselect: onfeatureselect, onunselect: onfeatureunselect}); this.map.addcontrol(selectcontrol); selectcontrol.activate(); }//end showphotos // popups function onpopupclose(evt) { selectcontrol.unselect(selectedfeature); } function onfeatureselect(feature) { selectedfeature = feature; // html del popup var html = "some html have here"; popup = new openlayers.popup.framedcloud("chicken", feature.geometry.getbounds().getcenterlonlat(), null, html, null, true, onpopupclose); feature.popup = popup; this.map.addpopup(popup); } function onfeatureunselect(feature) { this.map.removepopup(feature.popup); feature.popup.destroy(); feature.popup = null; }
it looks have bumped same origin policy. cannot make ajax requests hosts outside domain, unless use jsonp, or other technique around policy. request www.panoramio.com problem, since don't think you're hosted on www.panoramio.com :)
you may want check if panoramio offer jsonp service. otherwise check out following stack overflow post few popular solutions work around same origin policy (mainly jsonp, cors , reverse proxy methods):
and empty responsetext typical of browsers when block response third-party domains:
Comments
Post a Comment