230% øget effektivitet i geografiske data gennem interaktive webkort

Innowise har udviklet et letvægts-SVG-kort til visning af geografiske data og overvågning af kundens internationale projekter.

Kunde

Industri

Fintech, Regeringen

Region

USA

Kunde siden

2022

Vores kunde er en af de mest fremtrædende finansielle institutioner, der giver tilskud og lån til vigtige offentlige og private projekter. Med mere end 100 filialer over hele verden tilbyder de bæredygtige løsninger, der har til formål at mindske fattigdom ved at gennemføre kapitalprojekter.

Detaljerede oplysninger om klienten kan ikke videregives i henhold til bestemmelserne i NDA.

Udfordring: At overvinde byrden af papirarbejde med interaktiv kortdatavisualisering

Siden grundlæggelsen har vores kunde ført tilsyn med tusindvis af finansielle, sociale, energimæssige, uddannelsesmæssige, miljømæssige og andre projekter i samarbejde med regeringer og internationale virksomheder. De sigter mod at reducere fattigdom, øge den fælles velstand og fremme bæredygtig udvikling ved at finansiere nøgleprojekter af strategisk betydning.

Selvom vores kunde havde en klar og grundig arbejdsgang og datapræsentation, stod de over for udfordringer med at analysere og vurdere tekstinformation. I stedet for at bruge interaktive kort Datavisualisering til dataanalyse var de afhængige af flersidede rapporter, hvilket ofte gjorde det vanskeligt at træffe informerede beslutninger.

Vores kunde har en mangefacetteret global projektportefølje og søgte en skalerbar, interaktiv og tilpasselig løsning med geografiske kort, der kunne hjælpe kunderne med hurtigt at gennemgå korte detaljer om aktuelle projekter og få indsigt på tværs af interesseområder, herunder regioner, lande og tilpassede områder.

Løsning: Udvikling af interaktive kort, der viser tilpassede projekter over hele verden

Efter at have analyseret kundens anmodning foreslog Innowise at udvikle et SVG-kort (scalable vector graphics). I modsætning til pixelbaserede kort bruger SVG-kort matematiske ligninger til at definere kortelementer, hvilket gør det muligt at skalere sømløst op og ned uden tab af kvalitet.

Hvad angår visualisering af lokationsdata, omfatter populære valg biblioteker som Google Maps og Open Street Maps. SVG-kort er dog lette, kan tilpasses og er licensfrie, så de er et godt valg, når der hverken er brug for høj opløsning eller omhyggelige detaljer.

Efter at have fundet en løsning gik vores projektteam gennem flere efterfølgende faser for at levere interaktive SVG-kort.

ADMINISTRATIVE AFDELINGER PÅ FØRSTE NIVEAU

Før vi dykkede dybere ned i kernelogikken, afklarede Innowise de vigtigste enheder, som et SVG-kort illustrerer. Ud over at fastlægge de korrekte geografiske grænser for landene skulle vi også sikre præcise og opdaterede administrative territoriale opdelinger. For eksempel er forskellige lande opdelt i forskellige administrative inddelinger, såsom stater i USA, provinser i Canada og regioner i Frankrig.

Derfor forsøgte vi at indsamle nøjagtige kortdata fra Natural Earth, som afspejler disse regionale administrative forskelle. Natural Earth er et gratis kortarkiv, der indeholder både raster- og vektordata i skalaerne 1:10m, 1:50m og 1:110 millioner, og som fungerer som en passende basisskabelon til at skabe visuelt tiltalende og professionelt udformede digitale kort ved hjælp af GIS-software.

FRA SHP TIL SVG

Efter at have valgt passende kortskabeloner konverterede vores projektteam originale multiformat shapefiler (SHP) til skalerbar vektorgrafik. Denne grafik indeholdt stier til hver administrativ afdeling og blev repræsenteret af en SVG-fil, som er en XML-fil, der indeholder geometriske objekter som cirkler, linjer, firkanter og meget mere. Disse objekter blev indlejret som SVG-tags, hvilket sikrede, at billederne forblev glatte og proportionale.

PYTHON SCRIPT

Selvom hver enhed i SVG-filen har sit eget sti-tag, ville det være mere effektivt at organisere dataene systematisk for at opfylde projektets krav. Vi sorterede SVG-filens data alfabetisk efter land og administrativ afdeling ved hjælp af en Python-script. Det resulterede i et datasæt, der indeholdt over 4500 administrative afdelinger på første niveau i 153 lande over hele verden, hvor kunden enten har igangværende projekter eller har planer om at investere penge.

FRA REFAKTORISERING AF KODE TIL PROGRESSIV WEBAPP

Efter at have uploadet SVG-kortdataene til kompilering oversteg filstørrelsen 16 MB ren tekst. Da en omhyggelig digitalisering ville medføre frysninger, fejl og andre problemer med ydeevnen, besluttede vores specialister at bruge Javascript til at omdanne det interaktive kort til en progressiv webapplikation. Derfor indarbejdede vores projektteam SVG-filerne i HTML-markup'en. Men da koden oversteg 4500 linjer, tilføjede vores softwareingeniører inline frames (HTML-elementer, der indlæser en anden HTML-side i dokumentet) og en separat HTML-fil, der indeholdt SVG. Det hjalp med at optimere systembelastningen og sikre en jævn ydelse. Derudover byggede vi en lokal server for at tillade forespørgsler på tværs af oprindelse fra flere brugere.

BRUGERGRÆNSEFLADE

Desuden skabte vores projektteam en brugervenlig grænseflade til nem kortnavigation. Vi farvede kortet ved at angive nuancer afhængigt af antallet af projekter i et bestemt land. Vores udviklere byggede også praktiske filtre til at søge efter specifikke projekter og fremhævede regioner baseret på projektstatus (aktiv, lukket, suspenderet). Projekterne er kategoriseret efter deres formål (social beskyttelse, sundhed, landbrug, energi osv.), anvendelseslande og kumulative omkostninger. Efter at have specificeret projekterne kan brugerne downloade PDF-rapporter for at lære mere om dem.

Overordnet set har Innowise implementeret funktioner som kortbaggrunde (topografiske, billeder med etiketter og andre), kortkonfiguration (standard 2D- eller tabelform), avancerede søgefunktioner (baseret på stednavn eller geokoordinater i decimalgrader/DMS-format) og muligheder for at zoome ind/ud.

Teknologier

Front-end

React, React-query, MaterialUI, D3.js

Back-end

NodeJS, Express.js, Python

Database

MongoDB

VCS

Github

DevOps

Docker, Jenkins, AWS

Proces

Gennem hele udviklingsprocessen for forretningskortlægningssoftware fulgte Innowise agile tilgange og tilpassede sig kundens behov. Projektteamet fulgte Scrum-metoden med ugentlige sprints, daglige teammøder og løbende integration og testning. Ved at kommunikere med kunden via Microsoft Teams kunne vi nemt imødekomme ændringer i omfanget og fordele opgaverne i forhold til teammedlemmernes kompetencer.

Efter projektets vision lancerede vi en fuldgyldig MVP med grundlæggende funktionalitet. I øjeblikket overvejer kunden at tilføje nye funktioner og integrere SVG-kortet med eksterne tjenester, mens vores team sørger for support og vedligeholdelse efter lanceringen.

Hold

Forretningsanalytiker

Projektleder

Front-end-udviklere

Back-end-udviklere

UI/UX-designer

DevOps

QA Engineers

Resultater: Forbedret datatransparens, skalerbarhed og interaktivitet

Innowise har udviklet business map-software til at overvåge oplysninger om kundens projekt over hele verden. Vi har leveret en one-stop-platform, hvor kunden kan styre igangværende projekter, sortere dem efter forskellige faktorer og få adgang til projektoplysninger. De smukke SVG-kort, vi har udviklet, giver kunden flere fordele, f.eks:

Skalerbarhed. Da SVG-kort er vektorbaserede, kan de skaleres op eller ned uden at miste kvalitet eller blive pixeleret. Det gør det muligt at vise indhold på forskellige zoomniveauer eller i forskellige størrelser, hvilket giver større fleksibilitet.
Interaktivitet. SVG-kortene giver brugerne mulighed for at interagere med de digitale elementer ved at klikke på eller holde musen over forskellige funktioner og vise data, der er knyttet til et bestemt geografisk område.
Letvægt. SVG-kort er typisk mindre i filstørrelse end andre formater, f.eks. rasterbilleder. Det gør dem lettere at indlæse og vise på en webside, hvilket sikrer en problemfri brugeroplevelse.
Tilpasning. Vores projektteam tilpassede og stylede kortet ved hjælp af CSS, hvilket gav mulighed for en høj grad af kontrol over kortets udseende. Det gør det muligt at fremhæve specifikke funktioner og få kortet til at matche kundens branding, hvilket giver et personligt præg.

Projektets varighed

Juni 2022 - Løbende

500+

projekter på tværs af 150 lande

230%

øget effektivitet i geodata

Relaterede sager

Kontakt os

Book et opkald eller udfyld formularen nedenfor, så vender vi tilbage til dig, når vi har behandlet din anmodning.

Navn

Virksomhed

E-mail

Telefon

Besked

Send os en talebesked

Vedhæft dokumenter

Upload fil

Du kan vedhæfte 1 fil på op til 2 MB. Gyldige filformater: pdf, jpg, jpeg, png.

Ved at klikke på Send accepterer du, at Innowise behandler dine personlige data i henhold til vores Politik for beskyttelse af personlige oplysninger for at give dig relevante oplysninger. Ved at indsende dit telefonnummer accepterer du, at vi kan kontakte dig via taleopkald, sms og beskedapps. Opkalds-, besked- og datatakster kan være gældende.

Du kan også sende os din anmodning
til contact@innowise.com

Hvad sker der nu?

Når vi har modtaget og behandlet din anmodning, vender vi tilbage til dig for at beskrive dine projektbehov og underskriver en NDA for at sikre fortrolighed.

Når vi har undersøgt dine ønsker, behov og forventninger, udarbejder vores team et projektforslag med forslag med arbejdets omfang, teamstørrelse, tids- og omkostningsoverslag.

Vi arrangerer et møde med dig for at diskutere tilbuddet og få detaljerne på plads.

Til sidst underskriver vi en kontrakt og begynder at arbejde på dit projekt med det samme.

230% øget effektivitet i geografiske data gennem interaktive webkort

Kunde

Udfordring: At overvinde byrden af papirarbejde med interaktiv kortdatavisualisering

Løsning: Udvikling af interaktive kort, der viser tilpassede projekter over hele verden

Teknologier

Proces

Hold

Resultater: Forbedret datatransparens, skalerbarhed og interaktivitet

Relaterede sager

Kontakt os

Hvad sker der nu?

Brug for andre tjenester?

Abonner til vores nyhedsbrev

Abonner
til vores nyhedsbrev