Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question

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

share|improve this answer
1  
Thanks for your answer. I don't know if it is because I don't understand or because I was not precise in my question, as I don't see how to use Openlayer.Rule to define a rule and then add it to the stylemap like stylemap.addrules. On one side, I find stylemap,to highlight or symbolize according to value and on the other style and addrules to use openlayers.filters.comparison. I don't find stylemap.addrules – Olivier Mar 24 '12 at 7:50
    
I found but added point to thank you for your answer. – Olivier Mar 24 '12 at 18:18

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:

enter image description here

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
      })]
    }
  );
share|improve this answer
up vote 0 down vote accepted

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(); 
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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