Une carte interactive en dehors de la boite de Drupal avec ReactJS et ExpressJS

Illustration d'une manifestation récente géolocalisée sur la carte interactive
Profitons de l'actualité sociale mouvementée pour vous présenter une carte interactive spécialement développée pour les militants de la CGT. Les fédérations, unités locales et départementales peuvent rapidement et simplement positionner les rendez-vous pour les manifestations, partout en France. Ces contributeurs pourront bientôt localiser les lieux de lutte tout au long de l'année. L'applicatif est en effet déployable et personnalisable en un temps record.

Le contexte

Maîtriser ses données tout en impliquant sa communauté... Tel était le souhait de la CGT pour accumuler des données géolocalisées sur les rendez-vous de manifestations ou points de lutte en France. La carte des mobilisations, conçue pour manipuler un nombre conséquent de données et permettre un affichage performant des points sert désormais d'outil principal des composantes syndicales pour informer des heures et lieux de rendez-vous des grandes mobilisations nationales. A terme, la CGT souhaite étendre le dispositif pour relayer les différents points de luttes ponctuels ou permanents partout en France (grèves, revendications, etc.)

Pour engager ses utilisateurs, nous avons concentré nos effort UX sur l'expérience de contribution. En quelques champs, en quelques secondes, les utilisateurs peuvent soumettre à modération la soumission d'un événement. Les informations peuvent ensuite être stockées, historisées et retraitées pour servir la mémoire des luttes et des actions syndicales par périodes.

Les fonctionnalités 

  • Mise à disposition d'une carte interactive ;
  • Paramétrage de la bounding box de la carte (ou le centroid de la carte et le zoom) à partir de paramètres dans l'url ;
  • Partage d'une manifestation (post) sur les réseaux sociaux ;
  • Création d'un workflow de modération de publication des contenus ;
  • Gestion des permissions par rôles d'utilisateurs et accès à la modification du contenu ;
  • Dépublication automatique du contenu administrable dès la saisie ;
  • Zoom sur la région quand on clique sur un point et sur le titre d'une publication ;
  • Export de la liste des mobilisations au format csv. 

Le choix de l'architecture et des méthodes se sont concentrés pour éviter le plus possible les appels à l'API de google lorsqu'elles sont redondantes - Déplacement sur la carte, mise en cache des points déjà appelés.

Choix de l'architecture - Application ExpressJS / MongoDB et application cliente ReactJS

Compte tenu des hypothèses de volumétrie de points en période de manifestations inter-syndicales, il a été décidé de ne pas utiliser de module Drupal pour des questions de performance. Nous avons par conséquent préféré utiliser une interface 100% javascript et une base de données non relationnelles, MongoDB.

Nous avons opté pour l'architecture suivante : 

Il est ainsi possible :

  • De disposer d'une application autonome ;
  • D'afficher la carte générale sur le site cgt.fr ;
  • D'afficher la carte zoomée sur une région pour les sites des UD et UL dans l'usine à sites ;
  • D'afficher une carte limitée aux posts d'un utilisateur en particulier pour n'importe quel site du réseau ;
  • De fournir un code d'intégration (comme une vidéo youtube) pour les sites partenaires, y compris en dehors des réseaux de sites Drupal.

Le soin à l'expérience mobile

Le trafic mobile représente la première source des visites de l'application. Nous sommes tous confrontés, en tant qu'utilisateur, à des expériences de cartographie dégradées dès que nous sommes sur des terminaux de tailles réduites, notamment lorsque les carte affichent des informations détaillées. Notre équipe UX a par conséquent conduit une étude préalable et un benchmark UX pour challenger les différentes possibilités d'intégration de la carte en mobilité. Si une solution telle que présentée sur le site de la Saemes était peu envisageable compte tenu du nombre de points, l'équipe de conception a opté pour une solution pleine écran diposant de volets amovibles pour afficher le détail des informations ou le lien de connexion nécessaire à la contribution, y compris en mobilité.

Des tests utilisateurs conduits 6 mois après la mise en production de la carte ont validé ce choix.


Modèle de déploiement

Notre équipe se charge de la maintenance, des évolutions et de l'hébergement de la carte. Son architecture et son déploiement sont facilement reproductibles et l'application peut simplement être dupliquée pour d'autres usages, permanents ou ponctuels.

N'hésitez pas à nous contacter si vous souhaitez rapidement disposer d'une carte interactive et impliquer vos utilisateurs, votre audience, ou les deux.

Mise en production : le 21 mars 2021.
URL : https://mobilisations-en-france.cgt.fr/