I wonder if its possible to style a feature point which belongs to an OpenLayers vector layer with points by using its id.

For example, I have in this layer three points with ids: a,b and c. Right now they have all of them fillColor:red.

Is it possible to grab the feature point with the id:b and change its fillcolor to green while the other points hold the previous style?

Is there an example for something like this?


You can use a stylemap and context-functions to set different styles for your features.

 var your_context = {
        getColor: function (feature) {
            if (feature.attributes.id == 1) {
                return "red";
            } else if (feature.attributes.id == 2) {
                return "blue";
            } else if (feature.attributes.id == 3) {
                return "cyan";
            } else {
                return "yellow";

    var yourStyle = new OpenLayers.Style({
        fillColor: "${getColor}",
        strokeColor: "white",
        strokeOpacity: "0.7",
        strokeWidth: 2,
        cursor: "pointer",
        pointRadius: 10
    }, {
        context: your_context

    var selectStyle = new OpenLayers.Style({
        'pointRadius': 15,
        strokeColor: "yellow",

    var your_styleMap = new OpenLayers.StyleMap({
        'default': yourStyle,
        'select': selectStyle

    var vector_layer = new OpenLayers.Layer.Vector("Vector Layer", {
        styleMap: your_styleMap

Here is my jsfiddle as example: http://jsfiddle.net/expedio/4rvmeb9q/

Edit1: added second jsfiddle with switch case instead of if-else: http://jsfiddle.net/expedio/aqeok5mk/

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.