2

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 ?

  • Perhaps you can look into using preventDefault() or changing #formulaire from a 'submit' type to a 'button' type and just have the script execute on click. – Barrett Jun 9 '16 at 14:10
  • Thanks Barrett. I've add e.preventDefault() after $("#formulaire").submit(function(){ and it prevents refreshing the entire page but then I want my layer (called EP upper) to reload with the new polylines. – Hippipers Jun 9 '16 at 14:34
  • Thats a factor of leaflet. It's not calling a new wms request since you aren't zooming in/out or panning. Try something like viewreset leafletjs.com/reference.html#map-viewreset or redraw() leafletjs.com/reference.html#tilelayer-redraw . I haven't used either of those functions but off the top of my head I think that is the functionality you need. I'll make an answer if it helps close the question as answered. – Barrett Jun 9 '16 at 14:56
2

It seems to me that you could just add the features to the local layer as well as sending them to PostGIS. I'd comment further but the key part of the code is missing from your question.

As an aside why not use the WFS-T functionality built in to GeoServer instead of reinventing it using PHP?

  • Thanks for your reply iant ! I've edited my post with my code for sending my new polylines created. I don't use WFS-T because for each new polyline, I open a form and put in some informations, here "type" and "diameter" and I don't know how to send them to Postgis through Geoserver with WFS-T – Hippipers Jun 9 '16 at 13:19
2

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);
                                        }
                                    })
                                }
                           });
                     });
 });
});
1

Try using preventDefault() or try changing #formulaire from a 'submit' type to a 'button' type and just have the script execute on click.

At that point the data will submit but the updated image won't show since it not calling a new request to geoserver (which was happening when the page was refreshed). You need to find a function in leaflet to force your layer to redraw with the updated image. Try something like viewreset or redraw().

  • Thanks Barrett but I still can't to fix it. redraw() seems to works for tiles, not for my WFS layer – Hippipers Jun 14 '16 at 12:13
  • 1
    @Hippipers You're right I was thinking in terms of static images and not json. Can you clear the EP object, and then call the ajax request again? Maybe you can put the ajax request in a function that you can call as-needed? If the leaflet draw features are clearing off when you submit them, it stands to reason that you need to request the wfs to send you the new features for leaflet to draw. – Barrett Jun 14 '16 at 13:51
  • I think it might do the trick, but I can't put the ajax request in a function. I've tried setting function callAjaxEP(){ before my ajaxEP = in my code upper (and declare my variable EP as a global variable because I need it further, doing var EP; before the new function. And then when I submit the form setting EP.clearLayers();callAjaxEP(); in the success function. But it still doesn't work – Hippipers Jun 15 '16 at 11:50
  • 1
    I have a similar WFS request set in a map.on() function and it fires every time I move the map. I am thinking in circles now so I might not be the best to help you but I still think that you need to send the WFS a new request, remove the old features and have leaflet add the new ones. gis.stackexchange.com/questions/164741/… – Barrett Jun 15 '16 at 15:15
  • Yes, I think you're right ! I will let you know if I resolve my problem. Thanks for your help Barrett ! – Hippipers Jun 16 '16 at 8:39

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.