#

## OpenLayers Workshop

# Understanding Style

When styling HTML elements, you might use CSS like the following:

    .someClass {
        background-color: blue;
        border-width: 1px;
        border-color: olive;
    }

The `.someClass` text is a selector (in this case it selects all elements that include the class name `"someClass"`) and the block that follows is a group of named properties and values, otherwise known as style declarations.

## OpenLayers.Filter

When styling features in OpenLayers, your selectors are `OpenLayers.Filter` objects. Assuming you want to apply a style to all features that have an attribute named `class` with a value of `"someClass"`, you would start with a filter like the following:

    new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.EQUAL_TO,
        property: "class",
        value: "someClass"
    })

## Symbolizers

The equivalent of a declaration block in CSS is a symbolizer in OpenLayers (these are typically object literals). To paint features with a blue background and a 1 pixel wide olive stroke, you would use a symbolizer like the following:

    {
        fillColor: "blue",
        strokeWidth: 1,
        strokeColor: "olive"
    }

## OpenLayers.Rule

To combine a filter with a symbolizer, we use an `OpenLayers.Rule` object. As such, a rule that says “paint all features with class equal to ‘someClass’ using a 1px olive stroke and blue fill” would be created as follows:

    new OpenLayers.Rule({
        filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.EQUAL_TO,
            property: "class",
            value: "someClass"
        }),
        symbolizer: {
            fillColor: "blue",
            strokeWidth: 1,
            strokeColor: "olive"
        }
    })

## OpenLayers.Style

As in CSS page, where you may have many rules– selectors and associated declaration blocks–you are likely to have more than one rule for styling the features of a given map layer. You group `OpenLayers.Rule` objects together in an `OpenLayers.Style` object. A style object is typically constructed with a base symbolizer. When a feature is rendered, the base symbolizer is extended with symbolizers from all rules that apply to the feature.

So, if you want all features to be colored red except for those that have a `class` attribute with the value of `"someClass"` (and you want those features colored blue with an 1px olive stroke), you would create a style that looked like the following:

    var myStyle = new OpenLayers.Style({
        // this is the base symbolizer
        fillColor: "red"
    }, {
        rules: [
            new OpenLayers.Rule({
                filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.EQUAL_TO,
                    property: "class",
                    value: "someClass"
                }),
                symbolizer: {
                    fillColor: "blue",
                    strokeWidth: 1,
                    strokeColor: "olive"
                }
            }),
            new OpenLayers.Rule({elseFilter: true})
        ]
    });

Note

If you don’t include any rules in a style, all of the features in a layer will be rendered with the base symbolizer (first argument to the `OpenLayers.Style` constructor). If you include any rules in your style, only features that pass at least one of the rule constraints will be rendered. The `elseFilter` property of a rule let’s you provide a rule that applies to all features that haven’t met any of the constraints of your other rules.

## OpenLayers.StyleMap

CSS allows for pseudo-classes on selectors. These basically limit the application of style declarations based on contexts such as mouse position, neighboring elements, or browser history, that are not easily represented in the selector. In OpenLayers, a somewhat similar concept is one of “render intent.” Without defining the full set of render intents that you can use, the library allows for sets of rules to apply only under specific contexts.

So, the `active` pseudo-class in CSS limits the selector to the currently selected element (e.g. `a:active`). In the same way, the `"select"` render intent applies to currently selected features. The mapping of render intents to groups of rules is called an `OpenLayers.StyleMap`.

Following on with the above examples, if you wanted all features to be painted fuchsia when selected, and otherwise you wanted the `myStyle` defined above to be applied, you would create an `OpenLayers.StyleMap` like the following:

    var styleMap = new OpenLayers.StyleMap({
        "default": myStyle,
        "select": new OpenLayers.Style({
            fillColor: "fuchsia"
        })
    });

To determine how features in a vector layer are styled, you need to construct the layer with an `OpenLayers.StyleMap`.

With the basics of styling under your belt, it’s time to move on to styling vector layers.

### Navigation

- index
- modules |
- next |
- previous |
- OpenLayers Workshop »
- Vector Layers »
- Understanding Style