0

Is there a way to change the style (e.g. color) of a vector layer on button click?

I have defined a vector layer like this:

   new OpenLayers.Layer.Vector("WFS", {
            style: myStyle,
            strategies: [new OpenLayers.Strategy.BBOX()],
            protocol: new OpenLayers.Protocol.WFS({
                url: "http://demo.opengeo.org/geoserver/wfs",
                featureType: "tasmania_roads",
                featureNS: "http://www.openplans.org/topp"
            })
        });

Now I want when I press a button (which runs a function) to change the style with a new style which I define as:

   var newStyle = {
    fill: true,
    fillColor: "#ff0000"
};

Is something like this possible? I think I can not do this using redraw() or refresh() right?

One solution would be what I read here. (destroy the whole vector layer and build it again with the new style). But this doesn't seem very efficient either or?

EDITED

I tried this but doesn't seem to work. Instead I get all feature black:

   // ADD STYLING - DIFFERENT COLORS
                var styleContext = {
                    getColor: function (feature) {
                        var objectKeys = Object.keys(gidsAll); // use objectkeys to loop over all the object properties //use it to get the length
                        for (var i = 0; i < objectKeys.length; i++){
                            if (Math.round(feature.attributes.__gid) === parseInt(gidsAll[objectKeys[i]], 10)) {
                                return "green";
                            }
                        }
                            return "red"; //no images on this line
                    }
                };

                // define Style
                var defaultStyle = new OpenLayers.Style({
                    fillColor: "${getColor}",
                    fillOpacity:"1",
                    strokeColor: "${getColor}",
                    strokeOpacity: "1",
                    strokeWidth: 8,
                    cursor: "pointer",
                    pointRadius: 8

                }, {
                    context: styleContext
                });

                // Define style when selecting the feature
                var selectStyle = new OpenLayers.Style({
                    'pointRadius': 8,
                    strokeColor: "cyan",
                });

                // Define the stylemap (loaded in each feature)
                var featurestyleMap = new OpenLayers.StyleMap({
                    'default': defaultStyle,
                    'select': selectStyle
                }); 


                wfs_layer_network.style = featurestyleMap;
                //then redraw the layer
                wfs_layer_network.redraw();
1

Actually you can do it by using redraw(), all you need to do is change the style of the layer first, then call the redraw function.

//reset the style of the layer to the style you defined
layer.style = newStyle;
//then redraw the layer
layer.redraw();

I created an example here on JSFiddle that does exactly what you are looking for.

  • Can you please help me once again. I have tested ur coded and modified in order to get a specific color depending on some values. But it doesn't work. The feature color doesnt change. Perhaps u can have a look in my edited question? – user1919 Mar 12 '15 at 14:54

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.