Mathieu Hansart - Développeur Web spécialisé JavaScript

Introduction

Dans le cadre de ma collaboration avec Agate Météo, j'ai eu l'opportunité de travailler sur un projet innovant visant à développer une carte météo interactive pour les éditeurs. Ce projet avait pour but de créer une interface utilisateur moderne et responsive, capable d'afficher des départements et des villes de manière intuitive. Cet article détaille les différentes étapes de ce projet, les défis rencontrés et les solutions mises en œuvre.

Détails du Projet

Contexte du Projet
En tant que référent Front-end, mon rôle dans ce projet consistait à transformer une maquette Figma en une interface utilisateur fonctionnelle. Le principal défi était de rendre la carte responsive tout en maintenant une précision dans l'affichage des villes et départements.

Approches Envisagées
Pour résoudre ce problème, plusieurs options ont été étudiées :

Utilisation d'une image de fond avec positionnement absolu des villes : Bien que simple à mettre en œuvre, cette solution s'est avérée imprécise et laborieuse.
Conversion dynamique des coordonnées géographiques en pixels : Une approche plus technique, permettant de positionner automatiquement les villes en fonction de leurs coordonnées.

Après analyse, j'ai opté pour un Proof of Concept (POC) basé sur la deuxième solution, utilisant la librairie D3.js.

Proof of Concept : Création d'une Carte Dynamique

Le POC avait pour objectif de créer une carte interactive à partir d'un fichier GeoJSON et d'y ajouter des villes en se basant uniquement sur leurs coordonnées géographiques.

Choix de la Technologie : D3.js
D3.js est une librairie JavaScript puissante qui permet de manipuler des documents basés sur des données. Elle offre des fonctionnalités de projection cartographique, ce qui était crucial pour ce projet. J'ai utilisé la projection Mercator pour ce POC, ce qui a permis de convertir les coordonnées géographiques en pixels.

Résultat du POC
Le POC a été un succès, démontrant la faisabilité de la solution. La carte était non seulement précise, mais aussi capable de s'adapter dynamiquement aux différentes tailles d'écran, répondant ainsi à l'exigence de responsivité.

Développement : Du POC au Produit Final

Le développement du projet n'a pas été sans obstacles. Voici les principaux défis rencontrés et les solutions apportées :

1. Compréhension et Maîtrise de D3.js :
Il a fallu maîtriser les concepts clés de D3.js, tels que la projection cartographique et la gestion des layers, pour pouvoir avancer efficacement dans le projet.

2. Manipulation des Données GeoJSON :
Trouver les fichiers GeoJSON appropriés pour les départements et les retravailler afin de les rendre compatibles avec notre solution a demandé du temps et de la précision.

3. Intégration des Exigences de la Maquette :
La mise en place des spécifications graphiques fournies par le client a été un processus délicat, nécessitant une adaptation des fonctionnalités de D3.js pour respecter le design souhaité.

4. Responsivité et Interactivité :
La carte a été divisée en plusieurs layers pour permettre une interactivité accrue, tout en garantissant une expérience utilisateur fluide sur tous les types d'appareils.

Après deux mois de développement intensif, de tests rigoureux et de plusieurs itérations, le projet a finalement été achevé.

Résultats et Retours

Aujourd'hui, la solution développée est automatisée à 90 %. Voici ce qu'il reste à faire :

Ajout de la carte
Sélection des villes
Configuration de l'affichage des informations au survol

Cela représente une simplification énorme par rapport aux processus manuels précédents. Le projet est devenu un produit clé dans le catalogue d'Agate Météo.

Conclusion et Perspectives

Le client a exprimé une grande satisfaction vis-à-vis de l'outil développé, reconnaissant la complexité et l'exigence artistique du projet. Suite à ce succès, d'autres versions du produit avec des thèmes et des cartes différents sont en cours de développement.