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:
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,
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" }),
styleMap: new OpenLayers.StyleMap({ strokeWidth: 3, strokeColor: "#000000", strokeWidth: 1, fillColor: "#ffffcc", fillOpacity: 1 }),
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" }), ] }) }),
Lower middle income Countries
:new OpenLayers.Layer.Vector("Lower middle income Countries", {
fillColor: "#c2e699",
new OpenLayers.Filter.Comparison({ type: OpenLayers.Filter.Comparison.EQUAL_TO, property: "income_grp", value: "4. Lower middle income" }),
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" }),
new OpenLayers.Layer.Vector("High income Countries", { … fillColor: "#238443",
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" }) ] })
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.
3.145.202.61