Prezentacja danych na mapie w technologiach Google Charts oraz jQuery JavaScript

Prezentacja danych na mapie w technologiach Google Charts oraz jQuery JavaScript

Cykl: obserwacje / Digital maps

Prezentacja danych na mapie w technologiach Google Charts oraz jQuery JavaScript*

Autor: Karol Król
*Data presentation on the map in Google Charts and jQuery JavaScript technologies

Wybrane techniki i narzędzia programistyczne umożliwiają prezentację danych na mapach internetowych. Zaliczyć do nich można m.in. Google Charts oraz jQuery JavaScript. Warto zapoznać się z ich charakterystyką i przyjrzeć się ocenie porównawczej.

W ostatnich latach zaobserwować można dynamiczny rozwój technologii internetowych. Towarzyszy mu rosnąca dostępność oraz różnorodność technik i narzędzi projektowych [Gotlib 2008, Halik 2011, Kukułka 2011]. Tworzenie atrakcyjnych graficznie wizualizacji danych w oknie przeglądarki internetowej nie jest już zarezerwowane tylko dla zaawansowanych użytkowników komputera. Twórcy oprogramowania kładą coraz większy nacisk na jego wszechstronność, uniwersalność i dostępność. Dlatego też coraz częściej jest ono rozwijane dwutorowo. Z jednej strony powstają rozwiązania zaawansowane, specjalistyczne, z drugiej zaś przeznaczone dla użytkowników bez przygotowania informatycznego, które służą m.in. popularyzacji danej technologii. Trend ten zaobserwować można również w zakresie wykorzystania geodanych. W gronie ich użytkowników wciąż jest więcej tych, o mniejszej wiedzy geoinformatycznej. Z myślą o nich powstają zestawy ogólnodostępnych narzędzi i technik projektowych, które umożliwiają wykorzystanie geodanych, często w sposób zautomatyzowany. Wszystko to sprawia, że w Internecie pojawia się coraz więcej serwisów typu „mashup”, które łączą wybrane treści tematyczne z podkładem mapowym [Król 2016]. Wiele technik i narzędzi jest pomyślanych tak, aby ich użycie wymagało jedynie uzupełnienia danych źródłowych oraz konfiguracji wybranych parametrów mapy. Inne z kolei są udostępniane w postaci kreatorów, czy też generatorów map, które w zautomatyzowany sposób generują interaktywne mapy zjawisk przestrzennych [Król 2018].

Internetowa mapa jQuery

Głównym założeniem projektowym było utworzenie internetowej mapy obrazującej dane liczbowe lub tekstowe, w tym statystyczne, związane z określonym obszarem administracyjnym bądź też zjawiskiem punktowym. Testom ad-hoc (użyteczności oraz funkcjonalności) poddano techniki i narzędzia projektowe, które wybrano na podstawie kryterium popularności oraz dostępności w świecie. Wybrane z nich bazują na geodanych, które dostarczane są przez Google (Visualization: Geomap oraz Geo Chart). W zakresie pozostałych (jQuery JavaScript) mapę podkładową należy utworzyć od podstaw lub pozyskać gotową ze źródeł zewnętrznych.

map

Zadanie projektowe polegało na utworzeniu modelowej prezentacji danych statystycznych obejmujących liczbę mieszkańców i powierzchnię największych miast Małopolski (Polska), a także danych związanych z charakterystyką poszczególnych województw. Przyjęto założenie, że prezentacja ma mieć multimedialny i interaktywny charakter oraz ma stanowić komponent witryny internetowej. Ponadto głównym nośnikiem informacji mają być punkty POI (point of interest), linie lub poligony (wieloboki), których forma graficzna oraz zasada działania może być różna, w zależności od zastosowanych technik projektowych. W dalszej kolejności podjęto próbę utworzenia tak opisanej prezentacji z wykorzystaniem różnych technologii, a następnie oceniono ich możliwości projektowe.

Testy eksploracyjne ad-hoc

Testom eksploracyjnym ad-hoc poddano: (1) Google Image Charts, (2) Visualization API: Geomap, Geo Chart, (3) jVectorMap, (4) komponenty utworzone za wykorzystaniem jQuery JavaScript oraz (5) komponenty utworzone z wykorzystaniem JavaScript – map area.

Testy eksploracyjne typu ad-hoc są określane jako „expert testing or monkey testing” [Chhabra 2012]. Jest to jedna z najmniej formalnych metod testowania oprogramowania. Zaletą testów ad-hoc jest ich funkcja poznawcza. Pozwalają one zapoznać się ze specyfiką testowanej aplikacji, która nie musi być dokładnie oddana w dokumentacji projektowej. Scenariusz tak przeprowadzanych testów przewiduje obserwację i odnotowanie zachowań programu/algorytmu w typowych warunkach w jakich pracuje, tj. podczas realizacji założeń projektowych, bądź też czynności wykonywanych przez użytkowników.

Charakterystyka narzędzi projektowych

Google Image Charts

Usługa Google Image Charts pozwala generować wykresy statyczne w oknie przeglądarki internetowej. Mogą one przyjmować formę wykresów słupkowych, kołowych, ale również postać kartogramu. Prezentacja danych jest wywoływana z serwera usługodawcy na podstawie adresu URL, w którym zapisane są m.in. parametry mapy. Dostęp do usługi jest bezpłatny i nieograniczony.

map

Google Charts

Google Charts to rozbudowana usługa udostępniana w ramach Google Developers, która umożliwia tworzenie zróżnicowanych graficznie, interaktywnych wykresów, diagramów i innych prezentacji danych. Za jej pomocą utworzyć można zarówno tradycyjne wykresy kołowe (Pie Charts), słupkowe (Column Charts) lub liniowe (Line Charts), jaki i wykresy mające odniesienie przestrzenne (Geomap, Geo Chart). Wykresy są generowane w technologii Adobe Flash oraz w formacie SVG lub VML.

Format SVG (Scalable Vector Graphics) umożliwia łączenie grafiki wektorowej, rastrowej i tekstu. Charakteryzuje go wysoki stopień integralności z dokumentami hipertekstowymi. Pozwala na obsługę zdarzeń, tzn. programowanie funkcjonalności płynnego skalowania i przesuwania obrazu, zmiany prezentowanej warstwy czy też dostępu do informacji przypisanych obiektom graficznym. W testach skupiono się na możliwości nanoszenia danych liczbowych na mapę cyfrową (Visualization API: Geo Chart oraz Geomap).

Mapy wektorowe w formacie SVG

Technika tworzenia interaktywnych map za pomocą jVectorMap [Lebedev 2016] nie przewiduje wykorzystania grafik rastrowych. Całość obrazu generowana jest na podstawie kodu HTML, CSS oraz jQuery JavaScript, z wykorzystaniem formatu SVG lub VML. Rozwiązanie to pozwala prezentować dane statystyczne w odniesieniu do różnych jednostek administracyjnych (państw, regionów itp.). Aby zaprezentować dane na mapie innej niż udostępniane przez jVectorMap należy ją wpierw utworzyć w formie grafiki wektorowej, a następnie przekształcić za pomocą konwertera przygotowanego w języku Python. Jest on udostępniany na stronie internetowej jVectorMap. Bazę dla jVectorMap stanowią wektorowe mapy pobrane z serwisu Natural Earth.

Mapy utworzone za wykorzystaniem jQuery JavaScript

Spośród wielu rozwiązań opartych na jQuery do testów wybrano m.in. CraftMap jQuery Plugin [Dziewulski 2013]. Komponent ten jest udostępniany w ramach licencji Creative Commons, Noncommercial (NC), co oznacza, że można go wykorzystać bezpłatnie jedynie w projektach niekomercyjnych.

Komponent pozwala na przeglądanie statycznych grafik rastrowych, które za sprawą skryptu pełnią funkcję swoistej mapy współrzędnych. Każdy piksel jest tu lokalizowany na podstawie atrybutów długości i szerokości obrazu (ryc. 1). Na tej podstawie na mapie umiejscawiany jest interaktywny marker, który może stanowić nośnik informacji tekstowej, graficznej, lub obydwóch jednocześnie. Informacja towarzysząca punktom jest wywoływana na życzenie użytkownika w postaci okna typu „pop-up”.

lokalizacja markeraRycina 1. Schemat lokalizacji markera w punkcie 602x402px na podstawie atrybutów wysokości i szerokości grafiki rastrowej
Źródło: opracowanie własne

Drugi wariant oparty o skrypt jQuery przewiduje wykorzystanie podkładu rastrowego. Jego interaktywną prezentację w oknie przeglądarki umożliwiają skrypty MouseWheel Extension jQuery Plugin [Aaron 2012] oraz MapBox Zoomable jQuery Map Plugin [Abel 2012]. Innym skryptem jQuery, który pozwala prezentować dane na podkładzie mapowym jest jQuery ZoomBox [Sutherland 2009]. Skrypt realizuje głównie funkcję nawigacyjną, tj. usprawnia przeglądanie danych. Nośnikiem informacji, poza mapą, są interaktywne markery. Skrypt umożliwia również przybliżanie widoku mapy. Efekt przybliżenia oraz przeciągania jest symulowany i bazuje na mapach rastrowych nakładanych na siebie warstwami, jedna na drugą. Na życzenie użytkownika poszczególne warstwy są eksponowane a inne ukrywane, co przypomina efekt przybliżania obrazu mapy.

Analizie poddano również możliwość prezentacji danych z wykorzystaniem skryptu CSSMap [Popardowski 2016]. Interaktywność tak utworzonej mapy jest praktycznie w całości wykonywana za pomocą kaskadowych arkuszy stylów CSS, z niewielkim udziałem skryptów jQuery. Całość prezentacji opiera się na podkładzie rastrowym. Rozwiązanie jest udostępniane na licencji „royalty free”.

Mapy utworzone z wykorzystaniem JavaScript – map area

Kolejna analizowana technologia zakłada wykorzystanie oprogramowania GIS (QGIS HTML Image Map Plugin) do utworzenia rastra. Tak utworzonej mapie towarzyszy dokument hipertekstowy zawierający m.in. koordynaty wierzchołków obiektów naniesionych wcześniej na warstwę wektorową. Interaktywność aplikacji można zaprogramować za pomocą skryptu jQuery ImageMapster [Treworgy 2013]. Podstawę tak utworzonej aplikacji są mapy rastrowe. Ze względów praktycznych oraz z uwagi na użyteczność aplikacji, duże pliki graficzne można dzielić i prezentować oddzielnie.

Wyniki testów eksploracyjnych

Rozwiązania oparte o Google Chart są relatywnie proste w implementacji i nie wymagają dodatkowych rozszerzeń, jednak mają zamkniętą formę, tzn. użytkownik ma dostęp do zdefiniowanego zakresu prezentacji oraz wybranych atrybutów graficznych. Brak tu możliwości rozszerzenia funkcjonalności np. o możliwość chwytania i przeciągania obszaru mapy, poprzez np. implementację skryptu czy dopisanie modułu. Próby modyfikacji czy ingerencji w formę prezentacji wykresów mogą być również niezgodne z regulaminem użytkowania. Jest to jednak rekompensowane wysoką jakością oprawy wizualnej i bezproblemową obsługą.

Inaczej jest w przypadku rozwiązań opartych o jQuery JavaScript, gdzie podstawą prezentacji jest podkład rastrowy. Plik źródłowy będący wynikiem przekształcenia stanowi swoistą bazę. Implementacja skryptów zewnętrznych może nadać mu charakter interaktywny (dynamicznej prezentacji). Dane statystyczne można tu zaprezentować w całkowicie dowolnej formie oraz ilości. Dla użytkownika przeszkodą może być jednak brak wiedzy specjalistycznej, która jest niezbędna, aby zaprogramować czy też zaimplementować funkcjonalność mapy. Mapy przygotowane w różnych technologiach, prezentujące jedno i to samo zjawisko mogą mieć zbliżoną lub wręcz identyczną formę prezentacji. Technologię, w której zostały wykonane rozpoznać można na podstawie analizy kodu źródłowego, subtelnych różnic w oprawie graficznej, bądź też testów funkcjonalności.

Google Image Charts

Zaletą map i wykresów generowanych z wykorzystaniem Google Image Charts jest prostota i brak limitów użycia. Parametryzacja adresu zasobu sieciowego nie nastręcza wielu trudności, jednak technika ta pozwala generować prezentacje danych w ograniczonym zakresie. Wadą tak przygotowanej mapy jest brak możliwości naniesienia na nią danych liczbowych czy też tekstowych. W oknie przeglądarki internetowej przyjmuje ona postać mapy wykonanej metodą chorochromatyczną.

Usługa umożliwia generowanie map jedynie w zdefiniowanym zakresie przestrzennym (zapis parametrów mapy: africa, asia, europe, middle_east, south_america, usa, world). Forma kodowania parametrów mapy jest mało intuicyjna, podobnie jak zakres ich wartości. Kolejnym ograniczeniem jest relatywnie nieduży rozmiar generowanej mapy (440x220px).

Liczne ograniczenia w formie i zakresie generowanych map i wykresów oraz rozwijanie technologii prezentacji dynamicznych sprawiło, że projekt Google Image Charts został zamknięty w 2012 roku [Google 2019].

Google Visualization API

Spośród wszystkich analizowanych technologii relatywnie najprostszą w użyciu i jednocześnie najbardziej efektywną i efektowną, jest technologia Google Visualization API. Nie wymaga ona od użytkownika instalacji dodatkowego oprogramowania. Podstawowa konfiguracja oraz implementacja mapy wymagają jedynie minimum wiedzy specjalistycznej.

Do zalet Google Visualization: Geomap zaliczyć można dostępność dwóch wariantów projektowych: (1) prezentacji danych w oparciu o interaktywne poligony (mapa wykonana metodą powierzchniową, tła jakościowego; przedstawia zasięg obszarowy – regions display style) oraz (2) w formie punktowej (markers display style). Tak przygotowana mapa jest automatycznie uzupełniana legendą, a użytkownik na wstępnie wyposażany jest w gotowy podkład mapowy oraz oprogramowanie mapy. Ponadto technika ta jest uniwersalna, rekomendowana przez Google oraz towarzyszy jej rozbudowany system szkoleń i wsparcia technicznego. Visualization: Geomap pozwala publikować atrakcyjne wizualnie prezentacje danych na mapie, z podziałem na kontynenty, kraje lub regiony. Rycina 2 przedstawia przykład interaktywnej mapy przygotowanej w oparciu o Visualisation: Geomap, w wariancie markers display style (Małopolska: powierzchnia największych miast) oraz regions display style (Polska: ludność według województw).

mapaRycina 2. Zrzut ekranu map interaktywnych – prezentacja danych statystycznych z wykorzystaniem Visualization: Geomap
1) Prezentacja w odniesieniu przestrzennym powierzchni wybranych miast Małopolski; po zaznaczeniu wybranego punktu prezentowane są wcześniej zdefiniowane informacje.
2) Prezentacja gęstości zaludnienia; kolorem pomarańczowym oznaczane (podświetlane) jest województwo wybrane przez użytkownika za pomocą kursora myszy.
Źródło: opracowanie własne

Z usługi można korzystać nieodpłatnie zarówno w projektach osobistych i edukacyjnych, jak i komercyjnych. Regulamin użytkowania nie pozwala na pobieranie i zapisywania na dysku komputera lub na serwerze kodu bazowego: google.load i google.visualization. Wynika z tego, że zgromadzenie wszystkich komponentów prezentacji na dowolnym nośniku danych cyfrowych i wykorzystanie ich bez dostępu do Internetu jest niezgodne z warunkami użytkowania. Dozwolone jest wykonanie „zrzutu ekranu” i wstawienie go jako komponentu witryny.

Do wad prezentacji przygotowanych z wykorzystaniem „Visualization: Geomap” zaliczyć można ograniczony obszar mapy, tj. brak możliwości uchwycenia jej kursorem myszy komputerowej i przeciągnięcia. Ponadto Visualization: Geomap wykorzystuje technologię Adobe Flash – Flash-based visualizations. Mapa jest wyświetlana w oknie przeglądarki z wykorzystaniem Adobe Flash Player.

Mapy wektorowe SVG

Główną zaletą map przygotowanych w formacie SVG jest ich elastyczność. Tak utworzone mapy są generowane w oknie przeglądarki w czasie rzeczywistym (np. na podstawie koordynatów zapisanych w plikach JavaScript), co nie wymaga użycia grafik rastrowych. Zmniejsza to czas związany z wczytaniem mapy w oknie przeglądarki oraz liczbę danych przesyłanych siecią. Ingerencja w kod aplikacji pozwala na modyfikację formy prezentacji oraz zakresu prezentowanych danych. Efekt przeciągania oraz przybliżania widoku mapy jest wykonywany zwykle przy pomocy skryptów jQuery JavaScript.

Komponenty jQuery JavaScript

Przegląd skryptów jQuery JavaScript umożliwiających prezentację danych na mapach oraz przeprowadzone testy pokazały, że zasadniczo bazują one na podkładach rastrowych. Możliwość eksploracji mapy oraz sama jej prezentacja mogą być zbliżone do funkcjonalności charakterystycznych dla geoportali, jednak efekty osiągane za pomocą jQuery stanowią zwykle ich symulację, stąd też ograniczone możliwości ich zastosowania.

Symulacja przybliżenia widoku mapy jest wynikiem nakładania się na siebie „w pionie”, przygotowanych wcześniej map rastrowych, jedna na drugą. Efekt opisać można jako „pasywny zoom”. Każda warstwa rastrowa ma inny rozmiar w pikselach. Różny rozmiar rastrów niwelowany jest przez okno prezentacji mapy, w którym wyświetlany jest jedynie jej fragment, np. o rozmiarze 600x500px. Za pomocą elementów nawigacji wybierane są i prezentowane kolejne warstwy w hierarchii pionowej, co użytkownik odbiera jako efekt przybliżania lub oddalania widoku mapy. Stopień odwzorowania terenu jest tu zawsze jednakowy. Liczba obiektów przedstawionych na mapie jest niezmienna. Zmienia się jedynie ich powiększenie (dostrzegalność). Efekt zmiany skali mapy byłby możliwy do osiągnięcia jedynie poprzez odpowiednie przygotowanie podkładów rastrowych, tj. każdy z nich należałoby przygotować tak, aby przedstawiał obszar lub zjawisko w innej skali.

Ograniczenia aplikacji mapowych utworzonych z wykorzystaniem jQuery wynikają przede wszystkim z ograniczeń samego podkładu rastrowego, którego rozmiar powinien być relatywnie nieduży. Przyjąć można, ze nie większy niż 1MB, gdyż może to skutkować brakiem użyteczności tak przygotowanej prezentacji. Brak tu geokodowania tzn. punkty są nanoszone na mapę nie na podstawie współrzędnych geograficznych, a na podstawie lokalizacji piksela na podkładzie rastrowym. Wszystkie komponenty prezentacji można zgromadzić w jednym miejscu i wykorzystywać bez dostępu do Internetu.

Testy CSSMap pokazują, że jest to narzędzie elastyczne, co w dużej mierze wynika z przygotowania go, zasadniczo w całości, w oparciu o style CSS (zapewnia to dużą swobodę w modyfikowaniu sposobu prezentacji treści). Mapy są przygotowane starannie i atrakcyjne wizualnie. CSSMap to jednak rozwiązanie płatne. Dostępność licznych, alternatywnych skryptów nieodpłatnych nie skłania do jego wykorzystania.

Testy mapy utworzonej z wykorzystaniem JavaScript – map area

Prezentacja danych statystycznych ma mapie administracyjnej wymaga przygotowania mapy oraz bazy danych w całości (wektoryzacja podkładów rastrowych), lub pobrania ogólnodostępnych danych źródłowych. Wektoryzacja mapy związana jest z instalacją oprogramowania typu desktop GIS oraz jego dodatkowych rozszerzeń, które umożliwiają przekształcenie mapy wektorowej w mapę rastrową połączoną z dokumentem hipertekstowym.

Baza w postaci koordynatów współrzędnych zapisanych w dokumencie hipertekstowym może stanowić podstawę dla skryptów zapewniających interaktywność np. jQuery Map Hilight [Lynch 2013] lub ImageMapster [Treworgy 2013]. Działają one w oparciu o znacznik 'map’, który definiuje adres mapy dla danego elementu, informując przeglądarkę internetową, że grafika (raster) jest pokryta siatką aktywnych odnośników tworzących mapę odsyłaczy. Mapa odsyłaczy jest dokładnym odwzorowaniem wszystkich obiektów przedstawionych na rastrze. Każdy odsyłacz może być nośnikiem informacji tekstowej, graficznej lub obydwóch jednocześnie.

Tak utworzoną aplikację charakteryzują ograniczony obszar mapy oraz ograniczony zakres funkcjonalności, tj. brak możliwości uchwycenia mapy kursorem myszy i przeciągnięcia jej. Ponadto mapa ma formę statyczną. Większy zakres interaktywności, zbliżony do możliwości jakie daje Visualization: Geomap można uzyskać jedynie poprzez implementację dodatkowych skryptów.

Do zalet tak utworzonych aplikacji zaliczyć można możliwość uruchamiania ich w trybie offline. Metoda ta zakłada przygotowanie mapy od podstaw w formie wektorowej, stąd też brak tu ograniczeń w zakresie formy przedstawianych obiektów. Wybrane skrypty jQuery, które wywołują efekt interaktywności (w tym ImageMapster) nie znajdą zastosowania, gdy podkład rastrowy składa się ze stu i więcej obiektów (wieloboków, poligonów), zwłaszcza na komputerach z wolniejszym łączem internetowym. Ich skalowanie w oknie przeglądarki trwa zbyt długo, co może zniechęcić użytkownika do korzystania z aplikacji.

Podsumowanie

Ogólnodostępne techniki projektowe umożliwiają użytkownikom bez przygotowania geoinformatycznego prezentować dane statystyczne w oknie przeglądarki internetowej w formie różnych wykresów oraz na mapach świata. Analizowane techniki i narzędzia są dopracowane i relatywnie proste w użyciu. Ich wykorzystanie wymaga podstawowej wiedzy z zakresu implementacji obiektów w strukturze dokumentu hipertekstowego. Od użytkownika zależy konfiguracja parametrów mapy, wybór formy prezentacji oraz uzupełnienie bazy danych.

Zaprezentowane techniki i narzędzia projektowe to tylko wybrane spośród wielu dostępnych. Trudno jest jednoznacznie wskazać, który z testowanych zestawów narzędzi jest najlepszy. Charakter projektu determinuje wybór odpowiedniego narzędzia. Różnice między nimi wynikają przede wszystkim z technik programistycznych oraz źródeł danych, które wykorzystują. Wszystko to nadaje każdemu z nich unikalny charakter. Wynikają z niego cechy, które przekładają się na możliwości i zastosowania projektowe.

Źródła

  • Chhabra, M. N. (2012). Introduction To Adhoc Testing. International Journal of Scientific and Technology Research, 1(7), 66-67.
  • Gotlib, D. (2008). Nowe oblicza kartografii – Internet a kartografia. Polski Przegląd Kartograficzny, 40(3), 237-246.
  • Halik, Ł. (2011). Zastosowanie Google Maps API do multimedialnej wizualizacji informacji o obiektach przestrzennych w internecie. Badania Fizjograficzne, A62, 17-26.
  • Król, K. (2016). Data presentation on the map in Google Charts and jQuery JavaScript technologies. Geomatics, Landmanagement and Landscape (GLL), 2, 91-106. DOI: 10.15576/GLL/2016.2.91
  • Król, K. (2018). Wizards and generators in teaching information technologies to students of engineering. 17th International Scientific Conference Engineering for Rural Development, 17, 1260-1269. DOI: 10.22616/ERDev2018.17.N502
  • Kukułka, M. (2011). Nowe aspekty metodyczne projektowania serwisów map internetowych. Polski Przegląd Kartograficzny, 43(3), 239-251.

Źródła internetowe

Skip to content