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, but I want to change the style of vector layer. I was searching online, and I did not find simple and clear examples for this... Is there anyone who can help me, or maybe someone who wanted to do the same and found simple tutorial for this? Any help greatly appreciated..

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}



Well, I don't really know why your code does not work, but I have never managed to colour a wms layer in OpenLayers, so I have always done it with sld in geoserver. More info on that in the "sld cookbook"

With this it is also possible to colour features based on their attributes.

However, I don't see where is the content of your vector layer "polygon", what is the purpose of this layer?

| improve this answer | |

When you define your polygon layer you say:

Style: 'style'

but it should be:

Style: style
| improve this answer | |

Your Answer

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