GeoServer Cookbook

In the previous recipe, we just specified a layer to get features from. The OpenLayers strategy, BBOX, created a spatial filter to get only features intersecting the map extent. For common use, you may want to create filters yourself in order to extract specific sets of features from GeoServer.

In this recipe, we will build a map with four layers, each one containing countries according to their mean income. The data source for each layer is the countries' feature type, and we will apply different filters on them.

The resulting map looks like this:

Tip

You can find the full source code for this recipe in the ch01_wfsFilter.html file.

How to do it…

Use the ch01_wfsVersion.html file of the previous recipe; rename it as wfsFilter.html in the same folder. Then, edit the JavaScript part as shown in the following code:
```
<script type="text/javascript">
  function init() {
    map = new OpenLayers.Map({
      div: "myMap",
      allOverlays: true,
```

Remove the Blue Marble layer; we will have only WFS layers here:

      layers: [
        new OpenLayers.Layer.Vector("Low income Countries", {
          strategies: [new OpenLayers.Strategy.BBOX()],
          protocol: new OpenLayers.Protocol.WFS({
            url: "http://localhost/geoserver/wfs",
            featureType: "countries",
            featureNS: "http://www.naturalearthdata.com/",
            geometryName: "geom"
          }),

Change the style for the first request; the features will be drawn with a pale brown fill and a dark outline:

          styleMap: new OpenLayers.StyleMap({
            strokeWidth: 3,
            strokeColor: "#000000",
            strokeWidth: 1,
            fillColor: "#ffffcc",
            fillOpacity: 1
          }),

Now, add a filter to only have low income countries in this layer:

          filter: new OpenLayers.Filter.Logical({
            type: OpenLayers.Filter.Logical.AND,
            filters: [
              new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "income_grp",
                value: "5. Low income"
              }),
            ]
          })
        }),

We will repeat the previous steps for three other layers. Name the first as Lower middle income Countries:
```
        new OpenLayers.Layer.Vector("Lower middle income Countries", {
```
The source of the layer is obviously the same; change the style with a fill as shown in the following line of code:
```
            fillColor: "#c2e699",
```

Then, change the filter to extract countries with a proper value:

              new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "income_grp",
                value: "4. Lower middle income"
              }),

Now, add a new layer for the upper-middle income countries; the only modified line of code is shown here:

        new OpenLayers.Layer.Vector("Upper middle income Countries", {
…
            fillColor: "#78c679",
…
              new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "income_grp",
                value: "3. Upper middle income"
              }),

Eventually, add a last layer for high income countries:

        new OpenLayers.Layer.Vector("High income Countries", {
…
            fillColor: "#238443",

The Filter is a bit more complex as we have two different values for high income countries:

          filter: new OpenLayers.Filter.Logical({
            type: OpenLayers.Filter.Logical.OR,
            filters: [
              new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "income_grp",
                value: " 1. High income: OECD"
              }),
              new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "income_grp",
                value: " 2. High income: nonOECD"
              })
            ]
          })

Save the file and point your browser to it. You should get a map that looks like the one shown in the introduction to this recipe.

How it works…

The first part of the script is quite similar to that used in the previous recipe. We create a Map object and start adding layers to it.

To have the first layer containing only low income countries, we need to set a filter:

filter: new OpenLayers.Filter.Logical({

The filter might contain more criteria, so we need to specify a logical operator to join more criteria. This is required only with a single-criteria filter, as shown in the following code:

  type: OpenLayers.Filter.Logical.AND,

Then, we set the filter type. In this case, an equality type, that is, only records with the value we specify, will be selected:

  filters: [
    new OpenLayers.Filter.Comparison({
      type: OpenLayers.Filter.Comparison.EQUAL_TO,

Eventually, we need to set the attributes on which the filter will be applied and the value to use for filtering records:

      property: "income_grp",
      value: "5. Low income"
    }),
  ]
})

To create the other three layers, we clone the same filter by setting a different value. We create four different layers from the same feature type.

Of course, we need to set a different style for each layer to have a proper distinct representation.

GeoServer Cookbook

By : Stefano Iacovella

GeoServer Cookbook

By: Stefano Iacovella

Overview of this book

Related Content you might be interested in

Current Title:

GeoServer Cookbook

Using WFS nonspatial filters

Tip

How to do it…

How it works…