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>
<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">
<form class="form" action="map.php" method="GET">
<label for="calendrier-list">Sélectionnez une date :</label>
@ -17,7 +23,7 @@
<option value="<?php echo $item['url']; ?>"><?php echo $item['node']; ?></option>
<?php endforeach; ?>
</select>
<input type="submit" value="Afficher sur la carte">
<input type="submit" value="Localiser sur une carte">
</form>
</div>
</body>

30
map.php
View File

@ -9,22 +9,16 @@
</head>
<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 $cities = geocode($jour);?>
<?php endif; ?>
<?php $cities = geocode($jour); ?>
<?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>
@ -33,7 +27,7 @@
var cities = <?php echo json_encode($cities); ?>;
// 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
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>');
});
</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>

7
style.css
View File

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