I've tried replicating tutorial on how to edit WFS with OpenLayers(https://medium.com/@goldrydigital/wfs-t-with-openlayers-3-16-6fb6a820ac58) but with my own WFS layer from Geoserver. Need some Javascript help finding what's wrong with it.
I managed to load the WFS and my basemap successfully and managed to get the buttons to show up. The buttons appear correctly like in the working example , for some reason the geometry data isn't being saved. Delete button is working fine(whenever i delete a polygon it is deleted and also in the geoserver published layer) but editing, draw polygon, line,point are not working fine ie i am able to draw or edit the polygon or line, but is not saved and whenever i refresh the page it is showing the previous polygon not the edited one nor newly inserted one
The bit of my code for posting is:
var dirty = {};
var formatWFS = new ol.format.WFS();
var formatGML = new ol.format.GML({
// featureNS: 'http://argeomatica.com',
featureNS: 'http://www.opengis.net/cite',
// featureType: 'playa_sample',
featureType: 'NARAYANGARH',
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
srsName: 'EPSG:3857'
});
var transactWFS = function(p,f) {
switch(p) {
case 'insert':
node = formatWFS.writeTransaction([f],null,null,formatGML);
break;
case 'update':
node = formatWFS.writeTransaction(null,[f],null,formatGML);
break;
case 'delete':
node = formatWFS.writeTransaction(null,null,[f],formatGML);
break;
}
s = new XMLSerializer();
str = s.serializeToString(node);
// $.ajax('http://geoserver-dbauszus.rhcloud.com/wfs',{
$.ajax('http://localhost:8080/geoserver/cite/wfs',{
type: 'POST',
dataType: 'xml',
processData: false,
contentType: 'text/xml',
data: str
}).done();
}
$('.btn-floating').hover(
function() {
$(this).addClass('darken-2');},
function() {
$(this).removeClass('darken-2');}
);
$('.btnMenu').on('click', function(event) {
$('.btnMenu').removeClass('orange');
$(this).addClass('orange');
map.removeInteraction(interaction);
select.getFeatures().clear();
map.removeInteraction(select);
switch($(this).attr('id')) {
case 'btnSelect':
interaction = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({color: '#f50057', width: 2})
})
});
map.addInteraction(interaction);
interaction.getFeatures().on('add', function(e) {
props = e.element.getProperties();
if (props.status){$('#popup-status').html(props.status);}else{$('#popup-status').html('n/a');}
if (props.tiendas){$('#popup-tiendas').html(props.tiendas);}else{$('#popup-tiendas').html('n/a');}
coord = $('.ol-mouse-position').html().split(',');
overlayPopup.setPosition(coord);
});
break;
case 'btnEdit':
map.addInteraction(select);
interaction = new ol.interaction.Modify({
features: select.getFeatures()
});
map.addInteraction(interaction);
snap = new ol.interaction.Snap({
source: layerVector.getSource()
});
map.addInteraction(snap);
dirty = {};
select.getFeatures().on('add', function(e) {
e.element.on('change', function(e) {
dirty[e.target.getId()] = true;
});
});
select.getFeatures().on('remove', function(e) {
f = e.element;
if (dirty[f.getId()]){
delete dirty[f.getId()];
featureProperties = f.getProperties();
delete featureProperties.boundedBy;
var clone = new ol.Feature(featureProperties);
clone.setId(f.getId());
transactWFS('update',clone);
}
});
break;
case 'btnDrawPoint':
interaction = new ol.interaction.Draw({
type: 'Point',
source: layerVector.getSource()
});
map.addInteraction(interaction);
interaction.on('drawend', function(e) {
transactWFS('insert',e.feature);
});
break;
case 'btnDrawLine':
interaction = new ol.interaction.Draw({
type: 'LineString',
source: layerVector.getSource()
});
map.addInteraction(interaction);
interaction.on('drawend', function(e) {
transactWFS('insert',e.feature);
});
break;
case 'btnDrawPoly':
interaction = new ol.interaction.Draw({
type: 'Polygon',
source: layerVector.getSource()
});
map.addInteraction(interaction);
interaction.on('drawend', function(e) {
transactWFS('insert',e.feature);
});
break;
case 'btnDelete':
interaction = new ol.interaction.Select();
map.addInteraction(interaction);
interaction.getFeatures().on('change:length', function(e) {
transactWFS('delete',e.target.item(0));
interaction.getFeatures().clear();
selectPointerMove.getFeatures().clear();
});
break;
default:
break;
}
});
This code generates the following XML:
<Transaction xmlns="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
<Update xmlns:feature="http://localhost:8080/geoserver/cite/wfs" typeName="feature:NARAYANGARH">
<Property>
<Name>the_geom</Name>
<Value>
<MultiPolygon xmlns="http://www.opengis.net/gml">
<polygonMember>
<Polygon>
<exterior>
<LinearRing>
<posList>8571089.53392887 3553005.14086169 ...</posList>
</LinearRing>
</exterior>
</Polygon>
</polygonMember>
</MultiPolygon>
</Value>
</Property>
<Property>
<Name>Name</Name>
<Value>153-HRAM0832-KH1716</Value>
</Property>
<Property>
<Name>Shape_Leng</Name>
<Value>554.269739142</Value>
</Property>
<Property>
<Name>Shape_Area</Name>
<Value>16820.1029665</Value>
</Property>
<Property>
<Name>WAQF_ID</Name>
<Value>HRAM0832</Value>
</Property>
....
<Property>
<Name>Longitude</Name>
<Value>76.996029</Value>
</Property>
<Filter xmlns="http://www.opengis.net/ogc">
<FeatureId fid="NARAYANGARH.164"/>
</Filter>
</Update>
</Transaction>
My main problem now is how to make the edit buttons save user edits to the WFS layer? please tell me where the problem is
