230% effektivisering av geografiske data gjennom interaktive webkart

Innowise har utviklet et lettvekts SVG-kart for å vise geografiske data og overvåke kundens internasjonale prosjekter.

Kunde

Industri

Fintech, myndigheter

Region

USA

Kunde siden

2022

Vår kunde er en av de mest fremtredende finansinstitusjonene som gir tilskudd og lån til viktige offentlige og private prosjekter. Med mer enn 100 filialer over hele verden tilbyr de bærekraftige løsninger som tar sikte på å redusere fattigdom ved å gjennomføre kapitalprosjekter.

Detaljert informasjon om kunden kan ikke utleveres i henhold til bestemmelsene i NDA.

Utfordring: Å overvinne papirarbeidet med interaktiv visualisering av kartdata

Siden grunnleggelsen har kunden vår ført tilsyn med tusenvis av finansielle, sosiale, energi-, utdannings-, miljø- og andre prosjekter, i samarbeid med regjeringer og internasjonale selskaper. De har som mål å redusere fattigdom, øke felles velstand og fremme bærekraftig utvikling ved å finansiere nøkkelprosjekter av strategisk betydning.

Selv om kunden vår hadde en tydelig og grundig arbeidsflyt og datapresentasjon, hadde de utfordringer med å analysere og vurdere tekstlig informasjon. I stedet for å bruke interaktive kart datavisualisering for dataanalyse, var de avhengige av rapporter på flere sider, noe som ofte gjorde det vanskelig å ta informerte beslutninger.

Kunden vår har en mangefasettert global prosjektportefølje og søkte en skalerbar, interaktiv og tilpassbar løsning med geografiske kart for å hjelpe kundene med å raskt gjennomgå korte detaljer om aktuelle prosjekter og få innsikt på tvers av interesseområder, inkludert regioner, land og tilpassede områder.

Løsning: Utvikling av interaktive kart som viser tilpassede prosjekter rundt om i verden.

Etter å ha analysert kundens forespørsel foreslo Innowise å utvikle et SVG-kart (skalerbar vektorgrafikk). I motsetning til pikselbaserte kart bruker SVG-kart matematiske ligninger for å definere kartelementer, noe som muliggjør sømløs skalering opp og ned uten tap av kvalitet.

Når det gjelder visualisering av stedsdata, inkluderer populære valg biblioteker som Google Maps og Open Street Maps. SVG-kart er imidlertid lette, kan tilpasses og er lisensfrie, så de er et godt valg når verken høy oppløsning eller nøyaktige detaljer er nødvendig.

Etter å ha bestemt seg for en løsning, gikk prosjektgruppen vår gjennom flere påfølgende faser for å levere interaktive SVG-kart.

ADMINISTRATIVE ENHETER PÅ FØRSTE NIVÅ

Før vi gikk dypere inn i kjernelogikken, avklarte Innowise de viktigste enhetene et SVG-kart illustrerer. I tillegg til å etablere de riktige geografiske grensene til landene, måtte vi også sikre presise og oppdaterte administrative territoriale inndelinger. For eksempel er ulike land delt inn i ulike administrative inndelinger, som stater i USA, provinser i Canada og regioner i Frankrike.

Følgelig tok vi sikte på å samle nøyaktige kartdata fra Natural Earth som gjenspeiler disse regionale administrative variasjonene. Natural Earth er et gratis kartarkiv som tilbyr både raster- og vektordata i målestokkene 1:10 m, 1:50 m og 1:110 millioner, og fungerer som en egnet grunnmal for å lage visuelt tiltalende og profesjonelt utformede digitale kart ved hjelp av GIS-programvare.

FRA SHP TIL SVG

Etter å ha valgt egnede kartmaler konverterte prosjektteamet vårt originale multiformat shapefiler (SHP) til skalerbar vektorgrafikk. Denne grafikken ga stier til hver administrative inndeling og ble representert av en SVG-fil, som er en XML-fil som inneholder geometriske objekter som sirkler, linjer, firkanter og mer. Disse objektene ble innebygd som SVG-tagger, noe som sikret at bildene forble jevne og proporsjonale.

PYTHON SCRIPT

Selv om hver enhet i SVG-filen har sin egen sti-tagg, ville det være mer effektivt å organisere dataene systematisk for å oppfylle prosjektets krav. Vi sorterte dataene i SVG-filen alfabetisk etter land og administrativ inndeling ved hjelp av en Python-skript. Dette resulterte i et datasett som inneholdt over 4500 administrative avdelinger på første nivå i 153 land over hele verden der kunden enten har pågående prosjekter eller planlegger å investere midler.

FRA KODE-REFACTORING TIL PROGRESSIV WEB-APP

Etter å ha lastet opp SVG-kartdataene for kompilering, oversteg filstørrelsen 16 MB ren tekst. Siden omhyggelig digitalisering ville føre til frysing, feil og andre ytelsesproblemer, bestemte våre spesialister seg for å bruke Javascript for å gjøre det interaktive kartet om til en progressiv webapplikasjon. Derfor innlemmet prosjektteamet vårt SVG-filene i HTML-merkingen. Men siden koden oversteg 4500 linjer, la programvareingeniørene våre til innebygde rammer (HTML-elementer som laster inn en annen HTML-side i dokumentet) og en egen HTML-fil som inneholder SVG. Dette bidro til å optimalisere systembelastningen og sikre jevn ytelse. I tillegg bygde vi en lokal server for å tillate forespørsler på tvers av opprinnelse fra flere brukere.

BRUKERGRENSESNITT

Videre opprettet prosjektgruppen vårt et brukervennlig grensesnitt for enkel kartnavigering. Vi farget kartet og spesifiserte nyanser avhengig av antall prosjekter i et bestemt land. Våre utviklere har også laget praktiske filtre for å søke etter spesifikke prosjekter, og fremhever regioner basert på prosjektstatus (aktiv, avsluttet, suspendert). Prosjektene er kategorisert i henhold til deres formål (sosial beskyttelse, helse, landbruk, energi osv.), anvendelsesland og kumulative kostnader. Etter å ha spesifisert prosjektene kan brukerne laste ned PDF-rapporter for å lære mer om dem.

Samlet sett har Innowise implementert funksjoner som kartbakgrunner (topografiske, bilder med etiketter og andre), kartkonfigurasjon (standard 2D eller tabellform), avanserte søkemuligheter (basert på stedsnavn eller geokoordinater i desimalgrader/DMS-format) og zoom inn / ut-alternativer.

Teknologier

Front-end

React, React-spørring, MaterialUI, D3.js

Back-end

Node.js, Express.js og Python

Database

MongoDB

VCS

Github

DevOps

Docker, Jenkins, AWS

Prosess

Gjennom hele utviklingsprosessen for forretningskartlegging fulgte Innowise smidige tilnærminger og tilpasset seg kundens behov. Prosjektteamet fulgte Scrum-metodikken med ukentlige sprinter, daglige teammøter og kontinuerlig integrasjon og testing. Ved å kommunisere med kunden via Microsoft Teams kunne vi enkelt tilpasse oss endringer i omfanget og fordele oppgaver i henhold til teammedlemmenes kompetanse.

Etter prosjektvisjonen lanserte vi en fullverdig MVP med grunnleggende funksjonalitet. For øyeblikket vurderer kunden å legge til nye funksjoner og integrere SVG-kartet med eksterne tjenester, med vårt team som gir støtte og vedlikehold etter lanseringen.

Team

Forretningsanalytiker

Prosjektleder

Front-end-utviklere

Back-end-utviklere

UI/UX-designer

DevOps

QA ingenieurs

Resultater: Forbedret datatransparens, skalerbarhet og interaktivitet

Innowise har utviklet forretningskartprogramvare for å overvåke informasjon om kundens prosjekter over hele verden. Vi har levert en one-stop-plattform der kunden kan administrere pågående prosjekter, sortere dem etter ulike faktorer og få tilgang til prosjektdetaljer. De vakre SVG-kartene vi har utviklet gir kunden flere fordeler, for eksempel:

Skalerbarhet. Siden SVG-kart er vektorbaserte, kan de skaleres opp eller ned uten å miste kvalitet eller bli pikselerte. Dette gjør det mulig å vise innhold på forskjellige zoomnivåer eller størrelser, noe som gir større fleksibilitet.
Interaktivitet. SVG-kartene gir brukerne mulighet til å interagere med de digitale elementene ved å klikke på eller holde musepekeren over ulike funksjoner og vise data knyttet til et bestemt geografisk område.
Lettvekt. SVG-kart er vanligvis mindre i filstørrelse enn andre formater, for eksempel rasterbilder. Dette gjør dem enklere å laste inn og vise på en nettside, noe som sikrer en sømløs brukeropplevelse.
Tilpasning. Prosjektteamet vårt tilpasset og stylet kartet ved hjelp av CSS, noe som gir en høy grad av kontroll over kartets utseende. Dette gjør det mulig å fremheve spesifikke funksjoner og tilpasse kartet til kundens merkevare, slik at det får et personlig preg.

Prosjektets varighet

Juni 2022 - Løpende

500+

prosjekter i 150 land

230%

effektivisering av geodata

Relaterte saker

Ta kontakt med oss!

Bestill en samtale eller fyll ut skjemaet nedenfor, så kontakter vi deg så snart vi har behandlet forespørselen din.

Hva skjer videre?

Etter at vi har mottatt og behandlet forespørselen din, vil vi komme tilbake til deg innen kort tid for å beskrive prosjektbehovene dine og undertegne en taushetserklæring for å sikre informasjonens konfidensialitet.

Etter å ha undersøkt kravene, utarbeider våre analytikere og utviklere en prosjektforslag med arbeidsomfang, teamstørrelse, tid og kostnader estimater.

Vi arrangerer et møte med deg for å diskutere tilbudet og komme til en avtale.

Vi signerer en kontrakt og begynner å jobbe med prosjektet ditt så raskt som mulig.