Bonsoir à tous,
Je me permets de venir vers vous car je sèche un peu sur du code qui mélange de l’AJAX et du PHP, je suis preneur de la moindre modification ou amélioration.
Voila j’utilise la librairie leaflet pour afficher des marqueurs via des coordonnées que j’ai dans une base de données distante. Tout est bon j’arrive à afficher mes marqueurs en l’occurence des pharmacies au travers de la requête présente sur mon index.
<?php
session_start();
ob_start();
ini_set('display_errors','on');
error_reporting(E_ALL);
include_once("./assets/database/connect_db_users.php");
include_once("./assets/database/cookie_lang.php");
include_once("./assets/database/cookieconnect.php");
?>
<?php
// Requête pour récupérer les pharm_geolocalisation avec leurs coordonnées, adresses et villes
$query = $db->query("SELECT pharm_id_code, pharm_state, pharm_latitude, pharm_longitude FROM pharm_geolocalisation WHERE pharm_state = 1");
// Tableau pour stocker les données des pharm_geolocalisation
$pharm_geolocalisation = array();
// Parcours des résultats de la requête
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
// Création d'un tableau associatif pour chaque pharmacie
$pharmacie = array(
"id_code" => $row["pharm_id_code"],
"state" => $row["pharm_state"],
"latlng" => array($row["pharm_latitude"], $row["pharm_longitude"])
);
// Ajout du tableau associatif au tableau $pharmacies
array_push($pharm_geolocalisation, $pharmacie);
}
?>
<!DOCTYPE html>
<html>
<head>
<?php include('./includes/users_header_metahead.php');?>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.locatecontrol/dist/L.Control.Locate.min.js"></script>
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<style>
#mapid {
top: 77px;
width: 100%;
height: calc(100vh - 85px);
margin-left: 0px;
padding-left: 0px;
}
/* CSS cluster */
.cluster {
background: #5e50ff;
border-radius: 50%;
text-align: center;
color: white;
font-weight: 700;
border: 2px solid white;
font-family: monospace;
}
.cluster:before {
content: ' ';
position: absolute;
border-radius: 50%;
z-index: -1;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border: 0px solid white;
}
.digits-1 {
font-size: 14px;
height: 28px;
width: 28px;
line-height: 24px;
margin-top: -14px;
margin-left: -14px;
}
.digits-2 {
font-size: 16px;
height: 34px;
width: 34px;
line-height: 31px;
margin-top: -17px;
margin-left: -17px;
}
.digits-2:before {
border-width: 0px;
}
.digits-3 {
font-size: 18px;
height: 48px;
width: 48px;
line-height: 42px;
border-width: 3px;
margin-top: -24px;
margin-left: -24px;
}
.digits-3:before {
border-width: 0px;
}
.digits-4 {
font-size: 18px;
height: 58px;
width: 58px;
line-height: 52px;
border-width: 4px;
margin-top: -29px;
margin-left: -29px;
}
.digits-4:before {
border-width: 0px;
}
.leaflet-popup-content {
margin: 0;
}
.heart-icon.liked {
color: red !important;
}
</style>
</head>
<body>
<?php include('./includes/users_navigation_header_responsive.php'); ?>
<!-- Main content -->
<div class="main-content">
<!-- Top navbar -->
<nav class="navbar navbar-top navbar-expand navbar-dark bg-white border-bottom" id="navbar-main" style="border-bottom: 1px solid #e6ecf1;">
<div class="container-fluid">
<?php include('./includes/users_navigation_header.php');?>
</div>
</nav>
<div id="mapid"></div>
<div id="pharmacies"></div>
</div>
<script>
var mymap = L.map('mapid').setView([48.083328, -1.68333], 18);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 16,
}).addTo(mymap);
var pharm_geolocalisation = <?php echo json_encode($pharm_geolocalisation); ?>;
// Création d'un groupe de marqueurs clusterisés CSS spécifique
var markers = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
var digits = (cluster.getChildCount()+'').length;
return L.divIcon({
html: cluster.getChildCount(),
className: 'cluster digits-'+digits,
iconSize: null
});
}
});
pharm_geolocalisation.forEach(function(pharmacie) {
var id_code = pharmacie.id_code;
var latlng = pharmacie.latlng;
var state = pharmacie.state;
var specialMarker = pharmacie.specialMarker; // Suppose que vous avez une propriété "specialMarker" dans votre base de données
let form = new FormData();
form.append("id_code", id_code); // Remplacez id_code par la valeur souhaitée
const options = {
body: form,
method: "POST"
};
fetch('./req_index.php', options)
.then(response => response.json())
.then(data => {
})
.catch(error => {
});
// Création d'un marqueur pour chaque pharmacie
// Ajoutez ici les autres informations de la base de données dans la chaîne de caractères popupContent
var popupContent = '<div style="width: 18rem;"><div class="card card-stats"><!-- Card body --><div class="card-body"><div class="row"><div class="col"><h5 class="card-title text-uppercase text-muted mb-0"></h5><span class="h2 font-weight-bold mb-0">2,356</span></div><div class="col-auto"><div class="icon icon-shape bg-orange text-white rounded-circle shadow"><i class="ni ni-chart-pie-35"></i></div></div></div><p class="mt-3 mb-0 text-sm"><span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span><span class="text-nowrap">Since last month</span></p></div></div></div>';
// Utilisez un marqueur spécial pour les éléments qui vérifient votre condition
var marker = L.marker(latlng, { icon: L.icon({ iconUrl: './assets/img/icons/maps/hapotec_marker_1.png', iconSize: [35, 40] }) })
.bindPopup(popupContent, { offset: L.point(0, -20), autoPan: false });
markers.addLayer(marker); // Ajout du marqueur au groupe de marqueurs en cluster
// Création d'une div avec les elements du marqueur
var div = document.createElement("div");
div.innerHTML = name;
div.addEventListener('click', function() {
mymap.setView(latlng, 18);
});
pharmacies.appendChild(div);
});
mymap.addLayer(markers);
L.control.locate().addTo(mymap);
</script>
</body>
</html>
Le truc c’est que cette première requête qui interroge une première table ne se compose que des coordonnées et des IDs des pharmacies, j’ai donc stocké les autres informations relativement aux pharmacies (adresse, nom, téléphone) dans une seconde table que j’essaye d’interroger après avec récupérer l’ID en question et afficher les différentes informations dans le popupContent.
Cette seconde requête est réalisée via une page dans le répertoire "req_index.php" :
<?php
$id_code = $_POST['id_code'];
$req_pharm_informations = $db->prepare('SELECT * FROM '.$db_apotekeen.'.pharm_informations WHERE pharm_id_code = :pharm_id_code');
$req_pharm_informations->execute(array(
'pharm_id_code' => $id_code,
));
$pharm_informations = $req_pharm_informations->fetch();
// Par exemple, supposons que vous ayez récupéré les informations suivantes de la base de données
$pharm_informations = array();
// Renvoyez les informations de la pharmacie au format JSON
echo json_encode($pharm_informations);
?>
Sauf que le souci c’est que je n’arrive pas à intégrer les informations récupérer dans le popupContent, cela bloque l’affichage des marqueurs. Exemple avec dans le code avec " ' + adresse_pharmacie + '/
Je suis preneur de toutes vos lumières.
Merci beaucoup,
AlexCode
+0
-0