How to collect data via WFS and Popup
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!