Coordinates from click to an API

Question

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();
    }

Answer 1

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); 
        }
    });
}