How to change OpenLayers style?

Question

I am very, very new to web mapping. I have an OpenLayers map made from shape file from PostGis database, have a vector layer and it has default style (GeoServer SLD), but I want to change style of vector layer when user click on refresh button. I was searching online, and I did not find simple and clear examples for this. Anyone please help me, or maybe someone who wanted to do the same and found simple tutorial for this? Any help greatly appriciated.

<script type="text/javascript">
    var map;
    function init() {
    var bounds = new OpenLayers.Bounds(
        68.089442, 6.752729,
        97.407576, 37.072537);

    var options = {
            controls: [ new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoom()
        ],

        maxExtent: bounds,
        maxResolution: 0.11843675,
        projection: "EPSG:4326",
        units: 'degrees'
    };


    map = new OpenLayers.Map ("map", options );

    var india = new OpenLayers.Layer.WMS(
        "cite:india_state - Tiled", 
        "http://localhost:8080/geoserver/cite/wms",
        {LAYERS: 'cite:india_state',STYLES: 'style',
        //format: format,
        tiled: true,
        tilesOrigin: map.maxExtent.left + ',' + map.maxExtent.bottom
        },
        {buffer: 0, displayOutsideMaxExtent: true,
        isBaseLayer: true,
        yx: {'EPSG:4326' : true}
        }
    );

    var style = new OpenLayers.Style();
    //rule used for all polygons
    var rule_fsa = new OpenLayers.Rule({
        symbolizer: {
            fillColor: "#ff9a9a",
            fillOpacity: 0.5,
            strokeColor: "#000000",
            strokeWidth: 1,
            strokeDashstyle: "dash",
            label: "${name}",
            labelAlign: "cc",
            fontColor: "#333333",
            fontOpacity: 0.9,
            fontFamily: "Arial",
            fontSize: 14
        }
    });

    var rule_highlight = new OpenLayers.Rule({
        filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.EQUAL_TO,
            property: "classification",
            value: "1",
        }),

        symbolizer: {
            fillColor: "#FF7144",
            fillOpacity: 0.6,
            strokeColor: "#FF0000",
            strokeWidth: 2,
            strokeDashstyle: "solid",
            label: " ${name}",
            labelAlign: "cc",
            fontColor: "#000000",
            fontOpacity: 1,
            fontFamily: "Arial",
            fontSize: 16,
            fontWeight: "600"
        }
    });

    style.addRules([rule_fsa, rule_highlight]);

    var polygon = new OpenLayers.Layer.Vector("Polygon", {
        Style: 'style',
        rendererOptions: {zIndexing: true}
    });

    map.addLayers([india,polygon]);

    map.zoomToMaxExtent();
}
</script>

Answer 1

a vector layer can have a StyleMap associated which can determine how your features are shown on different intents: default stlye, when a feature is selected, when you are editing, etc.

Take a look to the samples at: http://acanimal.github.io/Openlayers-Cookbook/ See the Chapter 7 Playing with StyleMap and the render intents code. That code creates an empty vector layer where you can add features and redefines the default and select intents.

Also I recommend you the OpenLayers Cookbook http://www.packtpub.com/openlayers-create-gis-web-applications-cookbook/book

Cheers.