Application web cartographique

Vide-maison — carte interactive des adresses participantes

Carte web des 24 maisons participant au vide-maison. Un seul fichier HTML, sans base de données ni chaîne de build, qui sert à la fois d'affiche imprimée en 1920×1080, de carte plein écran sur téléphone et de page de préparation sur ordinateur. Mise en ligne durcie, puis données retirées le lendemain de l'événement.

L'histoire de sa construction

Chaque année, des familles d'Estissac et du hameau de Thuisy ouvrent leur cour le même dimanche. Le tract papier listait les adresses sans avec une croix. Cette années J'ai construit une carte web pour y répondre, avec une contrainte simple : un fichier qu'on ouvre par clic ou Qr code et qui fonctionne encore dans un an, sans réinstaller quoi que ce soit. Le vrai travail portait sur trois rendus d'un même fichier. Sur téléphone, la carte occupe tout l'écran et la liste vit dans un tiroir qu'on tire au doigt, avec un geste suivi en direct et tranché au relâchement selon sa vitesse. Sur ordinateur, la colonne d'adresses reste lisible à sa taille native quelle que soit la largeur de la fenêtre. À l'impression, un cadre 1920×1080 exact pour l'affiche du patronage — ce qui a demandé de contourner trois comportements de Chrome : les fonds non imprimés par défaut, les ombres portées rastérisées en carrés opaques, et les feuilles de style mobiles qui s'appliquent aussi au papier. Quand plusieurs maisons voisines se chevauchent à l'écran, un algorithme de relaxation écarte les pastilles tout en les rattachant par un trait fin à leur position exacte. Le calcul est déterministe et sans aléatoire, ce qui garantit un rendu imprimé toujours identique. Côté mise en ligne, la politique de sécurité du contenu est calculée à la construction de l'image Docker à partir du fichier réellement publié : elle ne peut donc jamais être en décalage avec la page. L'image ne contient que le strict nécessaire, le fichier des adresses n'y figure pas et ne peut pas fuir. Enfin, le point qui compte le plus à mes yeux : une carte affichant le domicile de familles a une raison d'être le jour de l'événement, pas le lendemain. Le site a été remplacé par une page de remerciement dès la fin de l'événement, le code de la carte archivé hors de l'image publiée, et le retrait vérifié en production.

Technologies utilisées

  • Git
  • TypeScript
  • Tailwind CSS
  • HTML
  • Docker

Un projet similaire en tête ?

Site vitrine, WordPress, e-commerce ou application sur mesure : parlons-en, le premier échange et le devis sont gratuits.

Me contacter

D'autres réalisations

Tous les projets →