Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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..

Thanks in advance!!

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}


share|improve this question

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?

share|improve this answer

When you define your polygon layer you say:

Style: 'style'

but it should be:

Style: style
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.