Design

Une carte interactive vintage permet de valoriser le patrimoine d’Angoulême de manière élégante. L’idée est d’utiliser une carte ancienne stylisée (tons parchemin, contours légèrement patinés) comme base visuelle. Les points d’intérêt ne sont pas représentés par des marqueurs visibles, mais par des zones cliquables invisibles : cela donne un rendu plus épuré, comme si la carte était authentique, tout en gardant l’interactivité. Lorsqu’un visiteur clique sur une zone, un petit panneau s’ouvre avec un titre, un court descriptif et un lien vers une page plus détaillée. L’expérience est proche d’une visite guidée, mais avec le charme graphique d’une carte ancienne.

Pourquoi ce fonctionnement ?

J’ai choisi de construire la carte de cette manière pour favoriser une expérience intuitive et immersive. L’utilisateur peut se déplacer librement en glissant la carte, zoomer pour découvrir les détails ou prendre du recul pour avoir une vision d’ensemble.

Les points d’intérêt sont accessibles par de simples clics : cette interaction directe rend la découverte plus fluide qu’une liste statique. Les info-bulles permettent d’obtenir rapidement un résumé, tout en laissant la possibilité d’aller plus loin grâce à des liens externes.

Ce fonctionnement s’inspire des cartes numériques modernes (comme celles que nous utilisons au quotidien) afin que chacun retrouve des gestes familiers, sans besoin d’apprentissage. L’objectif est de combiner l’aspect esthétique d’une carte vintage avec l’efficacité d’une navigation interactive.

Code

Techniquement, la carte repose sur un simple HTML/CSS/JavaScript. L’image sert de fond, et des zones cliquables (des <div> invisibles positionnés en pourcentage) recouvrent les lieux d’intérêt. Lorsqu’on clique dessus, un tooltip (cartouche flottant) apparaît avec les informations correspondantes. Comme les coordonnées sont en pourcentage, la carte reste responsive (fonctionne sur toutes les tailles d’écran).

Github du code : https://github.com/Sinterion00/Sinterion00.github.io/tree/main/maps

Demos : https://sinterion00.github.io/maps/

Mockup