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