I have a leaflet map in which I can draw some polylines and send their data and coordinates in a PostGIS database with Ajax and Php.

When I've created a polyline and send their information in my database, everything works fine.

But when drawing a second polyline, it sends to Postgis one line with the new data and coordinates of the previous polyline drawned, and another line with the new data and new coordinates.

Here an example :

enter image description here

I tried to clear my layer in the ajax success but it doesn't works.

Here is my code :

var drawEPhaut = new L.Draw.Polyline(map);

$('#draw_EPhaut').click(function() { 

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



                                    var formData = {
                                        'diametre' : $('input[name=diametre]').val(),
                                        'materiau' : $('select[name=materiau]').val(),
                                        'classe' : $('select[name=classe]').val(),
                                        'coordsCreateEPhaut' : $('#coordsCreateEPhaut').val(),   

                                        type: 'POST',
                                        data: formData,
                                        success : function() {
                                            //layerEP.clearLayers();   //doesn't work

My dialog box for the form :

var dialog_create_EPhaut = $("#dialog_create_EPhaut").dialog({
                      autoOpen: false,
                      show: {
                              effect: "blind",
                              duration: 1000
                      hide: {
                              effect: "blind",
                              duration: 1000
                      height: 300,
                      width: 450,
                      modal: true,
                      position: {
                            my: "center center",
                            at: "center center",
                            of: "#map"
                      buttons: {
                        Ajouter: function() {
                        Annuler: function() {

The form :

<div id="dialog_create_EPhaut" title="Informations sur la conduite EP">   
      <form name="formulaire" id="formulaire">

          <p><label>Diamètre :</label></br>

            <!--INPUT type="number" id="diametre" name="diametre"-->

              <SELECT id="diametre" name="diametre">
                  <OPTION VALUE="0">0</OPTION>
                  <OPTION VALUE="60">60</OPTION>
                  <OPTION VALUE="80">80</OPTION>
                  <OPTION VALUE="100">100</OPTION>
                  <OPTION VALUE="150">150</OPTION>
                  <OPTION VALUE="200">200</OPTION>
                  <OPTION VALUE="250">250</OPTION>
                  <OPTION VALUE="300">300</OPTION>
                  <OPTION VALUE="350">350</OPTION>
                  <OPTION VALUE="400">400</OPTION>
                  <OPTION VALUE="450">450</OPTION>
                  <OPTION VALUE="500">500</OPTION>                                              

          <p><label>Matériau :</label></br>

              <SELECT id="materiau" name="materiau">
                  <OPTION VALUE="PVC">PVC</OPTION>
                  <OPTION VALUE="FONTE">FONTE</OPTION>
                  <OPTION VALUE="BETON">BETON</OPTION> 
                  <OPTION VALUE="PEHD">PEHD</OPTION> 
                  <OPTION VALUE="AUTRE">AUTRE</OPTION>
                  <OPTION VALUE="NR">NON RENSEIGNE</OPTION>                                             

          <p><label>Classe de précision :</label></br>

              <SELECT id="classe" name="classe">
                  <OPTION VALUE="A">A</OPTION>
                  <OPTION VALUE="B">B</OPTION>
                  <OPTION VALUE="C">C</OPTION>                                              

          <input type="hidden" name="longueurCreateEPhaut" id="longueurCreateEPhaut"/> 
          <input type="hidden" name="coordsCreateEPhaut" id="coordsCreateEPhaut"/> 


And my Php file :


// Parametre de  connection  
$host = 'localhost';
$database = 'db';
$user = '******';
$pass = '******';
$port = '5432';

$dns = 'pgsql:host='.$host .';port='.$port .';dbname='.$database;

// récupération des variables

$diametre = $_POST['diametre'];
$materiau = $_POST['materiau'];
$classe = $_POST['classe'];
$coordsCreateEPhaut = $_POST['coordsCreateEPhaut'];

    $bdd = new PDO("pgsql:host=$host;dbname=$database",$user,$pass);

//Requete d'insertion

$req = $bdd->prepare('INSERT INTO city.reseau(diametre,materiau,classe,coords) VALUES(?,?,?,?,?)');


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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.