How to collect data via WFS and Popup

Question

I have a map with a WFS-Layer and I am able to add Polygons to my data stored in a PostGIS-database, served with GeoServer (OpenLayers, GeoServer 2.1.4, PostGIS 2.0 for PostgreSQL 9.1).)

How can I add a description to the polygon? E.g., after drawing a polygon I want to specify the crop that are grown there, i.e. insert information into the Postgis-table-column "crop".

I found this example:

http://gis.ibbeck.de/ginfo/apps/OLExamples/OL26/examples/styles_unique_with_group_wfs.html.

The Popup type "edit name and description" would be perfect for my means, unfortunately I can't work out how it works as I have a really hard time understanding its code, greenhorn that I am...

• How is it done?
• Or is there an easier example/ way of how to use a popup to edit your attributes?

---

Here's my WFS-Layer and the tools used so far. The desired column to edit/add Information in the postgis-table "test" is "crop".

function init() {
Save-strategy
var saveStrategy = new OpenLayers.Strategy.Save();

//empty map, bounds are test-layer bounds (EPSG:32647)  
map = new OpenLayers.Map({
    div: "map",
    allOverlays: true,
    maxExtent: new OpenLayers.Bounds(
    653237.69439077,1519879.063165,655229.57939001,1520825.6733868
    )
    });

//WFS-Layer Test= editable data
var test = new OpenLayers.Layer.Vector("Editable Features", {
    strategies: [new OpenLayers.Strategy.Fixed(), saveStrategy],    
    protocol: new OpenLayers.Protocol.WFS({
    url: "http://..../wfs",
    featurePrefix: 'testkf',
    featureNS: "http://.../testkf",
    extractAttributes: true,
    featureType: "test",
    geometryName: "geom",
    })
});

map.addLayer(test);

//Toolbar:
    var panel = new OpenLayers.Control.Panel(
    {'displayClass': 'customEditingToolbar'}
    );

    var draw = new OpenLayers.Control.DrawFeature(
    test, OpenLayers.Handler.Polygon,
    {
    title: "Draw Feature",
    displayClass: "olControlDrawFeaturePolygon",
    multi: true
    });

    var save = new OpenLayers.Control.Button({
    title: "Save Changes",
    trigger: function() {
    if(edit.feature) {
    edit.selectControl.unselectAll();
    }
    saveStrategy.save();
    },
    displayClass: "olControlSaveFeatures"
    });


panel.addControls([save, draw]);
map.addControl(panel);  
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}

EDIT:

So nobody knows anything about this topic or is there another problem with my question? I found another example, however, this is way too complex for me to understand yet: http://dev4.mapgears.com/bdga/bdgaWFS-T.html

This is exactly what I am looking for. Can anyone break it down to me what the steps are to achieve this?

Or is there any way to improve my question?

Answer 1

To all the people who are looking for a way to collect data via Popup as asked in my question, this is how I solved it (same script as in question except the added popup-function and the tool "select"):

function init() {
Save-strategy
var saveStrategy = new OpenLayers.Strategy.Save();

//empty map, bounds are test-layer bounds (EPSG:32647)  
map = new OpenLayers.Map({
    div: "map",
    allOverlays: true,
    maxExtent: new OpenLayers.Bounds(
    653237.69439077,1519879.063165,655229.57939001,1520825.6733868
    )
    });

//WFS-Layer Test= editable data
var test = new OpenLayers.Layer.Vector("Editable Features", {
    strategies: [new OpenLayers.Strategy.Fixed(), saveStrategy],    
    protocol: new OpenLayers.Protocol.WFS({
    url: "http://..../wfs",
    featurePrefix: 'testkf',
    featureNS: "http://.../testkf",
    extractAttributes: true,
    featureType: "test",
    geometryName: "geom",
    })
});

map.addLayer(test);

//add Popup
        var select = new OpenLayers.Control.SelectFeature(test);
            map.addControl(select);
            select.activate();

        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }

        <!-- crucial part is form within popup. careful with linebreaks-->  
        test.events.on({
            featureselected: function(event) {
                var feature = event.feature;
                feature.popup = new OpenLayers.Popup.FramedCloud
                ("pop",
                feature.geometry.getBounds().getCenterLonLat(),
                null,
                '<form action="http://.../myphp.php" method="post" target="new">'+                  
                '<p><div class="label"> entry by:</div> <input name="entryname" type="text" size="30" maxlength="30"  value="'+feature.attributes.entryname+'" ></p><br>'+
                '<input type="submit" name="schreiben" value="Submit" onClick="window.location.reload()"></form>',
                null,
                true 
                );
             map.addPopup(feature.popup);  
            },

            <!-- destroy popup when feature is no longer selected. Prevents showing 2 Popups at the same time-->
            featureunselected: function(event) {
                var feature = event.feature;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        });

//Toolbar:
    var panel = new OpenLayers.Control.Panel(
    {'displayClass': 'customEditingToolbar'}
    );

    var select = new OpenLayers.Control.SelectFeature(test, {
    title: "Select Field",
    displayClass: "olControlSelectFeature"
    });

    var draw = new OpenLayers.Control.DrawFeature(
    test, OpenLayers.Handler.Polygon,
    {
    title: "Draw Feature",
    displayClass: "olControlDrawFeaturePolygon",
    multi: true
    });

    var save = new OpenLayers.Control.Button({
    title: "Save Changes",
    trigger: function() {
    if(edit.feature) {
    edit.selectControl.unselectAll();
    }
    saveStrategy.save();
    },
    displayClass: "olControlSaveFeatures"
    });


panel.addControls([save, draw, select]);
map.addControl(panel);  
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}

For the form within the popup, a separate php-script is needed. Here, the crucial part is:

$res = pg_query ("UPDATE $tabelle SET entryname = '".pg_escape_string ($entryname)."' WHERE gid = '$gid'");

Hope that helps!

Answer 2

I'm not sure how much detail to go into, but the second link you give looks like a good place to start.

First, you need to register some of the editing events for your test layer.

e.g. olWFSRoads.events.register("afterfeaturemodified",'', onRoadModificationEnd);)

This will call the onRoadModificationEnd method once a user finishes editing a feature for this layer. In this method you need to display the popup where the user can enter the details. In the example this method is in a file called bdgaRoads.js.

Then in the save button of the popup you can actually save the feature and any attributes.

I'm a bit pushed for time at the minute but hopefully this should at least send you in the right direction. Let me know if you need more detail on anything.

Answer 3

I'm not sure if you still care about this question, but this might be helpful for somebody.You can see the source code by pressing crtl + u. Hope this helps.