Une seule page
This commit is contained in:
parent
65bc0a323a
commit
4aebec2a32
79
all.php
79
all.php
@ -1,79 +0,0 @@
|
||||
<?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>
|
||||
10
core.php
10
core.php
@ -67,6 +67,12 @@ function getCities($html)
|
||||
);
|
||||
}
|
||||
}
|
||||
// Créer un tableau temporaire contenant les valeurs de la clé "name"
|
||||
$names = array_column($cities, 'name');
|
||||
|
||||
// Trier le tableau temporaire par ordre alphabétique
|
||||
array_multisort($names, SORT_ASC, $cities);
|
||||
;
|
||||
|
||||
return $cities;
|
||||
}
|
||||
@ -105,10 +111,8 @@ function geocode($cities)
|
||||
'lon' => $longitude,
|
||||
'href' => $href,
|
||||
);
|
||||
} else {
|
||||
echo "Erreur : Impossible de géocoder la ville : " . $ville;
|
||||
}
|
||||
}
|
||||
|
||||
return $citiesData;
|
||||
}
|
||||
}
|
||||
61
index.php
61
index.php
@ -1,22 +1,20 @@
|
||||
<?php include("core.php"); ?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Formulaire de sélection</title>
|
||||
<title>Carte Sabradou</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</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>
|
||||
<h1>GÉOLOCALISATION DES BROCANTES RÉFÉRENCÉES</h1>
|
||||
<h2>SUR LE SITE <a href="https://www.sabradou.com/" target="_blank">SABRADOU.COM</a></h2>
|
||||
<form class="form" action="index.php" method="GET">
|
||||
<label for="calendrier-list">Brocantes du :</label>
|
||||
<select name="calendrier" id="calendrier-list">
|
||||
<?php $calendrier = getCalendrier(); ?>
|
||||
<?php foreach ($calendrier as $item): ?>
|
||||
@ -26,6 +24,51 @@
|
||||
<input type="submit" value="Localiser sur une carte">
|
||||
</form>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="left-column">
|
||||
|
||||
<ul class="cities">
|
||||
<?php $citiesList = getCities('https://www.sabradou.com/index.php'); ?>
|
||||
<?php if (isset($citiesList)): ?>
|
||||
<?php foreach ($citiesList as $city): ?>
|
||||
<li>
|
||||
<?php echo $city['name']; ?>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="right-column">
|
||||
<?php
|
||||
if (isset($_GET['calendrier'])) {
|
||||
$jour = $_GET['calendrier'];
|
||||
$citiesList = getCities($jour);
|
||||
$citiesGeoCode = geocode($citiesList);
|
||||
?>
|
||||
<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>
|
||||
55
map.php
55
map.php
@ -1,55 +0,0 @@
|
||||
<?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>
|
||||
31
style.css
31
style.css
@ -1,32 +1,19 @@
|
||||
#map {
|
||||
height: 600px;
|
||||
height: 800px;
|
||||
width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form {
|
||||
max-width: 600px; /* Vous pouvez ajuster la largeur maximale selon vos besoins */
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.footer, .header{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
display: flex;
|
||||
width: 20%;
|
||||
max-height: 80%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -36,7 +23,11 @@
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 500px;
|
||||
.cities {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.header > * {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user