How to do selection with a WFS source in OpenLayers?

Question

One of my students wants to style a WFS layer and have selections too. I got as far as this code http://ian01.geog.psu.edu/geoserver/www/wfs/wfs-sld2.html which styles the WFS (though with out the text labels) and while the selection control seems to be working (i.e. the box is blue not red) nothing is actually selected.

Answer 1

Looks like you're on your way to getting this to work. Though, I know this selection thing can be tricky so I thought i'd share my code which does selection and hover highlighting. Using a control to highlight and a control for selection:

    var handler_featurehighlighted = function (e) {
        MyCompany.UI.Map.Results.Handlers.Events.Feature_MouseOver(MyCompany.UI.Map.Results.Layer.features.indexOf(e.feature));
    };
    var handler_featureunhighlighted = function (e) {
        MyCompany.UI.Map.Results.Handlers.Events.Feature_MouseOut(MyCompany.UI.Map.Results.Layer.features.indexOf(e.feature));
    };
    var handler_featureselected = function (e) {
        MyCompany.UI.Map.Results.Handlers.Events.Feature_Select(MyCompany.UI.Map.Results.Layer.features.indexOf(e.feature));
    };
    var handler_featureunselected = function (e) {
        MyCompany.UI.Map.Results.Handlers.Events.Feature_UnSelect(MyCompany.UI.Map.Results.Layer.features.indexOf(e.feature));
    };

    MyCompany.UI.Map.Results.highlightControl = new OpenLayers.Control.SelectFeature(MyCompany.UI.Map.Results.Layer, {
        hover: true,
        highlightOnly: true,
        renderIntent: "temporary",
        eventListeners: {
            featurehighlighted: handler_featurehighlighted,
            featureunhighlighted: handler_featureunhighlighted
        }
    });

    MyCompany.UI.Map.Results.selectControl = new OpenLayers.Control.SelectFeature(MyCompany.UI.Map.Results.Layer,
        {
            hover: false,
            multiple: true,
            toggle: true,
            eventListeners: {
                featurehighlighted: handler_featureselected,
                featureunhighlighted: handler_featureunselected
            }
            //multipleKey: "shiftKey"
        }
    );

    MyCompany.UI.Map.getMap().addControl(MyCompany.UI.Map.Results.highlightControl);
    MyCompany.UI.Map.getMap().addControl(MyCompany.UI.Map.Results.selectControl);

    MyCompany.UI.Map.Results.highlightControl.activate();
    MyCompany.UI.Map.Results.selectControl.activate();

// don't let results cover region
    MyCompany.UI.Map.getMap().raiseLayer(MyCompany.UI.Map.Results.Layer, -2);
    MyCompany.UI.Map.getMap().resetLayersZIndex();

Answer 2

You don't need a separate layer in which to select features (unless you want copies of the features). So you can remove the following code:

select = new OpenLayers.Layer.Vector("Selection", {styleMap: 
    new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
});

And the onSelect, onUnSelect functions. Just set the OpenLayers.Feature.Vector.style["select"] on your WFS layer, and the control will take care of the rest.

In addition:

The onSelect function of the select control takes a single feature as a parameter so:

onSelect: function(e){
    select.addFeatures([e.features]);
},
unSelect: function(e){
    select.removeFeatures([e.features]);
}

should be:

onSelect: function(feature){
    select.addFeatures([feature]);
},
onUnselect: function(e){
    select.removeFeatures([feature]);
}