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

  • 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 '16 at 7:42
  • which xml file you want? please mention that – user46218 Oct 21 '16 at 3:53
  • the one sent when you make an edit, the one sent back from the server – Ian Turton Oct 21 '16 at 11:10
  • here is my xml file jsfiddle.net/rishe/mzq4cwc1 – user46218 Oct 25 '16 at 5:14
  • that is a getFeature response - what does your client send to GeoServer? – Ian Turton Oct 25 '16 at 7:44
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.

  • 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 '16 at 3:43
  • log file of geoserver is jsfiddle.net/rishe/Lur8e8bg – user46218 Nov 11 '16 at 4:24
  • Anybody please solve the problem – user46218 Nov 16 '16 at 4:00
  • did you try with the correct URI? – Ian Turton Nov 16 '16 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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