Can someone help me get WMSGetFeatureInfo working?

StackOverflow https://stackoverflow.com/questions/13431949

  •  30-11-2021
  •  | 
  •  

Question

I am new to Openlayers and would really appreciate some help getting WMSGetFeatureInfo working. I have tried several examples, and every time I paste it into my code, I get the same results: when I click to get the info, my mouse just turns into the waiting symbol.

I decided to try and copy the this OpenLayers example exactly: http://openlayers.org/dev/examples/getfeatureinfo-popup.html

I copied the source code and changed the sources from relative to absolute. I got it run - except I have the same problem! When I run the example from the website, I get the popup. When I run my local version (see below), when I click on the map I just get the thinking symbol. What am I missing?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>GetFeatureInfo Popup</title>

<script src="http://openlayers.org/dev/OpenLayers.js">
</script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
<script>
OpenLayers.ProxyHost = "proxy.cgi?url=";

var map, info;

function load() {
    map = new OpenLayers.Map({
        div: "map",
        maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573)
    });

    var political = new OpenLayers.Layer.WMS("State Boundaries",
        "http://demo.opengeo.org/geoserver/wms", 
        {'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
        {isBaseLayer: true}
    );

    var roads = new OpenLayers.Layer.WMS("Roads",
        "http://demo.opengeo.org/geoserver/wms", 
        {'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
        {isBaseLayer: false}
    );

    var cities = new OpenLayers.Layer.WMS("Cities",
        "http://demo.opengeo.org/geoserver/wms", 
        {'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
        {isBaseLayer: false}
    );

    var water = new OpenLayers.Layer.WMS("Bodies of Water",
        "http://demo.opengeo.org/geoserver/wms", 
        {'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
        {isBaseLayer: false}
    );

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

    map.addLayers([political, roads, cities, water, highlight]); 

    info = new OpenLayers.Control.WMSGetFeatureInfo({
        url: 'http://demo.opengeo.org/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();

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

</script>
</head>
<body onload="load()">
<h1 id="title">Feature Info in Popup</h1>
<div id="tags">WMS, GetFeatureInfo, popup</div>
<p id="shortdesc">Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS (via GetFeatureInfo request). Results are displayed in a popup.       </p>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>
Was it helpful?

Solution 2

I figured out what I was doing wrong with my example. I changed the SCRIPT and LINK references from relative to absolute, but I left the following unchanged:

OpenLayers.ProxyHost = "proxy.cgi?url=";

When I changed it to: 

OpenLayers.ProxyHost = "http://openlayers.org/dev/examples/proxy.cgi?url=";

The example worked just fine from my PC.

OTHER TIPS

This sounds like an issue with cross-domain requests. For a WMS getMap the request is for an image so any domain can be used. For GetFeatureInfo the request is for XML so must be for the same domain.

To over come this there is a proxy setting in OpenLayers, this should help

Basically you have to set the OpenLayers.ProxyHost setting to point to a proxy cgi script an example of which is provided in the OpenLayers src.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top