Versatile interactive map built using scalable vector graphics

Firma Innowise opracowała lekką mapę SVG do przeglądania danych geograficznych i monitorowania międzynarodowych projektów klienta.

Klient

Branża

FinTech, Administracja

Region

MENA

Klient od

2022

Our customer is a financial institution that provides grants and loans to key public and private projects.

Szczegółowe informacje o kliencie nie mogą być ujawnione zgodnie z postanowieniami NDA.

Podsumuj artykuł za pomocą AI

Wyzwanie

Od momentu założenia nasz klient nadzorował tysiące projektów finansowych, społecznych, energetycznych, edukacyjnych, środowiskowych i innych, współpracując z rządami i międzynarodowymi korporacjami. Ich celem jest zmniejszenie ubóstwa, zwiększenie wspólnego dobrobytu i promowanie zrównoważonego rozwoju poprzez finansowanie kluczowych projektów o strategicznym znaczeniu.

Chociaż nasz klient miał jasny i dokładny przepływ pracy i prezentację danych, stanął przed wyzwaniami związanymi z analizą i oceną informacji tekstowych. Zamiast korzystać z interaktywnej wizualizacji danych na mapach, polegali na wielostronicowych raportach, co często utrudniało podejmowanie świadomych decyzji.

Posiadając wieloaspektowe globalne portfolio projektów, nasz klient poszukiwał skalowalnego, interaktywnego i konfigurowalnego rozwiązania z mapami geograficznymi, aby pomóc klientom szybko przeglądać krótkie szczegóły dotyczące bieżących projektów i uzyskać wgląd w obszary zainteresowania, w tym regiony, kraje i obszary niestandardowe.

Rozwiązanie

Po przeanalizowaniu prośby klienta, Innowise zasugerował opracowanie mapy SVG (skalowalna grafika wektorowa). W przeciwieństwie do map opartych na pikselach, mapy SVG wykorzystują równania matematyczne do definiowania elementów mapy, co umożliwia płynne skalowanie w górę i w dół bez utraty jakości.

Jeśli chodzi o wizualizację danych o lokalizacji, popularnym wyborem są biblioteki takie jak Google Maps i Open Street Maps. Mapy SVG są jednak lekkie, konfigurowalne i nie wymagają licencji, więc są dobrym wyborem, gdy nie jest wymagana wysoka rozdzielczość ani skrupulatna szczegółowość.

Po ustaleniu rozwiązania, nasz zespół projektowy przeszedł przez kilka kolejnych etapów, aby dostarczyć interaktywne mapy SVG.

PODZIAŁY ADMINISTRACYJNE PIERWSZEGO STOPNIA

Before diving deeper into the core logic, Innowise clarified the main entities an SVG map illustrates. Besides establishing the correct geographical borders of the countries, we also had to ensure precise and up-to-date administrative-territorial divisions.

W związku z tym naszym celem było zebranie dokładnych danych mapowych z Natural Earth, które odzwierciedlają te regionalne różnice administracyjne. Natural Earth to bezpłatne repozytorium map, które zapewnia zarówno dane rastrowe, jak i wektorowe w skalach 1:10 m, 1:50 m i 1:110 mln, i służy jako odpowiedni szablon bazowy do tworzenia atrakcyjnych wizualnie i fachowo wykonanych map cyfrowych za pomocą oprogramowania GIS.

Z SHP DO SVG

Po wybraniu odpowiednich szablonów map, nasz zespół projektowy przekonwertował oryginalne wieloformatowe pliki shapefiles (SHP) na skalowalną grafikę wektorową. Grafiki te zawierały ścieżki do każdego podziału administracyjnego i były reprezentowane przez plik SVG, który jest plikiem XML zawierającym obiekty geometryczne, takie jak okręgi, linie, kwadraty i inne. Obiekty te zostały osadzone jako znaczniki SVG, dzięki czemu obrazy pozostały płynne i proporcjonalne.

SKRYPT PYTHON

Chociaż każdy podmiot w pliku SVG ma swój własny znacznik ścieżki, systematyczne porządkowanie danych byłoby bardziej efektywne w spełnianiu wymagań projektu. Posortowaliśmy dane pliku SVG alfabetycznie według kraju i podziału administracyjnego przy użyciu Skryptu Python. W rezultacie uzyskano zbiór danych zawierający ponad 4500 oddziałów administracyjnych pierwszego szczebla zlokalizowanych w 153 krajach na całym świecie, w których klient prowadzi projekty lub planuje zainwestować środki.

OD REFAKTORYZACJI KODU DO PROGRESYWNEJ APLIKACJI WEBOWEJ

Po przesłaniu danych mapy SVG do kompilacji, rozmiar pliku przekroczył 16 MB czystego tekstu. Ponieważ drobiazgowa digitalizacja spowodowałaby zawieszanie się, usterki i inne problemy z wydajnością, nasi specjaliści zdecydowali się użyć Javascript, aby przekształcić interaktywną mapę w progresywną aplikację internetową. W związku z tym nasz zespół projektowy włączył pliki SVG do znaczników HTML. Ponieważ jednak kod przekraczał 4500 linii, nasi inżynierowie oprogramowania dodali ramki inline (elementy HTML, które ładują inną stronę HTML w dokumencie) i oddzielny plik HTML zawierający SVG. Pomogło to zoptymalizować obciążenie systemu i zapewnić płynne działanie. Dodatkowo zbudowaliśmy lokalny serwer, aby umożliwić żądania z różnych źródeł od wielu użytkowników.

INTERFEJS UŻYTKOWNIKA

Ponadto nasz zespół projektowy stworzył przyjazny dla użytkownika interfejs ułatwiający nawigację po mapie. Pokolorowaliśmy mapę, określając odcienie w zależności od liczby projektów w danym kraju. Nasi programiści stworzyli również wygodne filtry do wyszukiwania konkretnych projektów, podświetlając regiony na podstawie statusu projektu (aktywny, zamknięty, zawieszony). Projekty są podzielone na kategorie według ich celów (ochrona socjalna, zdrowie, rolnictwo, energia itp.), krajów zastosowania i łącznych kosztów. Po określeniu projektów użytkownicy mogą pobrać raporty PDF, aby dowiedzieć się więcej na ich temat.

Ogólnie rzecz biorąc, Innowise wdrożyło takie funkcje, jak tła map (topograficzne, obrazy z etykietami i inne), konfiguracja map (domyślna forma 2D lub tabela), zaawansowane możliwości wyszukiwania (na podstawie nazwy lokalizacji lub współrzędnych geograficznych w stopniach dziesiętnych / formacie DMS) oraz opcje powiększania / pomniejszania.

Technologie

Front-end

React, React-query, MaterialUI, D3.js

Back-end

NodeJS, Express.js, Python

Baza danych

MongoDB

VCS

Github

DevOps

Docker, Jenkins, AWS

Proces

W trakcie całego procesu tworzenia oprogramowania do mapowania biznesowego Innowise stosowało zwinne podejście i dostosowywało się do potrzeb klienta. Zespół projektowy stosował metodologię Scrum z cotygodniowymi sprintami, codziennymi spotkaniami zespołu oraz ciągłą integracją i testowaniem. Komunikując się z klientem za pośrednictwem Microsoft Teams, z łatwością dostosowaliśmy się do zmian w zakresie i rozdzieliliśmy zadania zgodnie z kompetencjami członków zespołu.

Zgodnie z wizją projektu uruchomiliśmy pełnoprawne MVP z podstawową funkcjonalnością. Obecnie klient rozważa dodanie nowych funkcji i integrację mapy SVG z usługami zewnętrznymi, a nasz zespół zapewnia wsparcie i konserwację po uruchomieniu.

Zespół

Analityk biznesowy

Kierownik projektu

Programistów front-end

Programistów back-end

Projektant UI/UX

DevOps

Inżynierowie QA

Expected results

Innowise opracowało oprogramowanie map biznesowych do monitorowania informacji o projektach klientów na całym świecie. Dostarczyliśmy kompleksową platformę, na której klient może zarządzać trwającymi projektami, sortować je według różnych czynników i uzyskiwać dostęp do szczegółów projektu. Opracowane przez nas piękne mapy SVG oferują klientowi wiele korzyści, takich jak:

Skalowalność. Ponieważ mapy SVG są wektorowe, można je skalować w górę lub w dół bez utraty jakości lub pikselizacji. Umożliwia to wyświetlanie treści przy różnych poziomach powiększenia lub rozmiarach, oferując większą elastyczność.
Interaktywność. Mapy SVG umożliwiają użytkownikom interakcję z elementami cyfrowymi poprzez klikanie lub najeżdżanie kursorem na różne funkcje, wyświetlając dane związane z określonym obszarem geograficznym.
Lekkość. Mapy SVG mają zazwyczaj mniejszy rozmiar pliku niż inne formaty, takie jak obrazy rastrowe. Ułatwia to ich ładowanie i wyświetlanie na stronie internetowej, zapewniając płynne wrażenia użytkownika.
Personalizacja. Nasz zespół projektowy dostosował i wystylizował mapę za pomocą CSS, umożliwiając wysoki stopień kontroli nad jej wyglądem. Pozwala to na wyróżnienie określonych funkcji i dopasowanie mapy do marki klienta, oferując spersonalizowany charakter.

Czas trwania projektu

Czerwiec 2022 r. - w trakcie realizacji

500+

projektów w 150 krajach

230%

wzrost wydajności danych geograficznych

Podobne projekty

Skontaktuj się z nami

Umów się na rozmowę lub wypełnij poniższy formularz, a my odezwiemy się do Ciebie po przetworzeniu Twojego zgłoszenia

Nazwa

Firma

E-mail

Telefon

Wiadomość

Wyślij nam wiadomość głosową

Załącz dokumenty

Prześlij plik

Można załączyć 1 plik o rozmiarze do 2 MB. Prawidłowe formaty plików: pdf, jpg, jpeg, png.

Klikając Wyślij, wyrażasz zgodę na przetwarzanie Twoich danych osobowych przez Innowise zgodnie z nasz Polityką Prywatności w celu przekazania Ci odpowiednich informacji. Podając numer telefonu, zgadzasz się na kontakt za pośrednictwem połączeń głosowych, SMS-ów lub komunikatorów. Mogą obowiązywać opłaty za połączenia, wiadomości i transmisję danych.

Możesz także wysłać swoje zapytanie
na adres contact@innowise.com

Co dalej?

Po otrzymaniu i przetworzeniu zgłoszenia skontaktujemy się z Tobą, aby szczegółowo opisać projekt i podpisać umowę NDA w celu zapewnienia poufności.

Po zapoznaniu się z Twoimi potrzebami i oczekiwaniami, nasz zespół opracuje projekt wraz z zakresem prac, wielkością zespołu, czasem i szacunkowymi kosztami.

Zorganizujemy spotkanie w celu omówienia oferty i ustalenia szczegółów.

Na koniec podpiszemy umowę, błyskawicznie rozpoczynając pracę nad projektem.