230% Wzrost wydajności danych geograficznych dzięki interaktywnym mapom internetowym

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

Klient

Branża

Fintech, Rząd

Region

USA

Klient od

2022

Nasz klient jest jedną z najbardziej znanych instytucji finansowych, zapewniającą dotacje i pożyczki na kluczowe projekty publiczne i prywatne. Posiadając ponad 100 oddziałów na całym świecie, oferuje zrównoważone rozwiązania, które mają na celu zmniejszenie ubóstwa poprzez realizację projektów kapitałowych.

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

Wyzwanie: Przezwyciężenie obciążeń związanych z papierkową robotą dzięki interaktywnej wizualizacji danych na mapie

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: Opracowanie interaktywnych map prezentujących niestandardowe projekty na całym świecie

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

Przed zagłębieniem się w podstawową logikę, Innowise wyjaśnił główne podmioty, które ilustruje mapa SVG. Oprócz ustalenia prawidłowych granic geograficznych krajów, musieliśmy również zapewnić precyzyjne i aktualne podziały administracyjno-terytorialne. Na przykład różne kraje są podzielone na różne podziały administracyjne, takie jak stany w USA, prowincje w Kanadzie i regiony we Francji.

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

Node.js, 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

Wyniki: Większa przejrzystość danych, skalowalność i interaktywność

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!

Zadzwoń lub wypełnij poniższy formularz, a my skontaktujemy się z Tobą po przetworzeniu Twojego zgłoszenia.

Nazwa

Firma

E-mail

Telefon

Wiadomość Prosimy o podanie szczegółów projektu, czasu trwania, stosu technologicznego, potrzebnych specjalistów IT i innych istotnych informacji.

Nagraj wiadomość głosową na temat
projekt, który pomoże nam lepiej go zrozumieć

W razie potrzeby dołącz dodatkowe dokumenty

Prześlij plik

Można załączyć maksymalnie 1 plik o łącznej wielkości 2 MB. Ważne pliki: pdf, jpg, jpeg, png

Informujemy, że po kliknięciu przycisku Wyślij Innowise będzie przetwarzać Twoje dane osobowe zgodnie z naszą Polityką prywatności w celu dostarczenia Ci odpowiednich informacji.

Co będzie dalej?

Po otrzymaniu i przetworzeniu Twojego zgłoszenia skontaktujemy się z Tobą wkrótce, aby wyszczególnić potrzeby projektu i podpisać umowę o zachowaniu poufności, aby zapewnić poufność informacji.

Po przeanalizowaniu wymagań, nasi analitycy i programiści opracowują projekt z zakresem prac, wielkością zespołu, czasem i kosztami szacunki.

Umówimy się z Tobą na spotkanie, aby omówić ofertę i dojść do porozumienia porozumienia.

Podpisujemy umowę i rozpoczynamy pracę nad projektem tak szybko, jak to możliwe.

230% Wzrost wydajności danych geograficznych dzięki interaktywnym mapom internetowym

Klient

Wyzwanie: Przezwyciężenie obciążeń związanych z papierkową robotą dzięki interaktywnej wizualizacji danych na mapie

Rozwiązanie: Opracowanie interaktywnych map prezentujących niestandardowe projekty na całym świecie

Technologie

Proces

Zespół

Wyniki: Większa przejrzystość danych, skalowalność i interaktywność

Podobne projekty

Skontaktuj się z nami!

Co będzie dalej?

Rozwijajmy^● razem
oprogramowanie!

Złóż kolejną prośbę

Zamknij

230% Wzrost wydajności danych geograficznych dzięki interaktywnym mapom internetowym

Klient

Wyzwanie: Przezwyciężenie obciążeń związanych z papierkową robotą dzięki interaktywnej wizualizacji danych na mapie

Rozwiązanie: Opracowanie interaktywnych map prezentujących niestandardowe projekty na całym świecie

Technologie

Proces

Zespół

Wyniki: Większa przejrzystość danych, skalowalność i interaktywność

Podobne projekty

Skontaktuj się z nami!

Co będzie dalej?

Rozwijajmy● razem oprogramowanie!

Subskrypcja na adres nasz newsletter

Złóż kolejną prośbę

Zamknij

Rozwijajmy^● razem
oprogramowanie!

Subskrypcja
na adres nasz newsletter