0

I have succeeded drawing polygons depending on long/lat coordinates as in the following link

https://jsfiddle.net/api/post/library/pure/#&togetherjs=P5VkiiyuCO

However, what I want to do more is to specify a different color for each polygon, depending on other filed that contains different value for each polygon.

Is it possible to draw polygons with different styles?

  • Please ask only one question per Question. – Vince Jan 2 '17 at 14:27
  • @Vince Thank you for the note Vince. I edited my post. – philippos Jan 2 '17 at 15:17
3

See this link for your answering your question, or follow the steps below:

You can set different styles to a layer by using a function (here: styleFunction) that is bound to the layer:

 var layer = new ol.layer.Vector({
    source: source,
    style: styleFunction
  });

The styleFunction can have two arguments: feature and resolution. Feature refers to a specific item of your layer that you want to style specifically (so it is your case: each polygon must be styled differently). Resolution refers to the map resolution, and it is useful when you want to render things (such as icon size) differently as a function of the scale.

function styleFunction(feature, resolution) {...}

Then, in the styleFunction, you can access some field of you data using something like:

var myfield = feature.get('myField');

or

var myfield = feature.values_.myField;

You may have directly something for styling in the fields of your data (such as html color code) or you have to create some function to render you polygons according to some properties (such as, if (myfield > x) {var mycolor = ...}).

Hope it's helping!

J.

  • If you have another problem you should ask another question. If this answer has helped you solve the initial problem you should accept it – nmtoken Jan 3 '17 at 7:55
  • @nmtoken Thank you for the note. I am still new here and don't know much the rules. Will delete the other question. – philippos Jan 3 '17 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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