Documentation Technique du Projet "Les voyages du miam"

Objectif du projet

"Les voyages du miam" est un site personnel qui a pour but de partager une sélection de bonnes adresses de restaurants, testés et approuvés, à travers le monde. Le site se présente sous la forme de cartes interactives.

Structure des fichiers

Le projet est organisé de la manière suivante :

• index.html: Page d'accueil principale, affichant la carte du monde avec tous les restaurants.
• /css/
  • style.css: Feuille de style principale, appliquée à l'ensemble du site.
• /js/
  • map-loader.js: Script réutilisable pour initialiser les cartes sur les pages secondaires (villes, pays).
• /pages/
  • /cities/: Contient les pages dédiées à une ville (ex: paris.html).
  • /countries/: Contient les pages dédiées à un pays ou une région (ex: alsace.html).
  • about.html, credits.html, documentation.html: Pages de contenu annexes.
• /img/: Contient toutes les images (logo, icônes de carte, bannières des pages).

Fonctionnement technique

1. Les sources de données : Google Sheet

Les données proviennent d'un Google Sheet exporté en CSV.

Les champs attendus (colonnes CSV) sont :

{
  "name": "Nom du restaurant",
  "type": "restaurant", // Type : restaurant, pizzeria, café, fast-food...
  "lat": 48.8566,       // Latitude
  "lng": 2.3522,        // Longitude
  "link": "https://lien-vers-google-maps",
  "description": "Une courte description.",
  "tags": "VG, brunch", // Chaîne séparée par virgules
  "last": "12/2025",    // Date de dernière visite (anciennement "Dernière visite")
  "picture": "url..."   // Lien vers une photo (Google Drive ou autre)
}

2. Les cartes interactives

Les cartes sont gérées avec la librairie Leaflet.js et le plugin Leaflet.markercluster pour le regroupement des marqueurs.

• Page d'accueil : Le script de la carte est directement intégré dans index.html. Il charge les données depuis le Google Sheet et affiche tous les points.
• Pages secondaires : Pour éviter la duplication de code, toutes les autres pages (Paris, Alsace, etc.) utilisent le script /js/map-loader.js.

3. Le script centralisé : map-loader.js

Ce script expose une fonction unique : initializeMap(options). Il gère le chargement des données CSV, l'affichage de la carte et la génération automatique d'une liste détaillée sous la carte.

Principales options de configuration :

• dataSourceUrl : URL du fichier de données (ex: export CSV Google Sheet).
• listContainerId : ID de l'élément HTML où afficher la liste des lieux (avec photos et descriptions).
• dataFilter : Fonction pour filtrer les lieux à afficher sur la page spécifique.

// Exemple d'appel dans pologne.html
initializeMap({
  mapId: 'map',
  listContainerId: 'places-content', // Cible pour la liste
  dataSourceUrl: "https://docs.google.com/.../export?format=csv",
  center: [52.06, 19.48],
  zoom: 7,
  dataFilter: (places) => {
    // Filtre personnalisé (ex: exclure Strasbourg via la longitude)
    return places.filter(p => parseFloat(p.lng) > 10);
  }
});

4. Le système de filtres

Les filtres (par type et par tag) sont gérés côté client, en JavaScript. Lorsqu'un filtre est activé/désactivé :

1. La fonction applyFilters() est appelée.
2. Elle récupère les filtres actifs.
3. Elle filtre le tableau des restaurants chargés en mémoire.
4. Elle appelle la fonction displayMarkers() pour rafraîchir la carte avec les nouveaux points.