Discussion :

[Clement_archeo]

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]

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]

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]

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]

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]

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