230% aumento dell'efficienza dei dati geografici attraverso mappe web interattive

Innowise ha sviluppato una mappa SVG leggera per visualizzare i dati geografici e monitorare i progetti internazionali del cliente.

Cliente

Industria

Fintech, Governo

Regione

STATI UNITI

Cliente da

2022

Il nostro cliente è una delle istituzioni finanziarie più importanti, che fornisce sovvenzioni e prestiti a importanti progetti pubblici e privati. Con oltre 100 filiali in tutto il mondo, offre soluzioni sostenibili che mirano a ridurre la povertà attraverso la realizzazione di progetti di capitale.

Le informazioni dettagliate sul cliente non possono essere divulgate in base alle disposizioni dell NDA.

Sfida: Superare l'onere delle pratiche burocratiche con la visualizzazione interattiva dei dati su mappa

Dalla fondazione, il nostro cliente ha supervisionato migliaia di progetti finanziari, sociali, energetici, educativi, ambientali e di altro tipo, collaborando con governi e aziende internazionali. L'obiettivo è ridurre la povertà, aumentare la prosperità condivisa e promuovere lo sviluppo sostenibile finanziando progetti chiave di importanza strategica.

Sebbene il nostro cliente disponesse di un flusso di lavoro e di una presentazione dei dati chiari ed esaustivi, ha dovuto affrontare delle difficoltà nell'analisi e nella valutazione delle informazioni testuali. Piuttosto che utilizzare la visualizzazione interattiva dei dati delle mappe per l'analisi dei dati, si sono basati su report multipagina, rendendo spesso difficili le decisioni informate.

Avendo un portafoglio di progetti globali dalle molteplici sfaccettature, il nostro cliente cercava una soluzione scalabile, interattiva e personalizzabile con mappe geografiche per aiutare i clienti a rivedere rapidamente brevi dettagli sui progetti in corso e ottenere approfondimenti sulle aree di interesse, comprese regioni, paesi e aree personalizzate.

Soluzione: Sviluppo di mappe interattive che mostrano progetti personalizzati in tutto il mondo

Dopo aver analizzato la richiesta del cliente, Innowise ha suggerito di sviluppare una mappa SVG (grafica vettoriale scalabile). A differenza delle mappe basate su pixel, le mappe SVG utilizzano equazioni matematiche per definire gli elementi della mappa, il che consente di scalare senza problemi verso l'alto e verso il basso senza alcuna perdita di qualità.

Per quanto riguarda la visualizzazione dei dati sulla posizione, le scelte più popolari includono librerie come Google Maps e Open Street Maps. Le mappe SVG, tuttavia, sono leggere, personalizzabili e prive di licenza, quindi rappresentano una buona scelta quando non è necessaria un'alta risoluzione o un dettaglio scrupoloso.

Dopo aver individuato una soluzione, il nostro team di progetto ha seguito diverse fasi successive per realizzare mappe SVG interattive.

DIVISIONI AMMINISTRATIVE DI PRIMO LIVELLO

Prima di addentrarsi nella logica di base, Innowise ha chiarito le entità principali che una mappa SVG illustra. Oltre a stabilire i confini geografici corretti dei Paesi, dovevamo anche garantire divisioni amministrativo-territoriali precise e aggiornate. Ad esempio, i diversi Paesi sono suddivisi in varie divisioni amministrative, come gli Stati negli Stati Uniti, le province in Canada e le regioni in Francia.

Di conseguenza, abbiamo cercato di raccogliere da Natural Earth dati cartografici accurati che riflettessero queste variazioni amministrative regionali. Natural Earth è un archivio cartografico gratuito che fornisce dati raster e vettoriali in scala 1:10m, 1:50m e 1:110 milioni, e funge da modello di base adatto per la creazione di mappe digitali visivamente accattivanti e realizzate con competenza tramite software GIS.

DA SHP A SVG

Dopo aver scelto i modelli di mappa adatti, il nostro team di progetto ha convertito gli shapefile multiformato originali (SHP) in grafica vettoriale scalabile. Questi grafici forniscono i percorsi di ogni divisione amministrativa e sono stati rappresentati da un file SVG, un file XML che contiene oggetti geometrici come cerchi, linee, quadrati e altro. Questi oggetti sono stati incorporati come tag SVG, per garantire che le immagini rimanessero fluide e proporzionali.

SCRIPT PYTHON

Sebbene ogni entità del file SVG abbia il proprio tag di percorso, l'organizzazione sistematica dei dati sarebbe più efficiente per soddisfare i requisiti del progetto. Abbiamo ordinato i dati del file SVG in ordine alfabetico per paese e divisione amministrativa, utilizzando un Script Python. Il risultato è stato un set di dati contenente oltre 4500 divisioni amministrative di primo livello situate in 153 Paesi del mondo in cui il cliente ha progetti in corso o intende investire fondi.

DALLA RIFATTORIZZAZIONE DEL CODICE ALL'APPLICAZIONE WEB PROGRESSIVA

Dopo aver caricato i dati della mappa SVG per la compilazione, le dimensioni del file superavano i 16 MB di testo puro. Poiché la digitalizzazione meticolosa avrebbe causato blocchi, glitch e altri problemi di prestazioni, i nostri specialisti hanno deciso di utilizzare Javascript per trasformare la mappa interattiva in un'applicazione web progressiva. Pertanto, il nostro team di progetto ha incorporato i file SVG nel markup HTML. Tuttavia, poiché il codice superava le 4500 righe, i nostri ingegneri software hanno aggiunto dei frame inline (elementi HTML che caricano un'altra pagina HTML all'interno del documento) e un file HTML separato contenente SVG. Questo ha contribuito a ottimizzare il carico del sistema e a garantire prestazioni ottimali. Inoltre, abbiamo creato un server locale per consentire le richieste di origine incrociata da parte di più utenti.

INTERFACCIA UTENTE

Inoltre, il nostro team di progetto ha creato un'interfaccia user-friendly per facilitare la navigazione sulla mappa. Abbiamo colorato la mappa, specificando le tonalità in base al numero di progetti in un determinato Paese. Inoltre, i nostri sviluppatori hanno creato comodi filtri per la ricerca di progetti specifici, evidenziando le regioni in base allo stato del progetto (attivo, chiuso, sospeso). I progetti sono classificati in base alle finalità (protezione sociale, salute, agricoltura, energia, ecc.), ai Paesi di applicazione e al costo cumulativo. Dopo aver specificato i progetti, gli utenti possono scaricare i rapporti in formato PDF per saperne di più.

In generale, Innowise ha implementato funzioni come gli sfondi delle mappe (topografici, immagini con etichette e altri), la configurazione delle mappe (2D predefinito o in forma di tabella), le funzionalità di ricerca avanzate (basate sul nome della località o sulle coordinate geografiche in gradi decimali/formato DMS) e le opzioni di zoom in/out.

Tecnologie

Front-end

React, React-query, MaterialUI, D3.js

Back-end

Node.js, Express.js, Python

Database

MongoDB

VCS

Github

DevOps

Docker, Jenkins, AWS

Processo

Durante l'intero processo di sviluppo del software di mappatura aziendale, Innowise ha aderito ad approcci agili e si è allineata alle esigenze del cliente. Il team di progetto ha seguito la metodologia Scrum con sprint settimanali, riunioni di team quotidiane, integrazione e test continui. Comunicando con il cliente tramite Microsoft Teams, abbiamo facilmente adattato le modifiche all'ambito e distribuito i compiti in base alle competenze dei membri del team.

Seguendo la visione del progetto, abbiamo lanciato un MVP completo con funzionalità di base. Attualmente il cliente sta valutando la possibilità di aggiungere nuove funzionalità e di integrare la mappa SVG con servizi esterni, mentre il nostro team si occuperà del supporto e della manutenzione post-lancio.

Team

Analista aziendale

Responsabile di progetto

Sviluppatori Front-End

Sviluppatori back-end

Designer UI/UX

DevOps

Ingegneri QA

Risultati: Miglioramento della trasparenza, della scalabilità e dell'interattività dei dati

Innowise ha sviluppato un software di mappe aziendali per monitorare le informazioni sui progetti dei clienti in tutto il mondo. Abbiamo fornito una piattaforma unica in cui il cliente può gestire i progetti in corso, ordinarli in base a vari fattori e accedere ai dettagli del progetto. Le bellissime mappe SVG che abbiamo sviluppato offrono al cliente molteplici vantaggi, quali:

Scalabilità. Poiché le mappe SVG sono basate su vettori, possono essere ingrandite o ridotte senza perdere qualità o diventare pixel. Ciò consente di visualizzare i contenuti a diversi livelli di zoom o dimensioni, offrendo una maggiore flessibilità.
Interattività. Le mappe SVG consentono agli utenti di interagire con gli elementi digitali cliccando o passando il mouse su diverse caratteristiche, visualizzando i dati associati a una specifica area geografica.
Leggerezza. Le mappe SVG hanno in genere dimensioni più ridotte rispetto ad altri formati, come le immagini raster. Ciò ne facilita il caricamento e la visualizzazione su una pagina web, garantendo un'esperienza utente senza soluzione di continuità.
Personalizzazione. Il nostro team di progetto ha personalizzato e stilizzato la mappa utilizzando i CSS, consentendo un elevato grado di controllo sull'aspetto della mappa. Ciò consente di evidenziare caratteristiche specifiche e di abbinare la mappa al marchio del cliente, offrendo un tocco personalizzato.

Durata del progetto

Giugno 2022 - In corso

500+

progetti in 150 paesi

230%

aumento dell'efficienza dei dati geografici

Casi correlati

Contattateci!

Prenota una chiamata oppure compilate il modulo sottostante e sarete ricontattati una volta elaborata la vostra richiesta.

Nome

Azienda

Telefono

Messaggio Si prega di includere i dettagli del progetto, la durata, lo stack tecnologico, i professionisti IT necessari e altre informazioni pertinenti

Registra un messaggio vocale sul tuo
progetto per aiutarci a capirlo meglio

Allega ulteriori documenti se necessario

Caricare il file

È possibile allegare fino a 1 file di 2 MB complessivi. File validi: pdf, jpg, jpeg, png

Vi informiamo che cliccando sul pulsante Invia, Innowise tratterà i vostri dati personali in conformità con la nostra Informativa sulla privacy allo scopo di fornirvi informazioni adeguate.

Cosa succede dopo?

Dopo aver ricevuto ed elaborato la vostra richiesta, vi ricontatteremo a breve per illustrare le esigenze del progetto e firmare un NDA per garantire la riservatezza delle informazioni.

Dopo aver esaminato i requisiti, i nostri analisti e sviluppatori elaborano una proposta di progetto con l'ambito di lavoro, le dimensioni del team, i tempi e i costi stimati.

Organizziamo un incontro con voi per discutere l'offerta e giungere a un accordo.

Firmiamo un contratto e iniziamo a lavorare sul vostro progetto il prima possibile.

230% aumento dell'efficienza dei dati geografici attraverso mappe web interattive

Cliente

Sfida: Superare l'onere delle pratiche burocratiche con la visualizzazione interattiva dei dati su mappa

Soluzione: Sviluppo di mappe interattive che mostrano progetti personalizzati in tutto il mondo

Tecnologie

Processo

Team

Risultati: Miglioramento della trasparenza, della scalabilità e dell'interattività dei dati

Casi correlati

Contattateci!

Cosa succede dopo?

Sviluppiamo software insieme ^●

Chiudere

230% aumento dell'efficienza dei dati geografici attraverso mappe web interattive

Cliente

Sfida: Superare l'onere delle pratiche burocratiche con la visualizzazione interattiva dei dati su mappa

Soluzione: Sviluppo di mappe interattive che mostrano progetti personalizzati in tutto il mondo

Tecnologie

Processo

Team

Risultati: Miglioramento della trasparenza, della scalabilità e dell'interattività dei dati

Casi correlati

Contattateci!

Cosa succede dopo?

Sviluppiamo software insieme ●

Abbonarsi a la nostra newsletter

Chiudere

Sviluppiamo software insieme ^●

Abbonarsi
a la nostra newsletter