OpenLayers Combines Rules and StyleMap/SelectFeature?

Question

I'm using GeoServer, OpenLayers and WFS features. For one layer, I managed to set either rules to display according to a field or SelectFeature with a styleMap to highlight features when the mouse is over.

I would like to combine both, that's to say display features according to its rules but also being able to highlight features when the mouse is over.

Is that possible?

Answer 1

My answer is a bit late, but it might help others. I just had the same problem and I managed to find a solution.

Here is an image of the result:

This is my code:

var style1 = new OpenLayers.Style();

var risk1 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "1"
  }),
  symbolizer: {
    fillColor: "#00FF00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk2 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "2"
  }),
  symbolizer: {
    fillColor: "#7FFF00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk3 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "3"
  }),
  symbolizer: {
    fillColor: "#FFFF00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk4 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "4"
  }),
  symbolizer: {
    fillColor: "#FC7F00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk5 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "5"
  }),
  symbolizer: {
    fillColor: "#FA0000",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

style1.addRules([risk1, risk2, risk3, risk4, risk5]);

var onselect = new OpenLayers.Style({
  'fillColor':'blue',
  'fillOpacity':0.9,
  'strokeColor':'black',
  'strokeWidth':4,
  'strokeDashstyle': "solid"
});


var StyleMap = new OpenLayers.StyleMap({'default': style1,'select': onselect});

The «property» value will be your attribute and the «value» is the value of the attribute on which wou will want to do your classification.

Then the variable «StyleMap» will be the styleMap of your WFS layer.

  crime = new OpenLayers.Layer.Vector("crime",
    {
      styleMap: StyleMap,
      rendererOptions: {zIndexing: true},
      protocol : new OpenLayers.Protocol.WFS({
        version:       "1.1.0",
        url:           "http://localhost:8080/geoserver/Risk/wms",
        srsName:       "EPSG:900913",
        featureType:   "crime"
      }),
      strategies: [new OpenLayers.Strategy.BBOX({
        // only load features for the visible extent
        ratio: 1,
        // fetch features after every resolution change
        resFactor: 1
      })]
    }
  );

Answer 2

Definitely possible. See this example: http://openlayers.org/dev/examples/stylemap.html

 var myStyles = new OpenLayers.StyleMap({
            "default": new OpenLayers.Style({
                pointRadius: "${type}", // sized according to type attribute
                fillColor: "#ffcc66",
                strokeColor: "#ff9933",
                strokeWidth: 2,
                graphicZIndex: 1
            }),
            "select": new OpenLayers.Style({
                fillColor: "#66ccff",
                strokeColor: "#3399ff",
                graphicZIndex: 2
            })
        });

Single stylemap includes multiple styles

And here are the different intents that StyleMap supports

http://dev.openlayers.org/docs/files/OpenLayers/StyleMap-js.html#OpenLayers.StyleMap

Answer 3

I found. Here is an example add lines 80-112, removing the two "if".

http://trac.geoext.org/browser/sandbox/cmoullet/ux/Redlining/examples/StylingExample.html?rev=1762

80
            var select = new OpenLayers.Control.SelectFeature(vectorLayer, { 

81
                selectStyle: OpenLayers.Util.extend({fill: true, stroke: true}, 

82
                        OpenLayers.Feature.Vector.style["select"]) 

83
            }); 

84
            map.addControl(select); 

85
            select.onBeforeSelect = function(feature) { 

86
                this.selectStyle.fill = true; 

87
                this.selectStyle.stroke = true; 

88
                this.selectStyle.fillColor = '#FF0000'; 

89
                this.selectStyle.pointRadius = 12; 

90
                if (feature.style.label) { 

91
                    this.selectStyle.label = feature.attributes.name; 

92
                } 

93
                if (feature.style.externalGraphic) { 

94
                    this.selectStyle.externalGraphic = feature.style.externalGraphic; 

95
                    this.selectStyle.graphicWidth = feature.style.graphicWidth; 

96
                    this.selectStyle.graphicHeight = feature.style.graphicHeight; 

97
                    this.selectStyle.graphicOpacity = feature.style.graphicOpacity / 2; 

98


99
                } 

100
            }; 

101
            select.onUnselect = function(feature) { 

102
                this.selectStyle.label = null; 

103
                this.selectStyle.externalGraphic = null; 

104
                this.selectStyle.graphicWidth = null; 

105
                this.selectStyle.graphicHeight = null; 

106
                this.selectStyle.graphicOpacity = null; 

107
                this.selectStyle.fillColor = null; 

108
                this.selectStyle.pointRadius = null; 

109
                this.selectStyle.fill = null; 

110
                this.selectStyle.stroke = null; 

111
            }; 

112
            select.activate();