How to build an interactive map in React.js to display city works and points of intervention?
How to make and simplify the management and update of information for SMTC‑AC agents using Symfony? How to ensure broad distribution of the data?
Introducing SMTC
It comprises 23 municipalities (21 municipalities of Clermont Auvergne Métropole, Mur-sur-Allier and Pérignat-es-Allier).
The Mixed Syndicate of Public Transport of the Clermont Agglomeration (SMTC‑AC) is the mobility organizing authority for the territory of Clermont Auvergne Métropole. Its mission is to develop and optimize public transport in order to offer residents smoother, more sustainable mobility adapted to new uses. In that perspective, it leads major projects such as InspiRe, an ambitious programme for modernizing the transport network.
Its actions aim to improve accessibility and frequency of buses and trams, to encourage soft mobilities with solutions such as self‑service bicycles and cycle infrastructures, and to coordinate major urban development works.
To support this transformation, SMTC‑AC entrusted us with the creation of “C’le chantier”, a digital platform dedicated to centralizing and disseminating information on works in progress and upcoming, particularly those under the InspiRe project.
The Challenge
SMTC‑AC needed a tailored, high‑performance and evolutive digital tool that met the following objectives:
- Get an overview of current and upcoming InspiRe works, by geographic zone.
- Facilitate the update of data in real time via an ergonomic interface adapted for agents working in the field.
- Offer users a fluid and interactive navigation experience.
- Allow integration of the data on other platforms for better dissemination of information.
Thanks to the expertise of our team, these challenges were successfully met.
Key Features of the Solution
To address these challenges, we have designed and developed “C’le chantier”, an intuitive and evolutive digital platform. Developed using Symfony, it enables the collection and centralization of data related to works of InspiRe that are in progress or forthcoming. A custom back‑office was set up to offer SMTC‑AC agents a fluid and intuitive management of information, with the ability to update it in real time, even from the field.
For users, a front‑end interface built in ReactJS offers a clear and intuitive interactive map, enabling the visualization of ongoing construction works in a geolocated manner. Each intervention is represented by precise paths and zones on the map, giving a quick overview of the scope of works.
By clicking on a zone, the user accesses detailed information: location, dates of execution, direction of traffic, access maintained for businesses and pedestrians, types of vehicles affected, as well as the nature of the operation. A filter by address and by date finally allows focusing on the construction sites relevant with respect to one’s journeys or time of travel.
Thanks to this map, users can anticipate the impacts on traffic and adapt their journeys accordingly. The interface is designed for quick and fluid consultation, including on mobile devices.
The tool was also designed for easy integration on other websites via a widget, allowing municipalities, partners or local actors to relay the works information directly on their own platforms. This approach promotes broader and coherent dissemination of data, in real time.
Additionally, the data are structured in a manner that enables interoperability with third‑party platforms like Waze or Google Maps, facilitating their use in widely used navigation tools. This allows users to be alerted in advance from their GPS systems of route changes, temporary closures, or changes in traffic direction.
By extending the scope of dissemination to these daily‑used platforms, the system ensures better anticipation of disruptions and contributes to smoothing mobility on the territory.
Thanks to this practical tool, SMTC‑AC now has a performant and evolutive solution serving smoother mobility and transparent information for all users.
