title: How to make WFS layer editable on leaflet map and editing will reflect on geoserver?
body: <p>code to call WFS layer from geoserver and add on leaflet map.
  I want to make it editable and change will reflect on WFS layer present on geoserver.
  I have spend more than 4 hours trying to figure out how I can do this. I use Leaflet and Leaflet Draw in order to draw news features on my map.</p>
  
  <p>Now I want to be able to edit features of an existing WFS layer (coming from geoserver).</p>
  
  <p>I have searched a lot all around internet and I can not find a clear example of how to make my WFS layer editable.</p>
  
  <pre><code>    var map = L.map('map', {editable: true}).setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
  }).addTo(map);
  map.addControl(drawControl);
  var owsrootUrl = 'http://localhost:8088/geoserver/topp/ows';      
   var defaultParameters = {  
        service : 'WFS',  
        version : '1.0.0',  
        request : 'GetFeature',  
        typeName : 'topp:states',  
        maxFeatures: '50',  
        outputFormat : 'application/json', 
        editable : 'true',
        //cql_filter : "INTERSECTS(the_geom, querySingle('restricted', 'the_geom','cat = 3'))"     
        cql_filter : "PERSONS &gt; 15000000 AND STATE_NAME = 'Texas'"
   };  
   //parameters are defined 
   var parameters = L.Util.extend(defaultParameters);  
    var URL = owsrootUrl + L.Util.getParamString(parameters);  
    var x 
    var response2 = [];
    var WFSLayer=null; 
    var selectedFeature = null;
    var ajax = $.ajax({  
        url : URL,  
        async: false, 
        jsonp: false, 
        jsonpCallback: 'getJson', 
        datatype: 'json',   
        success : function (response) {  
            response2.push(response);
            console.log("response", response)
        WFSLayer = L.geoJson(response, { 
                style: function (feature) {  
                    return {  
                        weight: 4, 
                        color: "red", 
                        opacity: 1, 
                        fillColor: "red", 
                        fillOpacity: 0.5  
                    };  
                }, 
   }).addTo(map)              
       }   
   }); 
  </code></pre>
  
  <p>//i want to make it editable.  </p>