Afficher des informations issues d'une BdD

Version imprimable

26/03/2019, 17h33
Clement_archeo

Afficher des informations issues d'une BdD

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 !
27/03/2019, 09h10
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

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:

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>

27/03/2019, 10h51
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.

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

Code:

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>

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:

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:

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:

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

28/03/2019, 08h47
Clement_archeo

Merci beaucoup pour tes conseils. N'y connaissant vraiment pas grand chose en js, je prend et j'applique ta première remarque. Pour la seconde, je crois qu'il faudrait que je regarde un peu quelques cours avant de la comprendre complétement et l'appliquer. Je la garde sous le coude en tout cas.
Merci beaucoup.
Bonne journée