Is there any way to configure OpenLayers styling method? I have a vector layer and I would like to style the features depending on a value of a flag variables, so I can't use rules. Lets say I have two types of features: houses and restaurants. houses flag is "H" and restaurants flag is "R". How can I give them a different style within a vector layer?


function search(term)
var flag;
      if (regex_3.test(term))   //term is 3 letters
     flag = "H";

    else  if (regex_more.test(term))    
     flag = "R";

and when I find the feature, I add it to a vector layer.but the thing is I can't find a way to make two styles depending on the flag value.

1 Answer 1


Why do you think, you can't style a layer based on attributes? It is very much possible. There are several ways including:

Update Since you have explained how you are saving the flag, let me explain how you can save that as an attribute of the feature.

I am assuming that you set he flag first (using the search function) and then creating the Vector feature. The constructor for the Feature Vector takes in three parameters:

geometry {OpenLayers.Geometry} The geometry that this feature represents.

attributes {Object} An optional object that will be mapped to the attributes property.

style {Object} An optional style object.

So when you create the feature, you can pass in the flag like this:

var feature=new OpenLayers.Feature.Vector( pt, //where pt is your point
             {type:flag}) ; //no style

Your styles could be set up using the following lookup object

    var lookup = {
        "H": {externalGraphic: "../img/marker-blue.png"},
        "R": {externalGraphic: "../img/marker-green.png"}

Another option could be to define two styles, and then after creating the vector feature, passing the appropriate style, like this:

//you have set the flag

//now creating the vector feature
 var feature=new OpenLayers.Feature.Vector( pt); //where pt is your point
if (flag==='H'){
  • 1
    you can read more about styling here: docs.openlayers.org/library/feature_styling.html Commented May 17, 2013 at 9:09
  • Thanks. but in the first example, styling depends on "type" property of the features. in my case, i don't want it this way. Flag has nothing to do with feature's properties.
    – Shadin
    Commented May 17, 2013 at 12:18
  • Isn't the 'flag' one of the attributes of the feature? if not, can you explain how you are storing this 'flag'? Commented May 17, 2013 at 13:34
  • No. I check the number of type letters. all houses have 3 letters and all restaurants have more that 3 letters, so, when user enter the name of a restaurant in the text field, I check the number of letters, if it's 3 then I store "H" in the flag. and if it's more then I store "R" in the flag.
    – Shadin
    Commented May 17, 2013 at 14:07
  • and when user click the button, the chosen home/restaurant will have a new style (highlighted). So, I need to know hoe can I assign a new style depending on flag value.
    – Shadin
    Commented May 17, 2013 at 14:09

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.