0

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

9
  • please add the XML being sent to the server, the response sent back from the server and any relevant part of the GeoServer log file to the question
    – Ian Turton
    Oct 20, 2016 at 7:42
  • which xml file you want? please mention that
    – user46218
    Oct 21, 2016 at 3:53
  • the one sent when you make an edit, the one sent back from the server
    – Ian Turton
    Oct 21, 2016 at 11:10
  • here is my xml file jsfiddle.net/rishe/mzq4cwc1
    – user46218
    Oct 25, 2016 at 5:14
  • that is a getFeature response - what does your client send to GeoServer?
    – Ian Turton
    Oct 25, 2016 at 7:44

1 Answer 1

1

It looks like this line is wrong:

<Update xmlns:feature="http://localhost:8080/geoserver/cite/wfs" typeName="feature:NARAYANGARH">

the URI after feature should be the same URI that you set in your workspace for the data store.

However looking at the returned error message from GeoServer should give a fuller idea of what is going wrong.

4
  • in code i have mentioned as typename: 'NARAYANGARH', if i mention typename: 'cite:NARAYANGARH', then in the xml file it is showing as typeName="feature:cite:NARAYANGARH". How to look the returned error message from geoserver?
    – user46218
    Nov 7, 2016 at 3:43
  • log file of geoserver is jsfiddle.net/rishe/Lur8e8bg
    – user46218
    Nov 11, 2016 at 4:24
  • Anybody please solve the problem
    – user46218
    Nov 16, 2016 at 4:00
  • did you try with the correct URI?
    – Ian Turton
    Nov 16, 2016 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.