My problem is that when I use a click event like this one: Link I get the popup but I want to display a weather response in that popup from this API: http://api.yr.no/weatherapi/locationforecast/1.8/?lat=60;lon=15 How can I do that? My code:
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
initialize: function (options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.trigger
}, this.handlerOptions
);
},
trigger: function (e) {
//A click happened!
var lonlat = map.getLonLatFromViewPortPx(e.xy)
lonlat.transform(
new OpenLayers.Projection("EPSG:900913"),
new OpenLayers.Projection("EPSG:4326")
);
alert("You clicked near " + lonlat.lat + " N, " +
+lonlat.lon + " E");
}
});
OpenLayers.ProxyHost = "../../Proxy/proxy.aspx?url=";
var map;
function initMap(){
map = new OpenLayers.Map("mapCont");
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var google = new OpenLayers.Layer.Google("GoogleMaps");
map.addLayer(google);
addAdditionalControls();
map.setCenter(new OpenLayers.LonLat(2452105.33, 9780412.11), 15)
addWMSservice();
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
info = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:8080/geoserver/wms',
title: 'Identify features by clicking',
queryVisible: true,
eventListeners: {
getfeatureinfo: function (event) {
map.addPopup(new OpenLayers.Popup.FramedCloud(
"chicken",
map.getLonLatFromPixel(event.xy),
null,
event.text,
null,
true
));
}
}
})
map.addControl(info);
info.activate();
}
Here is an example function that will load the XML and show it in an alert.
Note that your browser will most likely have access-origin problems since the request is to a different domain.
function apiRequest(){
var lat = 60;
var lon = 15;
var url = "http://api.yr.no/weatherapi/locationforecast/1.8/?lat="+lat+";lon="+lon;
$.ajax({
url: url,
type: 'GET',
success: function(data){
alert((new XMLSerializer()).serializeToString(data));
},
error: function(data) {
alert('err:'+data);
}
});
}