Discussion :

[Clement_archeo]

Bonjour à vous,
je débute vraiment en programmation et développement web et ce n'est pas mon métier.
Toutefois, sur mon site internet, j'aimerais pouvoir intégrer une carte leaflet avec des données qui sont dans une base SQL.
J'ai déjà réussi à intégrer une carte avec des points manuellement (même si je ne connais rien à js).
Je sais comment faire ma requête en PHP pour extraire les données nécessaires pour la carte.
Mais par contre, j'ai du mal à capter le protocole exact pour faire la jonction entre les deux (en passant par un layer GeoJSON si j'ai bien compris).
J'ai bien essayé de comprendre en regardant d'autres messages, mais j'avoue que je ne serais pas contre un petit coup de main.
Merci d'avance à la bonne âme qui lira et répondra à ce message !

[NoSmoking]

Bonjour,
tu peux effectivement afficher des données en utilisant la méthode GeoJSON de l'API^(*), avec la contrainte du fichier proprement formaté ou encore faire une requête via Ajax pour afficher les données en retour sous forme d'un objet JSON.

^(*) Il existe sur le site Leaflet : Using GeoJSON with Leaflet

[Clement_archeo]

Bonjour,
merci de ta réponse.
De mon côté, j'ai essayé de faire ça exclusivement en PHP
ça fonctionne très bien et je me demande du coup si c'est suffisamment catholique...
je joins le code :

Code html :

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
 <?php
$serveur = "localhost";
        $login = "root";
        $pass = "";
        
        try{
                $connexion = new PDO("mysql:host=$serveur;dbname=archeodunum_local", $login,$pass,array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
                $connexion->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
                                        
                }
        catch(PDOException $e){
                echo 'Echec : ' .$e->getMessage();
        }
// 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:500px;"></div>
<script type="text/javascript"> 
var mymap = L.map('mapid').setView([47, 3.2], 5);
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.eyJ1IjoiY2xlbWFyY2hlbyIsImEiOiJjanRwbHZyeDAwNWllNGVzN3AzbzhqdmQwIn0.E6LBtHytsZyibHxsWqUXjA'
}).addTo(mymap);
<?php
foreach ($connexion->query($req) as $row){
$donnees= 'var '.$row['Nom_Site'].' = L.marker(['.$row['Lat'].', '.$row['Lon'].']).bindPopup("'.$row['Nom_Site'].'").addTo(mymap);';
echo $donnees;}
?>
</script>

[NoSmoking]

Il eut été préférable de mettre le code HTML généré pour voir, mais je dirais que ton code est une des façons de faire que l'on rencontre.

[Clement_archeo]

le code html généré est de ce type (sachant que c'est un premier test avec de fausses données) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="entry-content">
			<div id="mapid" style="margin:auto !important;height:500px;"></div>
<script type="text/javascript"> 
var mymap = L.map('mapid').setView([47, 3.2], 5);
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.eyJ1IjoiY2xlbWFyY2hlbyIsImEiOiJjanRwbHZyeDAwNWllNGVzN3AzbzhqdmQwIn0.E6LBtHytsZyibHxsWqUXjA'
}).addTo(mymap);
var Auxerre = L.marker([48.000000, 4.000000]).bindPopup("Auxerre").addTo(mymap);var Chateauroux = L.marker([47.000000, 2.000000]).bindPopup("Chateauroux").addTo(mymap);var Angoulême = L.marker([46.000000, 0.000000]).bindPopup("Angoulême").addTo(mymap);var Vivonne = L.marker([46.423494, 0.254745]).bindPopup("Vivonne").addTo(mymap);</script>
 
					</div>

[NoSmoking]

Il n'est peut être pas nécessaire que tu références une variable pour chaque marqueur sauf si tu veux en faire une manipulation particulière.

Code php :

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

1
2
3
4
foreach ($connexion->query($req) as $row){
  L.marker(['.$row['Lat'].', '.$row['Lon'].']).bindPopup("'.$row['Nom_Site'].'").addTo(mymap);';
  echo $donnees;
}

cela t'éviteras, si tu as un nom de ville comportant un espace, un -, un + ... , de générer une erreur.

Tu pourrais également faire en sorte d'avoir des données de la forme

Code :

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

1
2
3
4
var data = [
  { "nom": "Auxerre", "lat": 48.0, "lng": 4.0},
  { "nom": "Chateauroux", "lat": 47.0, "lng": 2.8}
];

et ensuite boucler sur ces données du type

Code :

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

1
2
3
4
5
data.forEach(function(elem) {
  L.marker([elem.lat, elem.lng])
    .bindPopup( elem.nom)
    .addTo(mymap);
});