I am working with OpenLayers (and GeoServer) and I am showing a WMS layer with countries in a map. Each object (country) in the layer has an attribute called NAME (the name of the country).

I created a filter like the following in order to see only Italy (it's an example)

myFilter = new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    matchCase: false, 
    property: 'NAME',
    value: 'Italy'

This work perfectly and if I apply it to the layer and call redraw() method I can see only one country.

Now I would like to do the same thing with sytles, in order to highlight Italy but keep visible all the other countries in the map. I created a style like the one below, but now I don't know how I can apply this to the layer.

var style = new OpenLayers.Style();
var ruleLow = new OpenLayers.Rule({
    filter: myFilter,
    symbolizer: {fillColor: "green"}

Can I apply the style to a WMS layer or only to a vector layer?

2 Answers 2


In general the approach you have outlined will only work with vector layers. WMS layers are pictures of the map sent to you by the WMS server so it is harder to change their style on the fly as you would like. You probably want to see if it is possible to make a WFS request for the highlighted polygon and overlay that over the WMS base layer.

There are ways to send an SLD file with the WMS request to ask the server to style the map in a way that suits you. However not all servers (or clients) support this as it is much less efficient (it prevents the server caching the result for other users for example). See this example if that is what you want to do.


It could be a bit of a work to associate a style defined on client side with a wms layer. You can easily highlight the features returned by the filter on a vector layer with the defined style. All you have to do is add a vector layer, specify the style in it and then add the features contained in the response returned by the filter. This piece of code might help:

var highlight_style = 
hilites = new OpenLayers.Layer.Vector("Highlighted",
    projection: 'EPSG:4326',

function highlight_them(response) {
    // use the GML parser to turn the XML into a list of Feature objects
    var features = new OpenLayers.Format.GML().read(response.responseText);
    // have the Vector layer purge its feature list, replace them with the new ones

You can get the response by making a request to goeserver with a wfs url.

 var wfs_url = 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.0.0';

 function highlightFeatures(typename,attribute,value) {     
      var wfsurl = wfs_url + '&REQUEST=getfeature&typename=' + typename +


highlight_them is the function mentioned earlier. Pass 'typename' as the layer in geoserver, 'attribute' as the name of the attribute and 'value' as the attribute value of the feature to be returned. If you know the feature id you can pass the wfs url as:

 var wfsurl = wfs_url + '&REQUEST=getfeature&typename=' + typename +

Here 'value' is the Id of the feature to be returned. You can have multiple ids assigned to value in a comma seperated format.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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