Outil de cartographie pour Orange

Retour aux articles Dans #portfolio le 08/06/2016 par Emmanuel BALLERY

Outil de cartographie pour Orange

Courant 2016 j'ai réalisé une interface permettant de cartographier des données d'Orange. La solution est développée avec Leaflet, un outil open-source très puissant pour créer des cartes interactives et "mobile-friendly", D3.js pour ajouter des overlays enrichis et plus complexes sur la carte et Chart.js pour créer des graphiques responsive. Le design du projet est développé en SASS et compilé avec des modules npm (Node.js), les recettes de compilation sont rédigées en Gulp et le déploiement est assuré par Ansible. L'interface consomme des API JSON en Ajax en faisant au maximum attention à la consommation de la mémoire (le volume de donnée est très grand).

L'interface propose plusieurs layers (Ville, Light, Dark, Satellite et Streets Satellite) et 3 overlays contenant les points de vente, les antennes et les clients autour des antennes. Cette répartition est créée avec un diagramme de Voronoï appliqué sur un mask transparent avec D3.js. En sélectionnant les éléments, on accède aux métadonnées de ce dernier grâce à des popups, contenant chacune plusieurs tableaux de données (dans différents onglets) et un accès aux graphiques.

Interface 1

L'interface est entièrement configurable en ouvrant le panneau de gauche, qui permet grâce à des sliders modernes d'ajuster dynamiquement les critères de couleurs et les périmètres, qui sont raffraichis à la volée sur la carte. Un slider permet aussi de naviguer dans l'historique des données pour mieux observer l'évolution.

Interface 2

En ouvrant le panneau de droite on trouve cette fois-ci les statistiques sous la forme de graphiques dynamiques.

Interface 3

Tous les points de la carte se regroupent en "clusters" pour éviter une "pollution visuelle" lorsqu'il y a beaucoup de points.

Interface 4

Retour aux articles