Hello there :),
I have actually followed your tutorial and I want to say thank you, because
it was the only clear documentation I could find. I am also trying to use
the Panoramio data API to display picture icons/popups on my slippy map.
However, for some reason my:
json.read(response.responseText); returns null :(
Before I was trying to pull in RSS data vis XML using a GeoRSS layer. After
days on end, I decided to try with JSON, but it seems there is still
something wrong with actually reading the data. I know my proxy goes there
just fine and the page isn't blocked. Could it be that I am not using the
right port??? My proxy is on localhost and this code is in an html file on
localhost:8080...
I'm out of ideas...thank you for your time and considerations,
elshae
My code is below:
var map, popup, selectControl, selectedFeature;
var vectorLayer, panoramio_style;
Ext.onReady(function() {
var options = {
controls: [new
OpenLayers.Control.Navigation()], //Needed to use GeoExt
controls such as the 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", // the default
{type: google.maps.MapTypeId.ROADMAP,
numZoomLevels: 20}
);
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN,
numZoomLevels: 20}
// used to be {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 georss = new OpenLayers.Layer.GeoRSS( "GeoRSS",
"http://earthquake.usgs.gov/recenteqsww/eqs7day-M2.5.xml";);
//map.addLayer(georss);
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();
//alert(json.read(response.responseText));
var panoramio = json.read(response.responseText); //Something is wrong
here!!!
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
}
features[i] = new
OpenLayers.Feature.Vector(fpoint,attributes);
}//Outside for 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 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;
}
José Manuel Mira MartÃnez wrote:
>
> Hi list,
>
> This is my first post.
>
> I have developed an html-javascript script to load Panoramio's photos in
> OpenLayers. Panoramio (http:/www.panoramio.com) is a great store of
> georeferenced photos accesible with a public API (
> http://www.panoramio.com/api/) that allows to get a doc in JSON format.
> A how-to explanation can be viewed as a post in our blog (in spanish -
> http://www.gisandchips.org)
> :http://www.gisandchips.org/2010/05/04/openlayers-y-panoramio/
>
> We have also made two examples:
>
> 1. OpenLayers with OpenStreetMap base layer and Panoramio:
> http://www.gisandchips.org/demos/j3m/panoramio/panoramio.html
> 2. OpenLayers with WMS base layer and Panoramio:
> http://www.gisandchips.org/demos/j3m/panoramio/panoramio_4326.html
>
> Now, my questions:
> 1. How can I design a new custom layer format (
> http://docs.openlayers.org/library/formats.html) for Panoramio to load the
> layer as usual (example: panoLayer = new
> OpenLayers.Layer.Format.Panoramio(<json data>).
> I make an unique JSON data request, but I don't know how to make the
> layer
> persistent (new httpRequest) for every zoom-pan event which loads new
> data.
>
> Any suggestions are welcome
>
> Regards
>
> _______________________________________________
> Users mailing list
> [email protected]
> http://openlayers.org/mailman/listinfo/users
>
>
--
View this message in context:
http://osgeo-org.1803224.n2.nabble.com/Panoramio-photos-as-a-vector-layer-tp5008071p5611856.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.
_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users
