[GIS] OpenLayers – WMSGetFeatureInfo, picking a feature’s attribute from a WMS layer created in GIS Cloud

openlayers-2

I created a WMS layer in GIS Cloud app. I use GIS Cloud because they provide prepared app to transfer data from mobile to layer. The URL of WMS layer: http://www.giscloud.com/wms/67edc3492aa2a8ec445ea34034b0d5b7?. The name of layer:138865:mobile_fleet. I'm working on thesis and I have to create a web mapping app.

I decided to use OpenLayers library but I'm newbie, I have never been programming and I don't have much time to understand all aspects. Nevertheless I tried to follow examples on the web of OpenLayers and decided to use example Feature Info Example as template and then I tried to change parameters of functions and objects. I was successful with creating map viewer and adding WMS layer and moreover I added a WFS layer. I wasn't successful with picking a feature's attributes of WMS layer. The code:

    <!DOCTYPE html>
function init(){
// Map is in mercator this time, so over-ride the default
// options that assume lat/lon.
var options = {
  projection: new OpenLayers.Projection("EPSG:900913"),
  displayProjection: new OpenLayers.Projection("EPSG:4326"),
  units: "m",
  numZoomLevels: 10,
  maxResolution: 156543.0339,
  maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                          20037508, 20037508.34)};
    // Create the map object
 map = new OpenLayers.Map('map', options);
         // create Google Maps layer
var gmap = new OpenLayers.Layer.Google(
      "Google Streets", // the default
      {'sphericalMercator': true, numZoomLevels: 20}
);

// create Google Satellite layer
var gsat = new OpenLayers.Layer.Google(
    "Google Satellite",
    {type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 20}
);

var wmslayer = new OpenLayers.Layer.WMS(
    "Canadian Data",
    "http://www.giscloud.com/wms/67edc3492aa2a8ec445ea34034b0d5b7?",
    {
        version: "1.1.1",
        layers: "138865:mobile_fleet",
        format:"image/png",
        srs: "EPSG:4326",
        transparent: "TRUE",

    },
    { isBaseLayer: false }
);  


var wfs = new OpenLayers.Layer.Vector(
     "Stavros Features",
     {
        strategies: [new OpenLayers.Strategy.Fixed()]
        , projection: new OpenLayers.Projection("EPSG:4326")
        , protocol: new OpenLayers.Protocol.WFS({
            version: "1.1.0",
            url: "http://ec2-46-137-23-35.eu-west-1.compute.amazonaws.com:8080/geoserver/wfs",
            featurePrefix: 'Fleet', //geoserver worspace name
            featureType: "vzorek_WGS84", //geoserver Layer Name
            featureNS: "http://fleet.opengeo.org", // Edit Workspace Namespace URI
            geometryName: "the_geom" // field in Feature Type details with type "Geometry"    
        })
    });

highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
    displayInLayerSwitcher: false, 
    isBaseLayer: false 
    }
);

    infoControls = {
        click: new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://www.giscloud.com/wms/67edc3492aa2a8ec445ea34034b0d5b7?', 
            title: 'Identify features by clicking',
            infoFormat: "text/plain",
            layers: [wmslayer],
            queryVisible: true
        }),
        hover: new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://www.giscloud.com/wms/67edc3492aa2a8ec445ea34034b0d5b7?', 
            title: 'Identify features by clicking',
            layers: [wmslayer],
            hover: true,
            // defining a custom format options here
            formatOptions: {
                typeName: 'water_bodies', 
                featureNS: 'http://www.openplans.org/topp'
            },
            queryVisible: true
        })
    }


    map.addLayers([gmap, gsat,wfs,wmslayer, highlightLayer]); 
    for (var i in infoControls) { 
        infoControls[i].events.register("getfeatureinfo", this, showInfo);
        map.addControl(infoControls[i]); 
    }

    map.addControl(new OpenLayers.Control.LayerSwitcher());

    infoControls.click.activate();
    map.zoomToMaxExtent();
}

function showInfo(evt) {
    if (evt.features && evt.features.length) {
         highlightLayer.destroyFeatures();
         highlightLayer.addFeatures(evt.features);
         highlightLayer.redraw();
    } else {
        $('responseText').innerHTML = evt.text;
    }
}

function toggleControl(element) {
    for (var key in infoControls) {
        var control = infoControls[key];
        if (element.value == key && element.checked) {
            control.activate();
        } else {
            control.deactivate();
        }
    }
}

function toggleFormat(element) {
    for (var key in infoControls) {
        var control = infoControls[key];
        control.infoFormat = element.value;
    }
}

function toggleLayers(element) {
    for (var key in infoControls) {
        var control = infoControls[key];
        if (element.value == 'Specified') {
            control.layers = [water];
        } else {
            control.layers = null;
        }
    }
}

// function toggle(key
</script>

You can see this app: http://ec2-46-137-23-35.eu-west-1.compute.amazonaws.com:8080/geoserver/www/test3.html. When I click on some feature of WMS layer (the red points on the map) I see in Firebug that the response is bad.

After s few hours I have found solution. For information: I'm using OpenGeo product deployed on AWS EC2. Geoserver has already implemented proxy so you don't need copy file proxy.cgi from openlayers. All you have to do is open webUI (dashboard), click on proxy and then add a hostname (in my case www.giscloud.com) and in some case mimetype too. That is all.

Best Answer

This is a classic case of "same origin policy" preventing the request being made. You need to add a proxy to your GeoServer instance so that it can resend the requests to the remote map server. See Help Setting up GeoServer Proxy with OpenLayers and related questions for more help on this process.

Related Question