Openlayers 2.12 - add selectFeature to button results in "Geometry Undefined"

Question

I have modified the Openlayers mobile Vienna WMS example, and am trying to change the labelButton to allow selecting of features to open a popup. I think it is necessary to do this as on a touch screen, it is hard to differentiate between touch to move and touch to select.

However I get an error "Cannot read property 'geometry' of undefined" when I change the labelButton code (Pasted below). I have tried moving the code block to after the layer is added to the map, but still get the same message. Can anyone help resolve the problem?

   var labelButton = new OpenLayers.Control({
        type: OpenLayers.Control.TYPE_TOGGLE,
        displayClass: "labelButton",
        hover: "true",
        autoActivate: 'false',
        eventListeners: {
                  deactivate: 
      function onFeatureUnselect(event) {
            var feature = event.feature;
            if(feature.popup) {
                map.removePopup(feature.popup);
                feature.popup.destroy();
                delete feature.popup;
            }
        },
        activate: function onFeatureSelect(event) {
            var feature = event.feature;
            var selectedFeature = feature;
            var popup = new OpenLayers.Popup.FramedCloud("chicken", 
                feature.geometry.getBounds().getCenterLonLat(),
                new OpenLayers.Size(150,200),
                "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
                null, true, onPopupClose
            );
            feature.popup = popup;
            map.addPopup(popup);
        }

        }});

Answer 1

The error is in event.feature attribute, actually there is no object passed when the control triggers the activate event. So the event.feature is undefined in your case. Look at the source code here at line 324.