Style WFS layer by attributes [SOLVED]

6 messages Options
Embed this post
Permalink
AlessioDL

Style WFS layer by attributes [SOLVED]

Reply Threaded More More options
Print post
Permalink
(This post was updated on )
Hi,

I have this WFS layer from my UMN-Mapserver

//Vector layer style
var area_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
     area_style.strokeWidth = 1.5;
    area_style.strokeColor = "#ff0000";
    area_style.fillOpacity = 0.75;


//Layer definition
qAreas = new OpenLayers.Layer.Vector("WFS",
    {
           strategies: [new OpenLayers.Strategy.BBOX()],
           filter: propertyFilter,
           style:area_style,
           protocol: new OpenLayers.Protocol.WFS({
           url:  wfsURL,
           extractAttributes:true,
           featureType: "QueryAreas",
           geometryName:"the_geom"
           })
});


I'd like to use an attribute value to style things differently
(for example, if the value of the attribute named type is "A" the corresponding polygons bacame red and if it is "B" they became blue)

Can you help me? :-)
Jerome Freyre

Re: Style WFS layer by attributes

Reply Threaded More More options
Print post
Permalink
Hi Alessio,

You can define a style and, depending a context, assign different value.

Here is an example that change the fillcolor of feature depending on the attribute "state" of each feature.

Note that the context is automatically applied to features. Nothing to activate ;)
      new OpenLayers.Style({
           strokeColor: "${getFillColor}",
           fillColor: "${getFillColor}",
           strokeWidth: 2,
           strokeOpacity: 1,
           fillOpacity: 0.7,
           pointRadius: 5
       },{
           context: {
               getFillColor:function(feature) {
                   // Green if state is true
                   if (feature.attributes.state == true)
                       return '#00FF00';
                   // Red if state is false
                   else if (feature.attributes.state == false)
                       return '#FF0000';
               }
           }    
       })


AlessioDL wrote:
Hi,

I have this WFS layer from my UMN-Mapserver

//Vector layer style
var area_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
     area_style.strokeWidth = 1.5;
    area_style.strokeColor = "#ff0000";
    area_style.fillOpacity = 0.75;


//Layer definition
qAreas = new OpenLayers.Layer.Vector("WFS",
    {
           strategies: [new OpenLayers.Strategy.BBOX()],
           filter: propertyFilter,
           style:area_style,
           protocol: new OpenLayers.Protocol.WFS({
           url:  wfsURL,
           extractAttributes:true,
           featureType: "QueryAreas",
           geometryName:"the_geom"
           })
});


I'd like to use an attribute value to style things differently
(for example, if the value of the attribute named type is "A" the corresponding polygons bacame red and if it is "B" they became blue)

Can you help me? :-)
AlessioDL

Re: Style WFS layer by attributes

Reply Threaded More More options
Print post
Permalink
Hi Jerome,  

probably I don't understood exactly how to apply your suggestion...

If I use "new OpenLayers.Style" I can't apply any style to my features.
The only way to style them appear to be:
OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default'])

So I need to do something like

//Vector layer style
var area_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);

if (feature.attributes.myattribute == 'myvalue') {
     area_style.strokeWidth = 1.5;
     area_style.strokeColor = "#ff0000";
     area_style.fillOpacity = 0.75;
} else {
...
}

but it does not work (feature is undefined)...
Jerome Freyre

Re: [OpenLayers-Users] Style WFS layer by attributes

Reply Threaded More More options
Print post
Permalink
Some javascript/style in this post has been disabled (why?)
Try to apply a stylemap to your vector layer.

// Creation of a stylemap
myStyles = new OpenLayers.StyleMap({
       "default": new OpenLayers.Style({
           strokeColor: "${getFillColor}",
           fillColor: "${getFillColor}",
           strokeWidth: 2,
           strokeOpacity: 1,
           fillOpacity: 0.7,
           pointRadius: 5
       },{
           context: {
               getFillColor:function(feature) {
                   if (feature.attributes.state == true)
                       return '#00FF00';
                   else if (feature.attributes.state == false)
                       return '#FF0000';
               }
           }    
       })
       ,"select": new OpenLayers.Style({
           fillColor: "#00000FF",
           strokeColor: "#0000FF",
           pointRadius: 6
       }),
       "hover": new OpenLayers.Style({
           fillColor: "#CCCCCC",
           strokeColor: "#999999",
           pointRadius: 6
       })
   });

// Create a vector layer and give it your style map.
var points = new OpenLayers.Layer.Vector(
                'Points', {styleMap: myStyles}
            );

if you still have problems, please send you script, i'll try to debug

Jérome


Le 1 sept. 09 à 15:48, AlessioDL (via Nabble) a écrit :

Hi Jerome,  

probably I don't understood exactly how to apply your suggestion...

If I use "new OpenLayers.Style" I can't apply any style to my features.
The only way to style them appear to be:
OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default'])

So I need to do something like

//Vector layer style
var area_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);

if (feature.attributes.myattribute == 'myvalue') {
     area_style.strokeWidth = 1.5;
     area_style.strokeColor = "#ff0000";
     area_style.fillOpacity = 0.75;
} else {
...
}

but it does not work (feature is undefined)...

AlessioDL

Re: [OpenLayers-Users] Style WFS layer by attributes

Reply Threaded More More options
Print post
Permalink

Jerome Freyre wrote:
Try to apply a stylemap to your vector layer.
Yes! It worked :D

Thank you very much Jerome


Sige

Re: [OpenLayers-Users] Style WFS layer by attributes

Reply Threaded More More options
Print post
Permalink
Hi

Is it possible to make customised shapes in the stylemap using well known shape names like triangle, square etc, instead of the external graphics,  just like those in geoserver sld:
 <PointSymbolizer>
            <Graphic>
              <Mark>
                <WellKnownName>triangle</WellKnownName>
                <Fill>
                  <CssParameter name="fill">#0000EE</CssParameter>
                </Fill>
              </Mark>
              <Size>10</Size>
              <Rotation>180</Rotation>
            </Graphic>
          </PointSymbolizer>

Thanks,

Sige


AlessioDL wrote:
Jerome Freyre wrote:
Try to apply a stylemap to your vector layer.
Yes! It worked :D

Thank you very much Jerome