Let's take advantage of the current social unrest to introduce an interactive map specially developed for CGT activists. Federations, local units, and departmental branches can easily and quickly schedule demonstration meetings anywhere in France. These contributors will soon be able to pinpoint locations of protest throughout the year. The application can, in fact, be deployed and customized in record time.
The context
Taking control of your data while involving your community... That was the CGT’s goal in compiling geolocated data on protest meetings or sites of struggle across France. The mobilizations map, designed to handle a large amount of data and provide efficient display of points, now serves as the main tool for union components to share the time and place of major national mobilizations. Ultimately, the CGT aims to expand the platform to report on the various temporary or permanent points of struggle across France (strikes, claims, etc.).
To engage its users, we focused our UX efforts on the contribution experience. In just a few fields and seconds, users can submit an event for moderation. The information can then be stored, kept historically, and reprocessed to serve as a record of struggles and union actions over time.
Features
- An interactive map is available;
- Configuration of the map’s bounding box (or map centroid and zoom) through URL parameters;
- Sharing an event (post) on social media;
- Creating a content publication moderation workflow;
- Permission management by user roles and access to content editing;
- Automatic unpublishing of admin content as soon as it’s submitted;
- Zooming in on the region when clicking on a point or a post’s title;
- Exporting the list of mobilizations as a CSV file.
The choice of architecture and methods focused on minimizing redundant calls to the Google API—such as moving around the map and caching already called points.
Architecture choice — ExpressJS / MongoDB application and ReactJS client application
Given the expected volume of points during inter-union mobilizations, we decided not to use a Drupal module for performance reasons. We therefore chose a 100% JavaScript interface and a non-relational database, MongoDB.
We chose the following architecture:
This makes it possible to:
- Have a standalone application;
- Display the main map on the cgt.fr site;
- Display a regional zoom map for UD or UL sites in the site factory;
- Display a map limited to the posts of a specific user on any site in the network;
- Provide an embed code (like a YouTube video) for partner sites, even outside Drupal site networks.
Attention to the mobile experience
Mobile traffic is the leading source of visits to the app. We all encounter, as users, degraded mapping experiences as soon as we’re on smaller devices, especially when the maps display detailed information. Our UX team therefore conducted a preliminary study and UX benchmark to challenge the different integration options for mobile mapping. While a solution like the one presented on the Saemes website was not practical given the number of points, the design team opted for a full-screen solution with moveable side panels to show information details or the login link needed for contributions, even on the go.
User tests conducted six months after the map went live validated this choice.
Deployment model
Our team handles the maintenance, development, and hosting of the map. Its architecture and deployment can be easily reproduced, and the app can simply be duplicated for other permanent or one-off uses.
Feel free to contact us if you’d like to quickly have an interactive map and engage your users, your audience, or both.
Go live: March 21, 2021.
URL: https://mobilisations-en-france.cgt.fr/
