Augmentation de 230% de l'efficacité des données géographiques grâce à des cartes web interactives

Innowise a développé une carte SVG légère pour visualiser les données géographiques et suivre les projets internationaux du client.

Client

Industrie

Fintech, Gouvernement

Région

Client depuis

2022

Notre client est l'une des institutions financières les plus importantes, qui accorde des subventions et des prêts à des projets publics et privés importants. Avec plus de 100 succursales dans le monde, elle propose des solutions durables visant à réduire la pauvreté en réalisant des projets d'investissement.

Les informations détaillées sur le client ne peuvent être divulguées en vertu des dispositions de la NDA.

Défi: La visualisation de données cartographiques interactives permet d'alléger le fardeau de la paperasserie.

Depuis la création, notre client a supervisé des milliers de projets financiers, sociaux, énergétiques, éducatifs, environnementaux et autres, en partenariat avec des gouvernements et des entreprises internationales. Son objectif est de réduire la pauvreté, d'accroître la prospérité partagée et de promouvoir le développement durable en finançant des projets clés d'importance stratégique.

Bien que notre client dispose d'un flux de travail et d'une présentation des données clairs et complets, il a rencontré des difficultés pour analyser et évaluer les informations textuelles. Plutôt que d'utiliser des cartes interactives visualisation des données pour l'analyse des données, ils s'appuyaient sur des rapports de plusieurs pages, ce qui rendait souvent difficile la prise de décisions éclairées.

Disposant d'un portefeuille de projets internationaux aux multiples facettes, notre client recherchait une solution évolutive, interactive et personnalisable avec des cartes géographiques pour aider les clients à consulter rapidement des détails succincts sur les projets en cours et à obtenir des informations sur les zones d'intérêt, y compris les régions, les pays et les zones personnalisées.

Solution: Développement de cartes interactives présentant des projets personnalisés dans le monde entier

Après avoir analysé la demande du client, Innowise a suggéré de développer une carte SVG (scalable vector graphics). Contrairement aux cartes basées sur des pixels, les cartes SVG utilisent des équations mathématiques pour définir les éléments de la carte, ce qui permet une mise à l'échelle transparente sans perte de qualité.

En ce qui concerne la visualisation des données de localisation, les choix les plus courants incluent des bibliothèques telles que Google Maps et Open Street Maps. Cependant, les cartes SVG sont légères, personnalisables et sans licence. Elles constituent donc un bon choix lorsque l'on n'a pas besoin d'une haute résolution ou d'un niveau de détail scrupuleux.

Après avoir trouvé une solution, notre équipe de projet a progressé à travers plusieurs phases subséquentes pour livrer des cartes SVG interactives.

DIVISIONS ADMINISTRATIVES DE PREMIER NIVEAU

Avant de plonger plus profondément dans la logique de base, Innowise a clarifié les principales entités qu'une carte SVG illustre. En plus d'établir les frontières géographiques correctes des pays, nous avons également dû veiller à ce que les divisions administratives et territoriales soient précises et à jour. À titre d'exemple, différents pays sont divisés en diverses divisions administratives, telles que les États aux États-Unis, les provinces au Canada et les régions en France.

Par conséquent, nous avons cherché à rassembler des données cartographiques précises à partir de Natural Earth qui reflètent ces variations administratives régionales. Natural Earth est un référentiel cartographique gratuit qui fournit des données matricielles et vectorielles à des échelles de 1:10m, 1:50m et 1:110 millions, et sert de modèle de base approprié pour la création de cartes numériques visuellement attrayantes et bien conçues à l'aide d'un logiciel SIG.

DE SHP À SVG

Après avoir choisi des modèles de cartes appropriés, notre équipe de projet a converti les fichiers de forme multiformat originaux (SHP) en graphiques vectoriels évolutifs. Ces graphiques fournissent des chemins vers chaque division administrative et sont représentés par un fichier SVG, qui est un fichier XML contenant des objets géométriques tels que des cercles, des lignes, des carrés, etc. Ces objets ont été intégrés sous forme de balises SVG, ce qui a permis aux images de rester lisses et proportionnelles.

SCRIPT PYTHON

Bien que chaque entité du fichier SVG ait son propre chemin d'accès, une organisation systématique des données serait plus efficace pour répondre aux exigences du projet. Nous avons trié les données du fichier SVG par ordre alphabétique, par pays et par division administrative, à l'aide d'une balise Script Python. Nous avons ainsi obtenu un ensemble de données contenant plus de 4 500 divisions administratives de premier niveau situées dans 153 pays à travers le monde où le client a des projets en cours ou prévoit d'investir des fonds.

DE LA REFONTE DU CODE À L'APPLICATION WEB PROGRESSIVE

Après avoir téléchargé les données de la carte SVG pour les compiler, la taille du fichier dépassait les 16 Mo de texte pur. Étant donné que la numérisation méticuleuse entraînerait des blocages, des pépins et d'autres problèmes de performance, nos spécialistes ont décidé d'utiliser Javascript pour transformer la carte interactive en une application web progressive. Notre équipe de projet a donc incorporé les fichiers SVG dans le balisage HTML. Cependant, comme le code dépassait les 4500 lignes, nos ingénieurs logiciels ont ajouté des cadres en ligne (éléments HTML qui chargent une autre page HTML dans le document) et un fichier HTML séparé contenant le SVG. Cela a permis d'optimiser la charge du système et d'assurer une bonne performance. En outre, nous avons construit un serveur local pour permettre des requêtes d'origine croisée provenant de plusieurs utilisateurs.

INTERFACE UTILISATEUR

De plus, notre équipe de projet a créé une interface conviviale pour faciliter la navigation sur la carte. Nous avons coloré la carte, en spécifiant des nuances en fonction du nombre de projets dans un pays donné. Nos développeurs ont également mis au point des filtres pratiques pour rechercher des projets spécifiques, en mettant en évidence les régions en fonction du statut du projet (actif, fermé, suspendu). Les projets sont classés en fonction de leurs objectifs (protection sociale, santé, agriculture, énergie, etc.), de leurs pays d'application et de leur coût cumulé. Après avoir spécifié les projets, les utilisateurs peuvent télécharger des rapports PDF pour en savoir plus.

Dans l'ensemble, Innowise a mis en place des fonctionnalités telles que des fonds de carte (topographiques, imagerie avec étiquettes, et autres), la configuration de la carte (2D par défaut ou sous forme de tableau), des capacités de recherche avancées (basées sur le nom du lieu ou les coordonnées géographiques en degrés décimaux/format DMS), et des options de zoom avant/arrière.

Technologies

Front-end

React, React-query, MaterialUI, D3.js

Back-end

Node.js, Express.js, Python

Base de données

MongoDB

VCS

Github

DevOps

Docker, Jenkins, AWS

Processus

Tout au long du processus de développement du logiciel de cartographie commerciale, Innowise a adhéré aux approches agiles et s'est aligné sur les besoins du client. L'équipe de projet a suivi la méthodologie Scrum avec des sprints hebdomadaires, des réunions d'équipe quotidiennes et une intégration et des tests continus. En communiquant avec le client via Microsoft Teams, nous avons facilement pris en compte les changements de périmètre et réparti les tâches en fonction des compétences des membres de l'équipe.

Conformément à la vision du projet, nous avons lancé un MVP complet avec des fonctionnalités de base. Actuellement, le client envisage d'ajouter de nouvelles fonctionnalités et d'intégrer la carte SVG à des services externes, notre équipe assurant l'assistance et la maintenance après le lancement.

Équipe

Analyste commercial

Chef de projet

Développeurs Front-End

Développeurs Back-End

Concepteur UI/UX

DevOps

Ingénieurs QA

Résultats: Amélioration de la transparence, de l'évolutivité et de l'interactivité des données

Innowise a développé un logiciel de cartographie commerciale pour surveiller les informations relatives aux projets des clients dans le monde entier. Nous avons fourni une plateforme unique où le client peut gérer les projets en cours, les trier en fonction de divers facteurs et accéder aux détails du projet. Les magnifiques cartes SVG que nous avons développées offrent au client de multiples avantages, tels que:

Évolutivité. Les cartes SVG étant vectorielles, elles peuvent être mises à l'échelle sans perte de qualité ni pixellisation. Il est donc possible d'afficher le contenu à différents niveaux de zoom ou à différentes tailles, ce qui offre une plus grande souplesse.
Interactivité. Les cartes SVG permettent aux utilisateurs d'interagir avec les éléments numériques en cliquant ou en survolant différentes caractéristiques, affichant ainsi des données associées à une zone géographique spécifique.
Léger. Les cartes SVG sont généralement plus petites que d'autres formats, tels que les images matricielles. Elles sont donc plus faciles à charger et à afficher sur une page web, ce qui garantit une expérience transparente pour l'utilisateur.
Personnalisation. Notre équipe de projet a personnalisé et stylisé la carte à l'aide de feuilles de style CSS, ce qui permet de contrôler l'apparence de la carte. Cela permet de mettre en évidence des caractéristiques spécifiques et de faire correspondre la carte à l'image de marque du client, offrant ainsi une touche personnalisée.

Durée du projet

Juin 2022 - En cours

500+

des projets dans 150 pays

230%

augmentation de l'efficacité des données géographiques

Exemples de projets similaires

Contactez nous!

Réserver un appel ou remplissez le formulaire ci-dessous et nous vous contacterons dès que nous aurons traité votre demande.

Nom

Entreprise

Courriel :

Téléphone

Message S’il vous plaît, ajouter les détails du projet, la durée, la pile technologique, IT spécialistes nécessaires et d'autres informations pertinentes

S’il vous plaît, ajouter les détails du projet, la durée, la pile technologique, IT spécialistes
nécessaires et d'autres informations pertinentes

Joindre des documents supplémentaires au besoin

Charger file

Vous pouvez joindre jusqu'à 1 fichier de 2MB au total. Fichiers valides : pdf, jpg, jpeg, png

Nous vous informons que lorsque vous cliquez sur le bouton Envoyer, Innowise traitera vos données personnelles conformément à notre Politique de confidentialité dans le but de vous fournir des informations appropriées.

Que se passe-t-il ensuite?

Après avoir reçu et traité votre demande, nous reviendrons vers vous pour détailler les besoins de votre projet et signer un accord de non-divulgation pour assurer la confidentialité des informations.

Après avoir examiné les exigences, nos analystes et nos développeurs élaborent une proposition de projet avec l'étendue des travaux, le nombre de membre de l'équipe, les délais et les coûts des coûts.

Nous organisons une réunion avec vous pour discuter de l'offre et parvenir à un accord.

Nous signons un contrat et commençons à travailler sur votre projet le plus rapidement possible.

Augmentation de 230% de l'efficacité des données géographiques grâce à des cartes web interactives

Client

Défi: La visualisation de données cartographiques interactives permet d'alléger le fardeau de la paperasserie.

Solution: Développement de cartes interactives présentant des projets personnalisés dans le monde entier

Technologies

Processus

Équipe

Résultats: Amélioration de la transparence, de l'évolutivité et de l'interactivité des données

Exemples de projets similaires

Contactez nous!

Que se passe-t-il ensuite?

Soit^●s développer
logiciel ensemble!

Faire une autre demande

Fermer

Augmentation de 230% de l'efficacité des données géographiques grâce à des cartes web interactives

Client

Défi: La visualisation de données cartographiques interactives permet d'alléger le fardeau de la paperasserie.

Solution: Développement de cartes interactives présentant des projets personnalisés dans le monde entier

Technologies

Processus

Équipe

Résultats: Amélioration de la transparence, de l'évolutivité et de l'interactivité des données

Exemples de projets similaires

Contactez nous!

Que se passe-t-il ensuite?

Soit●s développer logiciel ensemble!

S'abonner à à notre bulletin d'information

Faire une autre demande

Fermer

Soit^●s développer
logiciel ensemble!

S'abonner à
à notre bulletin d'information