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:


The selection worked fine until I added the rules.

Any ideas?


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(
    {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});

| improve this answer | |
  • Wow, What more can I say than a huge thankyou "drnextgis". Worked perfectly ! – Haydlew Jun 27 '13 at 3:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.