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:

And what error do you get from the GeoServer side? What protocol/method do you use to send data from Leaflet to GeoServer? Please be specific - as your question is currently written, there is no way to guess what's going on. (See also: https://stackoverflow.com/help/how-to-ask ) — IvanSanchez, Aug 13 '18 at 14:14
@IvanSanchez I updated the question, I am using WFS protocol to send the data. I am confused here as of how it needs to be sent and retrieved. I am new to this, so not able to put it in the right way. — NMSD, Aug 13 '18 at 14:22
It's still hard to know what's going on - on one hand, nobody but you can experience the problem (see https://stackoverflow.com/help/mcve ). On the other hand, you're not showing the complete error message - what is the WFS response that is causing those `SyntaxError`s? (hint: look at the network tab of the developer tools) — IvanSanchez, Aug 14 '18 at 07:16
@IvanSanchez there is no error for now. That syntax error was my trial to save using WFS protocol, however I removed it as it was wrong. I am not able to figure out how to proceed with the saving of the json to postgis using Geoserver. Any hints or examples might help me to understand. — NMSD, Aug 14 '18 at 07:31
So you're fetching data form GeoServer using WFS, then you're editing stuff with Leaflet.Draw, then you don't know how to send data back to GeoServer? If so, the answer is "WFS-T", maybe in the form of https://github.com/Flexberry/Leaflet-WFST — IvanSanchez, Aug 14 '18 at 07:39
Yes...exactly that's the point. However this question clearly explains my state : https://gis.stackexchange.com/questions/266402/save-leaflet-drawn-features-with-attributes-to-postgis. — NMSD, Aug 14 '18 at 07:50
@IvanSanchez I tried cloning the GitHub and using the libraries. However, I am not sure how to use WFS-T in this raw code. Raw code link: https://pastebin.com/raw/Tbv9AcFs — NMSD, Aug 14 '18 at 10:41
I suggest you edit your question to reflect that. This is no longer "how do I save and retrieve leaflet drawn drawings using PostGIS database?" but rather "what have I done wrong when implementing Leaflet.WFST in this specific example?" — IvanSanchez, Aug 14 '18 at 11:00
@IvanSanchez I found your slides http://ivansanchez.github.io/leaflet-vs-openlayers-slides/#/12 to be very useful. This really helps me to decide what I need to do now. Because I am not able to get the WFS-T plugin example running. Maybe a trial to Openlayer WFST example would be worth a lunch break time. Meanwhile, any help on the leaflet WFS-T would still be my priority. — NMSD, Aug 15 '18 at 09:22

score 1 · Accepted Answer · answered Oct 11 '18 at 11:11

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 :)

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

1 Answers1

Linked