How to properly configure a WFS layer in OpenLayers?

Question

I am trying to display a WFS layer on an OpenLayers map. Here are the appropriate portions of GETCAPABILITIES response.

<ows:Operation name="GetFeature">
  <ows:DCP>
    <ows:HTTP>
      <ows:Get xlink:href="http://localhost/MapServer/Default.aspx"/>
      <ows:Post xlink:href="http://localhost/MapServer/Default.aspx"/>
    </ows:HTTP>
  </ows:DCP>
  <ows:Parameter name="resultType">
    <ows:Value>results</ows:Value>
    <ows:Value>hits</ows:Value>
  </ows:Parameter>
  <ows:Parameter name="outputFormat">
    <ows:Value>text/xml; subtype=gml/3.1.1</ows:Value>
  </ows:Parameter>
</ows:Operation>
<ows:Parameter name="srsName">
  <ows:Value>EPSG:4326</ows:Value>
</ows:Parameter>
<ows:Constraint name="DefaultMaxFeatures">
  <ows:Value>20000</ows:Value>
</ows:Constraint>

The feature I am trying to display:

<wfs:FeatureType>
  <wfs:Name>Data_ACTIVE</wfs:Name>
  <wfs:Title/>
  <wfs:Abstract/>
  <ows:Keywords/>
  <wfs:DefaultSRS>EPSG:4326</wfs:DefaultSRS>
  <wfs:OutputFormats>
    <wfs:Format>text/xml; subtype=gml/3.1.1</wfs:Format>
  </wfs:OutputFormats>
  <ows:WGS84BoundingBox>
    <ows:LowerCorner>-102.01545715332 28.970645904541</ows:LowerCorner>
    <ows:UpperCorner>-71.021598815918 43.1671752929688</ows:UpperCorner>
  </ows:WGS84BoundingBox>
</wfs:FeatureType>

Here is the code I am using:

$(document).ready(
    function () {
        // allow testing of specific renderers via "?renderer=Canvas", etc
        var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
        renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
        var geographic = new OpenLayers.Projection("EPSG:4326");
        var mercator = new OpenLayers.Projection("EPSG:900913");

        map = new OpenLayers.Map({
            div: "map",
            layers: [
                new OpenLayers.Layer.WMS("OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    { layers: "basic" }
                ),
                new OpenLayers.Layer.Vector("GML", {
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.WFS({
                            url: "http://localhost/MapServer/Default.aspx",
                            featureType: "Data_ACTIVE",
                            featureNS: "http://www.tstgis.org/gml",
                            version: "1.1.0",
                            geometryName: "line"
                        }),
                        renderers: renderer
                    })
            ],
            zoom: 15
        });

        var bb = new OpenLayers.Bounds(-179.821327209473, 12.1057098342161, -56.5289154052734, 78.1442901657839);
        map.zoomToExtent(bb);
});

I see a post request being made to the server for the layer and a result coming back but it is not displayed at all. Why would the layer not show? Any help would be appreciated.

NOTE
This test script is part of an HTML shell that is running under localhost/mapserver, so it rules out the familiar cross-domain issue.

Answer 1

I had no doubt that this was a configuration issue with OpenLayers. From what I knew about OpenLayers, I had it configured properly. Turns out, it is essential, in my case, to set the featurePrefix option. The reason for this is that the namespace and prefix in the XML response (GML) for each FeatureMember Node is used to identify the appropriate reader for the response. By default, the featurePrefix is set to ‘feature’. If the response's namespace + prefix does not match the configuration in OpenLayers, the features are not added to the layer and hence not displayed. In my case, the prefix is set to an empty string as the server does not add a prefix to the response.

Also, setting the geometryName is critical. The default value for geometryName is ‘the_geom’ for WFS version 1.0, and null for higher versions. The geometryName is used by the server to actually locate the features. In my case, geometryName used on the server was "msGeometry".

Here is the working code.

$(document).ready(
function () {
    // allow testing of specific renderers via "?renderer=Canvas", etc
    var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
    renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
    var geographic = new OpenLayers.Projection("EPSG:4326");
    var mercator = new OpenLayers.Projection("EPSG:900913");

    map = new OpenLayers.Map({
        div: "map",
        layers: [
            new OpenLayers.Layer.WMS("OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0",
                { layers: "basic" }
            ),
            new OpenLayers.Layer.Vector("GML", {
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.WFS({
                        url: "http://localhost/MapServer/Default.aspx",
                        featureType: "Data_ACTIVE",
                        version: "1.1.0",
                        geometryName: "msGeometry",
                        featurePrefix: ""
                    }),
                    renderers: renderer
                })
        ],
        zoom: 15
    });

    var bb = new OpenLayers.Bounds(-179.821327209473, 12.1057098342161, -56.5289154052734, 78.1442901657839);
    map.zoomToExtent(bb);

});