fredtempez/SabradouMap
1
0
Fork 0
Code Releases Activity

tout sur une page WIP

Browse Source
This commit is contained in:
Fred Tempez 2023-07-13 14:28:23 +02:00
parent 19090a6734
commit 65bc0a323a
2 changed files with 101 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
all.php Normal file
View File

@ -0,0 +1,79 @@
<?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>
<div class="header">
<h1>GÉOLOCALISATION DES BROCANTES RÉFÉRENCÉES</h1>
<p>SUR LE SITE <a href="https://www.sabradou.com/" target="_blank">SABRADOU.COM</a></p>
</div>
<div class="container">
<div class="left-column">
<form class="form" action="#" method="GET">
<label for="calendrier-list">Sélectionnez une date :</label>
<select name="calendrier" id="calendrier-list">
<?php $calendrier = getCalendrier(); ?>
<?php foreach ($calendrier as $item): ?>
<option value="<?php echo $item['url']; ?>"><?php echo $item['node']; ?></option>
<?php endforeach; ?>
</select>
<input type="submit" value="Localiser">
</form>
<div class="cities-list">
<ul>
<?php $citiesList = getCities('https://www.sabradou.com/index.php'); ?>
<?php foreach ($citiesList as $city): ?>
<li>
<?php echo $city['name']; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<div class="right-column">
<?php
if (isset($_GET['calendrier'])) {
$jour = $_GET['calendrier'];
$citiesList = getCities($jour);
$citiesGeoCode = geocode($citiesList);
$calendrier = getCalendrier();
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('<a href="' + city.href + '" target="_blank">' + city.name + '</a>');
});
</script>
<?php } ?>
</div>
</div>
</body>
</html>

25
style.css
View File

@ -6,10 +6,8 @@
} }
.container { .container {
display: block;
width: 100%; width: 100%;
display: flex;
justify-content: center;
align-items: center;
} }
.form { .form {
@ -21,3 +19,24 @@
text-align: center; text-align: center;
} }
.container {
display: block;
width: 100%;
}
.left-column {
display: flex;
width: 20%;
padding: 10px;
}
.right-column {
display: flex;
width: 80%;
padding: 10px;
}
#map {
height: 500px;
}