Leaflet – How to Automatically Refresh WFS Layer When Adding Data in PostGIS

Question

I’ve built a web-sig based on PostGIS, GeoServer and Leaflet.
My polylines, …, are stored in PostGIS and I call them through GeoServer in Leaflet as WFS layers like :

var defaultParameters = {
    service : 'WFS',
    version : '1.0.0',
    request : 'GetFeature',
    typeName : 'database:table’,
    outputFormat : 'text/javascript',
    format_options : 'callback:callEP', 
    srsName : 'EPSG:4326',
    };

var parameters = L.Util.extend(defaultParameters);

var ajaxEP = $.ajax({
    url : owsrootUrlAssainissement + L.Util.getParamString(parameters),
    dataType : 'jsonp',
    jsonpCallback: 'callEP',
    success : function (layerEP) {
        EP = L.geoJson(layerEP, { 
            style: function (feature) {
                return {
                    color: "lime",
                    fillColor: 'lime',
                    opacity: 1,
                    weight: 3,
                };
            },
     });
   }
});

I’m also using Leaflet draw to draw new polylines and I send them into PostGIS using AJAX and PHP :

map.on('draw:created', function (e) { 
        layerEP = e.layer;
        var coordinatesEP = layerEP.getLatLngs(); 
        var sql_coordinatesEP =[]; 
        for (var i in coordinatesEP){
                sql_coordinatesEP.push(coordinatesEP[i].lng+" "+coordinatesEP[i].lat);
            }

        dialog_create_EP.dialog("open");
                             
        $("#formulaire").submit(function(){
                $('#coordsCreateEP').val(sql_coordinatesEP); 
                $('#longueurCreateEP').val(longueurEP);

                                    var formData = {
                                      'type' : $('select[name=type]').val(),
                                      'diametre' : $('select[name=diametre]').val(),
                                      'coordsCreateEP' : $('#coordsCreateEP').val(),
                                    };
                                    $.ajax({
                                      url:'create_EP.php',
                                      type: 'POST',
                                      data: formData,
                                      success : function(data, response) {
                                        dialog_create_EP.dialog("close");
                                    }
                               });
                         });
    });
});

php :

$type = $_POST['type'];
$diametre = $_POST['diametre'];
$coordsCreateEP = $_POST['coordsCreateEP'];

try
{
   $bdd = new PDO("pgsql:host=$host;dbname=$database",$user,$pass);
   $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$req = $bdd->prepare('INSERT INTO database.table(type,diametre,coords) VALUES(?,?,?)');


$req->execute(array($type,$diametre,$coordsCreateEP));

   }
catch(Exception $e)
{
    echo "Connection a la BDD impossible : ", $e->getMessage();
 die();
}

Everything works fine, and when I’m sending new polylines via AJAX, my page is reloaded and my new polylines appears when I’m adding their layer.

Ok, now, What I would like to do would be to not refresh all my page when sending new polylines but just the layer with the new polylines. So is there a way to refresh a Leaflet layer automatically when adding data into PostGIS without reloading all my page ?

Answer 1

So finally, here is the solution I used thanks to Barrett ! If it can help someone else here is the code :

var defaultParameters = {
    service : 'WFS',
    version : '1.0.0',
    request : 'GetFeature',
    typeName : 'database:table’,
    outputFormat : 'text/javascript',
    format_options : 'callback:callEP', 
    srsName : 'EPSG:4326',
    };

var parameters = L.Util.extend(defaultParameters);

var ajaxEP = $.ajax({
    url : owsrootUrlAssainissement + L.Util.getParamString(parameters),
    dataType : 'jsonp',
    jsonpCallback: 'callEP',
    success : function (layerEP) {
        EP = L.geoJson(layerEP, { 
             style : styleEP  
             });
            }
    });

function styleEP (feature){
    return {
                    color: "lime",
                    fillColor: 'lime',
                    opacity: 1,
                    weight: 3,
                };
}

map.on('draw:created', function (e) { 
    layerEP = e.layer;
    var coordinatesEP = layerEP.getLatLngs(); 
    var sql_coordinatesEP =[]; 
    for (var i in coordinatesEP){
            sql_coordinatesEP.push(coordinatesEP[i].lng+" "+coordinatesEP[i].lat);
        }

    dialog_create_EP.dialog("open");

    $("#formulaire").submit(function(){
            $('#coordsCreateEP').val(sql_coordinatesEP); 
            $('#longueurCreateEP').val(longueurEP);

                                var formData = {
                                  'type' : $('select[name=type]').val(),
                                  'diametre' : $('select[name=diametre]').val(),
                                  'coordsCreateEP' : $('#coordsCreateEP').val(),
                                };
                                $.ajax({
                                  url:'create_EP.php',
                                  type: 'POST',
                                  data: formData,
                                  success : function(data) {
                                    dialog_create_EP.dialog("close");
                                    map.removeLayer(EP);
                                    $.ajax({
                                            url : owsrootUrlAssainissement + L.Util.getParamString(parametersEP),
                                            dataType : 'jsonp',
                                            jsonpCallback: 'callEP',
                                            success : function (layerEP) {
                                            EP = L.geoJson(layerEP, {
                                                style : styleEP
                                            });
                                            map.addLayer(EP);
                                        }
                                    })
                                }
                           });
                     });
 });
});