230% ökning av geografisk dataeffektivitet genom interaktiva webbkartor

Innowise har utvecklat en lätt SVG-karta för att visa geografiska data och övervaka kundens internationella projekt.

Kund

Industri

Fintech, Regering

Region

USA

Kund sedan

2022

Vår kund är en av de mest framstående finansinstituten, som ger bidrag och lån till viktiga offentliga och privata projekt. Med mer än 100 filialer runt om i världen erbjuder de hållbara lösningar som syftar till att minska fattigdomen genom att genomföra kapitalprojekt.

Detaljerad information om kunden kan inte lämnas ut enligt bestämmelserna i NDA.

Utmaning: övervinna bördan av pappersarbete med interaktiv kartdatavisualisering

Sedan grundandet har vår kund övervakat tusentals ekonomiska, sociala, energiska, pedagogiska, miljömässiga och andra projekt, i samarbete med regeringar och internationella företag. De syftar till att minska fattigdomen, öka det gemensamma välståndet och främja hållbar utveckling genom att finansiera viktiga projekt av strategisk betydelse.

Även om vår kund hade ett tydligt och grundligt arbetsflöde och datapresentation, mötte de utmaningar som analyserade och bedömde textinformation. I stället för att använda interaktiv karta datavisualisering för dataanalys, förlitade de sig på flersidiga rapporter, vilket ofta gjorde välgrundade beslut svåra.

Med en mångfacetterad global projektportfölj sökte vår kund en skalbar, interaktiv och anpassningsbar lösning med geografiska kartor för att hjälpa kunder att snabbt granska korta detaljer om aktuella projekt och få insikter över intresseområden, inklusive regioner, länder och anpassade områden.

Lösning: utveckla interaktiva kartor som visar anpassade projekt runt om i världen

Efter att ha analyserat kundens begäran föreslog Innowise att utveckla en SVG-karta (scalable vector graphics). Till skillnad från pixelbaserade kartor använder SVG-kartor matematiska ekvationer för att definiera kartelement, vilket möjliggör sömlös skalning upp och ner utan kvalitetsförlust.

När det gäller visualisering av platsdata inkluderar populära val bibliotek som Google Maps och Open Street Maps. SVG-kartor är dock lätta, anpassningsbara och licensfria, så de är ett bra val när varken hög upplösning eller noggrann detalj krävs.

Efter att ha bestämt sig för en lösning gick vårt projektteam igenom flera efterföljande faser för att leverera interaktiva SVG-kartor.

ADMINISTRATIVA DIVISIONER PÅ FÖRSTA NIVÅN.

Innan du dyker djupare in i kärnlogiken klargjorde Innowise de viktigaste enheterna som en SVG-karta illustrerar. Förutom att fastställa de korrekta geografiska gränserna för länderna var vi också tvungna att säkerställa exakta och aktuella administrativa territoriella indelningar. Som ett exempel är olika länder indelade i olika administrativa indelningar, såsom stater i USA, provinser i Kanada och regioner i Frankrike.

Följaktligen syftade vi till att samla in exakta kartdata från naturlig jord som återspeglar dessa regionala administrativa avvikelser. Natural Earth är ett gratis kartförvar som tillhandahåller både raster- och vektordata i skalor på 1:10m, 1:50m och 1:110 miljoner, och fungerar som en lämplig basmall för att skapa visuellt tilltalande och sakkunnigt utformade digitala kartor med GIS-programvara.

FRÅN SHP TILL SVG

Efter att ha valt lämpliga kartmallar konverterade vårt projektteam original multiformat shapefiles (SHP) till skalbar vektorgrafik. Dessa grafik gav vägar till varje administrativ division och representerades av en SVG-fil, som är en XML-fil som innehåller geometriska objekt som cirklar, linjer, rutor och mer. Dessa objekt var inbäddade som SVG-taggar, vilket säkerställde att bilderna förblev smidiga och proportionella.

PYTHON SCRIPT

Även om varje enhet i SVG-filen har sin egen söktagg, skulle det vara mer effektivt att organisera data systematiskt för att uppfylla projektkraven. Vi sorterade SVG-fildata alfabetiskt efter land och administrativ indelning med hjälp av ett Python-skript. Detta resulterade i en dataset som innehöll över 4500 administrativa avdelningar på första nivå i 153 länder över hela världen där kunden antingen har pågående projekt eller planerar att investera medel.

FRÅN KODREFAKTORERING TILL PROGRESSIV WEBBAPP

Efter att ha laddat upp SVG-kartdata för sammanställning översteg filstorleken 16 MB ren text. Eftersom noggrann digitalisering skulle orsaka frysningar, glitches och andra prestandaproblem bestämde våra specialister att använda Javascript för att göra den interaktiva kartan till en progressiv webbapplikation. Därför införlivade vårt projektteam SVG-filerna i HTML-markeringen. Eftersom koden översteg 4500 rader lade våra mjukvaruingenjörer inline-ramar (HTML-element som laddar en annan HTML-sida i dokumentet) och en separat HTML-fil som innehåller SVG. Detta bidrog till att optimera systembelastningen och säkerställa smidig prestanda. Dessutom byggde vi en lokal server för att tillåta förfrågningar från flera användare.

ANVÄNDARGRÄNSSNITT

Dessutom skapade vårt projektteam ett användarvänligt gränssnitt för enkel kartnavigering. Vi färgade kartan och specificerade nyanser beroende på antalet projekt i ett visst land. Våra utvecklare byggde också praktiska filter för att söka specifika projekt, markera regioner baserat på projektstatus (aktiv, stängd, avstängd). Projekten kategoriseras enligt deras syften (socialt skydd, hälsa, jordbruk, energi osv), tillämpningsländer och kumulativa kostnader. Efter att ha specificerat projekten kan användare ladda ner PDF-rapporter för att lära sig mer om dem.

Sammantaget har Innowise implementerat sådana funktioner som kartbakgrunder (topografiska, bilder med etiketter och andra), kartkonfiguration (standard 2D eller tabellform), avancerade sökfunktioner (baserat på platsnamn eller geokoordinater i decimalgrader/DMS-format) och zooma in/ut-alternativ.

Teknik

Front-end

React, React-query, MaterialUI, D3.js

Back-end

Node.js, Express.js, Python

Databas

MongoDB

VCS

Github

DevOps

Docker, Jenkins, AWS

Process

Under hela mjukvaruutvecklingsprocessen för affärskartläggning följde Innowise agila tillvägagångssätt och anpassade sig till kundens behov. Projektgruppen följde Scrum-metoden med veckovisa sprintar, dagliga teammöten och kontinuerlig integration och testning. Genom att kommunicera med kunden via Microsoft Teams anpassade vi enkelt förändringar i omfattningen och fördelade uppgifter enligt teammedlemmarnas kompetenser.

Efter projektvisionen lanserade vi en fullfjädrad MVP med grundläggande funktionalitet. För närvarande överväger klienten att lägga till nya funktioner och integrera SVG-kartan med externa tjänster, med vårt team som tillhandahåller support och underhåll efter lanseringen.

Team

Affärsanalytiker

Projektledare

Front-end-utvecklare

Back-end utvecklare

UI/UX-designer

DevOps

QA-ingenjörer

Resultat: förbättrad datatransparens, skalbarhet och interaktivitet

Innowise har utvecklat affärskartprogramvara för att övervaka information om kundens projekt runt om i världen. Vi har levererat en one-stop-plattform där kunden kan hantera pågående projekt, sortera dem efter olika faktorer och få tillgång till projektdetaljer. De vackra SVG-kartorna vi har utvecklat erbjuder kunden flera fördelar, till exempel:

Skalbarhet. Eftersom SVG-kartor är vektorbaserade kan de skalas upp eller ner utan att förlora kvalitet eller bli pixliga. Detta gör det möjligt att visa innehåll på olika zoomnivåer eller storlekar, vilket ger större flexibilitet.
Interaktivitet. SVG-kartorna gör det möjligt för användare att interagera med de digitala elementen genom att klicka på eller sväva över olika funktioner och visa data som är associerade med ett visst geografiskt område.
Lätt. SVG-kartor är vanligtvis mindre i filstorlek än andra format, till exempel rasterbilder. Detta gör dem enklare att ladda och visa på en webbsida, vilket garanterar en sömlös användarupplevelse.
Anpassning. Vårt projektteam anpassade och stylade kartan med hjälp av CSS, vilket möjliggör en hög grad av kontroll över kartans utseende. Detta gör det möjligt att markera specifika funktioner och att kartan matchar kundens varumärke och erbjuder en personlig touch.

Projektets löptid

Juni 2022 - fortlöpande

500+

projekt i 150 länder

230%

ökad effektivitet när det gäller geodata

Relaterade fall

Kontakta oss!

Boka ett samtal eller fyll i formuläret nedan så återkommer vi till dig när vi har behandlat din förfrågan.

Namn

Företag

E-post

Telefon

Meddelande Vänligen inkludera projektinformation, varaktighet, teknologistack, IT-proffs som behövs och annan relevant information

Spela in ett röstmeddelande om ditt projekt för att hjälpa oss att förstå det bättre

Bifoga ytterligare dokument vid behov

Ladda upp filen

Du kan bifoga upp till 1 fil på totalt 2 MB. Giltiga filer: pdf, jpg, jpeg, png

Observera att när du klickar på knappen Skicka kommer Innowise att behandla dina personuppgifter i enlighet med vår Integritetspolicy för att ge dig lämplig information.

Vad händer härnäst?

Efter att ha mottagit och behandlat din begäran kommer vi att återkomma till dig inom kort för att specificera dina projektbehov och underteckna en NDA för att säkerställa konfidentialitet av information.

Efter att ha undersökt kraven utarbetar våra analytiker och utvecklare en projektförslag med arbetets omfattning, lagets storlek, tid och kostnad uppskattningar.

Vi ordnar ett möte med dig för att diskutera erbjudandet och komma överens.

Vi skriver på ett kontrakt och börjar arbeta med ditt projekt så snabbt som möjligt.