Transférer les coordonnées d'un nouveau point en php

**Clement_archeo** · 24/09/2020, 09h02

Bonjour à vous,
je suis autodidacte en php et débutant en js, mais j'essaie sur mon site d'utiliser leaflet de la meilleure manière qui soit.
Seulement, là, j'ai un petit souci : j'ai une carte qui affiche tous les points issus d'une base de données et, dans un formulaire, je souhaiterais que l'utilisateur puisse créer un point sur la carte et que je récupère la valeur des coordonnées en variable php pour l'enregistrer par la suite.
J'arrive sans problème à récupérer ces valeurs en js, mais pour les passer en php c'est plus dur. Après recherches sur les forum, je les transfère en valeur GET ce qui n'est pas très conventionnel je pense, mais ça marche. Du coup, le visiteur clique sur la carte, je récupère les coordonnées, je rafraichis la page et j'affiche un nouveau point avec ces coordonnées tout en récupérant leur valeur en php.
Le seul souci est que, si le visiteur n'a pas encore créé de nouveau point, le zoom sur la carte fonctionne mal (je ne peux le faire qu'avec la première couche visible). ce qui vient sans doute du fait que la dernière ligne du script ne peut pas se faire.
Bon, vus que je ne sais pas si je suis très clair...voilà un extrait du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
$new_lat=htmlspecialchars($_GET["lat"]);
	$new_lon=htmlspecialchars($_GET["lon"]);
 
?>
<form method="POST" action="add_site-2">
<div class="container">
<h2>Ajouter un site</h2>
<div class="form-row">
<div class="form-group col-lg-6">
<h4> Localisez tout d'abord votre opération sur la carte ci-dessous (fonds IGN et vue satellite disponible) en cliquant sur l'endroit choisi et en attendant que la page se rafraichisse (Attendre "Localisation OK!) </h4>
<?php
//Carte leaflet
// Requête SQL
$req = "SELECT * FROM site";
if(!$connexion->query($req)) {echo "Pb d'accès au CARNET";}
else {
?>
<div id="mapid" style="margin:auto !important;height:800px; z-index:0; display:inline-block !important; width: 100%;"></div>
<script type="text/javascript"> 
var mymap = L.map('mapid',{center:[47, 2], zoom: 6});
var carte1 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiY2xlbWFyY2hlbyIsImEiOiJjanRwbDk1ZW8wNTg4NDNrMDh6bTE5ZXBxIn0.uazs_LYFg4-sbqgBwZMqIw'
}).addTo(mymap),
carte2 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.satellite',
    accessToken: 'pk.eyJ1IjoiY2xlbWFyY2hlbyIsImEiOiJjanRwbDk1ZW8wNTg4NDNrMDh6bTE5ZXBxIn0.uazs_LYFg4-sbqgBwZMqIw'
});
function layerUrl(key, layer) {
                return "http://wxs.ign.fr/" + key
                    + "/geoportail/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&"
                    + "LAYER=" + layer + "&STYLE=normal&TILEMATRIXSET=PM&"
                    + "TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fjpeg";
            }
        var carte3 = L.tileLayer(
            layerUrl(
                "fg4kp0ilbj1rp1kopr92lh22", "GEOGRAPHICALGRIDSYSTEMS.MAPS"
            ),
            {attribution: '&copy; <a href="http://www.ign.fr/">IGN</a>'}
        );
var myIcon = L.icon({
<?php 
echo "iconUrl:'".$chmemin_image."/rond1/',";
?>
iconSize:[10, 10],
popupAnchor:[0,-15],
});
var sites = L.layerGroup().addTo(mymap);
<?php
//définition du popup
foreach ($connexion->query($req) as $row){
$row  = array_map($hsc, $row); // échappement de toutes les valeurs
$notice = '<a href='.$chemin_image.'sites/Notice_site?id='.$row['ID_Site'].' target=_blank>Notice</a>';
$donnees= 'L.marker(['.$row['Lat'].', '.$row['Lon'].'],{icon: myIcon}).bindPopup("'.$row['Commune'].'<br>'.$row['Lieu_dit'].'<br>'.$notice.'").addTo(mymap);';
echo $donnees;}
?>
var baseMaps = {
    "Vue carte": carte1,
    "Vue satellite": carte2,
	"Vue IGN" : carte3
};
var overlayMaps = {
    "sites": sites
};
L.control.layers(baseMaps, overlayMaps).addTo(mymap);
 
//Ajout d'un nouveau point et récupération de ses coordonnées en GET
var layerGroup=L.layerGroup().addTo(mymap);
mymap.on('click', function(e){
	layerGroup.clearLayers();
	var poplocation=e.latlng;
	var lat=e.latlng.lat;
	var lon=e.latlng.lng
	top.document.location = "<?php echo $chemin_image;?>/site/add_site/?lat="+lat+"&lon="+lon;
	var marker=L. marker([e.latlng.lat, e.latlng.lng]).addTo(layerGroup);
	});
	var marker=L. marker([<?php echo $new_lat.",".$new_lon;?>]).addTo(mymap).bindPopup('Localisation OK !', {autoClose:false}).openPopup();
 
</script>
 
<?php
}
if (empty($new_lat)){$latitude='Placeholder="Sélectionnez ci-dessus"';} else {$latitude='Value="'.$new_lat.'"';}
if (empty($new_lon)){$longitude='Placeholder="Sélectionnez ci-dessus"';} else {$longitude='Value="'.$new_lon.'"';}
?>
<div class="form-row">
<div class="form-group col-md-6"><label>Latitude*</label> : <input type="decimal" class="form-control" required="required" name="Lat" <?php echo $latitude;?>></div>
<div class="form-group col-md-6"><label>Longitude*</label> : <input type="decimal" required="required" class="form-control" name="Lon" <?php echo $longitude;?>></div>
</div>	
</div>

Du coup, est-ce qu'une bonne âme pourrait me dire si c'est la bonne méthode pour passer les coordonnées et, si oui, comment résoudre ce bug si un nouveau point n'est pas créé.
Merci beaucoup d'avance

**NoSmoking** · 28/09/2020, 17h53

Bonjour,

je souhaiterais que l'utilisateur puisse créer un point sur la carte et que je récupère la valeur des coordonnées en variable php pour l'enregistrer par la suite.

Au double click, par exemple, sur la carte, tu récupères la positon cliquée et tu proposes via une boîte de dialogue l'enregistrement, ou non, du point.

J'arrive sans problème à récupérer ces valeurs en js, mais pour les passer en php c'est plus dur.

A la validation tu passes au serveur les données lat et lng via Ajax.

Du coup, le visiteur clique sur la carte, je récupère les coordonnées, je rafraichis la page et j'affiche un nouveau point avec ces coordonnées tout en récupérant leur valeur en php.

Est-il vraiment nécessaire de rafraîchir la page alors que tu peux directement ajouter ton marker sur la map ?

Le seul souci est que, si le visiteur n'a pas encore créé de nouveau point, (...)

Pas tout compris sur le coup !

**Clement_archeo** · 29/09/2020, 08h05

Merci beaucoup pour ta réponse.

étant très débutant en js, le terme d'Ajax est un peu un gros mot pour moi et j'esquivais jusqu'à maintenant.
ceci dit, je vais essayer de voir comment faire avec cette solution.
Si tu as des explications plus concrètes en attendant, je suis aussi preneur

**Clement_archeo** · 29/09/2020, 11h16

Bonjour,
en fait je rafraichissais la page pour pouvoir réutiliser les données en $GET dans mon formulaire, mais c'est pas grave.
J'ai donc essayé via AJAX en modifiant le code comme suit :
j'ai rajouté ce header :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<head>   
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>

et j'ai modifié le script de création de point :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//Ajout d'un nouveau point et récupération de ses coordonnées
var layerGroup=L.layerGroup().addTo(mymap);
mymap.on('click', function(e){
	layerGroup.clearLayers();
	var poplocation=e.latlng;
	var lat=e.latlng.lat;
	var lon=e.latlng.lng;
	var marker=L. marker([e.latlng.lat, e.latlng.lng]).addTo(layerGroup);
	});
	$.ajax({
    type: 'POST',
    url: 'add_site-2',                
    data: {lat:lat,lon:lon},
 success: function(data) { 
 
            },
 
});

Ensuite, je récupère les données via :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if(isset($_POST['lat']))    { $Lat=$_POST['lat'];}
else    {  $Lat="";}
if(isset($_POST['lon']))    { $Lon=$_POST['lon'];}
else    {  $Lon="";}

...mais malheureusement ça ne marche pas. Il faut que je précise que mon site fonctionne sous wordpress et c'est pour ça que je ne renvoie pas vers un fichier.php, mais vers une page qui elle même possède un shortcode qui renvoie du php.

ai-je fais des erreurs ? ou un idée ?

**NoSmoking** · 30/09/2020, 09h59

Avec une bonne indentation du code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//Ajout d'un nouveau point et récupération de ses coordonnées
var layerGroup = L.layerGroup()
    .addTo(mymap);
mymap.on('click', function (e) {
    layerGroup.clearLayers();
    var poplocation = e.latlng;
    var lat = e.latlng.lat;
    var lon = e.latlng.lng;
    var marker = L.marker([e.latlng.lat, e.latlng.lng])
        .addTo(layerGroup);
});
 
$.ajax({
    type: 'POST',
    url: 'add_site-2',
    data: {
        lat: lat,
        lon: lon
    },
    success: function (data) {},
});

on peut voir que ton appel Ajax n'est pas réalisé dans ton événement click mais au chargement du script.

**Clement_archeo** · 30/09/2020, 11h06

Du coup, si j'ai bien compris ta remarque, j'ai modifié le code pour que tout se passe au click, ce qui donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//Ajout d'un nouveau point et récupération de ses coordonnées
var layerGroup = L.layerGroup()
    .addTo(mymap);
mymap.on('click', function (e) {
    layerGroup.clearLayers();
    var poplocation = e.latlng;
    var lat = e.latlng.lat;
    var lon = e.latlng.lng;
    var marker = L.marker([e.latlng.lat, e.latlng.lng])
        .addTo(layerGroup);
	$.ajax({
		type: 'POST',
		url: 'add_site-2',
		data: {
        lat: lat,
        lon: lon
		},
		success: function (data) {},
	});
});

Mais malheureusement, ça ne fonctionne pas non plus. Je suis désolé...je suis débutant en code... Merci en tout cas

**NoSmoking** · 30/09/2020, 16h52

Ce que tu as écris semble correct.

Quel est ton environnement de développement, si tu est en protocole file:/// tu vas obtenir un message d'erreur dans la console du type, sous Chrome par exemple :

Access to XMLHttpRequest at 'file:///chemin_de_ton_fichier from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

Il te faut donc passer par un serveur local, WAMP ou autre et si tu travailles sur Chrome alors tu peux toujours lance r le navigateur avec la directive --allow-file-access-from-files, par exemple

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

**Clement_archeo** · 30/09/2020, 17h20

je ne comprends pas trop non plus car je suis pour l'instant sur la version locale de mon site développée avec Wamp.
Je ne pas de tel message d'erreur dans la console

**NoSmoking** · 30/09/2020, 18h43

Vérifie quand même que tu lis bien, côté serveur tes données en $_POST.

Modifie ton appel Ajax comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
    method: "POST",
    url: "add_site-2",
    data: {
      "lat": lat,
      "lng": lon
    }
  })
  .done(function (data) {
    console.log("Retour :", data);
  })
  .fail(function () {
    console.log("Erreur :", arguments);
  });

et dans ton fichier serveur met un simple

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?php
var_dump($_POST);
?>

regarde le retour dans la console, tu peux même observer ce qui est envoyé dans l'onglet réseau.

**Clement_archeo** · 30/09/2020, 21h02

merci de ton concours,
je vais regarder ça demaine.
Autrement, je me demande si ça ne vient pas aussi du fait que mon site soit sous wordpress. cf : https://capitainewp.io/formations/de...ordpress-ajax/
...à creuser...

**Clement_archeo** · 01/10/2020, 09h43

bon, après plusieurs recherches sur l'intégration d'Ajax dans Wordpress, je suis arrivé à ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
if(isset($_POST['lat']))    { $lat=$_POST['lat'];}
else    {  $lat="";}
if(isset($_POST['lon']))    { $lon=$_POST['lon'];}
else    {  $lon="";}
 
?>
 
<form method="POST" action="add_site-2">
<div class="container">
<h2>Ajouter un site</h2>
<div class="form-row">
<div class="form-group col-lg-6">
<h4> Localisez tout d'abord votre opération sur la carte ci-dessous (fonds IGN et vue satellite disponible) en cliquant sur l'endroit choisi et en attendant que la page se rafraichisse (Attendre "Localisation OK!) </h4>
<?php
//Carte leaflet
// Requête SQL
$req = "SELECT * FROM site";
if(!$connexion->query($req)) {echo "Pb d'accès au CARNET";}
else {
?>
<div id="mapid" style="margin:auto !important;height:800px; z-index:0; display:inline-block !important; width: 100%;"></div>
<script type="text/javascript"> 
var mymap = L.map('mapid',{center:[47, 2], zoom: 6});
var carte1 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiY2xlbWFyY2hlbyIsImEiOiJjanRwbDk1ZW8wNTg4NDNrMDh6bTE5ZXBxIn0.uazs_LYFg4-sbqgBwZMqIw'
}).addTo(mymap),
carte2 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.satellite',
    accessToken: 'pk.eyJ1IjoiY2xlbWFyY2hlbyIsImEiOiJjanRwbDk1ZW8wNTg4NDNrMDh6bTE5ZXBxIn0.uazs_LYFg4-sbqgBwZMqIw'
});
function layerUrl(key, layer) {
                return "http://wxs.ign.fr/" + key
                    + "/geoportail/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&"
                    + "LAYER=" + layer + "&STYLE=normal&TILEMATRIXSET=PM&"
                    + "TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fjpeg";
            }
        var carte3 = L.tileLayer(
            layerUrl(
                "fg4kp0ilbj1rp1kopr92lh22", "GEOGRAPHICALGRIDSYSTEMS.MAPS"
            ),
            {attribution: '&copy; <a href="http://www.ign.fr/">IGN</a>'}
        );
var myIcon = L.icon({
<?php 
echo "iconUrl:'".$chmemin_image."/rond1/',";
?>
iconSize:[10, 10],
popupAnchor:[0,-15],
});
var sites = L.layerGroup().addTo(mymap);
<?php
//définition du popup
foreach ($connexion->query($req) as $row){
$row  = array_map($hsc, $row); // échappement de toutes les valeurs
$notice = '<a href='.$chemin_image.'sites/Notice_site?id='.$row['ID_Site'].' target=_blank>Notice</a>';
$donnees= 'L.marker(['.$row['Lat'].', '.$row['Lon'].'],{icon: myIcon}).bindPopup("'.$row['Commune'].'<br>'.$row['Lieu_dit'].'<br>'.$notice.'").addTo(mymap);';
echo $donnees;}
?>
var baseMaps = {
    "Vue carte": carte1,
    "Vue satellite": carte2,
    "Vue IGN" : carte3
};
var overlayMaps = {
    "sites": sites
};
L.control.layers(baseMaps, overlayMaps).addTo(mymap);
 
//Ajout d'un nouveau point et récupération de ses coordonnées
var layerGroup = L.layerGroup()
    .addTo(mymap);
mymap.on('click', function (e) {
    layerGroup.clearLayers();
    var poplocation = e.latlng;
    var lat = e.latlng.lat;
    var lon = e.latlng.lng;
 
	$.ajax({
			url : 'url de cette page qui contient la carte', 
			method : 'POST', 
			data : {
				lat : lat,
				lon : lon
			}, 
 
			success : function( data ) { // en cas de requête réussie
				// Je procède à l'insertion
				var content = $( data ).find( '#content' ).html();
				$( '#content' ).html( content );
				//et j'insère le nouveau point
				var marker = L.marker([e.latlng.lat, e.latlng.lng])
                               .addTo(layerGroup);
			},
			error : function( data ) { // en cas d'échec
				// Sinon je traite l'erreur
				console.log( 'Erreur…' );
			}
		});
 
 
 
 
});
 
 
 
 
 
</script>
 
<?php
}
if (empty($lat)){$latitude='Placeholder="Sélectionnez ci-dessus svp"';} else {$latitude='Value="'.$lat.'"';}
if (empty($lon)){$longitude='Placeholder="Sélectionnez ci-dessus svp"';} else {$longitude='Value="'.$lon.'"';}
?>
<div class="form-row">
<div class="form-group col-md-6"><label>Latitude*</label> : <input type="decimal" class="form-control" name="lat" <?php echo $latitude;?>></div>
<div class="form-group col-md-6"><label>Longitude*</label> : <input type="decimal" class="form-control" name="lon" <?php echo $longitude;?>></div>
</div>	
</div>

Du coup, vu que ça fonctionne, ça recharge le #content en incluant les valeurs transmises en ajax. Le seul souci est que cette carte est dans un formulaire, donc le rechargement efface les valeurs déjà rentrées.

**Clement_archeo** · 01/10/2020, 11h46

En fait, non, ça ne fonctionne pas bien.
La modification du content en entier créé des bugs
Serait-il possible via ajax d'insérer autrement les valeurs directement dans les input "latitude" et "longitude" présent sur le formulaire ?

**Clement_archeo** · 01/10/2020, 12h39

bon ben je fais un peu les questions et les réponses...
j'ai détourner le problème en changeant le code Ajax comme suit pour cibler la partie de formulaire chargeant les coordonnées :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$.ajax({
			url : '<?php echo $chemin_image;?>sites/add_site', 
			method : 'POST', 
			data : {
				lat : lat,
				lon : lon
			}, 
 
			success : function( data ) { // en cas de requête réussie
				// Je procède à l'insertion
				var content = $( data ).find( '#coordonnees' ).html();
				$( '#coordonnees' ).html( content );
				//et j'insère le nouveau point
				var marker = L.marker([e.latlng.lat, e.latlng.lng])
				.addTo(layerGroup).bindPopup('Localisation OK !', {autoClose:false}).openPopup();
			},
			error : function( data ) { // en cas d'échec
				// Sinon je traite l'erreur
				console.log( 'Erreur…' );
			}
		});

et les lignes du formulaires avec les coordonnées sont de ce type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div class="form-row" id="coordonnees">
<?php
if(isset($_POST['lat']))    { $lat=$_POST['lat'];}
else    {  $lat="";}
if(isset($_POST['lon']))    { $lon=$_POST['lon'];}
else    {  $lon="";}	
if (empty($lat)){$latitude='Placeholder="Sélectionnez ci-dessus svp"';} else {$latitude='Value="'.$lat.'"';}
if (empty($lon)){$longitude='Placeholder="Sélectionnez ci-dessus svp"';} else {$longitude='Value="'.$lon.'"';}
?>
<div class="form-group col-md-6"><label>Latitude*</label> : <input type="decimal" class="form-control" name="lat" <?php echo $latitude;?>></div>
<div class="form-group col-md-6"><label>Longitude*</label> : <input type="decimal" class="form-control" name="lon" <?php echo $longitude;?>></div>
</div>

tout fonctionne tout bien, même si je sens que ce n'est pas conventionnel.
Est-ce que vous pourriez me dire si je me suis compliqué la vie avant de mettre le sujet en résolu ?

**Clement_archeo** · 01/10/2020, 15h11

petite précision pour info, mon précédent code marchait en local, mais pas en ligne il ne faut pas oublier de rajouter la première ligne du code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
jQuery( document ).ready( function($) {
	$.ajax({
			url : '<?php echo $chemin_image;?>sites/add_site', 
			method : 'POST', 
			data : {
				lat : lat,
				lon : lon
			}, 
 
			success : function( data ) { // en cas de requête réussie
				// Je procède à l'insertion
				var content = $( data ).find( '#coordonnees' ).html();
				$( '#coordonnees' ).html( content );
				//et j'insère le nouveau point
				var marker = L.marker([e.latlng.lat, e.latlng.lng])
				.addTo(layerGroup).bindPopup('Localisation OK !', {autoClose:false}).openPopup();
			},
			error : function( data ) { // en cas d'échec
				// Sinon je traite l'erreur
				console.log( 'Erreur…' );
			}
		});
		});

**NoSmoking** · 02/10/2020, 10h21

Je te repose la question :

Est-il vraiment nécessaire de rafraîchir la page alors que tu peux directement ajouter ton marker sur la map ?

la réponse est non, ta requête POST envoie les données côté serveur pour être enregistrées en base, et comme ces données sont déjà disponibles côté client il te suffit de mettre à jour ce que tu veux, ajout du marker ...

Tu peux éventuellement retourner et récupérer un message de bon traitement avant de faire le travail.
Donc côté serveur la page appelée devrait simplement faire l'enregistrement et te renvoyer un statut du traitement OK/NOK, réponse que tu prends en compte dans le success.

**Clement_archeo** · 05/10/2020, 14h42

en fait, là, maintenant, je ne recharge juste que deux lignes de mon formulaires afin que soient insérées les nouvelles coordonnées récupérées du nouveau marqueur créé afin que l'utilisateur sache que c'est bien rentré.
Merci des coups de main en tout cas.

Transférer les coordonnées d'un nouveau point en php [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager