Série : Tutoriels OpenStreetMap
Cet article fait suite à celui concernant l'insertion d'une carte intitulé Insérer une carte OpenStreetMap sur votre site (Réactualisé)
Il est conseillé de suivre cet article en préambule.
Code disponible sur Github : https://github.com/NouvelleTechno/LeafletJS-Base-de-donnees
Nous allons ajouter des marqueurs sur une carte OpenStreetMap à partir d'une base de données MySQL.
La base de données
Avant tout chose, voici la table de base de données dans laquelle seront stockées les différents marqueurs que nous souhaitons afficher sur notre carte (téléchargeable sur le Github.
Elle est composée d'une seule table (agences), pour faire simple, dans laquelle nous avons 6 champs
- id : contient l'identifiant unique de chaque ligne (nombre entier)
- nom : contient le nom du marqueur (chaîne de caractères)
- lat : pour la latitude du marqueur (décimal 2 chiffres après la virgule mais possible d'améliorer la précision)
- lon : pour la longitude du marqueur (décimal 2 chiffres après la virgule mais possible d'améliorer la précision)
- description : contient un texte de description de la ville
- image : contient le nom de l'image d'illustration
Nous allons par la suite interroger cette table au moyen d'un fichier php.
Les fichiers PHP
La structure du projet est libre, celui sur Github utilise Docker mais ce n'est en aucun cas obligatoire.
Mis à part le fichier de connexion à la base de données (Db.php), nous avons 2 fichiers, Agences.php (le modèle), pour la requête, et liste.php (le contrôleur), pour le traitement des données.
Connexion à la base de données
Le fichier class/Db.php
permettra de se connecter à la base de données en utilisant PDO.
Nous retournerons une erreur si la connexion échoue.
<?php
class Db
{
// Propriétés de la base de données
private string $host = 'database';
private string $dbname = 'osm';
private string $dbuser = 'osmuser';
private string $dbpass = 'osmpass';
public ?PDO $connexion;
// Connexion
public function getConnection(): PDO
{
// On ferme la connexion si elle existe
$this->connexion = null;
// On se connecte
try{
$this->connexion = new PDO('mysql:host=' . $this->host . ';dbname=' . $this->dbname, $this->dbuser, $this->dbpass);
$this->connexion->exec('set names utf8');
}catch(PDOException $exception){
// On affiche l'erreur
die('Erreur de connexion : ' . $exception->getMessage());
}
return $this->connexion;
}
}
Le modèle
Le fichier "Agences.php" est le modèle, qui permet d'effectuer la requête.
Nous y écrivons le SQL nécessaire pour récupérer les données et retournons un tableau.
Il contient le code suivant
<?php
class Agences
{
public function __construct(
private PDO $connexion,
private $table = 'agences'
)
{}
public function liste(): array
{
// On écrit la requête
$sql = 'SELECT * FROM ' . $this->table;
// On prépare la requête
$query = $this->connexion->prepare($sql);
// On exécute la requête
$query->execute();
// On retourne le résultat
return $query->fetchAll(PDO::FETCH_ASSOC);
}
}
Le contrôleur
Notre contrôleur "liste.php" contient tout le traitement de la demande, de la vérification de la méthode à l'envoi des données en json et des codes de retour HTTP.
Son code est le suivant
<?php
// Headers
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=UTF-8');
header('Access-Control-Allow-Methods: GET');
header('Access-Control-Max-Age: 3600');
header('Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');
if($_SERVER['REQUEST_METHOD'] !== 'GET'){
http_response_code(405);
echo json_encode(['error' => 'Method unauthorized']);
exit;
}
require_once './class/Db.php';
require_once './class/Agences.php';
// On instancie la base de données
$database = new Db();
$db = $database->getConnection();
// On instancie les agences
$agences = new Agences($db);
// On récupère les données
$listeAgences = $agences->liste();
// On retourne les données en json
echo json_encode($listeAgences);
La carte
Nous voici maintenant au cœur du sujet, la gestion de la carte.
Nous allons uniquement modifier le javascript de l'article cité en début de page afin d'interroger le fichier PHP plutôt que le json.
Nous aurons également à modifier la boucle et son contenu
// On déclare les coordonnées de Paris
let lat = 48.852969;
let lon = 2.349903;
let limites = [];
let markers = L.markerClusterGroup();
let map = L.map("map", {
zoom: 13,
center: [lat, lon]
});
L.tileLayer("https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png", {
minZoom: 1,
maxZoom: 20,
attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>'
}).addTo(map);
// On charge villes.json
fetch("/api/liste.php")
.then(data => data.json())
.then(villes => {
// On boucle sur les villes
for(let ville of villes){
let coords = [ville.lat, ville.lon];
// On charge l'icône du marqueur
let icone = L.icon({
iconUrl: "/images/pin.png",
iconSize: [25,41],
iconAnchor: [12.5, 41],
popupAnchor: [0, -41]
});
// On crée le marqueur pour chaque ville
let marker = L.marker(coords, {
icon: icone
});
let popup = `<div class="popup">
<img src="/images/${ville.image}" alt="${ville.name}" width="50" height="50">
<div>
<h2>${ville.name}</h2>
<p>${ville.description}</p>
</div>
</div>`;
marker.bindPopup(popup);
limites.push(coords);
// On ajoute le marqueur au cluster
markers.addLayer(marker);
}
// On ajoute les clusters à la carte
map.addLayer(markers);
map.fitBounds(limites);
});
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat
Catégories : Tutoriel openstreetmap
Mots-clés : Javascript Openstreetmap js leafletjs leaflet