3.1. Creating a Synchronized Grid and Map View of WFS Features¶

3.1.1.1. Understanding the Code¶

As we already know, we can configure a grid with a store to tell it where to get its data from. This time we use a GeoExt.data.FeatureStore that we configure with a GeoExt.data.ProtocolProxy to access an OpenLayers.Protocol.WFS.

The synchronization of selections in the grid and on the map is provided by the GeoExt.grid.FeatureSelectionModel, which we use instead of the default selection model:

sm: new GeoExt.grid.FeatureSelectionModel(),

When we add the vector layer to the map, we also have to bind the selection model and the store to it:

app.featureGrid.store.bind(vectorLayer);
app.featureGrid.getSelectionModel().bind(vectorLayer);

Note that this is not necessary if the FeatureStore is configured with a layer. But since we create the store before the layer here, we don’t have access to it yet, so we bind it later.

Bonus Task

The need to manually configure a WFS layer with all the fields and columns makes the application less convenient than we want it to be. Ideally, we could select a layer in the tree, and the grid would automatically display its feature attributes, and the features could be selected in the grid and the map.

Many WMS/WFS implementations, like GeoServer in our case, use the same layer (feature type) names for WMS and WFS. For other WMS implementations, there is a DescribeLayer request which returns an XML document that gives us the link from the WMS layer to an associated WFS feature type or WCS coverage. Once we know the WFS feature type name, we can issue a WFS DescribeFeatureType request to get the fields and data types for the feature attributes. The disadvantage of omitting the DescribeLayer request is that the DescribeFeatureType request will fail for raster layers. This is not a big deal though - in our implementation it only means that the grid and layer will be cleared when we select a raster layer.

For this bonus exercise, we assume that the WMS layer name is the same as the WFS FeatureType name, so we don’t issue a WMS DescribeLayer request. But we do issue a WFS DescribeFeatureType to auto-configure the feature records and the grid.

1. GeoExt has an AttributeStore which holds the field metadata of the feature attributes. It uses OpenLayers.Format.WFSDescribeFeatureType to obtain this information, but discards anything but the field data. For accessing the WFS layer, we also need the feature namespace, so we intercept the read method to obtain all of the DescribeFeatureType response’s raw data. Let’s add the following at the end of our script block:

   var rawAttributeData;
   var read = OpenLayers.Format.WFSDescribeFeatureType.prototype.read;
   OpenLayers.Format.WFSDescribeFeatureType.prototype.read = function() {
       rawAttributeData = read.apply(this, arguments);
       return rawAttributeData;
   };
   

2. The FeatureStore and the grid need to be reconfigured when we select a different layer in the tree. Append the following function to the application code:

   function reconfigure(store, url) {
       var fields = [], columns = [], geometryName, geometryType;
       // regular expression to detect the geometry column
       var geomRegex = /gml:(Multi)?(Point|Line|Polygon|Surface|Geometry).*/;
       var types = {
           // mapping of xml schema data types to Ext JS data types
           "xsd:int": "int",
           "xsd:short": "int",
           "xsd:long": "int",
           "xsd:string": "string",
           "xsd:dateTime": "string",
           "xsd:double": "float",
           "xsd:decimal": "float",
           // mapping of geometry types
           "Line": "Path",
           "Surface": "Polygon"
       };
       store.each(function(rec) {
           var type = rec.get("type");
           var name = rec.get("name");
           var match = geomRegex.exec(type);
           if (match) {
               // we found the geometry column
               geometryName = name;
           } else {
               // we have an attribute column
               fields.push({
                   name: name,
                   type: types[type]
               });
               columns.push({
                   xtype: types[type] == "string" ?
                       "gridcolumn" :
                       "numbercolumn",
                   dataIndex: name,
                   header: name
               });
           }
       });
       app.featureGrid.reconfigure(new GeoExt.data.FeatureStore({
           autoLoad: true,
           proxy: new GeoExt.data.ProtocolProxy({
               protocol: new OpenLayers.Protocol.WFS({
                   url: url,
                   version: "1.1.0",
                   featureType: rawAttributeData.featureTypes[0].typeName,
                   featureNS: rawAttributeData.targetNamespace,
                   srsName: "EPSG:4326",
                   geometryName: geometryName,
                   maxFeatures: 250
               })
           }),
           fields: fields
       }), new Ext.grid.ColumnModel(columns));
       app.featureGrid.store.bind(vectorLayer);
       app.featureGrid.getSelectionModel().bind(vectorLayer);
   }
   

   Note that the way we build the fields and columns arrays results in exactly the same configuration for the medford:parks layer that we manually wrote in the previous exercise.

3. When a layer is selected in the tree by clicking on its name, we want to issue a DescribeFeatureType request. This is done by appending the following code:

   function setLayer(model, node) {
       if(!node || node.layer instanceof OpenLayers.Layer.Vector) {
           return;
       }
       vectorLayer.removeAllFeatures();
       app.featureGrid.reconfigure(
           new Ext.data.Store(),
           new Ext.grid.ColumnModel([])
       );
       var layer = node.layer;
       var url = layer.url.split("?")[0]; // the base url without params
       var schema = new GeoExt.data.AttributeStore({
           url: url,
           // request specific params
           baseParams: {
               "SERVICE": "WFS",
               "REQUEST": "DescribeFeatureType",
               "VERSION": "1.1.0",
               "TYPENAME": layer.params.LAYERS
           },
           autoLoad: true,
           listeners: {
               "load": function(store) {
                   app.featureGrid.setTitle(layer.name);
                   reconfigure(store, url);
               }
           }
       });
   }
   
   Ext.onReady(function() {
       app.tree.getSelectionModel().on(
           "selectionchange", setLayer
       );
   });
   

   Note that this code calls the reconfigure function in the store’s load handler. So when the user selects a layer in the tree, setLayer is called as selectionchange handler on the tree’s selection model, and the DescribeFeatureType request for the selected layer is issued. Once the response is available, reconfigure is called.

4. After saving your changes, point your browser to http://localhost:8080/ol_workshop/map.html. When you have added a layer to the map that is available as WFS also and select it in the tree, the grid will be populated with the layer’s feature attributes, and the features will be rendered on the map.