OpenLayers style rules not selectable

Question

When I applied style rules to my "vector" layer, OpenLayers.Control.SelectFeature no longer shows the feature as selected. I have tried adding selection to the style:

var style = new OpenLayers.Style({"select":{fillColor: "#66ccff",strokeColor: "#3399ff"}});

The rule:

var zone1 = new OpenLayers.Rule(
                {
                filter: new OpenLayers.Filter.Comparison(
                {
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                 property: "zone",
                    value: "zone1",
                }),
                symbolizer: {pointRadius: 10, fillColor: "green", fillOpacity: 0.5, strokeColor: "black", label: "${zone}",labelOutlineColor: "black",labelOutlineWidth: 3, fontColor: "white",
            fontSize: "8"}
                });

Rule applied to the style:

style.addRules([zone1]);

The selection worked fine until I added the rules.

Any ideas?

Answer 1

I've made a little example, which looks like what you need:

function makePointFeature(x,y,attrs) {
    var geometry = new OpenLayers.Geometry.Point(x,y);
    var attributes = attrs;
    return new OpenLayers.Feature.Vector(geometry, attributes)
}

// Map options
var options = {
    div: "map",
    zoom: 12,
    center: [-9074392.9993436, 5021122.97485],
    layers: [
        new OpenLayers.Layer.OSM()
    ]
};

// Array of features
var features = [
    makePointFeature(-9074392.9993436, 5021122.97485, {zone: 'zone1'}),
    makePointFeature(-9078392.9893436, 5021122.97485, {zone: 'zone1'}),
    makePointFeature(-9076592.9993436, 5024122.97485, {zone: 'zone2'})
];

// Rules
var zoneRule = new OpenLayers.Rule({
    filter: new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.EQUAL_TO,
        property: "zone",
        value: "zone1",
    }),
    symbolizer: {
        pointRadius: 20,
        fillColor: "green",
        fillOpacity: 0.5,
        strokeColor: "black",
        label: "${zone}",
        labelOutlineColor: "black",
        labelOutlineWidth: 3,
        fontColor: "white",
        fontSize: "8"
    }
});

var elseRule = new OpenLayers.Rule({
    elseFilter: true
});

var style = new OpenLayers.Style(
    OpenLayers.Feature.Vector.style.default,
    {rules: [zoneRule, elseRule]}
);

var styleMap = new OpenLayers.StyleMap({
    'default': style,
    'select': {fillColor: "#66ccff",strokeColor: "#3399ff"}
});
var vector = new OpenLayers.Layer.Vector('', {styleMap: styleMap});
var map = new OpenLayers.Map(options);
var select = new OpenLayers.Control.SelectFeature(vector, {autoActivate: true});

map.addLayers([vector]);
map.addControls([select]);
vector.addFeatures(features);