fredtempez/SabradouMap
1
0
Fork 0
Code Releases Activity

Final OKAY

Browse Source
This commit is contained in:
Fred Tempez 2023-07-11 18:28:08 +02:00
parent 827f8bcfca
commit a7f7a37e02
3 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.php
View File

@ -8,6 +8,12 @@
</head> </head>
<body> <body>
<div class="header">
<H1> GÉOLOCALISATION DES BROCANTES RÉFÉRENCÉES</br>
SUR LE SITE <a href="https://www.sabradou.com/" target="_blank">SABRADOU.COM</a>
</H1>
</div>
<div class="container"> <div class="container">
<form class="form" action="map.php" method="GET"> <form class="form" action="map.php" method="GET">
<label for="calendrier-list">Sélectionnez une date :</label> <label for="calendrier-list">Sélectionnez une date :</label>
@ -17,7 +23,7 @@
<option value="<?php echo $item['url']; ?>"><?php echo $item['node']; ?></option> <option value="<?php echo $item['url']; ?>"><?php echo $item['node']; ?></option>
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
<input type="submit" value="Afficher sur la carte"> <input type="submit" value="Localiser sur une carte">
</form> </form>
</div> </div>
</body> </body>

30
map.php
View File

@ -9,22 +9,16 @@
</head> </head>
<body> <body>
<div class="container">
<form class="form" action="map.php" 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="Afficher sur la carte">
</form>
</div>
<?php if (isset($_GET['calendrier'])): ?>
<?php $jour = $_GET['calendrier']; ?> <?php $jour = $_GET['calendrier']; ?>
<?php $cities = geocode($jour);?> <?php $cities = geocode($jour); ?>
<?php endif; ?> <?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> <div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
@ -33,7 +27,7 @@
var cities = <?php echo json_encode($cities); ?>; var cities = <?php echo json_encode($cities); ?>;
// Créer la carte // Créer la carte
var map = L.map('map').setView([50.5095, 2.6683], 8); var map = L.map('map').setView([50.5095, 2.6683], 9);
// Ajouter une couche de tuiles OpenStreetMap à la carte // Ajouter une couche de tuiles OpenStreetMap à la carte
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@ -51,6 +45,10 @@
marker.bindPopup('<a href="' + city.href + '" target="_blank">' + city.name + '</a>'); marker.bindPopup('<a href="' + city.href + '" target="_blank">' + city.name + '</a>');
}); });
</script> </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> </body>
</html> </html>

7
style.css
View File

@ -15,4 +15,9 @@
.form { .form {
max-width: 600px; /* Vous pouvez ajuster la largeur maximale selon vos besoins */ max-width: 600px; /* Vous pouvez ajuster la largeur maximale selon vos besoins */
width: 200%; width: 200%;
} }
.footer, .header{
text-align: center;
}