CarteVoyageGie

CarteVoyageGie

Carte du monde interactive plein écran pour visualiser des destinations de voyage et leur niveau d'autorisation, avec affichage détaillé par pays.

Objectif

L'application affiche une carte mondiale cliquable, colorée par catégorie d'autorisation (codes métier), avec :

• zoom,
• recherche pays,
• liste triée alphabétiquement,
• modal de détail au clic,
• version adaptée desktop et mobile.

Fonctionnalités

• Carte monde interactive (D3 + GeoJSON Natural Earth).
• Coloration des pays par code d'autorisation.
• Modal pays au clic avec :
  • drapeau + nom,
  • catégorie explicite,
  • période de validité,
  • procédure synthétisée.
• Tooltip au survol.
• Zoom sur le pays sélectionné.
• Légende des catégories.
• Liste flottante des pays avec recherche (desktop).
• Boutons mobiles :
  • loupe pour ouvrir la recherche en modal,
  • bouton pour ouvrir/fermer la légende.
• Thème dark.

Codes d'autorisation et couleurs

• 10 : vert
• 21, 22, 23 : jaune
• 99 : rouge
• 30 : noir (affiché en dernier dans la légende)
• sans donnée : gris neutre

Données

Source locale

• znep_gta_pays_etrangers.txt : données brutes des pays/catégories.
  • Aghora, intranet Gie

Source cartographique

• GeoJSON Natural Earth chargé depuis :
  • https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_50m_admin_0_map_units.geojson

Traitement

• Parsing du fichier brut côté navigateur.
• Appariement par ISO2 en priorité.
• Fallback par normalisation de nom (accents/variantes).
• Redirections de certains territoires vers pays parent (exemple : Nouvelle-Calédonie -> France).
• Synthèse des libellés procédure pour affichage court en modal.

Interface

Desktop

• Carte plein écran.
• Titre en haut à gauche.
• Liste pays flottante à gauche.
• Légende à droite.
• Footer bas-centre avec lien dépôt.

Mobile

• Carte plein écran.
• Bouton 🔍 pour la recherche des pays (modal).
• Bouton Légende pour afficher/masquer la légende.

Structure du projet

• index.html : structure UI.
• styles.css : thème, responsive, composants visuels.
• script.js : logique carte, parsing données, interactions.
• znep_gta_pays_etrangers.txt : dataset métier brut.
• robots.txt : blocage robots/crawlers.
• .gitignore : exclusions locales.

Lancer en local

Depuis la racine du projet :

python3 -m http.server 8008

Puis ouvrir :

• http://localhost:8008

Protection anti-robots

La protection anti-indexation/crawling est configurée par :

• robots.txt avec Disallow: / (global + quelques user agents IA),
• meta tags robots, googlebot, bingbot en noindex,nofollow,... dans index.html.

Important : ces mécanismes reposent sur la bonne volonté des robots.
Pour renforcer côté production, ajouter des en-têtes HTTP (X-Robots-Tag) au niveau du serveur web/reverse proxy.

Dépôt Git

• URL : git@git.goutfer.fr:benjamin/CarteVoyageGie.git
• Lien web : https://git.goutfer.fr/benjamin/CarteVoyageGie

Utilisation de l'intelligence artificielle

Ce projet a été généré avec l'utilisation de l'intelligence artificielle (GPT-5.3-Codex d'OpenAI).

L'intelligence artificielle, appliquée à la programmation, constitue un levier d'aide, de productivité et d'efficacité :

• accélération de la mise en place technique,
• assistance pour itérer rapidement sur l'interface et les fonctionnalités,
• réduction du temps de traitement sur les tâches répétitives.

Elle ne remplace pas les compétences d'un développeur.
La compréhension des besoins, les choix d'architecture, la validation des résultats, les arbitrages techniques et la qualité finale reposent sur l'expertise humaine.

Les compétences du développeur restent donc indispensables, et elles sont ici appuyées par un parcours d'études solide permettant de cadrer, contrôler et fiabiliser l'usage de l'IA dans le projet.

Auteur

• Benjamin GOUTFER (MDC)