230% Steigerung der Effizienz von geografischen Daten durch interaktive Webkarten

Innowise hat eine leichtgewichtige SVG-Karte entwickelt, um geografische Daten anzuzeigen und die internationalen Projekte des Kunden zu überwachen.

Der Kunde

Industrie

Fintech, Regierung

Region

Kunde seit

2022

Unser Kunde ist eine der bekanntesten Finanzinstitutionen, die Zuschüsse und Darlehen für wichtige öffentliche und private Projekte bereitstellt. Mit mehr als 100 Niederlassungen auf der ganzen Welt bietet das Unternehmen nachhaltige Lösungen an, die darauf abzielen, Armut durch die Durchführung von Investitionsprojekten zu verringern.

Detaillierte Information über den Kunden kann aufgrund der Bestimmungen des NDA nicht veröffentlicht werden.

Herausforderung: Meisterung der Papierflut durch interaktive Kartendatenvisualisierung

Seit der Gründung hat unser Kunde Tausende von Finanz-, Sozial-, Energie-, Bildungs-, Umwelt- und anderen Projekten betreut und dabei mit Regierungen und internationalen Unternehmen zusammengearbeitet. Sein Ziel ist es, Armut zu verringern, den gemeinsamen Wohlstand zu steigern und eine nachhaltige Entwicklung zu fördern, indem man Schlüsselprojekte von strategischer Bedeutung finanziert.

Obwohl unser Kunde über einen klaren und gründlichen Arbeitsablauf und eine Datenpräsentation verfügte, stand er vor der Herausforderung, textliche Informationen zu analysieren und zu bewerten. Anstatt eine interaktive Karte zu verwenden Datenvisualisierung-Tools Für die Datenanalyse stützten sie sich auf mehrseitige Berichte, was fundierte Entscheidungen oft erschwerte.

Unser Kunde hat ein vielschichtiges globales Projektportfolio und suchte nach einer skalierbaren, interaktiven und anpassbaren Lösung mit geografischen Karten, die es den Kunden ermöglicht, schnell kurze Details zu aktuellen Projekten einzusehen und Einblicke in die verschiedenen Interessengebiete zu erhalten, einschließlich Regionen, Länder und benutzerdefinierte Bereiche.

Lösung: Entwicklung interaktiver Karten, die individuelle Projekte rund um den Globus zeigen

Nach der Analyse der Kundenanforderung schlug Innowise die Entwicklung einer SVG-Karte (skalierbare Vektorgrafik) vor. Im Gegensatz zu pixelbasierten Karten werden bei SVG-Karten mathematische Gleichungen zur Definition der Kartenelemente verwendet, was eine nahtlose Skalierung nach oben und unten ohne Qualitätsverluste ermöglicht.

Was die Visualisierung von Standortdaten angeht, so sind Bibliotheken wie Google Maps und Open Street Maps eine beliebte Wahl. SVG-Karten sind jedoch leichtgewichtig, anpassbar und lizenzfrei, so dass sie als eine gute Wahl angesehen werden, wenn weder eine hohe Auflösung noch akribische Details erforderlich sind.

Nachdem wir uns auf eine Lösung geeinigt hatten, durchlief unser Projektteam mehrere weitere Phasen, um interaktive SVG-Karten zu erstellen.

VERWALTUNGSABTEILUNGEN DER ERSTEN EBENE

Bevor wir uns näher mit der Kernlogik befassten, klärte Innowise die wichtigsten Einheiten, die eine SVG-Karte abbildet. Neben der Festlegung der korrekten geografischen Grenzen der Länder mussten wir auch eine präzise und aktuelle administrative und territoriale Einteilung sicherstellen. So sind beispielsweise verschiedene Länder in unterschiedliche Verwaltungseinheiten unterteilt, wie die Bundesstaaten in den USA, die Provinzen in Kanada und die Regionen in Frankreich.

Daher haben wir uns bemüht, genaue Kartendaten von Natural Earth zu sammeln, die diese regionalen Verwaltungsunterschiede widerspiegeln. Natural Earth ist ein kostenloser Kartenspeicher, der sowohl Raster- als auch Vektordaten in den Maßstäben 1:10m, 1:50m und 1:110 Millionen bereitstellt und als geeignete Vorlage für die Erstellung visuell ansprechender und fachmännisch gestalteter digitaler Karten mit GIS-Software dient.

VON SHP ZU SVG

Nach der Auswahl geeigneter Kartenvorlagen konvertierte unser Projektteam die ursprünglichen Multiformat-Shapefiles (SHP) in skalierbare Vektorgrafiken. Diese Grafiken enthielten Pfade zu den einzelnen Verwaltungsbereichen und wurden durch eine SVG-Datei dargestellt, eine XML-Datei, die geometrische Objekte wie Kreise, Linien, Quadrate und mehr enthält. Diese Objekte wurden als SVG-Tags eingebettet, wodurch sichergestellt wurde, dass die Bilder glatt und proportional blieben.

PYTHON-SITUATIONSMUSTER

Obwohl jede Entität in der SVG-Datei einen eigenen Pfad-Tag hat, wäre eine systematische Organisation der Daten für die Erfüllung der Projektanforderungen effizienter. Wir sortierten die Daten der SVG-Datei alphabetisch nach Land und Verwaltungseinheit mit Hilfe eines Python-Skript. Daraus ergab sich ein Datensatz mit über 4500 Verwaltungsabteilungen der ersten Ebene in 153 Ländern auf der ganzen Welt, in denen der Kunde entweder laufende Projekte hat oder plant, Mittel zu investieren.

VOM CODE-REFACTORING ZUR PROGRESSIVEN WEBANWENDUNG

Nach dem Hochladen der SVG-Kartendaten zur Kompilierung überstieg die Dateigröße 16 MB reinen Text. Da die sorgfältige Digitalisierung zu Einfrieren, Störungen und anderen Leistungsproblemen führen würde, beschlossen unsere Spezialisten, die interaktive Karte mit Javascript in eine progressive Webanwendung zu verwandeln. Daher integrierte unser Projektteam die SVG-Dateien in das HTML-Markup. Da der Code jedoch mehr als 4500 Zeilen umfasste, fügten unsere Softwareingenieure Inline-Frames (HTML-Elemente, die eine andere HTML-Seite innerhalb des Dokuments laden) und eine separate HTML-Datei mit SVG hinzu. Dies trug dazu bei, die Systemlast zu optimieren und eine reibungslose Leistung zu gewährleisten. Außerdem haben wir einen lokalen Server eingerichtet, um Anfragen von mehreren Benutzern zu ermöglichen.

BENUTZERINTERFACE

Außerdem hat unser Projektteam eine benutzerfreundliche Oberfläche für eine einfache Kartennavigation geschaffen. Wir färbten die Karte ein und legten Schattierungen fest, die von der Anzahl der Projekte in einem bestimmten Land abhängen. Außerdem haben unsere Entwickler bequeme Filter für die Suche nach bestimmten Projekten entwickelt, die Regionen auf der Grundlage des Projektstatus (aktiv, geschlossen, ausgesetzt) hervorheben. Die Projekte sind nach ihrem Zweck (Sozialschutz, Gesundheit, Landwirtschaft, Energie usw.), den Anwendungsländern und den kumulierten Kosten kategorisiert. Nach Angabe der Projekte können die Nutzer PDF-Berichte herunterladen, um mehr über diese zu erfahren.

Insgesamt hat Innowise Funktionen wie Kartenhintergründe (topografisch, Bilder mit Beschriftungen und andere), Kartenkonfiguration (standardmäßig in 2D oder in Tabellenform), erweiterte Suchfunktionen (auf der Grundlage von Ortsnamen oder Geokoordinaten im Dezimalgrad/DMS-Format) und Vergrößerungs-/Verkleinerungsoptionen implementiert.

Technologien

Frontend

React, React-query, MaterialUI, D3.js

Backend

Node.js, Express.js, Python

Datenbank

MongoDB

VCS

Github

DevOps

Docker, Jenkins, AWS

Prozess

Während des gesamten Entwicklungsprozesses in Bezug auf die Business-Mapping-Lösung hielt sich Innowise an agile Ansätze und orientierte sich an den Bedürfnissen des Kunden. Das Projektteam folgte der Scrum-Methode mit wöchentlichen Sprints, täglichen Teambesprechungen sowie kontinuierlicher Integration und Tests. Durch die Kommunikation mit dem Kunden über Microsoft Teams konnten wir Änderungen des Umfangs problemlos berücksichtigen und die Aufgaben entsprechend den Kompetenzen der Teammitglieder verteilen.

Im Anschluss an die Projektvision haben wir ein vollwertiges MVP mit grundlegenden Funktionen eingeführt. Derzeit erwägt der Kunde, neue Funktionen hinzuzufügen und die SVG-Karte mit externen Diensten zu integrieren, wobei unser Team nach der Einführung Support und Wartung leistet.

Team

Business-Analyst

Projektmanager

Front-End-Entwickler

Backend-Entwickler

UI/UX-Designer

DevOps

QA-Ingenieure

Ergebnisse: Verbesserte Datentransparenz, Skalierbarkeit und Interaktivität

Innowise hat eine Business-Map-Software entwickelt, um Informationen über Kundenprojekte rund um den Globus zu überwachen. Wir haben eine One-Stop-Plattform entwickelt, auf der der Kunde laufende Projekte verwalten, nach verschiedenen Faktoren sortieren und auf Projektdetails zugreifen kann. Die schönen SVG-Karten, die wir entwickelt haben, bieten dem Kunden mehrere Vorteile, wie zum Beispiel:

Skalierbarkeit. Da SVG-Karten vektorbasiert sind, können sie vergrößert oder verkleinert werden, ohne an Qualität zu verlieren oder pixelig zu werden. Dadurch ist es möglich, Inhalte in verschiedenen Zoomstufen oder Größen anzuzeigen, was eine größere Flexibilität bietet.
Interaktivität. Die SVG-Karten ermöglichen es den Nutzern, mit den digitalen Elementen zu interagieren, indem sie auf verschiedene Merkmale klicken oder mit dem Mauszeiger darüber fahren und so Daten zu einem bestimmten geografischen Gebiet anzeigen lassen.
Geringes Gewicht. SVG-Karten haben in der Regel eine geringere Dateigröße als andere Formate, z. B. Rasterbilder. Dadurch lassen sie sich leichter laden und auf einer Webseite anzeigen, was ein nahtloses Nutzererlebnis gewährleistet.
Anpassung. Unser Projektteam hat die Karte mit Hilfe von CSS angepasst und gestaltet, was ein hohes Maß an Kontrolle über das Aussehen der Karte ermöglicht. So können bestimmte Merkmale hervorgehoben und die Karte an das Branding des Kunden angepasst werden, was ihr eine persönliche Note verleiht.

Projektdauer

Juni 2022 - Laufend

500+

Projekte in 150 Ländern

230%

Steigerung der Effizienz von Geodaten

Unsere aktuellen Fallstudien

Kontaktieren Sie uns!

Buchen Sie einen Anruf oder füllen Sie das Formular unten aus und wir melden uns bei Ihnen, sobald wir Ihre Anfrage bearbeitet haben.

Name

Unternehmen

E-Mail

Telefon

Nachricht Bitte fügen Sie Projektdetails, Dauer, Technologie-Stack, benötigte IT-Experten und andere Infos bei.

Bitte fügen Sie Projektdetails, Dauer, Technologie-Stack, benötigte IT-Experten
und andere Infos bei.

Hängen Sie nach Bedarf zusätzliche Dokumente an.

Datei hochladen

Sie können bis zu 1 Datei von insgesamt 2 MB anhängen. Gültige Dateien: pdf, jpg, jpeg, png

Bitte beachten Sie, dass Innowise mit dem Anklicken der Schaltfläche 'Senden' Ihre persönlichen Daten nach der Datenschutzrichtlinie verarbeiten wird, um Ihnen die gewünschten Informationen zukommen zu lassen.

Wie geht es weiter?

Sobald wir Ihre Anfrage erhalten und bearbeitet haben, werden wir uns mit Ihnen in Verbindung setzen, um Ihre Projektanforderungen zu besprechen und eine NDA (Vertraulichkeitserklärung) für die Vertraulichkeit der Informationen zu unterzeichnen.

Nach der Prüfung der Anforderungen erstellen unsere Analysten und Entwickler einen Projektvorschlag, der Arbeitsumfang, Teamgröße, Zeit- und Kostenschätzung enthält.

Wir vereinbaren einen Termin mit Ihnen, um das Angebot zu besprechen und eine Vereinbarung mit Ihnen zu treffen.

Wir unterzeichnen einen Vertrag und beginnen umgehend mit der Arbeit an Ihrem Projekt.

230% Steigerung der Effizienz von geografischen Daten durch interaktive Webkarten

Der Kunde

Herausforderung: Meisterung der Papierflut durch interaktive Kartendatenvisualisierung

Lösung: Entwicklung interaktiver Karten, die individuelle Projekte rund um den Globus zeigen

Technologien

Prozess

Team

Ergebnisse: Verbesserte Datentransparenz, Skalierbarkeit und Interaktivität

Unsere aktuellen Fallstudien

Kontaktieren Sie uns!

Wie geht es weiter?

Gemeinsam Software entwickeln ^●

Einen weiteren Antrag stellen

Schließen

230% Steigerung der Effizienz von geografischen Daten durch interaktive Webkarten

Der Kunde

Herausforderung: Meisterung der Papierflut durch interaktive Kartendaten­visualisierung

Lösung: Entwicklung interaktiver Karten, die individuelle Projekte rund um den Globus zeigen

Technologien

Prozess

Team

Ergebnisse: Verbesserte Datentransparenz, Skalierbarkeit und Interaktivität

Unsere aktuellen Fallstudien

Kontaktieren Sie uns!

Wie geht es weiter?

Gemein­sam Software entwickeln ●

Abonnement an unseren Newsletter

Einen weiteren Antrag stellen

Schließen

Herausforderung: Meisterung der Papierflut durch interaktive Kartendatenvisualisierung

Gemeinsam Software entwickeln ^●

Abonnement
an unseren Newsletter