what have I done wrong when implementing Leaflet draw. How to use WFST in this specific example?

Question

I am new to this domain of GeoInformation development. I am following the below pipeline architecture flow to achieve a GIS-based application problem.

PostGIS - GeoServer - Leaflet

I have set up my leaflet client application which composes tiles to a map. I am also using some leaflet plugins (like Draw, zoom) in order to give users the option to mark and to draw on the map.

I am able to draw and get the GeoJSON features of the drawn polygon as shown below:

I am stuck after this part of figuring how do I need to send the polygon request drawn and retrieve the polygon (which is saved) programmatically. I know the answer is WFS-T, but how do I use this in my raw code. Here is the raw code example:

Raw Code link: https://pastebin.com/wCAHxVc0Follow the link

References:

1. https://gis.stackexchange.com/questions/266402/save-leaflet-drawn-features-with-attributes-to-postgis

2. https://github.com/Flexberry/Leaflet-WFST

Answer 1

The best way to understand WFS-T is using GeoServer Demo option (Link: http://localhost:8080/geoserver/web/wicket/bookmarkable/org.geoserver.web.demo.DemoRequestsPage?5). The main problem for me was to figure out how do I insert and update transaction details. Exploring GeoServer Demo gave me the solution to it.

Here is a sample example:

var postdata =  "<wfs:Transaction service="WFS" version="1.0.0"   xmlns:wfs="http://www.opengis.net/wfs"   xmlns:topp="http://www.openplans.org/topp"   xmlns:gml="http://www.opengis.net/gml"   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd http://www.openplans.org/topp http://localhost:8080/geoserver/wfs/DescribeFeatureType?typename=topp:tasmania_roads"> <wfs:Insert>
        <topp:tasmania_roads>
          <topp:the_geom>
            <gml:MultiLineString srsName="http://www.opengis.net/gml/srs/epsg.xml#4326">
              <gml:lineStringMember>
                <gml:LineString>
                  <gml:coordinates decimal="." cs="," ts=" ">
    494475.71056415,5433016.8189323 494982.70115662,5435041.95096618
                  </gml:coordinates>
                </gml:LineString>
              </gml:lineStringMember>
            </gml:MultiLineString>
          </topp:the_geom>
          <topp:TYPE>alley</topp:TYPE>
        </topp:tasmania_roads>   </wfs:Insert> </wfs:Transaction>"

This XML request can later be used to send to GeoServer for manipulation using AJAX call as shown below:

 $.ajax({
    type: "POST",
    url: gs.wfs,
    dataType: "xml",
    contentType: "text/xml",
    data: postdata,
    //TODO: Error handling
    success: function(xml) {  
      //TODO: User feedback
      console.log("Successfully inserted");
    }
  });

For better understanding with an application scenario of WFS-T, try following this URL: https://georepublic.info/en/blog/2012/leaflet-example-with-wfs-t/. This should help you get started with WFS-T. Happy map editing :)