[GIS] How to change the default color used by OpenLayers2

openlayers-2

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}
        });

            map.addLayers([india,polygon]);

             map.zoomToMaxExtent();
               }

Best Answer

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?

Related Question