Cartographie interactive multi-géométrie : bloc Gutenberg et page d'archive POI synchronisée
Scores de cette page :
EcoIndex A
SEO 100%
Accessibilité 100%
Performance 100%
Bonnes Pratiques 100%
Développement en sous-traitance de l'ensemble du système cartographique du site WordPress de l'EPAGE HuCA : un bloc Gutenberg réutilisable (POI en trois géométries, popups, légende dynamique, RGAA) et une page d'archive des POI en split-screen avec liste et carte synchronisées au filtrage.
Contexte
Refonte du site de l'EPAGE HuCA, un établissement public qui gère les cours d'eau et les risques d'inondation sur le bassin de l'Huveaune (rivière qui traverse la région marseillaise). Un établissement de ce type a besoin de montrer sur une carte des informations très concrètes : où sont les zones à risque, où se trouvent les ouvrages de protection, où en sont les travaux en cours. Projet mené en sous-traitance pour une agence, qui a conçu le thème WordPress du site, en collaboration avec un chef de projet et un designer — mon périmètre, précis et délimité : tout le système de cartographie interactive — un outil permettant d'ajouter une carte sur n'importe quelle page du site, et une page listant l'ensemble des points affichés.
Un outil de carte que les équipes du client ajoutent elles-mêmes, sans coder
Dans WordPress, une page se construit en empilant des « blocs » : un bloc de texte, un bloc d'image, un bloc de bouton… J'ai développé un bloc sur mesure, « Cartes interactives », qui s'ajoute à cette liste. Concrètement, une personne qui rédige une page peut insérer une carte comme elle insérerait une image, puis choisir dans un petit formulaire quelles catégories de points et quelles zones géographiques doivent y apparaître — sans écrire une ligne de code. Le réglage des couleurs de fond du bloc a volontairement été limité (pas de choix de couleur de texte ou de lien) pour éviter que quelqu'un ne crée, par erreur, une carte illisible.
Choisir précisément quels points affichent sur chaque carte
Chaque point affiché sur la carte (un point d'intérêt, ou « POI ») est classé selon deux critères indépendants : sa catégorie (par exemple : repères de crues, bassin versant, cours d'eau...) et sa zone géographique. Dans le formulaire de réglage du bloc, la personne qui construit la page choisit les familles de POI et les zones à afficher, et précise aussi si des projets ou actions de l'établissement doivent apparaître sur la même carte. Si aucune zone n'est choisie, la carte affiche tout par défaut, pour qu'une carte jamais configurée ne s'affiche jamais vide.
Une couleur et un pictogramme par catégorie, modifiables sans coder
Chaque catégorie de point a sa propre couleur et son propre pictogramme, réglables directement dans l'administration du site, sur la fiche de la famille concernée — si demain une nouvelle catégorie de points doit être créée, personne n'a besoin de moi pour lui donner un code couleur. Une couleur par défaut (un jaune orangé) s'affiche automatiquement si une catégorie n'en a pas encore reçu une, pour qu'un oubli ne fasse jamais disparaître un point de la carte.
Trois façons de représenter un lieu : un point, une ligne, une zone
Un point d'intérêt peut être de trois natures différentes, et la carte sait représenter chacune correctement : un simple point (une adresse, un ouvrage précis), une ligne (un tracé, comme un cours d'eau ou un chemin), ou une zone colorée (un périmètre, comme une zone inondable). Chaque fiche de point d'intérêt, dans l'administration, indique sa propre nature, et la carte adapte automatiquement son rendu — point, trait ou surface — sans intervention supplémentaire. Si une fiche a été mal remplie et n'indique aucune nature, elle est ignorée plutôt que de risquer d'afficher une carte cassée.
Afficher aussi les projets en cours sur la même carte
Au-delà des points d'intérêt, le bloc peut aussi afficher les actions et projets portés par l'établissement, avec trois réglages possibles : aucun projet, tous les projets de la zone choisie, ou une sélection précise faite à la main. Les projets apparaissent dans une couleur fixe et reconnaissable, différente de celle des points d'intérêt, pour qu'un visiteur distingue immédiatement « ce qui existe » de « ce qui est en train de se faire ».
Faire apparaître la carte rapidement, sans ralentir la page
Plutôt que de faire charger les informations de la carte après la page (ce qui provoquerait un petit temps d'attente visible), toutes les données nécessaires sont préparées côté serveur et livrées directement avec la page. Résultat : la carte s'affiche dès que la page est prête, sans requête supplémentaire ni chargement additionnel — et plusieurs cartes peuvent coexister sur une même page sans se perturber l'une l'autre.
Transformer des coordonnées brutes en carte lisible
Dans l'administration, les coordonnées géographiques sont saisies comme du texte brut (une latitude et une longitude pour un point simple, une liste de coordonnées séparées par des points-virgules pour une ligne ou une zone). Le bloc convertit automatiquement ce texte en données exploitables par la carte : il vérifie que chaque coordonnée est un nombre valide, et, pour les zones, s'assure que le contour se referme bien sur lui-même pour éviter une forme ouverte ou mal dessinée.
Rendre chaque point cliquable, même visuellement superposé
Les points affichés sur la carte doivent rester cliquables même lorsqu'ils se superposent à une zone colorée ou à une ligne. Un réglage technique garantit que les points restent toujours « au-dessus » visuellement et au clic, pour qu'un visiteur puisse toujours ouvrir la fiche d'un point précis plutôt que de cliquer « à travers » sans effet.
Deux niveaux d'information : un titre au survol, le détail au clic
Pour ne pas surcharger l'écran, la carte distingue deux comportements : survoler un point affiche juste son titre, en aperçu rapide ; cliquer sur un point ouvre une fenêtre complète avec sa catégorie (avec pictogramme), son nom, le bassin versant concerné, une description, une photo et un lien « en savoir plus ». Cette fenêtre complète reste ouverte tant que le visiteur ne clique pas ailleurs, pour qu'il puisse la lire tranquillement.
Une légende qui se construit toute seule
La légende affichée sous la carte n'est pas saisie à la main : elle se construit automatiquement à partir des points réellement affichés à l'écran, avec le bon symbole selon la nature de chaque élément (carré de couleur pour un point, trait pour une ligne, forme pour une zone). Si des projets sont affichés, une entrée « Projets et réalisations » apparaît automatiquement en tête de légende. Ainsi, la légende reste toujours exacte, même si le contenu de la carte change.
Avec un plus grand nombre de familles affichées, la légende s'étend automatiquement d'autant, sans jamais être saisie à la main :
Une seconde page : la liste complète des points, avec sa propre carte
En complément du bloc inséré dans les pages, le site propose une page d'archive dédiée aux points d'intérêt, avec une mise en page en deux colonnes : une liste filtrable à gauche, une carte à droite. C'est un système plus ancien, construit avec une autre technologie que le bloc (jQuery plutôt que du JavaScript moderne), car il reprenait un mécanisme déjà présent sur le thème du site plutôt que d'en réintroduire un nouveau pour une seule page.
La liste et la carte toujours synchronisées lors d'un filtrage
Quand un visiteur filtre la liste des points (par catégorie, par zone, par commune, par mots-clés...), la carte se met à jour automatiquement avec les mêmes résultats, sans recharger la page — ici, de 182 résultats à seulement 2 après sélection de deux filtres. Le cadrage de la carte s'ajuste intelligemment selon le nombre de résultats trouvés : vue d'ensemble si aucun résultat ne correspond, zoom rapproché s'il n'y en a qu'un seul, cadrage automatique sur l'ensemble des résultats sinon — pour que le visiteur n'ait jamais à chercher où se trouvent les points qu'il vient de filtrer.
Note
Le bloc « Cartes interactives » a été livré et fonctionne. À ce jour, le client a fait le choix de ne pas l'utiliser sur le site en production — le travail reste disponible et prêt à être activé si ce choix évolue. La page d'archive des points d'intérêt, elle, n'a jamais été mise en ligne : sa page d'accès n'a jamais été finalisée côté client, et la carte qui l'accompagne utilise une clé d'accès Mapbox aujourd'hui invalide — cohérent avec une fonctionnalité restée inachevée plutôt qu'avec un problème venant de mon périmètre de développement.