230% verhoging van de efficiëntie van geografische gegevens door middel van interactieve webkaarten

Innowise heeft een lichtgewicht SVG-kaart ontwikkeld om geografische gegevens te bekijken en de internationale projecten van de klant te volgen.

Klant

Industrie

Fintech, Overheid

Regio

Klant sinds

2022

Onze klant is een van de meest vooraanstaande financiële instellingen die subsidies en leningen verstrekt aan belangrijke openbare en particuliere projecten. Met meer dan 100 vestigingen over de hele wereld bieden zij duurzame oplossingen die tot doel hebben de armoede te verminderen door kapitaalprojecten uit te voeren.

Gedetailleerde informatie over de klant kan niet openbaar worden gemaakt krachtens de bepalingen van de NDA.

Uitdaging: De last van papierwerk overwinnen met interactieve kaart datavisualisatie

Sinds de oprichting heeft onze klant duizenden financiële, sociale, energetische, educatieve, milieu- en andere projecten begeleid, in samenwerking met regeringen en internationale bedrijven. Zij streven ernaar armoede te verminderen, gedeelde welvaart te vergroten en duurzame ontwikkeling te bevorderen door belangrijke projecten van strategisch belang te financieren.

Hoewel onze klant een duidelijke en grondige werkstroom- en gegevenspresentatie had, stonden ze voor uitdagingen bij het analyseren en beoordelen van tekstuele informatie. In plaats van interactieve kaartdatavisualisatie te gebruiken voor data analysis, vertrouwden ze op rapporten van meerdere pagina's, waardoor geïnformeerde beslissingen vaak moeilijk werden.

Met een veelzijdige wereldwijde projectenportefeuille zocht onze klant een schaalbare, interactieve en aanpasbare oplossing met geografische kaarten om klanten te helpen snel korte details over lopende projecten te bekijken en inzicht te krijgen in interessegebieden, waaronder regio's, landen en aangepaste gebieden.

Oplossing: Ontwikkeling van interactieve kaarten met aangepaste projecten over de hele wereld

Na analyse van het verzoek van de klant stelde Innowise voor om een SVG (schaalbare vectorafbeeldingen) kaart te ontwikkelen. In tegenstelling tot pixelgebaseerde kaarten gebruiken SVG-kaarten wiskundige vergelijkingen om kaartelementen te definiëren, waardoor naadloos op- en afgeschaald kan worden zonder kwaliteitsverlies.

Voor de visualisatie van locatiegegevens zijn populaire keuzes bibliotheken als Google Maps en Open Street Maps. SVG-kaarten zijn echter licht, aanpasbaar en licentievrij, dus een goede keuze wanneer geen hoge resolutie of nauwgezette details vereist zijn.

Nadat een oplossing was gevonden, heeft ons projectteam verschillende fasen doorlopen om interactieve SVG-kaarten te leveren.

ADMINISTRATIEVE AFDELINGEN VAN HET EERSTE NIVEAU

Alvorens dieper in te gaan op de kernlogica, verduidelijkte Innowise de belangrijkste entiteiten die een SVG-kaart illustreert. Naast het vaststellen van de juiste geografische grenzen van de landen, moesten we ook zorgen voor een nauwkeurige en actuele administratief-territoriale indeling. Zo zijn verschillende landen onderverdeeld in verschillende administratieve divisies, zoals staten in de VS, provincies in Canada en regio's in Frankrijk.

Daarom wilden we nauwkeurige kaartgegevens van Natural Earth verzamelen die deze regionale administratieve verschillen weerspiegelen. Natural Earth is een gratis kaartenarchief dat zowel raster- als vectorgegevens levert op schalen van 1:10m, 1:50m en 1:110 miljoen, en dient als een geschikte basis voor het maken van visueel aantrekkelijke en vakkundig gemaakte digitale kaarten met behulp van GIS-software.

VAN SHP NAAR SVG

Na het kiezen van geschikte kaartsjablonen heeft ons projectteam de originele multiformat shapefiles (SHP) omgezet in schaalbare vectorafbeeldingen. Deze afbeeldingen boden paden naar elke administratieve afdeling en werden weergegeven door een SVG-bestand, een XML-bestand dat geometrische objecten bevat zoals cirkels, lijnen, vierkanten en meer. Deze objecten werden ingesloten als SVG-tags, waardoor de afbeeldingen vloeiend en proportioneel bleven.

PYTHON SCRIPT

Hoewel elke entiteit in het SVG-bestand zijn eigen pad-tag heeft, zou het systematisch organiseren van de gegevens efficiënter zijn om aan de projectvereisten te voldoen. We hebben de SVG-bestandsgegevens alfabetisch gesorteerd op land- en administratieve afdeling met behulp van een Python-script. Dit resulteerde in een dataset met meer dan 4500 eerstelijns administratieve afdelingen in 153 landen over de hele wereld waar de klant ofwel lopende projecten heeft of van plan is om geld te investeren.

VAN CODE REFACTORING TOT PROGRESSIEVE WEB APP

Na het uploaden van de SVG-kaartgegevens voor compilatie overschreed de bestandsgrootte 16 MB pure tekst. Omdat een nauwgezette digitalisering tot bevriezingen, haperingen en andere prestatieproblemen zou leiden, besloten onze specialisten Javascript te gebruiken om de interactieve kaart om te zetten in een progressieve webapplicatie. Daarom nam ons projectteam de SVG-bestanden op in de HTML-markup. Omdat de code echter meer dan 4500 regels bevatte, voegden onze software-engineers inline frames toe (HTML-elementen die een andere HTML-pagina binnen het document laden) en een apart HTML-bestand met SVG. Dit hielp de belasting van het systeem te optimaliseren en zorgde voor vlotte prestaties. Bovendien bouwden we een lokale server om cross-origin verzoeken van meerdere gebruikers mogelijk te maken.

GEBRUIKERSINTERFACE

Bovendien creëerde ons projectteam een gebruiksvriendelijke interface voor eenvoudige kaartnavigatie. We hebben de kaart ingekleurd, met kleuren die afhangen van het aantal projecten in een bepaald land. Onze ontwikkelaars bouwden ook handige filters voor het zoeken naar specifieke projecten, waarbij regio's worden gemarkeerd op basis van de projectstatus (actief, gesloten, opgeschort). De projecten zijn ingedeeld naar doel (sociale bescherming, gezondheid, landbouw, energie, enz.), land van toepassing en cumulatieve kosten. Na het specificeren van de projecten kunnen gebruikers PDF-rapporten downloaden om er meer over te weten te komen.

In het algemeen heeft Innowise functies geïmplementeerd zoals kaartachtergronden (topografisch, beeldmateriaal met labels en andere), kaartconfiguratie (standaard 2D of tabelvorm), geavanceerde zoekmogelijkheden (op basis van locatienaam of geocoördinaten in decimale graden/DMS-formaat) en in- en uitzoomopties.

Technologieën

Front-end

React, React-query, MaterialUI, D3.js

Back-end

Node.js, Express.js, Python

Database

MongoDB

VCS

Github

DevOps

Docker, Jenkins, AWS

Proces

Gedurende het gehele proces van software voor zakelijke kaarten ontwikkeling heeft Innowise zich gehouden aan een agile aanpak en zich afgestemd op de behoeften van de klant. Het projectteam volgde de Scrum-methodologie met wekelijkse sprints, dagelijkse teamvergaderingen en continue integratie en testen. Door met de klant te communiceren via Microsoft Teams konden we wijzigingen in de scope gemakkelijk opvangen en taken verdelen op basis van de competenties van de teamleden.

Naar aanleiding van de projectvisie hebben we een volwaardige MVP met basisfunctionaliteit gelanceerd. Momenteel overweegt de klant nieuwe functies toe te voegen en de SVG-kaart te integreren met externe diensten, waarbij ons team na de lancering ondersteuning en onderhoud biedt.

Team

Bedrijfsanalist

Projectleider

Front-End Ontwikkelaars

Back-End Ontwikkelaars

UI/UX Ontwerper

DevOps

QA Engineers

Resultaten: Verbeterde gegevenstransparantie, schaalbaarheid en interactiviteit.

Innowise heeft bedrijfskaart software ontwikkeld om informatie over projecten van klanten over de hele wereld te monitoren. We hebben een one-stop platform geleverd waar de klant lopende projecten kan beheren, ze kan sorteren op verschillende factoren en projectdetails kan opvragen. De prachtige SVG kaarten die we hebben ontwikkeld bieden de klant meerdere voordelen, zoals:

Schaalbaarheid. Omdat SVG-kaarten op vectoren zijn gebaseerd, kunnen ze worden vergroot of verkleind zonder kwaliteitsverlies of pixelvorming. Dit maakt het mogelijk om inhoud op verschillende zoomniveaus of afmetingen weer te geven, wat meer flexibiliteit biedt.
Interactiviteit. Met de SVG-kaarten kunnen gebruikers interageren met de digitale elementen door te klikken op of te zweven over verschillende kenmerken, waardoor gegevens over een specifiek geografisch gebied worden weergegeven.
Lichtgewicht. SVG-kaarten zijn doorgaans kleiner in bestandsgrootte dan andere formaten, zoals rasterafbeeldingen. Daardoor zijn ze gemakkelijker te laden en weer te geven op een webpagina, wat zorgt voor een naadloze gebruikerservaring.
Aanpassing. Ons projectteam heeft de kaart aangepast en gestyled met behulp van CSS, waardoor een hoge mate van controle over het uiterlijk van de kaart mogelijk is. Hierdoor kunnen specifieke kenmerken worden benadrukt en kan de kaart worden aangepast aan de huisstijl van de klant, wat een persoonlijk tintje geeft.

Duur van het project

Juni 2022 - Doorlopend

500+

projecten in 150 landen

230%

verhoging van de efficiëntie van de geodata

Gerelateerde gevallen

Neem contact met ons op!

Boek een gesprek of vul het onderstaande formulier in en we nemen contact met je op zodra we je aanvraag hebben verwerkt.

Naam

Bedrijf

E-mail

Telefoon

Bericht Voeg projectgegevens alsjeblieft, duur, technische stapel, IT-professionals nodig en andere relevante informatie toe

Neem een spraakbericht over uw
project op om het ons beter te helpen begrijpen

Voeg indien nodig aanvullende documenten bij

Bestand uploaden

Je kunt maximaal 1 bestand van 2MB bijvoegen. Geldige bestanden: pdf, jpg, jpeg, png

Wij wijzen u erop dat wanneer u op de verzendknop klikt, Innowise uw persoonsgegevens verwerkt in overeenstemming met ons Privacybeleid om u van de juiste informatie te voorzien.

Wat gebeurt er nu?

Na ontvangst en verwerking van uw aanvraag, nemen wij binnenkort contact met u op om uw projectbehoeften in detail te beschrijven en een NDA te ondertekenen om de vertrouwelijkheid van informatie te garanderen.

Na het bestuderen van de vereisten, stellen onze analisten en ontwikkelaars een projectvoorstel met de omvang van de werkzaamheden, teamgrootte, tijd en kosten schattingen.

Wij regelen een ontmoeting met u om het aanbod te bespreken en tot een overeenkomst.

We tekenen een contract en beginnen zo snel mogelijk aan uw project te werken.

230% verhoging van de efficiëntie van geografische gegevens door middel van interactieve webkaarten

Klant

Uitdaging: De last van papierwerk overwinnen met interactieve kaart datavisualisatie

Oplossing: Ontwikkeling van interactieve kaarten met aangepaste projecten over de hele wereld

Technologieën

Proces

Team

Resultaten: Verbeterde gegevenstransparantie, schaalbaarheid en interactiviteit.

Gerelateerde gevallen

Neem contact met ons op!

Wat gebeurt er nu?

Laat^●s ontwikkelen
software samen!

Sluit

230% verhoging van de efficiëntie van geografische gegevens door middel van interactieve webkaarten

Klant

Uitdaging: De last van papierwerk overwinnen met interactieve kaart datavisualisatie

Oplossing: Ontwikkeling van interactieve kaarten met aangepaste projecten over de hele wereld

Technologieën

Proces

Team

Resultaten: Verbeterde gegevenstransparantie, schaalbaarheid en interactiviteit.

Gerelateerde gevallen

Neem contact met ons op!

Wat gebeurt er nu?

Laat●s ontwikkelen software samen!

Inschrijven naar onze nieuwsbrief

Sluit

Laat^●s ontwikkelen
software samen!

Inschrijven
naar onze nieuwsbrief