Interaktywna soczewka – graficzna forma prezentacji danych na mapie internetowej*
Zoomlens, inaczej interaktywna soczewka lub szkło powiększające – magnifying glass, jest specyficznym narzędziem wspomagającym nawigację na stronach internetowych. Jego zasadniczą funkcją jest umożliwianie eksploracji tych obszarów grafiki (mapy), na których występuje duże zagęszczenie obiektów lub obiekt jest reprezentowany przy pomocy tzw. miniaturki (thumbnail).
*Król, K. (2019). Zoomlens – graphic form of data presentation on a web map, comparison of chosen tool and usage examples. Engineering for Rural Development, 18, 1641-1648. DOI: 10.22616/ERDev2019.18.N002 | [pobierz]
Abstrakt: W gronie użytkowników Internetu jest coraz więcej takich, którzy aktywie wykorzystują ogólnodostępne techniki i narzędzia projektowe, w tym programistyczne. Często łączą się oni w społeczności skoncentrowane wokół różnych projektów informatycznych. Równie często pracują indywidualnie, tworząc różne aplikacje i udostępniając je innym użytkownikom. Celem pracy jest analiza porównawcza wybranych komponentów rozszerzających funkcjonalność witryn internetowych o możliwość prezentacji punktów (POI), obiektów (poligonów) lub danych skoncentrowanych w niewielkim obszarze mapy internetowej lub wykresu mapowego, których widoczność zależy od stopnia przybliżenia widoku mapy. W konkluzji wykazano, że testowane narzędzia mogą znaleźć zastosowanie w projektach (kartograficznych) tworzonych przez społeczność użytkowników (Volunteered Geographic Information, VGI), a z uwagi na atrakcyjną formę graficzną mogą być także wykorzystywane na witrynach komercyjnych, np. do prezentacji asortymentu produktów.
Smart web components
Publikowanie różnych informacji, w tym przestrzennych, ekonomicznych czy środowiskowych, stało się możliwe bez znajomości zaawansowanych technik programistycznych. Umożliwiają to różne kreatory i generatory, a także systemy zarządzania treścią (CMS), które pozwalają publikować dane w sposób zautomatyzowany. Ponadto w ostatnich latach znacząco wzrosła liczba komponentów rozszerzających funkcjonalność witryn internetowych, które przyjmują różną postać. Zasadniczą zaletą komponentów jest ich modułowość – mogą być one wykorzystywane w wielu projektach jednocześnie, a także „włączane i wyłączane” na życzenie użytkownika. Ponadto w przypadku oprogramowania typu open-source są one tworzone i udoskonalane przez społeczność użytkowników.
W szerokim wachlarzu różnych komponentów rozszerzających funkcjonalność witryn internetowych znaleźć można takie, które odpowiadają za prezentację danych mających odniesienie przestrzenne. Celem pracy jest analiza porównawcza wybranych komponentów rozszerzających funkcjonalność witryn internetowych o możliwość prezentacji danych skoncentrowanych w niewielkim obszarze mapy internetowej lub wykresu mapowego, których widoczność zależy od stopnia przybliżenia widoku mapy.
Mashup (web application hybrid)
Z perspektywy projektowej, inżynierskiej, mapy internetowe są najczęściej „wywoływane” w oknie przeglądarki internetowej za pomocą: (1) bezpośredniego linku (URL), (2) w oknie pływającej ramki (HTML iframe) lub w wyniku (3) bezpośredniej implementacji mapy (w strukturze dokumentu hipertekstowego) za pomocą różnych bibliotek programistycznych. Pojawienie się interfejsów programistycznych (API) sprawiło, że powstaje coraz więcej serwisów typu „mashup” oraz hybrydowych aplikacji [Wood i in. 2007, Yu i in. 2008]. Łączą one wybrane treści tematyczne z podkładem mapowym udostępnianym przez dostawców geodanych [Bowie i in. 2014].
Modelowa wizualizacja danych
Zasadniczym założeniem projektowym było utworzenie modelowej wizualizacji danych na mapie internetowej – rastrowej lub wektorowej, przedstawiającej wiele obiektów skoncentrowanych w niewielkim obszarze mapy (wykresu mapowego), i których widoczność będzie zależna od stopnia przybliżenia widoku mapy. Jednocześnie wizualizacja miała przyjąć formę komponentu typu „plugin”, o rozmiarze nie przekraczającym 1000x400px. Do utworzenia komponentu wykorzystano wybrane narzędzia projektowe, w tym: Visualization: GeoChart, jQuery elevateZoom, mageLens, jfMagnify, MagnifierRentgen, Easy Image Zoom, Cropping, Cropit oraz Magnificent.
Testy eksploracyjne typu ad-hoc
W trakcie prac projektowych przeprowadzono testy eksploracyjne typu „ad-hoc”. Testy eksploracyjne mają przeważnie charakter wstępny i są wykonywane bez zaplanowanych wcześniej przypadków użycia, jednak z wyznaczonym celem. Zaletą testów ad-hoc jest ich funkcja poznawcza. Scenariusz tak przeprowadzanych testów przewiduje obserwację i odnotowanie zachowań programu w typowych warunkach w jakich pracuje, np. podczas realizacji założeń projektowych lub czynności wykonywanych przez użytkowników.
Funkcjonalność komponentów
Funkcjonalność testowanych narzędzi ogranicza się do prezentacji w oknie interaktywnej soczewki wybranego fragmentu mapy (wykresu mapowego), choć w przypadku Visualization: GeoChart obiektom punktowym można przypisać dane, które są prezentowane dynamicznie w oknie typu „pop-up” oraz w legendzie mapy (ryc. 1). Takiej funkcjonalności brak jest w przypadku pozostałych narzędzi. Wizualizacje utworzone za pomocą Visualization: GeoChart mogą wzbogacać przekaz tekstowy. Ponadto z uwagi na atrakcyjną formę graficzną mogą koncentrować uwagę użytkowników.
Rycina 1. Fragment wykresu mapowego – punkty pomiarowe na rzece Poprad, zrzut ekranu
Źródło: opracowanie własne z wykorzystaniem Visualization API
W przypadku komponentów jQuery elevateZoom i ImageLens brak jest „klasycznego” (liczbowego, tabelarycznego) źródła danych. ElevateZoom i ImageLens bazują na podkładach rastrowych. W takim przypadku, jedyna informacja dla odbiorcy przekazu płynie z zakresu danych prezentowanych na rastrze. Inaczej jest w przypadku Visualization: GeoChart. Tak przygotowane komponenty bazują na grafice wektorowej. Każdemu obiektowi nanoszonemu na mapę np. na podstawie współrzędnych geograficznych lub kodów regionów, towarzyszyć mogą dowolne informacje, zarówno tekstowe, jak i liczbowe. Są one umieszczane w tablicy (macierzy) danych.
JfMagnify to narzędzie przygotowane w oparciu o bibliotekę jQuery, które wyróżnia forma prezentacji rastra. Okno interaktywnej soczewki zostało tu uzupełnione przyciskami przybliżania i oddalania widoku mapy, które zlokalizowano w bezpośrednim sąsiedztwie soczewki (ryc. 2a). W wersji alternatywnej, narzędzie prezentuje powiększony widok mapy w niezależnym oknie, umiejscowionym w dowolnym obszarze prezentacji mapy (ryc. 2b). Te z pozoru niewielkie rozszerzenia sprawiają, że soczewka zyskuje na interaktywności i staje się dla użytkownika atrakcyjniejsza w odbiorze.
Rycina 2. Od lewej: fragment mapy turystycznej OPN prezentowany w oknie interaktywnej soczewki – rozszerzonej o przyciski nawigacji (2a) oraz prezentowany w niezależnym oknie (2b), zrzut ekranu
Źródło: opracowanie własne z wykorzystaniem jfMagnify [Fahnestock 2017]
Kolejnym ciekawym narzędziem jest skrypt, również przygotowany w oparciu o jQuery JavaScript, o wymownej nazwie MagnifierRentgen (jQuery MagnigierRentgen Plugin) [Klimanov 2017]. Podczas gdy inne narzędzia wykorzystują jeden plik rastrowy, który jest skalowany bezpośrednio w oknie przeglądarki internetowej, MagnifierRentgen może prezentować w oknie soczewki dowolny, inny plik rastrowy. Może to mieć niebagatelne znaczenie dla wydajności komponentu ponieważ w pierwszej kolejności jest wczytywany plik graficzny, który można przygotować w mniejszym rozmiarze.
Pewnego rodzaju „odmianą” dla soczewek okrągłych są te, które realizują przybliżenie widoku mapy w oknie przyjmującym kształt wieloboku. Przykładem może być Easy Image Zoom jQuery Plugin [Grakalic 2011].
Oprócz komponentów gdzie funkcjonalność przybliżania widoku mapy jest realizowana w oknie interaktywnej soczewki, w sieci dostępnych jest wiele innych, które wykorzystują do tego celu graficzny interfejs. Jednym z nich jest „Cropit” (customizable crop and zoom jQuery plugin) [Cheng 2014], gdzie przybliżenie widoku mapy jest realizowane za pomocą tzw. interaktywnego suwaka (ryc. 3a). Alternatywę stanowić mogą skrypty: „Cropping jQuery plugin” (ryc. 3b) [Banaszkiewicz 2017] lub „Magnificent” [Johnson 2016], który można skonfigurować na wiele sposobów.
Rycina 3. Mapa przestrzennego zróżnicowania użytków gruntowych w gminie Tomice (woj. małopolskie, Polska), zrzut ekranu
Źródło: opracowanie własne z wykorzystaniem skryptów „Cropit” (3a) [Cheng 2014] oraz „Cropping” (3b) [Banaszkiewicz 2017]
Przybliżenie widoku mapy w komponentach typu „interaktywna soczewka” odbywa się przeważnie w oknie – okrągłym lub w kształcie wielokąta. Tego typu narzędzia są zwykle wykonywane w oparciu o bibliotekę jQuery JavaScript i bazują na plikach rastrowych. Do zbioru tak funkcjonujących komponentów zaliczyć można te, które generują powiększenie obrazu w oknie sąsiadującym lub bezpośrednio w oknie prezentacji mapy. Odbywa się to w całej rozciągłości okna, a nie w jego wydzielonym obrębie (fragmencie), jak to ma miejsce w przypadku interaktywnych soczewek. Ponadto różne działania na mapie, w tym przybliżanie widoku, przeglądanie i obracanie mapy, mogą być realizowane poprzez graficzny interfejs użytkownika (GUI), który składa się często z interaktywnego suwaka lub klasycznych przycisków.
Wady i ograniczenia
Wszystkie testowane narzędzia pozwalają tworzyć komponenty mapowe, lecz w ograniczonym zakresie. Obszar tak prezentowanej mapy jest przeważnie ograniczony rozmiarem rastra. Jedynie w przypadku Visualization: GeoChart do dyspozycji użytkowników oddano podkłady mapowe zdefiniowane przez usługodawcę (kraje, regiony i obszary metropolitarne; według norm, odpowiednio: ISO-3166-1 alpha-2, ISO-3166-2 oraz three-digit metro codes). Ponadto testowane techniki projektowe pozwalają przygotować komponenty w gruncie rzeczy statyczne. Przejawia się to w braku możliwości chwytania, przeciągania (przeglądania, przemierzania) obszaru mapy, który jest z góry ograniczony. Poniekąd wynika to z charakteru samych narzędzi. Pełnią one przede wszystkim funkcję prezentacyjną, ilustracyjną. O ile narzędzie Visualization: GeoChart jest predysponowane do wizualizowania różnorakich danych na wykresach mapowych kontynentów, krajów i wybranych regionów, o tyle w pozostałych przypadkach efektem powiększenia można potraktować dowolny plik rastrowy. Jednak jakość powiększenia, tj. obrazu prezentowanego w obrębie soczewki zależy bezpośrednio od jakości rastra.
Podsumowanie
W artykule zaprezentowano wykorzystanie wybranych technik i narzędzi projektowych udostępnianych bezpłatnie do utworzenia komponentów witryn umożliwiających przybliżanie widoku mapy. Opisywane narzędzia nie zostały utworzone od podstaw, jedynie poddane modyfikacjom (personalizacji), zgodnie z przyjętą specyfikacją projektową. Funkcjonalność testowanych narzędzi w dużej mierze zależy od wiedzy programistycznej użytkownika. Im jest ona większa, tym w większym stopniu jest on w stanie dostosować wizualizację do własnych potrzeb.
Analiza skryptów bazujących na mapach statycznych i bibliotece jQuery JavaScript pozwoliła podzielić je na trzy zasadnicze typy: (1) interaktywne soczewki (okrągłe lub w formie wieloboku); skrypty, które realizują powiększenie obrazu w oknie sąsiadującym lub bezpośrednio w obszarze prezentacji mapy (zwykle za pośrednictwem poleceń wydawanych bezpośrednio przyciskami myszy komputerowej) oraz (3) skrypty, gdzie przybliżenie widoku mapy jest realizowane poprzez menu nawigacji (często w powiązaniu z możliwością wydawania poleceń przy pomocy przycisków myszy komputerowej).
Źródła
- Banaszkiewicz, A. (2017). Cropping jQuery plugin, https://github.com/requtize/cropimg
- Bowie, G.D., Millward, A.A., Bhagat, N.N. (2014). Interactive mapping of urban tree benefits using Google Fusion Tables and API technologies. Urban Forestry & Urban Greening, 13(4), 742-755. https://doi.org/10.1016/j.ufug.2014.06.002
- Cheng, S. (2014). Customizable crop and zoom, https://github.com/scottcheng/cropit
- Fahnestock, J. (2017). jQuery plugin that creates a magnify glass effect, https://github.com/fonstok/jfMagnify
- Grakalic, A. (2011). Easy Image Zoom jQuery Plugin, http://cssglobe.com/lab/easyzoom/easyzoom.html
- Johnson, A.D. (2016). Magnificent.js. Zoom responsively. A jQuery plugin for responsive zoom of images & more! https://github.com/adjohnson916/magnificent.js
- Klimanov, A. (2017). jQuery MagnigierRentgen Plugin, http://bit.ly/2HxQTDy
- Wood, J., Dykes, J., Slingsby, A., Clarke, K. (2007). Interactive visual exploration of a large spatio-temporal dataset: reflections on a geovisualization mashup. IEEE transactions on visualization and computer graphics, 13(6), 1176-1183.
- Yu, J., Benatallah, B., Casati, F., Daniel, F. (2008). Understanding mashup development. IEEE Internet Computing, 12(5), 44-52. https://doi.org/10.1109/MIC.2008.114