SabradouMap/map.php

55 lines
1.9 KiB
PHP

<?php include("core.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Carte OpenStreetMap</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<?php $jour = $_GET['calendrier']; ?>
<?php $citiesList = getCities($jour); ?>
<?php $citiesGeoCode = geocode($citiesList); ?>
<?php $calendrier = getCalendrier(); ?>
<?php foreach ($calendrier as $item) {
if ($item['url'] === $jour) {
echo '<div class="header"><h1>Brocantes du ' . $item['node'] . '</h1></div>';
break;
}
}
?>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script>
// Tableau des villes et des coordonnées
var cities = <?php echo json_encode($citiesGeoCode); ?>;
// Créer la carte
var map = L.map('map').setView([50.5095, 2.6683], 9);
// Ajouter une couche de tuiles OpenStreetMap à la carte
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Carte OpenStreetMap'
}).addTo(map);
// Placer des marqueurs pour chaque ville sur la carte
cities.forEach(function (city) {
var marker = L.marker([city.lat, city.lon]).addTo(map);
marker.bindPopup(city.name);
});
// Placer des marqueurs pour chaque ville sur la carte
cities.forEach(function (city) {
var marker = L.marker([city.lat, city.lon]).addTo(map);
marker.bindPopup('<a href="' + city.href + '" target="_blank">' + city.name + '</a>');
});
</script>
<div class="footer">
<h3><a class="gotoindex" href="index.php">Afficher une autre date</a></h3>
<italic>Cliquer sur les points pour afficher le nom de la ville avec un lien vers la description</italic>
</div>
</body>
</html>