1 Západočeská univerzita v Plzni Fakulta aplikovaných věd Katedra informatiky a výpočetní techniky Diplomová práce Vizualizace dat a mashup aplikace P...
Z´apadoˇcesk´ a univerzita v Plzni Fakulta aplikovan´ ych vˇed Katedra informatiky a v´ ypoˇcetn´ı techniky
Diplomov´a pr´ace
Vizualizace dat a mashup aplikace
Plzeˇ n, 2013
Michal Smet´ ak
Podˇ ekov´ an´ı Dˇekuji Ing. Pavlu Kr´alovi, Ph.D. vedouc´ımu t´eto diplomov´e pr´ace za jeho cenn´e rady a ˇcas kter´ y mi vˇenoval. D´ale bych chtˇel podˇekovat rodiˇc˚ um a vˇsem sv´ ym bl´ızk´ ym za jejich mor´aln´ı i finanˇcn´ı podporu pˇri studiu, trpˇelivost a motivaci.
Prohl´ aˇ sen´ı Prohlaˇsuji, ˇze jsem diplomovou pr´aci vypracoval samostatnˇe a v´ yhradnˇe s pouˇzit´ım citovan´ ych pramen˚ u.
V Plzni dne 9. kvˇetna 2013
........................... Michal Smet´ ak
Abstract ˇ This diploma thesis is based on the requirements of Czech News Agency (CTK). ˇ The first goal of this work is to analyze data structure of CTK and existing software tools for data vizualization with a particular focus on the free available tools with posibilities of commercial use. Based on this analysis, the most promissing tools are selected. The second goal consists of the desing and implementation of two web applications for data vizualization. The third goal solves the problem of data clustering for data vizualization. The first application is used for geographical data representation in several ways, the second application uses data representation on the timeline. These two appliˇ cations allow to vizualize the CTK data of the incidents and the documents. The third goal is to implement a modified clustering algorithm, which creates clusters respecting the geographical distance. This algorithm is used in the first application. Clustering of the data in the second application is a part of tool used for vizualization.
ˇ Casov´ a n´aroˇcnost shlukovac´ıho algoritmu. P pˇredstavuje poˇcet vznikl´ ych shluk˚ u, t1 dobu vytvoˇren´ı shluk˚ u [ms], t2 dobu v´ ypoˇctu centroid˚ u [ms] 48
1
Kapitola 1 ´ Uvod V dneˇsn´ı dobˇe se naprost´a vˇetˇsina dat uchov´av´a v digit´aln´ı podobˇe. Dennˇe vznikaj´ı nov´a data (zpravodajsk´e ˇcl´anky, fotografie, videa, z´aznamy r˚ uzn´ ych ud´alost´ı apod.), kter´a je tˇreba archivovat. Aby bylo moˇzn´e st´ale nar˚ ustaj´ıc´ı mnoˇzstv´ı dat efektivnˇe spravovat, prohled´avat ˇci vizualizovat, pˇrid´av´aj´ı se k dat˚ um samotn´ ym takzvan´a metadata. Metadata obsahuj´ı dodateˇcn´e informace o datech a usnadˇ nuj´ı tak jejich spr´avu. ˇ e tiskov´e kancel´aˇre (CTK). ˇ Tato diplomov´a pr´ace vyplynula z potˇreb Cesk´ C´ılem ˇ bylo na z´akladˇe anal´ yzy struktury metadat zpravodajsk´ ych servis˚ u CTK a zdroj˚ u dat dostun´ ych na webu navrhnout a implementovat webov´e aplikace pro vizualizaci zvolen´ ych dat pomoc´ı vhodn´ ych volnˇe dostupn´ ych n´astroj˚ u s moˇznost´ı komerˇcn´ıho pouˇzit´ı. V´ ysledek t´eto pr´ace by mˇel poskytnou pˇrehled volnˇe dostupn´ ych n´astroj˚ u, zamˇeˇren´ ych na geografickou vizualizaci dat a n´astroj˚ u pro vizualizaci dat formou ˇcasov´ ych ˇrad. Dalˇs´ım v´ ystupem pr´ace bude anal´ yza moˇznost´ı vizualizace dat z jin´ ych doˇ U ´ apod.). Aplikace implementovan´e ve vybran´ stupn´ ych datov´ ych zdroj˚ u (CS ych n´astroj´ıch, kter´e budou splˇ novat poˇzadavky zadavatele, budou z´aroveˇ n obsahovat i n´avrhy ˇreˇsen´ı probl´emu pˇrehledn´eho grafick´eho zobrazen´ı velk´eho poˇctu dat. Zadavatel nepˇredpokl´ad´a pˇr´ım´e vyuˇzit´ı vytvoˇren´ ych webov´ ych aplikac´ı. Vytvoˇren´e aplikace budou zadavateli slouˇzit pro inspiraci jak dan´a data zobrazovat, pˇr´ıpadnˇe jako zdroj k´odu pˇri vytv´aˇren´ı vlastn´ıch aplikac´ı.
1.1 Pˇrehled kapitol
1.1
2
Pˇ rehled kapitol
Vu ´vodn´ı kapitole jsou pˇredstaveny d˚ uvody vzniku t´eto pr´ace, c´ıle a pˇredpokl´adan´e budouc´ı vyuˇzit´ı. Druh´a kapitola se zab´ yv´a anal´ yzou a popisem struktury metaˇ dat CTK. Tˇret´ı kapitola obsahuje popis mapov´ ych server˚ u a bˇeˇznˇe pouˇz´ıvan´ ych webov´ ych sluˇzeb pro z´ısk´an´ı dat (mapov´ ych podklad˚ u). Pˇri pouˇz´ıv´an´ı mapov´ ych API 1 je vhodn´e b´ yt s touto problematikou sezn´amen. N´asleduj´ıc´ı kapitola se zab´ yv´a zdroji dat na webu. Z vˇetˇs´ı ˇca´sti se tato kapitola zab´ yv´a popisem volnˇe dostupn´ ych mapov´ ych server˚ u, kter´e nemaj´ı ˇz´adn´a funkˇcn´ı omezen´ı. Kapitola 5 obsahuje anal´ yzu volnˇe dostupn´ ych n´astroj˚ u pro geografickou a ˇcasovou vizualizaci dat. V z´avˇeru kapitoly jsou ˇcten´aˇri nab´ıdnuty tabulky porovn´avaj´ıc´ı vlastnosti popsan´ ych n´astroj˚ u a je zde uvedeno zd˚ uvodnˇen´ı v´ ybˇeru n´astroj˚ u pouˇzit´ ych pro realizaci webov´ ych aplikac´ı. N´asleduj´ıc´ı kapitola se zab´ yv´a realizaˇcn´ı ˇca´st´ı t´eto pr´ace. Obsahuje n´avrh aplikace a popis jednotliv´ ych ˇca´st´ı. V kapitole 7 je popis testov´an´ı pouˇzit´eho shlukovac´ıho algoritmu, dosaˇzen´e v´ ysledky implementovan´ ych aplikac´ı a n´avrhy na jejich pˇr´ıpadn´a rozˇs´ıˇren´ı. Z´avˇereˇcn´a kapitola shrnuje v´ ybˇer pouˇzit´ ych n´astroj˚ u, dosaˇzen´e v´ ysledky implementovan´ y aplikac´ı a ˇcasovou n´aroˇcnost pouˇzit´eho shlukovac´ıho algoritmu. Pˇr´ılohy obsahuj´ı strukturu pˇriloˇzen´eho DVD, strukturu vytvoˇren´e aplikace a uˇzivatelskou pˇr´ıruˇcku.
1
Application Programming Interface
3
Kapitola 2 ˇ Anal´ yza metadat CTK ˇ Metadata CTK se daj´ı rozdˇelit na dva typy: dokumenty (texty, ˇcl´anky, zpravodajstv´ı, apod.) a ud´alosti (z´aznamy ud´alost´ı, v´ yroˇc´ı, pl´anovan´ ych akc´ı). Pro oba typy dat (dokumenty i ud´alosti) je definov´an form´at zaloˇzen´ y na standardu XML. V´ yhoda XML form´atu je pˇredevˇs´ım v jeho pˇrehlednosti, snadn´em zpracov´av´an´ı a prov´adˇen´ı transformac´ı na stranˇe uˇzivatele, ˇci moˇznosti pˇr´ım´eho vyuˇzit´ı na webov´ ych str´ank´ach. Dokumenty jsou poskytov´any ve speci´alnˇe navrˇzen´e XML struktuˇre, kter´a vych´az´ı ze standardu NewsML 1.2 [23] definovan´em organizac´ı IPTC (International Press Telecommunications Council). Standard umoˇzn ˇuje uchov´avat k jednotliv´ ym z´aznam˚ um velk´e mnoˇzstv´ı strukturovan´ ych metadat, kter´e uˇzivateli nab´ız´ı moˇznost dokumenty d´ale zpracov´avat, napˇr. je kategorizovat ˇci vizualizovat. Standard NewsML pouˇz´ıv´a koncept slovn´ık˚ u. Slovn´ıky mohou pˇresnˇe urˇcovat hodnoty, kter´e se mohou v nˇekter´ ych poloˇzk´ach form´atu objevovat. Z´aroveˇ n 1 ˇ tak´e popisuj´ı jejich v´ yznam. CTK pouˇz´ıv´a vlastn´ı slovn´ıky i slovn´ıky definovan´e IPTC, kter´e rozˇsiˇruje o vlastn´ı hodnoty. Definice pˇriˇrazen´ı slovn´ık˚ u k element˚ um ˇci atribut˚ um form´atu NewsML urˇcuje katalog2 [22]. ˇ Pro ud´alosti m´a CTK definovan´ y vlastn´ı XML form´at, kter´ y tak´e pouˇz´ıv´a slovn´ıky. Je ale jinak strukturovan´ y. Metadata pro dokumenty a ud´alosti nejsou stejn´a. Nˇekter´e elementy metadat obou typ˚ u maj´ı sice stejn´ y v´ yznam, nicm´enˇe jejich struktura se liˇs´ı. Jednotliv´e form´aty metadat jsou proto pops´any v n´asleduj´ıc´ıch dvou podkapitol´ach.
2.1
Dokumenty
Z´akladn´ı struktura form´atu dokument˚ u je na obr´azku 2.1. Form´at NewsML je snadno rozˇsiˇriteln´ y pouˇzit´ım element˚ u property. Tabulka z rozˇsiˇruj´ıc´ımi vlastnostmi pro element property je dostupn´a v [22]. Kaˇzd´ y dokument je uloˇzen v samostan´em elementu NewsItem. Uvnitˇr NewsItem jsou vnoˇreny elementy Identification, NewsManagement a NewsComponent. 1 2
Obr´azek 2.1: Z´akladn´ı struktura form´atu dokument˚ u NewsML [22] Identification Element Identification obsahuje data slouˇz´ıc´ı k idetifikaci dokumentu. Ve sv´e aplikaci jsem vyuˇzil tyto elementy: • DocumentType - typ dokumentu (text, video, fotografie, ...). • DateId - datum vytvoˇren´ı dokumentu ve form´atu YYYY-MM-DD. • PublicIdentifier - unik´atn´ı veˇrejn´ y identifik´ator dokumentu. NewsManagement Metadata elementu NewsManagement obsahuj´ı informace o dokumentu, napˇr. typ, historii, ˇc´ıslo revize, status, vazby na ostatn´ı dokumenty a pod. NewsComponent Element NewsComponent zapouzdˇruje samotn´ y obsah dokumentu. Jsou v nˇem vnoˇreny elementy Metadata a ContentItem. Element DescriptiveMetadata v sobˇe obsahuje metadata vztahuj´ıc´ı se k dokumentu (napˇr. autora, editory, kategorie do kter´ ych dokument spad´a, jeho nadpis, zdroj a dalˇs´ı). Pro mne byly nejv´ yznamˇejˇs´ı z tyto elementy: • Headline - nadpis.
2.2 Ud´alosti
5
• Caption - popisek. • Category - kategorie do kter´e dokument patˇr´ı (m˚ uˇze se vyskytovat v metadatech v´ıcekr´at). • Location - popis geografick´eho um´ıstˇen´ı pomoc´ı vnoˇren´ ych element˚ u Region, Country, City, Place a Position (s atributy GPS souˇradnic). Viz n´asleduj´ıc´ı uk´azka: ce ˇ CRPraha V a l dˇs t e j n s k y ´ p a l a´ c , V a l dˇs t e j n s k´e n´am . 4 , Praha 1 Element ContentItem popisuje samotn´ y obsah dokumentu. Pokud se jedn´a o textov´ y dokument, je text dokumentu uloˇzen v elementu BodyContent. BodyContent m˚ uˇze obsahovat i nˇekter´e XHTML znaˇcky, jejich v´ yˇcet je v tabulce 2.1. V pˇr´ıpadˇe bin´arn´ıch dokument˚ u (foto, video, audio) obsahuje element ContentItem atribut Href, kter´ y odkazuje na bin´arn´ı soubor. Vnoˇren´e elementy v ContentItem jsou: • MediaType - typ dokumentu
3
(Text, Photo, Audio, ...).
• Format - form´at bin´arn´ıho souboru (pokud se nejedn´a o MediaType Text). • Charasteristics - charakteristika dokumentu (napˇr. poˇcet slov, odstavc˚ u apod. u textov´eho dokumentu, nebo velikost, n´azev souboru, rozmˇery atd. u bin´arn´ıho dokumentu). • BodyContent - vlastn´ı obsah textov´eho dokumentu.
2.2
Ud´ alosti
Soubory s ud´alostmi obsahuj´ı z´aznamy ud´alost´ı, v´ yroˇc´ı a pl´anovan´ ych akc´ı. Souˇca´st´ı ud´alost´ı mohou b´ yt i multimedi´aln´ı pˇr´ılohy (foto, audio, video). Struktura XML form´atu pro jejich uchov´av´an´ı je pops´ana d´ale a zobrazena na obr´azku 2.2. Kaˇzd´a ud´alost je um´ıstˇena v samostatn´em elementu Incident. N´asleduje popis z´akladn´ıch element˚ u ud´alosti : 3
Tabulka 2.1: V´ yˇcet pˇr´ıpustn´ ych XHTML znaˇcek v elementu BodyContent
Obr´azek 2.2: Z´akladn´ı struktura form´atu pro ud´alosti • Identification - stejn´ y v´ yznam jako u dokument˚ u (identifikace ud´alosti ). M´a podobnou strukturu, pouze obsahuje m´enˇe element˚ u. • Metadata - stejn´ y v´ yznam jako element DescriptiveMetadata u dokument˚ u, liˇs´ı se pouze v nˇekter´ ych elementech. • Scheduling - obsahuje ˇcasov´e u ´daje o ud´alosti. Element DateStart ud´av´a datum (pˇr´ıpadnˇe i ˇcas), kdy m´a dan´a ud´alost nastat. Form´at data je ve tvaru YYYYMM-DD hh:mm. • Attachment - multimedi´aln´ı pˇr´ıloha. Strukturou odpov´ıd´a elementu ContentItem pro bin´arn´ı data dokument˚ u, liˇs´ı se pouze n´azvem. Obsahuje atribut Href odkazuj´ıc´ı na pˇriloˇzen´ y soubor a vnoˇren´e elementy MediaType, Format a Characteristics. • BodyContent - textov´ y obsah, totoˇzn´ y form´at jako u dokument˚ u.
2.3 Shrnut´ı
2.3
7
Shrnut´ı
ˇ Data CTK jsem se po anal´ yze metadat rozhodl prim´arnˇe vizualizovat na z´akladˇe ˇ ˇcasov´ ych u ´daj˚ u, geografick´ ych u ´daj˚ u a jejich kombinac´ı. Casov´ eu ´daje vhodn´e k vizualizaci formou ˇcasov´e osy byly obsaˇzen´e ve vˇsech exportovan´ ych poloˇzk´ach. Geografick´e u ´daje - souˇradnice GPS (Global Positioning System), vhodn´e pro vizualiˇ zaci dat na mapˇe, se v CTK pouˇz´ıvaj´ı prozat´ım pouze v testovac´ım provozu. Proto v nˇekter´ ych souborech zcela chybˇely.
8
Kapitola 3 Mapov´ e servery Mapov´ y server je klient-server aplikace, kter´a je schopna na z´akladˇe poˇzadavku a dostupn´ ych geografick´ ych dat vygenerovat odpov´ıdaj´ıc´ı mapov´e podklady, nejˇcastˇeji v rastrov´em form´atu (form´aty PNG, TIFF, JPEG, GIF). Sch´ema komunikace je na obr´azku 3.1. Geografick´a data potˇrebn´a pro vygenerov´an´ı mapy jsou georeferencov´ana (maj´ı jednoznaˇcnˇe dan´ y souˇradnicov´ y syst´em). D´ıky tomu lze kombinovat v´ıce druh˚ u geografick´ ych dat bˇehem generov´an´ı mapov´ ych podklad˚ u. Mapov´ y server m˚ uˇze podporovat jednu ˇci v´ıce webov´ ych mapov´ ych sluˇzeb, kter´e jsou definov´any standardy Open Geospatial Consorcia (OGC) [24].
Obr´azek 3.1: Komunikace mezi klientem a mapov´ym serverem
3.1
Web Map Service
Web Map Service (WMS) je OGC standard, kter´ y poskytuje jednoduch´e HTTP rozhran´ı pro dotazov´an´ı geografick´ ych mapov´ ych dat uloˇzen´ ych v lok´aln´ı nebo distribuovan´e datab´azi. WMS dotaz definuje geografickou vrstvu a oblast z´ajmu. Odpovˇed´ı na WMS dotaz jsou rastrov´e obr´azky – georeferencovateln´e mapov´e podklady, kter´e mohou b´ yt zobrazeny v klientsk´e aplikaci. Rozhran´ı tak´e umoˇzn ˇuje specifikovat, zda vr´acen´e obr´azky maj´ı b´ yt pr˚ uhledn´e, coˇz umoˇzn ˇuje kombinovat data v distribuovan´em syst´emu sloˇzen´em z v´ıce server˚ u [24].
3.2 Web Map Tile Service
3.1.1
9
GetMap request
GetMap request je j´adro WMS protokolu. Jedn´a se o specifickou HTTP Key-ValuePair (KVP) adresu, kter´a vr´at´ı obr´azek, ˇci obr´azky dotazovan´e mapy. Dotaz se skl´ad´a z URL WMS mapov´eho serveru, verze protokolu, typu dotazu, rozmˇer˚ u ohraniˇcovac´ıho r´ameˇcku (4 souˇradnice: xMin, yMin, xMax, yMax – x odpov´ıd´a zemˇepisn´e d´elce, y zemˇepisn´e ˇs´ıˇrce), typu projekce, velikosti obr´azku, typ˚ u vrstev kter´e chceme zobrazit a form´atu obr´azku v kter´em chceme zaslat odpovˇed’. Odpovˇed’ bude obr´azek v definovan´em form´atu o dan´ ych rozmˇerech, z m´ısta specifikovan´em v ohraniˇcuj´ıc´ım r´ameˇcku [12]. Uk´azka URL pro GetMap:
<S e r v i c e R o o t >? S e r v i c e=WMS &V e r s i o n =1.1.0& Request=GetMap&BBox =−20,−40,60,40&SRS=EPSG:4326& Width=400&Height=800&L ay e rs= C o u n t r i e s&Format=image / g i f
3.1.2
GetCapabilities request
K tomu abychom byli schopni sloˇzit URL pro GetMap request, potˇrebujeme zn´at informace o mapov´ ych datech na serveru. Napˇr. kter´e vrstvy jsou na serveru dostupn´e, jak´ y souˇradnicov´ y syst´em pouˇz´ıv´a a jak´e typy obr´azk˚ u a verze protokolu podporuje. Odpovˇed´ı na tento dotaz je strukturovan´ y XML soubor s informacemi o WMS serveru a geografick´ ych datech kter´a poskytuje [12]. Uk´azka URL pro GetCapabilities:
<S e r v i c e R o o t >? r e q u e s t=G e t C a p a b i l i t i e s&v e r s i o n=v e r s i o n
3.2
Web Map Tile Service
Web Map Tile Service (WMTS) je implementaˇcn´ı OGC standard, kter´ y poskytuje reprezentaci digit´aln´ı mapy na z´akladˇe pˇredem vygenerovan´ ych obr´azkov´ ych dlaˇzdic uloˇzen´ ych na serveru. Dlaˇzdice jsou uloˇzeny v adres´aˇrov´e struktuˇre podle typu mapy, vrstvy, u ´rovnˇe zoomu, jejich pozice apod. Kaˇzd´emu typu mapy, u ´rovni zoomu atd. bude odpov´ıdat jin´ y adres´aˇr. Odtud je pak server poskytuje na vyˇz´ad´an´ı klient˚ um. WMTS m´a k dispozici standardizovan´ y dokument ServiceMetadata.xml, kter´ y strukturu dat na serveru popisuje. Definuje dostupn´e dlaˇzdice v kaˇzd´e vrstvˇe, v kaˇzd´em referenˇcn´ım souˇradn´em syst´emu, v kaˇzd´em mˇeˇr´ıtku apod. Na z´akladˇe informac´ı v dokumentu ServiceMetadata.xml mohou klienti poˇza´dat o konkr´etn´ı dlaˇzdice. WMTS
3.2 Web Map Tile Service
10
pouˇz´ıvaj´ı vˇsechny modern´ı mapov´e aplikace, jejich v´ yhodou oproti WMS je rychlost poskytov´an´ı dlaˇzdic a sn´ıˇzen´a z´atˇeˇz serveru. Na HTTP poˇzadavek se odpov´ı konkr´etn´ı dlaˇzdic´ı (souborem na disku). U WMS se mus´ı obr´azky generovat dynamicky [1].
3.2.1
GetTile request
GetTile request je HTTP KVP dotaz na konkr´etn´ı dlaˇzdici. Dotaz se skl´ad´a z URL WMTS mapov´eho serveru, verze protokolu, typu dotazu, druhu poˇzadovan´e vrstvy, stylu, form´atu dlaˇzdic, typu projekce, u ´rovnˇe zoomu (TileMatrix viz obr´azek 3.2) a ˇc´ısla ˇra´dku a sloupce v dlaˇzdicov´em prostoru (viz obr´azek 3.3). Dlaˇzdicov´ y prostor tvoˇr´ı jednu vrstvu v TileMatrix. Nult´a vrstva na obr´azku 3.2 (v popˇred´ı) pˇredstavuje nejmenˇs´ı moˇznou u ´roveˇ n zoomu, cel´a oblast mapy je v takov´em pˇr´ıpadˇe pokryta jednou dlaˇzdic´ı. Maxim´aln´ı u ´roveˇ n zoomu a nejdetailnˇejˇs´ı dlaˇzdice jsou zn´azornˇeny v pozad´ı obr´azku 3.2. Uk´azka URL pro GetTile:
<S e r v i c e R o o t >?SERVICE=WMTS &r e q u e s t=G e t T i l e&v e r s i o n =1.0.0& Layer=C o u n t r i e s&s t y l e=d e f a u l t&format=image /png& T i l e M a t r i x S e t=WholeWorld CRS 84&T i l e M a t r i x =10m&TileRow=1& T i l e C o l=3
Obr´azek 3.3: Dlaˇzdicov´y prostor WMTS TileMatrix [1]
3.2.2
GetCapabilities request
Form´at dotazu je stejn´ y jako u WMS. Vr´at´ı XML dokument s informacemi o WMST serveru (uspoˇra´d´an´ı dlaˇzdic, moˇzn´e projekce, vrstvy atd.).
3.2.3
Rest request
Na z´akladˇe metadat v ServiceMetadata.xml standardizuje HTTP GET poˇzadavek pro snadn´e dotazov´an´ı dlaˇzdic. Dotaz nem´a tvar KVP, ale je definov´an pomoc´ı URI ˇsablony. V mapov´ ych API je to nejpouˇz´ıvanˇejˇs´ı metoda pro z´ısk´av´an´ı obr´azkov´ ych dlaˇzdic. Rest request tak m˚ uˇze vypadat v z´avislosti na URI ˇsablonˇe n´asledovnˇe:
<S e r v i c e R o o t >/{ T i l e M a t r i x }/{ TileRow }/{ T i l e C o l } [ . Format ]
12
Kapitola 4 Zdroje dat dostupn´ e na webu V u ´vodu t´eto kapitoy je vysvˇetlen´ı pojmu mashup aplikace. N´asleduje popis vybran´ ych zdroj˚ u dat dostupn´ ych na webu, kter´e mohou b´ yt pro mashup aplikace pouˇzity. Kapitola je zamˇeˇrena pˇredevˇs´ım na zdroje geografcik´ ych dat, kter´e budou vyuˇzity jako mapov´e podklady pro vytvoˇrenou webovou aplikaci. Souˇc´ast´ı je i popis ˇ eho statistick´eho u volnˇe pˇr´ıstupn´ ych dat z Cesk´ ´ˇradu a port´alu Europe’s public data, kter´e by mohli slouˇzit jako dalˇs´ı zdroje dat pro mashup aplikace.
4.1
Mashup aplikace
Za mashup aplikaci (z anglick´eho mashup = m´ıchat) se oznaˇcuje webov´a sluˇzba, nebo str´anka, kter´a kombinuje v´ıce datov´ ych online zdroj˚ u zpravidla se sv´ ymi vlastn´ımi daty. Z´ıskan´a data n´aslednˇe vhodnˇe reprezentuje, ˇc´ımˇz vytv´aˇr´ı na data nov´ y pohled. V souˇcasn´e dobˇe mnoho webov´ ych sluˇzeb uvolˇ nuje sv´a API, kter´a v´ yvoj mashup aplikac´ı zjednoduˇsuj´ı. Typick´ ym pˇr´ıkladem jsou mapov´a API, kter´a umoˇzn ˇuj´ı zobrazovat data na mapˇe na z´akladˇe GPS souˇradnic.
4.2
OpenStreetMap
OpenStreetMap [9] je open source projekt zab´ yvaj´ıc´ı se tvorbou volnˇe dostupn´ ych geografick´ ych dat a mapov´ ych podklad˚ u. Veˇsker´a data jsou poskytov´ana pod licenc´ı Open Database Licence (ODL) [10], kter´a umoˇzn ˇuje vyuˇz´ıvat data zdarma i pro komerˇcn´ı u ´ˇcely. Jedinou nutnou podm´ınkou je zobrazovat v rohu mapy copyright OpenStreetMaps. Spojen´ım geografick´ ych dat s mapov´ ymi podklady se daj´ı vytv´aˇret takzvan´e topografick´e mapy. Geografick´a data se pouˇzij´ı jako podvrstva zobrazovan´e mapy a v´ ysledkem m˚ uˇze b´ yt napˇr. silniˇcn´ı ˇci ˇzelezniˇcn´ı s´ıt’, turistick´e nebo cyklistick´e stezky, pam´atky a jin´e. Od roku 2008 je moˇzn´e ukl´adat data do GPS zaˇr´ızen´ı a pouˇz´ıvat je pro navigaci.
4.3 Thunderforest
4.2.1
13
Zdroje dat
Projekt OpenStreetMap funguje na obdobn´em principu jako Wikipedie. Daty z GPS pˇrij´ımaˇce, ˇci jin´ ymi daty, kter´a nejsou v rozboru s licenc´ı OpenStreetMap, do nˇej m˚ uˇze dobrovolnˇe pˇrispˇet kdokoli. Do projektu pˇrisp´ıvaj´ı zejm´ena: • Dobrovoln´ıci - Lid´e mapuj´ıc´ı ter´en GPS pˇrij´ımaˇci. Sv´a data zpracuj´ı na poˇc´ıtaˇci a nahraj´ı do datab´aze OpenStreetMap. • Veˇ rejn´ e zdroje - Vl´adn´ı organizace, kter´e sv´a data, ˇci mapy uvolˇ nuj´ı pod licenc´ı kompatibiln´ı licenc´ı s OpenStreetMap. Pˇr´ıkladem poskytovan´ ych dat jsou leteck´e ˇci satelitn´ı sn´ımky, katastr´aln´ı a silniˇcn´ı mapy apod. • Komerˇ cn´ı zdroje - firmy, kter´e poskytuj´ı sv´a data (mapy, leteck´e sn´ımky, silniˇcn´ı s´ıtˇe, ...).
4.2.2
Pokryt´ı a form´ at dat
Geografick´a data OpenStreetMap pokr´ yvaj´ı cel´ y svˇet. Nejv´ıce je pokryta Evropa a USA. Form´at geografick´ ych dat OpenStreetMap je zaloˇzen na XML. D˚ uleˇzitou vlast1 nost´ı je pouˇzit´ y souˇradnicov´ y syst´em - WGS 84 a Mercatorova projekce2 pouˇzit´a pro zobrazen´ı dat. Souˇradnicov´ y syst´em dat mus´ı b´ yt shodn´ y se souˇradnicov´ ym syst´emem mapov´eho serveru, pˇr´ıpadnˇe se mus´ı prov´adˇet pˇrepoˇcet. Jinak bude doch´azet k chybn´e reprezentaci dat. Vˇsechny dlaˇzdice jsou ve form´atu PNG a maj´ı ˇ ıslovan´e jsou od 0, kter´a je um´ıstˇena v lev´em horn´ım rozmˇer 256 x 256 pixel˚ u. C´ rohu mapy. Pojmenov´an´ı dlaˇzdic je {z}/{x}/{y}.png, kde z je zoom, x ˇc´ıslo soupce a y ˇc´ıslo ˇra´dku v dlaˇzdicov´em prostoru.
4.3
Thunderforest
Thunderforest [13] v souˇcasn´e dobˇe nab´ız´ı zdarma tˇri r˚ uzn´e mapov´e podklady (viz obr´azek 4.1), distribuovan´e pod licenc´ı CC-BY-SA 2.0 (Creative Commons). Komerˇcn´ı pouˇzit´ı je povoleno. Je vˇsak nutn´e br´at v u ´vahu to, ˇze tyto mapov´e podklady vznikly z geografick´ ych dat OpenStreetMap. Proto je nutn´e pˇri jejich pouˇz´ıv´an´ı db´at i na licenci pod kterou distribuuje data OpenStreetMap. Pˇri pouˇz´ıv´an´ı tˇechto map mus´ıme zobrazoval copyright obou zdroj˚ u (Thunderforest i OpenStreetMap). ˇ ıslovan´e Vˇsechny dlaˇzdice jsou ve form´atu PNG a maj´ı rozmˇer 256 x 256 pixel˚ u. C´ jsou od 0, kter´a je um´ıstˇena v lev´em horn´ım rohu mapy. Pojmenov´an´ı dlaˇzdic je {z}/{x}/{y}.png, kde z je zoom, x ˇc´ıslo soupce a y ˇc´ıslo ˇra´dku v dlaˇzdicov´em prostoru. 1 2
World Geodetic System 1984 - geodetick´ y standard vydan´ y ministerstvem obrany USA. Kartografick´e zobrazen´ı plochy elipsoidu do roviny
4.3 Thunderforest
4.3.1
14
OpenCycleMap
Mapa urˇcen´a pˇredevˇs´ım pro cyklisty, obsahuje vrstevnice, detailn´ı vyobrazen´ı cyklostezek, lesn´ıch cest, silnic, zv´ yraznˇen´e zalesnˇen´e plochy, atd. URL ˇsablona3 : h t t p : / / [ abc ] . t i l e . opencyclemap . or g / c y c l e /${ z }/ ${x}/ ${y } . png
4.3.2
Transport
Mapa zamˇeˇren´a na dopravn´ı informace jako jsou ˇzelezniˇcn´ı a silniˇcn´ı s´ıtˇe, MHD a metro. V Plzni jsou pˇri dostateˇcn´em zvˇetˇsen´ı i trasy a zast´avky MHD, vˇcetnˇe ˇc´ısel linek, kter´e na nich jezd´ı. URL ˇsablona je n´asleduj´ıc´ı: http : / / [ abc ] . t i l e 2 . opencyclemap . o r g / t r a n s p o r t /${ z }/ ${x}/ ${y } . png
4.3.3
Landscape
Mapa zamˇeˇren´a hlavnˇe pro outdoorov´e aktivity. Obsahuje u ´daje o ter´enu jako jsou vrstevnice vˇcetnˇe u ´daj˚ u o nadmoˇrsk´e v´ yˇsce, lesn´ı cesty, zv´ yraznˇen´e lesy, popisy a n´azvy vodn´ıch tok˚ u apod. URL ˇsablona je n´asleduj´ıc´ı: http : / / [ abc ] . t i l e 3 . opencyclemap . o r g / l a n d s c a p e /${ z }/ ${x}/ ${y } . png
Obr´azek 4.1: Uk´azky mapov´ych podklad˚ u z Thunderforest [13] 3
[abc] oznaˇcuj´ı dostupn´e subdom´eny (z URL je lze i vypustit) je n´asleduj´ıc´ı
ˇ y statistick´ 4.4 Cesk´ yu ´ˇrad
4.4
15
ˇ Cesk´ y statistick´ yu ´ˇ rad
ˇ y statistick´ ˇ U) ´ poskytuje statistick´e u ˇ e Republiky Cesk´ y u ´ˇrad [3] (CS ´daje Cesk´ ˇ z r˚ uzn´ ych odvˇetv´ı a kategori´ı. Vize CTK byla tato data zahrnout do mashup aplikace. Napˇr´ıklad propojit ud´alosti zobrazen´e na mapˇe s u ´daji o velikosti s´ıdla. ˇ ´ Forma, jakou data CSU poskytuje, je vhodn´a sp´ıˇse pro ruˇcn´ı proch´azen´ı, neˇz automatick´ y sbˇer dat. Uˇzivatel si pohodlnˇe dok´aˇze zobrazit co ho zaj´ım´a. Nicm´enˇe data ˇ U ´ jsou smˇes´ı r˚ poskytovan´a na str´ank´ach CS uzn´ ych form´at˚ u (PDF dokumenty, dokumenty MS Excel, html tabulky ˇci v´ ypisy tabulek z Veˇrejn´e datab´aze), nevhodn´ ych pro mashup aplikace. Pˇrehled tˇechto dat lze nal´ezt v z´aloˇzce Zdroje dat na webu ˇ U. ´ U v´ CS ypis˚ u z tabulek Veˇrejn´e datab´aze je vˇetˇsinout k dispozici i vizualizace dat ve formˇe graf˚ u. ˇ U ´ pˇr´ıstupn´e pomoc´ı Veˇrejn´a datab´aze obsahuje statistick´e u ´daje z datab´aze CS webov´eho prohl´ıˇzeˇce. V souˇcasn´e dobˇe umoˇzn ˇuje zobrazovat pouze cel´e tabulky a nˇekter´e z tˇechto tabulek lze i graficky zobrazit ve formˇe grafu nebo geografick´eho rozloˇzen´ı. U vˇsech tabulek je odkaz na pr˚ uvodce, kter´ y umoˇzn ˇuje export dat do form´atu XSL nebo XML. Toto je podle m´eho n´azoru nejlepˇs´ı zp˚ usob, jak by se ˇ U ´ pˇr´ıpadnˇe dala vyuˇz´ıt pro mashup aplikace. Bylo by ale nutn´e se aktu´aln´ı data CS podrobnˇe sezn´amit s XML form´atem, ve kter´ ych jsou data exportov´ana a strukturou Veˇrejn´e datab´aze. Metadata z exportu totiˇz obsahuj´ı i identifik´atory na ˇc´ıseln´ıky jin´ ych tabulek.
4.5
Europe’s Public Data
Europe’s Public Data [4] (EPD) je datov´ y port´al, kter´ y poskytuje datov´e mnoˇziny v nejr˚ uznˇejˇs´ıch form´atech ze subjek˚ u (lid´ı, firem, st´atn´ıch instituc´ı) z cel´e Evropy. Datov´e mnoˇziny jsou pomˇernˇe pˇrehlednˇe rozˇclenˇeny do kategori´ı, kter´e lze d´ale filtrovat podle dalˇs´ıch parametr˚ u: skupina, form´at dat a tag. Kaˇzd´a mnoˇzina obsahuje mnoˇzstv´ı metadat podle toho, jak´e poloˇzky pˇri jeho pˇrid´av´an´ı na port´al uˇzivatel vyplnil. EPD se na prvn´ı pohled jev´ı jako dobr´ y port´al, kde jsou na jednom m´ıstˇe doˇ ˇ U, ´ stupn´e r˚ uzn´e typy dat a to i pro Ceskou Republiku (napˇr. statistick´e u ´daje z CS Ministerstva financ´ı a dalˇs´ıch ministerstvech). Pˇri podrobnˇejˇs´ım zkoum´an´ı bylo zjiˇstˇeno, ˇze vˇetˇsina soubor˚ u nejde otevˇr´ıt a nejˇcastˇejˇs´ı pˇr´ıˇcinou byla chyba HTTP 404, (soubor nenalezen). Chyba vznikla t´ım, ˇze dan´ y datov´ y zdroj (soubor) na kter´ y odkazuje z´aznam na str´ank´ach EPD byl smaz´an, pˇrejmenov´an, ˇci pˇresunut a nebyl aktualizov´an jeho z´aznam v EPD port´alu.
16
Kapitola 5 N´ astroje pro vizualizaci dat Tato kapitola obsahuje popis vlastnost´ı nalezen´ ych volnˇe dostupn´ ych n´astroj˚ u pro vizualizaci dat a jejich srovn´an´ı. Zamˇeˇrena je na n´astroje pro geografickou a ˇcasovou vizualizaci dat.
5.1
Google Maps
Google Maps API [16] je patrnˇe nejzn´amˇejˇs´ı mapov´e API. Poskytuje pokroˇcil´e funkce pro pl´anov´an´ı tras (pro pˇeˇs´ı turistiku, cykloturistiku, dopravu, ...), pohledy z ulice, 3D budovy, poˇcas´ı a dalˇs´ı. Neust´ale se vyv´ıj´ı. Kromˇe z´akladn´ıch funkc´ı potˇrebn´ ych pro vizualizaci GPS dat (znaˇcky, body, kˇrivky, mnoho´ uheln´ıky), umoˇzn ˇuje definovat shlukov´an´ı znaˇcek na mapˇe pˇr´ımo pomoc´ı API, podle jejich vz´ajemn´e vzd´alenosti au ´rovnˇe zoomu. Nab´ız´ı tak´e funkce umoˇzn ˇuj´ıc´ı geok´odov´an´ı (proces kdy se konkr´etn´ı adrese pˇriˇrad´ı GPS souˇradnice) a reverzn´ı geok´odov´an´ı (proces opaˇcn´ y). V souˇcasn´e dobˇe je Google Maps API ve verzi 3, kter´a nen´ı zpˇetnˇe kompatibiln´ı s pˇredchoz´ımi verzemi. Do roku 2011 bylo Google Maps API poskytov´ano zcela zdarma. Nyn´ı je zdarma pouze pro nekomerˇcn´ı pouˇzit´ı, nav´ıc s nˇekter´ ymi omezen´ımi. Webov´e str´anky a aplikace vyuˇz´ıvaj´ıc´ı Google Maps API zdarma, jsou omezeny poˇctem vygenerovan´ ych ud´alost´ı tzv. map loads 1 . Ud´alost vˇsak nen´ı definov´ana jen jako naˇcten´ı mapy. Celkovˇe lze za den vygenerovat 25 000 ud´alost´ı. Pˇrekroˇcen´ı limitu nem´a na funkˇcnost aplikace ˇz´adn´ y vliv, pokud se tak nedˇeje 90 po sobˇe n´asleduj´ıc´ıch dn´ı. Pot´e pˇrijde od spoleˇcnosti Google upozornˇen´ı a bude tˇreba danou situaci ˇreˇsit. Z licence plyne, ˇze aplikace vyuˇz´ıvaj´ıc´ı Google Maps API nesm´ı b´ yt pouˇz´ıv´any v r´amci intranetu, za firewallem, nebo poskytov´any uˇzivatel˚ um internetu, kteˇr´ı se pro pˇr´ıstup mus´ı registrovat za poplatek. Samotn´e omezen´ı pˇr´ıstupu uˇzivatel˚ u prostˇrednictv´ım registrace a pˇrihlaˇsov´an´ı uˇzivatel˚ u v rozporu s licenˇcn´ım ujedn´an´ı nen´ı. Pro komerˇcn´ı pouˇzit´ı je moˇzno zakoupit licenci Google Maps API for Bussines. Cena vˇsak zaˇc´ın´a na 10 000 $ za rok, v z´avislosti na poˇctu zobrazen´ı map. Google Maps poskytuje tˇri z´akladn´ı mapov´e podklady: ulice, satelit, ter´en. API je moˇzn´e pouˇz´ıt i s jin´ ymi mapami. Poplatky a omezen´ı vˇsak nesouvis´ı s pouˇzit´ım 1
map od Google, ale na vyuˇz´ıv´an´ı API. N´asleduje pˇrehled hlavn´ıch vlastnost´ı pro Google Maps API: • Licence: Google Maps2 • Cena: Zdarma pro nekomerˇcn´ı pouˇzit´ı • Programovac´ı jazyk: JavaScript • Dokumentace: Ano • Uk´ azky k´ odu, tutori´ aly: Ano • Shlukov´ an´ı znaˇ cek: Ano • Geok´ odov´ an´ı: Ano • Reverzn´ı geok´ odov´ an´ı: Ano • Funkˇ cn´ı omezen´ı: Ano - poˇcet zobrazen´ı za den • Glob´ aln´ı mapov´ e podklady: Ano
5.2
Mapy API
Mapy API [18] je velice pˇrehledn´e API od ˇcesk´e firmy Seznam.cz. Podporuje ˇ nav´ıc geok´odov´an´ı, reverzn´ı geok´odov´an´ı i pl´anov´an´ı tras. D´ale zejm´ena pro CR nab´ız´ı turistick´e mapy, cyklomapy, leteck´e sn´ımky a dalˇs´ı funkce. Vytv´aˇren´ı vlastn´ıch aplikac´ı je zcela intuitivn´ı. Pro vizualizaci GPS dat (znaˇcky, body, kˇrivky, mnoho´ uheln´ıky) obsahuje dostatek funkc´ı, ale narozd´ıl od Google Maps neumoˇzn ˇuje vytv´aˇret shluky znaˇcek. Podobn´a funkce v API nen´ı z´amˇernˇe, protoˇze jeho v´ yvoj´aˇri tvrd´ı, ˇze shlukov´an´ı se m´a prov´adˇet na stranˇe serveru, nikoli na stranˇe klienta. Je napsan´e v JavaScriptu a internˇe pouˇz´ıv´a framework JAK 3 . Pouˇzit´ı je zcela zdarma, uˇzivatel´e internetu vˇsak nesm´ı b´ yt nijak omezeni v pˇr´ıstupu na str´anky, kde je API pouˇzito. Povoleno je pouze pˇrihlaˇsov´an´ı uˇzivatel˚ u, avˇsak nikoliv napˇr´ıklad zpoplatnˇen´ y pˇr´ıstup uˇzivatel˚ u, nebo provozov´an´ı API v r´amci intranetu ˇci za firewallem. V souˇcasn´e dobˇe se pˇripravuje zmˇena licenˇcn´ıho ujedn´an´ı, kde by mˇelo b´ yt zruˇseno zm´ınˇen´e omezen´ı a nen´ı ani vylouˇcena moˇznost domluvy pˇr´ımo s firmou Mapy.cz. V´ yhodou je existence ofici´aln´ıho f´ora API v ˇcesk´em jazyce. Nev´ yhodou je, ˇ ˇze mapov´e poklady nepokr´ yvaj´ı cel´ y svˇet, jsou zamˇeˇreny pˇredevˇs´ım na CR a Evropu. Mapov´e podklady se mohou pouˇz´ıt i s jin´ ym API, mus´ı b´ yt vˇsak dodrˇzeny licenˇcn´ı podm´ınky Mapy API a na map´ach zobrazeno nezmˇenˇen´e logo a copyright Mapy.cz. 2
https://developers.google.com/maps/terms?hl=cs Javascriptov´ a knihovna http://jak.seznam.cz/ - open source projekt, kter´ y velice zjednoduˇsuje pr´ aci v prostˇred´ı jazyka JavaScript 3
5.3 OpenLayers
18
N´asleduje pˇrehled hlavn´ıch vlastnost´ı pro Mapy API: • Licence: Mapy API4 • Cena: Zdarma • Programovac´ı jazyk: JavaScript • Dokumentace: Ano • Uk´ azky k´ odu, tutori´ aly: Ano • Shlukov´ an´ı znaˇ cek: Ne • Geok´ odov´ an´ı: Ano • Reverzn´ı geok´ odov´ an´ı: Ano • Funkˇ cn´ı omezen´ı: Ne • Glob´ aln´ı mapov´ e podklady: Ne
5.3
OpenLayers
OpenLayers [8] je JavaScriptov´e API, kter´e je poskytov´ano zcela zdarma jako OpenSource pod licenci FreeBSD[8]. Kromˇe OpenSourcov´e licence je jeho dalˇs´ı velkou v´ yhodou to, ˇze je velmi flexibiln´ı a nen´ı z´avisl´e na poskytovateli map nebo technologii. To je moˇzn´e zmˇenit bez nutnosti pˇrepisovat cel´ y k´od. Podporuje napˇr. Google, Yahoo, Microsoft, WMS, ArcGIS Server, MapServer atd. Obsahuje standardn´ı funkce pro vizualizaci dat (znaˇcky, body, kˇrivky, mnoho´ uheln´ıky). Oproti Google Maps je vˇsak pomalejˇs´ı a komplikovanˇejˇs´ı a nen´ı urˇcen´e pro mobiln´ı aplikce. D´ıky OpenSource licenci je moˇzn´e upravovat zdrojov´e k´ody a pˇrid´avat nov´e funkce ˇci vlastnosti [11]. N´asleduje hlavn´ı pˇrehled vlastnost´ı OpenLayers: • Licence: FreeBSD • Cena: Zdarma • Programovac´ı jazyk: JavaScript • Dokumentace: Ano • Uk´ azky k´ odu, tutori´ aly: Ano • Shlukov´ an´ı znaˇ cek: Ne • Geok´ odov´ an´ı: Ne 4
http://api4.mapy.cz/
5.4 Microsoft Bing
19
• Reverzn´ı geok´ odov´ an´ı: Ne • Funkˇ cn´ı omezen´ı: Ne • Glob´ aln´ı mapov´ e podklady: Dle vybran´eho poskytovatele
5.4
Microsoft Bing
Bing Maps [19] pˇredstavil Microsoft jako alternativu k Google Maps. Rovnˇeˇz se jedn´a o API zaloˇzen´e na JavaScriptu. Podm´ınky pouˇz´ıv´an´ı Bing Maps se liˇs´ı v z´avislosti na konkr´etn´ı licenci. Na v´ ybˇer je 7 r˚ uzn´ ych druh˚ u, kter´e se liˇs´ı cenou a funkˇcnost´ı. Nˇekter´e licence jsou zdarma a bez omezen´ı, podm´ınkou je ovˇsem nekomerˇcn´ı pouˇzit´ı a z´aroveˇ n veˇrejn´ y pˇr´ıstup. Cena u komerˇcn´ı licence se odv´ıj´ı od poˇctu relac´ı nebo transakc´ı za rok, poˇctu uˇzivatel˚ u a dalˇs´ıch parametr˚ u. N´asleduje hlavn´ı pˇrehled vlastnost´ı Microsoft Bing: • Licence: Bing Maps5 • Cena: Zdarma pro nekomerˇcn´ı pouˇzit´ı, pro komerˇcn´ı pouˇzit´ı dle konkr´etn´ı licence • Programovac´ı jazyk: JavaScript • Dokumentace: Ano • Uk´ azky k´ odu, tutori´ aly: Ano • Shlukov´ an´ı znaˇ cek: Ne • Geok´ odov´ an´ı: Ano • Reverzn´ı geok´ odov´ an´ı: Ano • Funkˇ cn´ı omezen´ı: dle zvolen´e licence • Glob´ aln´ı mapov´ e podklady: Ano
5.5
Leaflet
Leaflet [15] je JavaScriptov´e OpenSource API navrˇzen´e pro desktopov´e a mobiln´ı aplikace. D´ıky dobˇre navrˇzen´emu desingu se s n´ım lehce pracuje a tak´e nab´ız´ı velikou flexibilitu v moˇznosti nastaven´ı mapov´ ych podklad˚ u. K mapov´ ym server˚ um se pˇristupuje pomoc´ı definovan´ ych ˇsablon. Pokud dok´aˇzeme sestavit spr´avnou URL pro konkr´etn´ı mapov´ y server (napˇr. Google Maps a pod.), nemˇel by b´ yt technick´ y probl´em pouˇz´ıt jeho mapy s Leaflet API. V pˇr´ıpadˇe vyuˇzit´ı Google Maps vˇsak nic 5
nebr´an´ı tomu, aby n´as poskytovatel mapov´eho serveru zablokoval [11]. Napˇr´ıklad pokud zjist´ı poruˇsen´ı licenˇcn´ıch podm´ınek Google Maps, nebo pˇrekraˇcov´an´ı povolen´eho poˇctu poˇzadavk˚ u na zobrazen´ı za den. Proto by bylo vhodn´e vybrat mapov´ y server, u kter´eho neporuˇs´ıme licenˇcn´ı ujedn´an´ı, ˇci copyright (napˇr. OpenStreetMap). Dobˇre navrˇzen´ y datov´ y model umoˇzn ˇuje jednoduˇse pˇrid´avat nov´e funkce, nebo vytv´aˇret nov´e pluginy. Vybran´e pluginy je moˇzn´e nal´ezt na str´ank´ach projektu6 a jejich vyuˇz´ıv´an´ım lze programov´an´ı v Leaflet API jeˇstˇe v´ıce zpˇr´ıjemnit. Jedn´ım z nich je plugin Leaflet.markercluster 7 , kter´ y umoˇzn ˇuje vytv´aˇret shluky znaˇcek pˇr´ımo pomoc´ı API na klientsk´e stranˇe. Shlukov´an´ı je velmi kvalitn´ı a po pˇresunut´ı kurzoru myˇsi na znaˇcku shluku se zobraz´ı okol´ı z kter´eho je shluk vytvoˇren (viz obr´azek 5.1). Na str´ance autora je uvedeno, ˇze plugin umoˇzn ˇuje shlukovat i 50000 znaˇcek v prohl´ıˇzeˇci Google Chrome, v IE9 jsou pˇri takov´em poˇctu znaˇcek se shlukov´an´ı probl´emy. Shlukov´an´ı 50000 znaˇcek bylo prakticky vyzkouˇseno v prohl´ıˇzeˇc´ıch Mozilla Firefox a Google Chrome. Zobrazen´ı bylo v poˇr´adku, poˇc´ateˇcn´ı vytvoˇren´ı shluk˚ u trvalo nˇekolik sekund. N´asleduje hlavn´ı pˇrehled vlastnost´ı API Leaflet: • Licence: OpenSource • Cena: Zdarma • Programovac´ı jazyk: JavaScript • Dokumentace: Ano • Uk´ azky k´ odu, tutori´ aly: Ano • Shlukov´ an´ı znaˇ cek: Ano - speci´aln´ı plugin • Geok´ odov´ an´ı: Ne • Reverzn´ı geok´ odov´ an´ı: Ne • Funkˇ cn´ı omezen´ı: Ne • Glob´ aln´ı mapov´ e podklady: Dle vybran´eho poskytovatele
5.6
SIMILE Widgets Timeline
SMILE Widgets je OpenSource projekt, kter´ y zdarma nab´ız´ı n´astroje pro vizualizaci dat. Jedn´ım z nich je Timeline [21] (ˇcasov´a ˇrada) urˇcen´a pro vizualizaci ˇcasov´ ych u ´daj˚ u, napsan´a v JavaScriptu. Je tvoˇrena horizont´aln´ım p´asem (ˇcasovou osou), na kter´e lze zobrazovat data jako ud´alosti sv´azan´e s konkr´etn´ım ˇcasem, nebo s ˇcasov´ ym ˇ intervalem. Casovou osu lze posunovat myˇs´ı nebo kurzorov´ ymi kl´avesami. Pˇri definici 6 7
Obr´azek 5.1: Shluky vytvoˇren´e pluginem Leaflet.markercluster ˇcasov´e osy je moˇzno specifikovat ˇcasov´e jednotky (rok, mˇes´ıc, den, ...), kter´e slouˇz´ı jako jej´ı mˇeˇr´ıtko. Z´aroveˇ n lze vytvoˇrit v´ıce ˇcasov´ ych ˇrad s r˚ uzn´ ym mˇeˇr´ıtkem, kter´e lze mezi sebou synchronizovat. Aplikacei se pot´e zpˇrehledn´ı a je moˇzno se v n´ı snadnˇeji navigovat. Pouˇzije se napˇr. jedna ˇcasov´a osa pro roky a druh´a jemnˇejˇs´ı pro dny. Timeline obsahuje tak´e r˚ uzn´e funkce pro vyhled´av´an´ı ud´alost´ı na ˇcasov´e ose, ˇci posouv´an´ı osy na konkr´etn´ı datum a ˇcas. Hlavn´ı nev´ yhodou Timeline je fakt, ˇze v projektu jiˇz nikdo nepokraˇcuje. Posledn´ı uloˇzen´a verze projektu je z roku 2009. Od t´e doby bylo objeveno mnoho chyb, kter´e nikdo neopravuje. Na internetov´ ych diskusn´ıch f´orech je sice moˇzn´e nal´ezt ˇreˇsen´ı na konkr´etn´ı probl´emy, ale vytv´aˇret aplikaci v n´astroji s chybami a bez ofici´aln´ı podpory, nen´ı vhodn´e ˇreˇsen´ı. • Licence: OpenSource • Cena: Zdarma • Programovac´ı jazyk: JavaScript • V´ yhody: Moˇznost v´ıce synchornizovan´ ych ˇcasov´ ych os ˇ ri roky stagnuj´ıc´ı projekt, obsahuje chyby, ˇspatn´a dokumen• Nev´ yhody: Ctyˇ tace, vˇetˇsina funkc´ı bez popisu
5.7 Almende Timeline
5.7
22
Almende Timeline
Almende Timeline [14] je projekt distribuovan´ y pod licenc´ı Apache Licence 2.08 . ˇ Je tedy moˇzn´e vyuˇzit´ı zdarma i pro komerˇcn´ı u ´ˇcely. Casov´ a osa Almende Timeline je napsan´a v JavaScritpu, je horizont´alnˇe orientovan´a a pohyb po n´ı se prov´ad´ı tahem myˇs´ı. Obsahuje i zoom, a tak uˇzivateli umoˇzn ˇuje pˇribliˇzovat ˇci oddalovat ud´alosti na ˇcasov´e ose. Pˇri zmˇenˇe zoomu se plynule pˇrepoˇc´ıt´av´a a mˇen´ı obsah ˇcasov´e osy i mˇeˇr´ıtka. Mˇeˇr´ıtko ˇcasov´e osy m´a rozsah od milisekund po roky. Zobrazovat lze ud´alosti v konkr´etn´ım ˇcase i v ˇcasov´em intervalu. Timeline m˚ uˇze b´ yt definov´ana i jako editovateln´a, ˇc´ımˇz lze ud´alostem mˇenit ˇcas posunut´ım na ˇcasov´e ose. Je tak´e moˇzn´e editovat obsah ud´alost´ı. Vzhled ud´alost´ı lze jednoduˇse pˇrizp˚ usobovat pomoc´ı CSS styl˚ u a k nim pˇrid´avat i obr´azky. Mezi dalˇs´ı uˇziteˇcn´e vˇeci patˇr´ı seskupov´an´ı ud´alost´ı podle dan´eho kl´ıˇce, kter´ y je pot´e zobrazen na ose y. API tak´e umoˇzn ˇuje shlukov´an´ı velk´eho poˇctu ud´alost´ı. Ud´alosti se shlukuj´ı podle ˇcasov´e vzd´alenosti a u ´rovnˇe zoomu. Shlukov´an´ı ud´alost´ı je prozat´ım oznaˇcen´e jako experiment´aln´ı funkce. Na str´ank´ach projektu se uv´ad´ı, ˇze Almende Timeline umoˇzn ˇuje bezchybnˇe zobrazit 10 000 ud´alost´ı. • Licence: Apache Licence 2.0 • Cena: Zdarma • Programovac´ı jazyk: JavaScript • V´ yhody: Projekt se neust´ale vyv´ıj´ı, zoom, snadn´e pˇrizp˚ usoben´ı ud´alost´ı pomoc´ı CSS, seskupov´an´ı podle kl´ıˇce, shlukov´an´ı ud´alost´ı na ose, pˇrizp˚ usobov´an´ı velikosti ˇcasov´e osy, editovateln´ y m´od, velk´e mnoˇzstv´ı uk´azek, kvalitn´ı dokumentace • Nev´ yhody: Navigace - pouze jedna ˇcasov´a osa (mˇeˇr´ıtko se mˇen´ı podle u ´rovnˇe zoomu, proto se nelze vidˇet detaily ud´alost´ı napˇr. na u ´rovn´ı dn´ı a z´aroveˇ n se rychle pohybovat o vˇetˇs´ı ˇcasov´e u ´seky napˇr. roky)
5.8
Shrnut´ı vlastnost´ı
Analyzovan´e n´astroje pro geografickou vizualizaci jsou srovn´any v tabulce 5.1. Tabulka 5.2 srovn´av´a n´astroje pro ˇcasovou vizualizaci. Vˇsechny analyzovan´e n´astroje mˇeli jeden spoleˇcn´ y znak, byly naprogramov´any v JavaScriptu.
8
http://www.apache.org/licenses/LICENSE-2.0
9
9
ne ne 10 ano ne ano
ano ne ne ne ano (plugin)
ano ne ne *12 ne
Glob´ aln´ı mapov´e podklady
Funkˇcn´ı omezen´ı
zdarma zdarma zdarma zdarma zdarma
Shlukov´ an´ı znaˇcek
Google Maps Mapy API OpenSource Bing Maps OpenSource
Komerˇcn´ı vyuˇzit´ı zdarma a bez omezen´ı
Cena
API Google Maps Mapy API OpenLayers Microsoft Bing Leaflet
23
Licence
5.9 V´ ybˇer pouˇzit´ ych prostˇredk˚ u
9
ano ne *11 ano *11
Cena
Komerˇcn´ı vyuˇzit´ı zdarma a bez omezen´ı
Shlukov´an´ı ud´alost´ı
Funkˇcn´ı omezen´ı
API SIMILE Widgets Timeline Almende Timeline
Licence
Tabulka 5.1: Tabulka srovn´an´ı vlastnost´ı geografick´ ych API
OpenSource Apache Licence 2.0
zdarma zdarma
ano ano
ne ano
ano13 ne
Tabulka 5.2: Tabulka srovn´an´ı vlastnost´ı ˇcasov´ ych API
5.9
V´ ybˇ er pouˇ zit´ ych prostˇ redk˚ u
Na z´akladˇe poˇzadavk˚ u zadavatele mˇely vybran´e n´astroje splnit n´asleduj´ıc´ı podm´ınky: • n´ızk´a cena licence (nejl´epe zdarma) pro komerˇcn´ı u ´ˇcely • pokryt´ı cel´eho svˇeta (pro mapov´e n´astroje) • webov´a technologie
5.9.1
Geografick´ e API - Leaflet
Z nalezen´ ych georafick´ ych n´astroj˚ u bylo moˇzn´e pro komerˇcn´ı pouˇzit´ı zdarma pouˇz´ıt tˇri n´astroje: Mapy API, OpenLayers a Leaflet. 9
Pro nekomerˇcn´ı pouˇzit´ı V souˇcasn´e dobˇe ne, ale pro rok 2013 se pˇripravuje zmˇena licenˇcn´ıho ujedn´an´ı 11 Nastaviteln´e mapov´e zdroje (takˇze ano napˇr. pˇri pouˇzit´ı OpenStreetMap) 12 Z´ aleˇz´ı na typu zvolen´e licence 13 Ukonˇcen´ y v´ yvoj, obsahuje mnoˇzstv´ı neopraven´ ych chyb 10
5.9 V´ ybˇer pouˇzit´ ych prostˇredk˚ u
24
Mapy API (viz kap. 5.2) nevyhovovalo ze dvou d˚ uvod˚ u. Podle licenˇcn´ıho ujedn´an´ı totiˇz aplikace s Mapy API mus´ı b´ yt veˇrejnˇe pˇr´ıstupn´a, coˇz ˇca´steˇcnˇe znemoˇzn ˇuje komerˇcn´ı vyuˇzit´ı (napˇr. pˇr´ıstup pouze registrovan´ ych uˇzivatel˚ u, kteˇr´ı si sluˇzbu zakoup´ı). Druh´ ym d˚ uvodem je geografick´e pokryt´ı, kter´e je zamˇeˇren´e pouze na Evropu a bl´ızk´e okol´ı. Co se t´ yˇce poˇzadavk˚ u, je OpenLayers (viz kap. 5.3) vhodn´ y kandid´at. Je zdarma, bez jak´ ychkoliv omezen´ı a z´aleˇz´ı jen na uˇzivateli, jak´e mapov´e poskytovatele si zvol´ı. Zajistit tak glob´aln´ı pokryt´ı tak´e nen´ı ˇz´adn´ y probl´em. Pro OpenLayers existuje i velk´e mnoˇzstv´ı tutori´al˚ u, pˇresto jsem vˇsak nalezl vhodnˇejˇs´ı n´astroj, kter´ y OpenLayers sv´ ymi vlastnostmi pˇredˇcil. Leaflet (viz kap. 5.5) je modern´ı API, kter´e je narozd´ıl od OpenLayers navrˇzen´e i pro mobiln´ı aplikace. V porovn´an´ı s OpenLayers je celkovˇe rychlejˇs´ı, obsahuje ˇradu uˇziteˇcn´ ych plugin˚ u, vˇcetnˇe pluginu pro shlukov´an´ı znaˇcek. M´a jednoznaˇcnˇe nejlepˇs´ı design a pr´ace s n´ım je intuitivn´ı, nen´ı tˇreba zdlouhavˇe studovat ˇz´adn´e tutori´aly. K programov´an´ı staˇc´ı dokumentace, kter´a je pˇrehlednˇe zpracovan´a.
5.9.2
ˇ Casov´ aˇ rada - Almende Timeline
N´astroje pro vizualizaci ˇcasov´ ych ˇrad, kter´e by bylo moˇzn´e pouˇz´ıt zdarma pro komerˇcn´ı u ´ˇcely, jsem nalezl pouze dva: Simile Widget Timeline a Almende Timeline. Oba tyto n´astroje jsou velmi podobl´e. Simile Widget Timeline se jiˇz nˇekolik let nevyv´ıj´ı a obsahuje st´ale mnoˇzstv´ı chyb, proto nebyl vybr´an. Pro realizaci aplikace zobrazuj´ıc´ı ˇcasov´a data jsem tedy vybral ˇcasovou ˇradu Almende Timeline, kter´a umoˇzn ˇuje na ˇcasov´e ose scrollov´an´ı, pˇri kter´em se mˇeˇr´ıtko osy pˇrepoˇc´ıt´av´a a je bez chyb. Dalˇs´ım pˇr´ınosem je podpora shlukov´an´ı a seskupov´an´ı ud´alost´ı i kvalitnˇe zpracovan´a dokumentace.
25
Kapitola 6 Realizaˇ cn´ı ˇ c´ ast Tato kapitola obsahuje n´avrh, popis pouˇzit´ ych programovac´ıch prostˇredk˚ u a vytvoˇren´ ych webov´ ych aplikac´ı. D´ale popis a v´ yvojov´ y diagram implementovan´eho shlukovac´ıho algoritmu.
6.1
N´ avrh aplikace
ˇ Vstupem aplikace jsou XML soubory obsahuj´ıc´ı dokumenty a ud´alosti CTK ve form´atu NewsML (viz kap. 2). Data budou zobrazov´ana podle ˇcasov´ ych a geografik´ ych (GPS souˇradnice) metadat. N´avrh aplikace je zn´azornˇen na obr´azku 6.1. Dle poˇzadavk˚ u zadavatele bude m´ıtnavrhovan´a aplikace strukturu klient-server. Serverov´a ˇca´st se skl´ad´a z XML parser˚ u pro naˇc´ıt´an´ı vstupn´ıch dat a ˇr´ıd´ıc´ıho servletu. XML parsery uchov´avaj´ı rozparsovan´e XML soubory v datov´e struktuˇre ˇ ıd´ıc´ı servlet reaguje na HTTP sloˇzen´e ze tˇr´ıd, kter´e bl´ızce kop´ıruj´ı form´at NewsML. R´ poˇzadavky typu POST parsov´an´ım vybran´eho XML souboru a na poˇzadavky typu GET odesl´an´ım poˇzadovan´ ych dat podle parametru URL ve form´atu JSON (JavaScript Object Notation) 6.2.2 klientovi. Na serverov´e stranˇe bude tak´e implementov´an algoritmus pro shlukov´an´ı dat, podle jejich vz´ajemn´e vzd´alenosti dan´e GPS souˇradnicemi. Klientsk´e ˇca´sti jsou ve vˇsech pˇr´ıpadech tvoˇren´e HTML str´ankou, knihovnou pouˇzit´eho API, Ajaxovou knihovnou a javascriptov´ ymi soubory s definicemi funkc´ı, kter´e spoleˇcnˇe s API umoˇzn ˇuj´ı vizualizovat data z´ısk´avan´a asynchronnˇe ze serveru.
6.1.1
Popis proces˚ u
Zde je chronologicky uveden popis jednotliv´ ych proces˚ u navrˇzen´e aplikace, kter´a je zn´azornˇena na obr´azku 6.1. Zelen´a ˇc´ısla na tomto obr´azku odpov´ıdaj´ı ˇc´ısl˚ um proces˚ u v n´asleduj´ıc´ım v´ yˇctu. Symboly K a S v hranat´ ych z´avork´ach za ˇc´ıslem procesu ud´avaj´ı m´ısto, kde dan´ y proces prob´ıh´a (K = klient, S = server). Veˇsker´a data, kter´a se odes´ılaj´ı ze serveru do klientsk´e aplikace jsou ve form´atu JSON.
6.2 Pouˇzit´e programovac´ı prostˇredky
26
Obr´azek 6.1: N´avrh aplikace 1. [K] V´ ybˇer API a zdrojov´ ych dat na u ´vodn´ı str´ance - poˇzadavek na server typu POST 2. [S] Zpracov´an´ı poˇzadavku typu POST - vytvoˇren´ı session, parsov´an´ı XML dat a pˇresmˇerov´an´ı na str´anku s konkr´etn´ım API vybran´em v procesu (1) 3. [K] Zobrazen´ı str´anky s vybran´ ym API, odesl´an´ı poˇzadavku typu GET pro z´ısk´an´ı dat na server 4. [S] Zpracov´an´ı poˇzadavku typu GET, odesl´an´ı poˇzadovan´ ych dat klientovi 5. [K] Pˇrijem a zobrazen´ı dat Za procesem (5), mohou od klienta n´asledovat dalˇs´ı poˇzadavky typu GET. Pokud nevypˇsel timeout session, provedou se po odesl´an´ı takov´eho poˇzadavku opˇet procesy 4) a 5). V opaˇcn´em pˇr´ıpadˇe server pˇresmˇeruje klienta zpˇet na proces 1).
6.2
Pouˇ zit´ e programovac´ı prostˇ redky
Aplikace bude vytvoˇrena v programovac´ım jazyce Java JDK 1.6, JavaScriptu, a javascriptov´ ych API Leaflet (viz 5.5) a Almende Timeline (viz 5.7). Jako webov´ y server bude pouˇzit Apache Tomcat 6.0.18. Spr´avnost zobrazen´ı v´ ysledk˚ u bude otestov´ana v prohl´ıˇzeˇc´ıch Internet Explorer 8, Google Chrome verze 26.0.1410.64 m, Opera 10.01 a Mozilla Firefox 3.6.11. N´asleduj´ıc´ı podkapitoly obsahuj´ı kr´atk´ y popis knihoven, kter´e jsem v naprogramovan´ ych aplikac´ıch vyuˇzil.
6.2.1
JQuery
JQuery [5] je OpenSource JavaScriptov´a knihovna zapouzdˇruj´ıc´ı mnoho funkc´ı jako napˇr. manipulov´an´ı s HTML dokumentem, proch´azen´ı DOM (Document Object
6.2 Pouˇzit´e programovac´ı prostˇredky
27
Model), zpracov´an´ı ud´alost´ı a hlavnˇe Ajax (Asynchronous JavaScript and XML). Ve vytvoˇren´ ych aplikac´ıch bude knihovna JQuery pouˇzita pr´avˇe kv˚ uli Ajaxu. Ajax umoˇzuje interakci webov´ ych aplikac´ı bez nutnosti znovunaˇcten´ı str´anky.
6.2.2
JSON
JSON (JavaScript Object Notation) [6] je nez´avisl´ y textov´ y form´at pro v´ ymˇenu dat vych´azej´ıc´ı z konvecn´ı JavaScriptu. Je lehce ˇciteln´ y. Je zaloˇzen na dvou struktur´ach: 1) kolekci p´ar˚ u n´azev : hodnota (napˇr. objekty v jazyce Java); 2) tˇr´ıdˇen´em seznamu hodnot (ve vˇetˇsinˇe jazyk˚ u realizov´an jako pole). Jedn´a se o univerz´aln´ı datov´e struktury a v podstatˇe vˇsechny modern´ı programovac´ı jazyky je v nˇejak´e formˇe podporuj´ı. Je tedy logick´e, aby na nich byl zaloˇzen i na jazyce nez´avisl´y v´ymˇenn´y form´at [6]. Objekt je v JSON uvozen znakem { a konˇc´ı znakem }. Uvnitˇr objektu je mnoˇzina p´ar˚ u n´azev:hodnota a jednotliv´e p´ary jsou od sebe odˇeleny ˇca´rkou. Pole v JSON zaˇc´ın´a znakem [ a konˇc´ı znakem ], hodnoty jsou od sebe oddˇeleny ˇca´rkou. Hodnota ve struktur´ach JSON m˚ uˇze b´ yt tvoˇrena n´asleduj´ıc´ımi typy: ˇretˇezec (uzavˇren´ y uvozovkami), ˇc´ıslo, objekt, pole, true, false a null. Hodnoty do sebe mohou b´ yt vnoˇrov´any. Na n´asleduj´ıc´ım pˇr´ıkladu je struktura objektu v Javˇe a d´ale jeho reprezentace v JSON form´atu: p u b l i c c l a s s MarkBean implements S e r i a l i z a b l e { private private private private private private
double l a t i t u d e ; double l o n g i t u d e ; String city ; i n t itemCounter ; boolean c l u s t e r ; Map<S t r i n g , I n t e g e r > c a t e g o r y ;
. . . } Ekvivalentn´ı z´apis tˇr´ıdy MarkBean naplnˇen´e daty v JSON: {” l a t i t u d e ” : 5 0 . 0 3 9 1 5 , ” l o n g i t u d e ” : 1 6 . 0 3 9 8 0 1 , ” c i t y ” : ” O s tˇr e t´ın ” , ” itemCounter ” : 1 , ” c l u s t e r ” : f a l s e , ” c a t e g o r y ” : { ” zak ” : 1 , ” dpr ” : 1 } } JSON je pouˇzit v aplikac´ıch pro pˇrenos dat ze serveru ke klientovi. V JavaScriptu nen´ı tˇreba JSON nikterak parsovat a je moˇzn´e pˇristupovat k jeho hodnot´am pˇr´ımo
6.3 Serverov´a ˇca´st aplikace
28
pomoc´ı teˇckov´e notace. Oproti XML je tak´e m´enˇe pamˇet’ovˇe n´aroˇcn´ y. Z tˇechto d˚ uvodu byl upˇrednostnˇen pˇred XML form´atem.
6.2.3
Gson
Gson [17] je OpenSource Java knihovna ke konverzi Java objekt˚ u do JSON form´atu a naopak. Gson nepotˇrebuje v java tˇr´ıd´ach ˇza´dn´e speci´aln´ı anotace a dok´aˇze konvertovat z´akladn´ı datov´e typy i java kolekce a generick´e typy. Na serverov´e stranˇe je pouˇzit Gson pro konverzi vˇsech odpovˇed´ı tˇesnˇe pˇred jejich odesl´an´ım. Veˇsker´e odpovˇedi ze serveru jsou tak ve form´atu JSON. Uk´azka pouˇzit´ı: i n t [ ] array = {1 , 2 , 3}; // h o t o t a ˇr e t ˇe z c e j s o n A r r a y bude : [ 1 , 2 , 3 ] S t r i n g j s o n A r r a y = new Gson ( ) . t o J s o n ( a r r a y ) ;
6.2.4
JAK
JAK (JAvaScriptov´a Knihovna) [20] je OpenSource knihovna od firmy Seznam.cz, kter´a se pouˇz´ıv´a ve vˇetˇsinˇe jejich aplikac´ı. Sv´ ymi funkcemi, kter´e zapouzdˇruj´ı sloˇzitˇejˇs´ı konstrukce v JavaScriptu usnadˇ nuje psan´ı skript˚ u a ˇcin´ı k´od pˇrehlednˇejˇs´ım. JAK ˇreˇs´ı pr´aci s DOM a HTML ud´alostmi, Ajaxem a rozˇsiˇruje moˇznosti JavaScriptu o pokroˇcil´e moˇznosti OOP. Na webov´ ych str´ank´ach projektu je k dispozici mnoˇzstv´ı uˇziteˇcn´ ych widget˚ u (miniaplikac´ı) a utilit vytvoˇren´ ych s pouˇzit´ım knihovny JAK. Jedn´a senapˇr´ıklad o utility pro pr´aci s grafikou, XML nebo widgety jako kalend´aˇr, Drag & Drop (t´ahni a pust’), r˚ uzn´e ovl´adac´ı prvky a dalˇs´ı. JAK je pouˇzit v aplikac´ıch pro geografickou vizualizaci na proch´azen´ı DOM (Document Object Model).
6.3
Serverov´ aˇ c´ ast aplikace
V t´eto kapitole je pops´ana struktura serverov´e ˇca´sti aplikace (jednotliv´e package a java tˇr´ıdy s popisem), typy poˇzadavk˚ u na kter´e ˇr´ıd´ıc´ı servlet reaguje a typy odpovˇed´ı. D´ale je v t´eto ˇc´asti uveden popis algoritmu pouˇzit´eho pro shlukov´an´ı znaˇcek spolu s pouˇzitou metrikou pro v´ ypoˇcet vzd´alenost´ı znaˇcek. Znaˇckou jsou d´ale v tomto textu myˇslena data se strukturou odpov´ıdaj´ıc´ı tˇr´ıdˇe MarkBean (viz kap. 6.3.3). A to na serverov´e stranˇe v podobˇe java tˇr´ıdy i na stranˇe klienta, kter´ y pouˇz´ıv´a form´at JSON.
6.3.1
UML dialgram
UML diagram serverov´e ˇca´sti je obsaˇzen v pˇr´ıloze C na obr´azku C.1. Origin´al obr´azku ve vˇetˇs´ım rozliˇsen´ı je na pˇriloˇzen´em DVD.
6.3 Serverov´a ˇca´st aplikace
29
Zelen´ y obdeln´ık v prav´em horn´ım rohu diagramu reprezentuje tˇr´ıdy z bal´ıku zcu.xml.objects (viz kap. 6.3.5), kter´e jsem kv˚ uli pˇrehlednosti do diagramu nezakreslil. Popis jednotliv´ ych tˇr´ıd zobrazen´ ych na diagramu je rozeps´an v n´asleduj´ıc´ıch podkapitol´ach.
6.3.2
Package zcu.map
GetData.java ˇ ıd´ıc´ı J2EE servlet oddˇedˇen´ R´ y od tˇr´ıdy HttpServlet. Servlet je v aplikaci namapovan´ y na /GetData. Cel´a URL servletu m´a tedy tvar: s e r v e r u r l : p o r t /WebApplicationCTK/ GetData V metodˇe doPost(...) reaguje na HTTP poˇzadavky typu POST s parametry api a data, kter´e urˇcuj´ı jak´e API a kter´a data se maj´ı pouˇz´ıt pro zobrazen´ı. Po pˇrijmut´ı poˇzadavku se vytvoˇr´ı nov´a session pokud neexistuje a rozparsuje se XML soubor se vstupn´ımi daty. N´azev adres´aˇre kde jsou uloˇzeny vstupn´ı soubory je definov´an v souboru WEB-INF/web.xml vlastnost´ı document root. Po naˇcten´ı vstupn´ıho souboru dojde k pˇresmˇerov´an´ı na dan´e API, napˇr. Leaflet. Metoda doGet(...) reaguje na HTTP poˇzadavky typu GET, kter´e pˇrich´az´ı z jednotliv´ ych API a vrac´ı data ve form´atu JSON viz. 6.2.2. K tomu je nutn´e nastavit typ odpovˇedi n´asledovnˇe: r e s p o n s e . setContentType ( ” t e x t / html ; c h a r s e t=UTF−8”) ; r e s p o n s e . setContentType ( ” a p p l i c a t i o n / j s o n ” ) ; r e s p o n s e . s e t C h a r a c t e r E n c o d i n g ( ”UTF−8”) ; Moˇzn´e parametry pro poˇzadavky typu GET a odpovˇedi1 na nˇe: • markers=list - vr´at´ı seznam vˇsech znaˇcek java.util.List<MarkBean>. • markers=map - vr´at´ı vˇsechny znaˇcky jako mapu (= redukce znaˇcek se stejn´ ymi GPS souˇradnicemi), kde kl´ıˇc tvoˇr´ı GPS souˇradnice3 . • markers=map&year=rok &month=mesic - stejnˇe jako v markers=map vr´at´ı znaˇcky jako mapu, pouze s t´ım rozd´ılem, ˇze nevrac´ı vˇsechny znaˇcky, ale znaˇcky kter´e maj´ı v datumu obsaˇzen stejn´ y rok a stejn´ y nebo dˇr´ıvˇejˇs´ı mˇes´ıc. • markers=clusters&zoom=cele cislo2 - aplikuje na znaˇcky shlukovac´ı algoritmus a vr´at´ı seznam znaˇcek java.util.List<MarkBean>, ve kter´em jsou nashlukovan´e znaˇcky nahrazeny znaˇckami s GPS souˇradnicemi vypoˇcten´ ych centroid˚ u. 1
Vˇsechny odpovˇedi jsou pˇred odesl´an´ım konvertov´any do form´atu JSON. MarkBean, MarkCardBean a ObjectBean jsou obalovac´ı tˇr´ıdy popsan´e v 6.3.3 2´ Uroveˇ n zoomu
6.3 Serverov´a ˇca´st aplikace
30
• markers=markInfo&coords=souradnice3 - vr´at´ı seznam s informacemi o znaˇck´ach na dan´ ych GPS souˇradnic´ıch. • show=timeline&coords=souradnice3 - vr´at´ı seznam vˇsech poloˇzek ze vstupn´ıho XML na dan´ ych souˇradnic´ıch obalen´ y do ObjectBean. • show=timeline - vr´at´ı seznam vˇsech poloˇzek ze vstupn´ıho XML obalen´ y do ObjectBean. • show=id - vr´at´ı informace o poloˇzce ze vstupn´ıho XML s konkr´etn´ım id obalen´ y do ObjectBean.
6.3.3
Package zcu.map.beans
Package zcu.map.beans obsahuje obalovac´ı tˇr´ıdy pro data odes´ılan´e v HTTP odpovˇed´ıch klientovi. Jejich pouˇzit´ım se sniˇzuje celkov´ y objem pˇren´aˇsen´ ych dat, protoˇze obsahuj´ı pouze nejnutnˇejˇs´ı informace o dan´ ych poloˇzk´ach a z´aroveˇ n se zpˇrehledˇ nuje implementace na klientsk´e stranˇe. MarkBean.java Tˇr´ıda zapouzdˇruj´ıc´ı nejnutnˇejˇs´ı metadata o znaˇck´ach pro jejich zobrazov´an´ı na mapˇe. Atributy t´eto tˇr´ıdy jsou: • latitude - zemˇepisn´a ˇs´ıˇrka • longitude - zemˇepisn´a d´elka • city - n´azev mˇesta • itemCounter - poˇcet poloˇzek, kter´e znaˇcka reprezentuje • cluster - pˇr´ıznak, zda se jedn´a o shluk v´ıce znaˇcek vytvoˇren´ y shlukovac´ım algoritmem 6.3.7 ˇci nikoli • category - kategorie, kter´e znaˇcka zastupuje vˇcetnˇe jejich ˇcetnosti MarkCardBean.java Tˇr´ıda zapouzdˇruj´ıc´ı metadata pro vyskakovac´ı okna, kter´e se zobrazuj´ı po kliknut´ı na znaˇcku na mapˇe. Atributy t´eto tˇr´ıdy jsou: • documentType - typ dokumentu • dateId - datum, odpov´ıd´a hodnotˇe atributu dateId v pˇr´ıpadˇe ˇze se jedn´a o dokumety, nebo dateStart v pˇr´ıpadˇe ud´alost´ı 3
GPS souˇradnice ve tvaru: latitude;longitude
6.3 Serverov´a ˇca´st aplikace
31
• publicIdentifier - unik´atn´ı identifik´ator • title - titulek, rovnˇeˇz z´avis´ı na tom, zda se jedn´a o incidenty nebo dokumenty, v pˇr´ıpadˇe incident˚ u odpov´ıd´a atributu comment, u dokument˚ u odpov´ıd´a atributu headline pokud je definov´an, ˇci atributu caption pokud headline definov´an nen´ı
6.3.4
Package zcu.map.util
Cluster.java Tˇr´ıda Cluster.java slouˇz´ı ke shlukov´an´ı znaˇcek podle jejich vz´ajemn´e vzd´alenosti a u ´rovnˇe zoomu. Detailn´ı popis pouˇzit´eho algoritmu pro shlukov´an´ı je v kapitole 6.3.7. Tˇr´ıda obsahuje tyto veˇrejn´e metody: • Cluster(Map<String, MarkBean>marks, int zoom) - konstruktor tˇr´ıdy, kter´ y podle parametr˚ u inizializuje promˇenn´e pro v´ ypoˇcet shluk˚ u. • createClusters() - metoda, kter´a provede nashlukov´an´ı znaˇcek podle algoritmu 6.3.7 a n´aslednˇe zavol´a priv´atn´ı metodu pro v´ ypoˇcet cetroid˚ u viz 6.3.8. V´ ysledek obou dvou krok˚ u algoritmu (nashlukov´an´ı znaˇcek a n´asledn´e vytvoˇren´ı znaˇcek ze shluk˚ u) je vr´acen jako java.util.List<MarkBean>, kde kaˇzd´ y shluk je tvoˇren jednou znaˇckou s pˇr´ıznakem cluster a ˇc´ıtaˇcem znaˇcek kter´e reprezentuje. DocsParser.java XML parser implementuj´ıc´ı rozhran´ı IParser.java. Slouˇz´ı k parsov´an´ı dokument˚ u se strukturou viz 2.1. IParser.java Rozhran´ı pro XML parsery. Vˇsechny n´avratov´e hodnoty metod jsou z package zcu.map.beans (viz 6.3.3). • getItemByID(String id) - vrac´ı kompletn´ı metadata z´aznamu s konkr´etn´ım id z parsovan´eho XML souboru. Metadata vr´ac´ı jako objekt ObjectBean. • getItems() - vrac´ı vˇsechna metadata z parsovan´eho XML souboru. Metadata vr´ac´ı jako objekt ObjectBean. • getItems(Double lat, Double lng) - vrac´ı metadata vˇsech z´aznam˚ u z parsovan´eho XML souboru na konkr´etn´ıch GPS souˇradnic´ıch urˇcen´ ych parametry lat (latitude) a lng (longitude). Metadata vrac´ı jako objekt ObjectBean.
6.3 Serverov´a ˇca´st aplikace
32
• getMarkInfo(Double lat, Double lng) - vrac´ı z´akladn´ı informace pro vizualizaci z´aznam˚ u na konkr´etn´ıch GPS souˇradnic´ıch z parsovan´eho XML souboru. GPS souˇradnice jsou urˇceny parametry lat (latitude) a lng (longitude). Vrac´ı java.util.List<MarkCardBean>. • getMarksAsList() - vrac´ı z´akladn´ı informace pro vizualizaci z´aznam˚ u z parsovan´eho XML souboru jako seznam. Vrac´ı java.util.List<MarkBean>. • getMarksAsMap() - vrac´ı z´akladn´ı informace pro vizualizaci z´aznam˚ u z parsovan´eho XML souboru ve formˇe haˇsovac´ı tabulky 4 , jej´ıˇz kl´ıˇcem jsou GPS souˇradnice. T´ım se redukuj´ı z´aznamy se stejn´ ymi GPS souˇradnicemi. Vrac´ı java.util.Map<MarkBean>. • getMarksAsMap(String year, String month) - obdoba pˇredchoz´ı metody s t´ım rozd´ılem, ˇze nevrac´ı informace o vˇsech z´aznamech. Z´aznamy mus´ı v datu obsahovat stejn´ y rok (parametr year ) a stejn´ y ˇci libovoln´ y pˇredchoz´ı mˇes´ıc (parametr month). Vrac´ı java.util.Map<MarkBean>. • parse() - metoda kter´a rozparsuje vstupn´ı XML soubor. IncsParser.java XML parser implementuj´ıc´ı rozhran´ı IParser.java. Slouˇz´ı k parsov´an´ı ud´alost´ı se strukturou viz 2.2. ValueComparator.java Kompar´ator urˇcen´ y pro ˇrazen´ı kategori´ı podle ˇcetnosti. Kategorie jsou u znaˇcek ˇci shluk˚ u ukl´ad´any jako java.util.Map<String, Integer>, kde kl´ıˇc tvoˇr´ı zkratka kategorie a hodnu jej´ı ˇcetnost. Standardnˇe se totiˇz kolekce java.util.Map ˇrad´ı podle kl´ıˇce, nikoli hodnoty. S tˇr´ıdou ValueComparator.java se kolekce d´a seˇradit podle hodnot. Uk´azka pouˇzit´ı ValueComparator pro seˇrazen´ı kategori´ı uloˇzen´ ych v java.util.Map<String, Integer> (promˇenn´a category): ValueComparator vc = new ValueComparator ( c a t e g o r y ) ; Map<S t r i n g , I n t e g e r > s o r t e d = new TreeMap<S t r i n g , I n t e g e r >(vc ) ; sorted . putAll ( category ) ; category = sorted ; sorted = null ; 4
datov´ a struktura kter´ a asociuje haˇsovac´ı kl´ıˇce s odpov´ıdaj´ıc´ımi hodnotami
6.3 Serverov´a ˇca´st aplikace
6.3.5
33
Package zcu.map.xml.objects
Package zcu.map.xml.objects obsahuje tˇr´ıdy, kter´e bl´ızce kop´ıruj´ı form´at NewsML a uchov´avaj´ı tak d˚ uleˇzit´e metadata. Bˇehem parsov´an´ı dokument˚ u nebo ud´alost´ı jsou rozparsovan´e atributy a elementy ukl´ad´any do struktur definovan´ ych v package zcu.map.xml.object.
6.3.6
Manhattan vzd´ alenost
Manhattan vzd´alenost [7] je metrika pro urˇcen´ı vzd´alenost mezi dvˇemi body. Vzd´alenost je mˇeˇrena pod´el os v prav´em u ´hlu. Rozd´ıl mezi Manhattan a Euklidovskou vzd´alenost´ı zn´azorˇ nuje obr´azek 6.2. Manhattan vzd´alenost d mezi body X a Y (X = [x1 , x2 ], Y = [y1 , y2 ]) se vypoˇcte podle vzorce 6.1: d = |x1 − y1 | + |x2 − y2 |
(6.1)
Ve shlukovac´ım algoritmu je pouˇzita tato metrika pro menˇs´ı v´ ypoˇcetn´ı n´aroˇcnost. Pouˇzit´ı jin´e metriky napˇr. Euklidovsk´e vzd´alenosti by velmi nepˇr´ıznivˇe ovlivnilo ˇcas v´ ypoˇctu.
Obr´azek 6.2: Rozd´ıl mezi Manhattan (vpravo) a Euklidovskou (vlevo) vzd´alenost´ı
6.3.7
Shlukovac´ı algoritmus
Um´ıstˇen´ı velk´eho poˇctu znaˇcek na mapu m´a dva z´asadn´ı probl´emy: 1) zobrazen´ı by bylo nepˇrehledn´e; 2) pr´ace s API by byla pomal´a, nebo by se znaˇcky nedok´azaly zobrazit v˚ ubec. Z tˇechto d˚ uvod˚ u je vhodn´e nevytv´aˇret pro kaˇzd´ y datov´ y z´aznam znaˇcku, ale vytvoˇrit na z´akladˇe konkr´etn´ıch parametr˚ u shluky dat a data zobrazovat jako jednu znaˇcku. Pro tento u ´ˇcel jsem modifikoval existuj´ıc´ı algoritmus [2] a vyuˇzil ho pro shlukov´an´ı dat. Data shlukuje podle jejich vz´ajemn´e vzd´alenosti, kter´a se d´a urˇcit z GPS souˇradnic obsaˇzen´ ych v metadatech.
6.3 Serverov´a ˇca´st aplikace
34
Na obr´azku 6.3 je princip shlukovac´ıho algoritmu, kter´ y jsem pouˇzil pro shlukov´an´ı geografick´ ych znaˇcek na serverov´e stranˇe aplikace. Popis shlukovac´ıho algoritmu je uveden v n´asleduj´ıc´ıch dvou odstavc´ıch. Vstupem algoritmu je seznam znaˇcek s GPS souˇradnicemi (zemˇepisn´a ˇs´ıˇrka, zemˇepisn´a d´elka) a u ´roveˇ n zoomu. V´ ystupem algoritmu jsou dva seznamy. Prvn´ı yt seznam tvoˇr´ı samostatn´e znaˇcky (single markers), tj. znaˇcky, kter´e nemohly b´ seskupeny, protoˇze byly od ostatn´ıch znaˇcek pˇr´ıliˇs vzd´aleny. Druh´ ym seznamem je seznam shluk˚ u (cluster markers). Shluk je zde tvoˇren seznamem znaˇcek, kter´e maj´ı b´ yt seskupeny, protoˇze jejich vz´ajemn´a vzd´alenost je menˇs´ı neˇz definovan´a hranice. Pro v´ ypoˇcet vz´ajemn´e vzd´alenosti mezi dvˇemi znaˇckami pouˇz´ıv´am Manhattan vzd´alenost. Ze vstupn´ıho seznamu znaˇcek jsou postupnˇe vyj´ım´any znaˇcky dokud nen´ı pr´azdn´ y. Po kaˇzd´em vyjmut´ı znaˇcky se porovn´av´a jej´ı poloha s polohou vˇsech zb´ yvaj´ıch znaˇckek ve vstupn´ım seznamu a z´aroveˇ n je vytvoˇren pr´azdn´ y seznam shluk˚ u. Pokud je vzd´alenost tˇechto znaˇcek menˇs´ı neˇz definovan´a minim´aln´ı vzd´alenost (funkce z´avisl´a na u ´rovni zoomu), je pr´avˇe porovn´avan´a znaˇcka ze vstupn´ıho seznamu znaˇcek odstranˇena a je uloˇzena do seznamu shluk˚ u. N´asleduje zpracov´an´ı dalˇs´ı znaˇcky ve vstupn´ım seznamu. Kdyˇz je p˚ uvodnˇe vyjmut´a znaˇcka porovn´ana se vˇsemi zb´ yvaj´ıc´ı znaˇckami ve vstupn´ım seznamu, zjist´ı se velikost vytvoˇren´eho seznamu shluk˚ u, a pokud je vˇetˇs´ı neˇz nula, pˇrid´a se do nˇeho tato znaˇcka a n´aslednˇe se cel´ y tento seznam pˇrid´a do seznamu cluster markers. V opaˇcn´em pˇr´ıpadˇe se pˇrid´a do seznamu single markers, kam se um´ıst’uj´ı znaˇcky kter´e nejsou souˇc´ast´ı ˇza´dn´eho shluku. Po proveden´ı algoritmu jsou p˚ uvodn´ı data rozdˇelena ve dvou seznamech. Seznam samostatn´ ych znaˇcek ( single markers) je ihned moˇzn´e zobrazit na mapˇe, protoˇze kaˇzd´a poloˇzka seznamu v sobˇe obsahuje GPS souˇradnice. Seznam shluk˚ u (cluster markers) je vˇsak nutn´e jeˇstˇe d´ale zpracovat, protoˇze jeho poloˇzky neobsahuj´ı pˇr´ımo GPS souˇradnice shluku. Aby bylo moˇzn´e shluky z tohoto seznamu spr´avnˇe zobrazit na mapˇe, mus´ı se pro kaˇzd´ y shluk vypoˇc´ıtat takzvan´ y centroid, v´ıce viz n´asleduj´ıc´ı podkapitola.
6.3.8
V´ ypoˇ cet centroidu
V´ ypoˇcet centroidu se prov´ad´ı pro seznam znaˇcek, kter´e reprezentuj´ı shluk. Kaˇzd´a znaˇcka v takov´em seznamu obsahuje GPS souˇradnice. C´ılem algoritmu je z tohoto seznamu z´ıskat centroid neboli pozici (GPS souˇradnice), pod kter´ ymi bude shluk zobrazen na mapˇe. Centroid je v podstatˇe aritmetick´ ym pr˚ umˇerem GPS souˇradnic ve shluku. Na obr´azku 6.4 je uveden v´ yvojov´ y diagram v´ ypoˇctu centroid˚ u. Na konci zpracov´an´ı kaˇzd´eho shluku je vytvoˇrena nov´a znaˇcka reprezentuj´ıc´ı shluk s vypoˇcten´ ymi GPS souˇradnicemi, kterou lze jiˇz zobrazovat na mapˇe.
Tato kapitola popisuje prvn´ı ˇca´st klientsk´e aplikace vytvoˇren´e pomoc´ı API Leaflet ˇ (viz 5.5). Aplikace demostruje nˇekolik moˇznost´ı, jak zobrazovat data CTK na z´akladˇe GPS souˇradnic. Kv˚ uli mapov´ ym podklad˚ um, kter´e se z´ısk´avaj´ı ze speci´aln´ıch server˚ u (viz 3) je pro spuˇstˇen´ı t´eto aplikace aplikace nutn´e pˇripojen´ı k internetu.
6.4.1
Popis funkˇ cnosti
Geografick´a vizualizace dat je pˇr´ıstupn´a pomoc´ı str´anky WebApplicationCTK/leaflet/LEAFLET.html. Jej´ı struktura je vidˇet na obr´azku 6.5. Bliˇzˇs´ı popis jednotliv´ ych prvk˚ u t´eto str´anky je v n´ıˇze uveden´em v´ yˇctu, jehoˇz body odpov´ıdaj´ı oˇc´ıslovan´ ym prvk˚ um z obr´azku 6.5. ´ • 1 - Uroveˇ n aktu´aln´ıho zoomu (DIV element s id=”zoom”). • 2 - Formul´aˇr s id=”markers” pro zmˇenu zobrazen´ı dat na mapˇe (viz n´asleduj´ıc´ı podkapitola).
6.4 Klientsk´a ˇc´ast - API Leaflet
36
Obr´azek 6.4: V´yvojov´y diagram algoritmu pro v´ypoˇcet centroidu shluk˚ u • 3 - Mapa, m´ısto pro geografick´e rozm´ıstˇen´ı znaˇcek (DIV element s id=”map”). • 4 - Oblast pro zobrazen´ı obsahu znaˇcek na mapˇe (DIV element s id=”newsItem”). Zobrazovan´ ym obsahem mohou b´ yt textov´a data konkr´etn´ı znaˇcky, nebo ˇcasov´a osa, kter´a je naplnˇena daty z dan´ ych GPS souˇradnic (odkaz shown timeline ve vyskakovac´ım oknˇe)5 . • 5 - Formul´aˇr s id=”categories” pro pr´aci s kategoriemi. Kategorie se vyuˇz´ıvaj´ı pˇri zobrazen´ı dat kol´aˇcov´ ymi grafy (volba ”clustered marks as Pies” ve formul´aˇri oznaˇcen´em ˇc´ıslem 2), nebo pro filtrov´an´ı dat na ˇcasov´e ose, kter´a m˚ uˇze b´ yt zobrazena v oblasti s ˇc´ıslem 4. • 6 - Posuvn´ıky filtruj´ıc´ı zobrazovan´a data na mapˇe na z´akladˇe nastaven´eho ˇcasu6 . Zobrazena jsou vˇsechna data, kter´a maj´ı shodn´ y rok s rokem vybran´ ym na posuvn´ıku urˇcuj´ıc´ım rok, a kter´a v datumu obsahuj´ı mˇes´ıc pˇredch´azej´ıc´ı nebo shodn´ y mˇes´ıc s vybran´ ym na posuvn´ıku urˇcuj´ıc´ım mˇes´ıc. 5
Zobrazov´ an´ı dat souˇcasnˇe i na ˇcasov´e ose nen´ı implementov´ano pro znaˇcky reprezentuj´ıc´ı shluk vytvoˇren´ y algoritmem popsan´ ym v sekci 6.3.7 (na mapˇe jsou takov´eto znaˇcky odliˇseny zelenou barvou) 6 Filtrov´ an´ı implementov´ ano pouze pro ”kol´aˇcov´e zobrazen´ı dat”(volba ”clustered marks as Pies” ve formul´ aˇri oznaˇcen´em ˇc´ıslem 2)
6.4 Klientsk´a ˇc´ast - API Leaflet
37
Obr´azek 6.5: Klientsk´a ˇc´ast aplikace v API Leaflet Po naˇcten´ı str´anky s aplikac´ı jsou zobrazena vˇsechna data tak, ˇze jsou kompletnˇe nashlukov´ana podle algoritmu z kapitoly 6.3.7 a n´aslednˇe je pro kaˇzdou samostatnou znaˇcku ˇci shluk vytvoˇrena jedna znaˇcka. Funkˇcnost aplikace se pˇrev´aˇznˇe odv´ıj´ı od vybran´e volby zobrazen´ı. Obecnˇe plat´ı, ˇze u vˇsech voleb jsou na mapu um´ıstˇeny znaˇcky, kter´e mohou b´ yt ruzn´ ych typ˚ u. Jednotliv´e typy znaˇcek jsou od sebe barevnˇe odliˇseny. Modr´a barva reprezentuje ˇ individu´aln´ı znaˇcky, kter´e obsahuj´ı data o jedin´e poloˇzce. Cervenou barvou jsou tvoˇreny znaˇcky reprezentuj´ıc´ı v´ıce dat na stejn´ ych GPS souˇradnic´ıch a zelen´e znaˇcky jsou pouˇzity pro shluky dat vytvoˇren´e na serverov´e stranˇe. Znaˇcky shluk˚ u se odliˇsuj´ı tak´e svoj´ı velikost´ı, kter´a se odv´ıj´ı od poˇctu dat, ze kter´ ych shluk vznikl. Shluky obsahuj´ıc´ı m´enˇe neˇz 20 znaˇcek maj´ı stejnou velikost jako jednotliv´e znaˇcky. S kaˇzdou znaˇckou je spjat´e vyskakovac´ı okno, jehoˇz obsah se liˇs´ı podle typu (barvy) znaˇcky. Vˇetˇsinou obsahuje n´azev mˇesta, ve kter´em je znaˇcka um´ıstˇena, pˇr´ıpadnˇe poˇcet jednotliv´ ych datov´ ych z´aznam˚ u na dan´e pozici a odkaz na kaˇzd´ y z nich. Obsah jednotliv´ ych z´aznam˚ u se po kliknut´ı na odkaz zobraz´ı v prav´e ˇca´sti obrazovky. Pokud se nejedn´a o zelen´e znaˇcky, obsahuje z´aznam tak´e odkaz na ˇcasovou osu, kter´a se zobraz´ı v prav´e ˇc´asti obrazovky.
6.4 Klientsk´a ˇc´ast - API Leaflet
38
M´ ody zobrazen´ı Jednotliv´e m´ody zobrazen´ı odpov´ıdaj´ı poloˇzk´am formul´aˇre s ˇc´ıslem 2) na obr´azku 6.5. • Individual marks - Z´akladn´ı rozm´ıstˇen´ı znaˇcek pomoc´ı API. Vyskakovac´ı okna obsahuj´ı datov´e z´aznamy na dan´e pozici, kter´e je moˇzn´e zobrazit. Vˇsechna data ze serveru jsou pˇred´ana formou seznamu a pro kaˇzdou poloˇzku tohoto seznamu je vytvoˇrena samostatn´a znaˇcka. • Clustered marks at the same position - Zredukov´an´ı dat se stejn´ ymi GPS souˇradnicemi na serverov´e stranˇe. Znaˇcky obsahuj´ıc´ı v´ıce datov´ ych z´aznam˚ u jsou odliˇseny ˇcervenou barvou. Vˇsechny znaˇcky obsahuj´ı vyskakovac´ı okna s jednotliv´ ymi z´aznamy, kter´e je moˇzn´e zobrazit a odkaz pro zobrazen´ı ˇcasov´e osy naplnˇen´e daty reprezentovan´ ymi danou znaˇckou. Data ze serveru jsou pˇred´ana v podobˇe haˇsovac´ı tabulky, kde kl´ıˇcem jsou GPS souˇradnice a hodnotou je vˇzdy jeden z´aznam obsahuj´ıc´ı metadata o datech na tˇechto souˇradnic´ıch. Tyto metadata obsahuj´ı napˇr. n´azev mˇesta, datum a ˇc´ıtaˇc, kter´ y urˇcuje poˇcet dat na dan´ ych souˇradnic´ıch. • Clustered marks on SS - Znaˇcky jsou nashlukov´any na serverov´e stranˇe podle algoritmu viz 6.3.7. Znaˇcky kter´e takto vznikly uveden´ ym shlukovac´ım algoritmem na serveru jsou odliˇseny zelenou barvou (viz obr´azek 6.6) a mohou nab´ yvat r˚ uzn´ ych rozmˇer˚ u v z´avislosti na mnoˇzstv´ı dat ve shluku. Pˇri zmˇenˇe mˇeˇr´ıtka se odes´ıl´a na server nov´ y poˇzadavek a shluky jsou znovu pˇrepoˇc´ıt´any. Pokud chceme zobrazit obsah shluku, je nutn´e zoom pˇribl´ıˇzit tak, aby se shluk (zelen´a znaˇcka) rozdˇelil na ˇcerven´e a modr´e znaˇcky. Pro sn´ıˇzen´ı pˇren´aˇsen´eho objemu dat totiˇz tyto shluky neobsahuj´ı data, podle z nichˇz by bylo moˇzn´e identifikovat konkr´etn´ı poloˇzky, ze kter´ ych jsou sloˇzen´e. • Clustered marks on client - Shluky vytvoˇren´e na stranˇe klienta pouˇzit´ım pluginu Leaflet.markercluster. Uk´azka je vidˇet na obr´azku 6.7. Pˇri najet´ı kurzoru myˇsi na shluk je zobrazena hranice oblasti, ze kter´e je shluk tvoˇren. Ze serveru jsou totiˇz pos´ıl´any jednotliv´e z´aznamy (vˇcetnˇe GPS souˇradnic) a shlukov´an´ı prob´ıh´a na klientsk´e stranˇe. V´ yhodou tohoto ˇreˇsen´ı je pouze jeden datov´ y poˇzadavek na server, nicm´enˇe nev´ yhodou je, ˇze rozm´ıstˇen´ı znaˇcek na mapˇe je ˇr´ızeno pluginem a pot´e se se znaˇckami ned´a nijak manipulovat. • Clustered marks as Pies - Zobrazen´ı shluk˚ u (rozm´ıstˇen´ı dat z´ısk´avan´ ych ze serveru je totoˇzn´e jako u volby Clustered marks on SS ) formou kol´aˇcov´ ych graf˚ u, kter´e zobrazuj´ı procentu´aln´ı pod´ıl kategori´ı v dan´e oblasti (viz obr´azek 6.8). Dan´e kategorie, kter´e chceme v grafech zobrazit se vyberou ve formul´aˇri um´ıstˇen´em pod mapou. Pot´e staˇc´ı stisknout tlaˇc´ıtko refresh. Procentu´aln´ı pod´ıl dan´ ych kategori´ı je moˇzn´e zobrazit ve vyskakovac´ım oknˇe kliknut´ım na dan´ y kol´aˇc. U t´eto volby zobrazen´ı je tak´e jako u jedin´e implementov´an v´ yvoj v ˇcase, kdy lze mˇenit rok a mˇes´ıc na k tomu urˇcen´ ych posuvn´ıc´ıch a pozorovat zmˇeny v kol´aˇcov´ ych grafech kategori´ı na mapˇe.
6.4 Klientsk´a ˇc´ast - API Leaflet
39
Obr´azek 6.6: Zobrazen´ı shluk˚ u vytvoˇren´ych na serverov´e stranˇe aplikace
Obr´azek 6.7: Zobrazen´ı shluk˚ u vytvoˇren´ych pluginem Leaflet.markercluster
6.4.2
Pouˇ zit´ e knihovny
Vytvoˇren´a aplikace vyuˇz´ıv´a knihovny: Leaflet, Almende Timeline, JQuery, JAK a slider.js 7 . D´ale aplikace pouˇz´ıv´a n´asleduj´ıc´ı pluginy pro Leaflet API : • leaflet.label - plugin pro tvorbu popisk˚ u • leaflet.markercluster - plugin pro shlukov´an´ı znaˇcek • leaflet.semicircle - plugin rozˇsiˇruj´ıc´ı vlastnosti kruhu (kreslen´ı vektorov´e grafiky) 7
widget pro vytvoˇren´ı posuvn´ıku http://jak.seznam.cz/example/widgets/#slider
6.4 Klientsk´a ˇc´ast - API Leaflet
40
Obr´azek 6.8: Zobrazen´ı shluk˚ u formou kol´aˇcov´ych graf˚ u Pomoc´ı elementu <script type=”text/javascript”src=”cesta ke knihovne”/>, kter´ y je v hlaviˇcce html str´anky s aplikac´ı, se pˇripojuj´ı vˇsechny skripty, knihovny a pluginy. Seznam vˇsech dostupn´ ych plugin˚ u pro API Leaflet je dostupn´ y na adrese http://leafletjs.com/plugins.html.
6.4.3
Struktura
V t´eto podkapitole je nejprve pops´ana adres´aˇrov´a struktura aplikace. N´asleduje popis konfiguraˇcn´ıho skriptu aplikace a HTML str´anek. Adres´ aˇ rov´ a struktura a popis soubor˚ u Aplikace je um´ıstˇena ve sloˇzce WebApplicationCTK/leaflet, kter´a obsahuje sloˇzky css, img a scripts. Zde jsou obsaˇzen´e definice kask´adov´ ych styl˚ u (css), obr´azky reprezentuj´ıc´ı znaˇcky umist’ovan´e na mapˇe a zdrojov´e k´ody aplikace - skripty. D´ale jsou v t´eto sloˇzce str´anky LEAFLET.html a googleleaflet.html, kter´a demonstruje pouˇzit´ı API s mapami od spoleˇcnosti Google. Ve sloˇzce leaflet/scripts jsou um´ıstˇeny tyto soubory: • leaflet label - adres´aˇr se zdrojov´ ymi k´ody pluginu leaflet.label • leaflet marker cluster - adres´aˇr se zdrojov´ ymi k´ody pluginu leaflet.markercluster • leaflet semicircle - adres´aˇr se zdrojov´ ymi k´ody pluginu leaflet.semicircle • timeline - adres´aˇr se zdrojov´ ymi k´ody knihovny Almende Timeline
6.4 Klientsk´a ˇc´ast - API Leaflet
41
• config.js - konfigurace aplikace • ctk timeline.js - script s definic´ı ˇcasov´e osy • markers.js - skript s definic´ı funkc´ı umist’ujic´ıch znaˇcky na mapu pro r˚ uzn´e m´ody • timeline utils.js - pomocn´e funkce pro pr´aci s kategoriemi v ˇcasov´e ose • utils.js - pomocn´e funkce cel´e aplikace config.js Konfiguraˇcn´ı soubor, ve kter´em jsou definov´any n´asleduj´ıc´ı konstanty pro nastaven´ı aplikace: • SERVER URL, TIMELINE SERVER URL - ˇretˇezce ud´avaj´ıc´ı URL adresu serverov´e ˇca´sti aplikace (defaultn´ı hodnota: http://localhost:8084/WebApplicationCTK/ ) ˇ • CATEGORIES, TIMELINE CATEGORIES - pole s n´azvy kategori´ı CTK • TIMELINE RANGE - rozsah zobrazen´ı periodick´ ych ud´alost´ı, periodick´e ud´alosti budou vyobrazeny v tomto rozsahu pˇred a po souˇcasn´em datu (defaultn´ı hodnota: 50 ) • TIMELINE SOURCE URL - URL pro z´ısk´an´ı dat (defaultn´ı hodnota: TIMELINE SERVER URL + ”/GetData?show=timeline”) LEAFLET.html LEAFLET.html je hlavn´ı str´anka pro pˇr´ıstup k aplikaci. V hlaviˇcce str´anky jsou vloˇzeny vˇsechny pouˇzit´e knihovny a skripty. Tˇelo str´anky obsahuje ovl´adac´ı elementy popsan´e v kapitole 6.4.1 a zobrazen´e na obr´azku 6.5. Za tˇemito elementy n´asleduje definice skriptu, kter´ y inicializuje celou aplikaci. Vytvoˇr´ı mapu, vrstvy pro znaˇcky, listenery ud´alost´ı, vygeneruje checkboxy pro kategorie a ˇcasov´e posuvn´ıky spolu s jejich listenery. Aplikace pouˇz´ıv´a mapy OpenStreetMap. googleleaflet.html Html str´anka, kter´a demonstruje pouˇzit´ı API Leaflet s mapov´ ymi podklady od spoleˇcnosti Google. Kombinaci Google Maps a Leaflet ˇreˇs´ı plugin leaflet-google 8 . V hlaviˇcce html str´anky mus´ı b´ yt vloˇzeno elementem <script> API Leaflet (+ CSS styly), API Google Maps a knihovna leaflet-google viz n´asleduj´ıc´ı k´od: 8
< s c r i p t s r c =”http : / / cdn . l e a f l e t j s . com/ l e a f l e t − 0 . 4 . 5 / l e a f l e t . j s ”> s c r i p t > < s c r i p t s r c =”http : / / maps . g o o g l e . com/maps/ a p i / j s ?v=3.2& s e n s o r=f a l s e ”> s c r i p t > < s c r i p t s r c =”h t t p s : / / raw . g i t h u b . com/ g i s t /2197042/2 b90c41b39b7d5b3a851d8f256de2ebd3fe1fb74 / l e a f l e t − g o o g l e . j s ”> s c r i p t > Vytvoˇren´ı mapy pouˇz´ıvaj´ıc´ı podklady od Google se pot´e provede v javascriptu n´asledovnˇe:9 var map = new L . Map( ’ map ’ , { c e n t e r : new L . LatLng ( 5 1 . 5 1 , −0.11) , zoom : 9}) ; var g o o g l e L a y e r = new L . Google ( ’ROADMAP’ ) ; map . addLayer ( g o o g l e L a y e r ) ;
6.5
Klientsk´ aˇ c´ ast - Almende Timeline
Tato kapitola popisuje druhou klientskou ˇc´ast aplikace vytvoˇrenou pomoc´ı n´astroje Almende Timeline (viz 5.7), kter´a slouˇz´ı pro vizualizaci dat na z´akladˇe ˇcasov´ ych u ´daj˚ u formou ˇcasov´e osy. Ke sv´e spr´avn´e funkci nepotˇrebuje pˇr´ıstup k internetu.
6.5.1
Popis funkˇ cnosti
Str´anka zobrazuj´ıc´ı ˇcasovou osu je v aplikaci dostupn´a na adrese WebApplicationCTK/timeline/timeline.html. Zobrazovan´a data se z´ısk´avaj´ı ze serveru (viz 6.3.2) na z´akladˇe poˇzadavku, kter´ y je na server odes´ıl´an bˇehem naˇc´ıt´an´ı str´anky s aplikac´ı. Po naˇcten´ı str´anky jsou vˇsechna data ze serveru zobrazena jako samostatn´e buˇ nky pˇrichycen´e k ˇcasov´e ose. Obsah buˇ nek lze zobrazit najet´ım kurzoru myˇsi nebo kliknut´ım na buˇ nku (viz obr´azek 6.9). Periodick´e ud´alosti jsou odliˇseny ˇcervenou ˇ barvou. Casovou osu lze libovolnˇe posouvat v ˇcase tahem kurzoru myˇsi a zvˇetˇsovat ˇci zmenˇsovat zobrazovanou ˇca´st rolovac´ım koleˇckem myˇsi (zoom). Pˇri zmˇenˇe zoomu se zobrazovan´e mˇeˇr´ıtko na ˇcasov´e ose samo pˇrepoˇc´ıt´a. Mˇeˇr´ıtko ˇcasov´e osy se d´a mˇenit v rozsahu rok˚ u aˇz milisekund. Aplikace vyuˇz´ıv´a shlukov´an´ı ud´alost´ı, kter´e API nab´ız´ı. Ud´alosti se stejn´ ym nebo bl´ızk´ ym ˇcasem jsou seskupeny do jedn´e buˇ nky zobrazuj´ıc´ı poˇcet seskupen´ ych ud´alost´ı (viz obr´azek 6.9). Aplikace d´ale nab´ız´ı filtrov´an´ı zobrazovan´ ych ud´alost´ı podle kategori´ı. K tomu slouˇz´ı formul´aˇr um´ıstˇen´ y pod ˇcasovou osou, ve kter´em jsou um´ıstˇeny checkboxy 9
Za pˇredpokladu, ˇze je na str´ ance DIV element s id=”map”(prvn´ı parametr u L.Map())
6.5 Klientsk´a ˇc´ast - Almende Timeline
43
Obr´azek 6.9: Uk´azka ˇcasov´e osy pro kaˇzdou kategorii. Kategorie jsou definov´any v konfiguraˇcn´ım skriptu aplikace. Po zaˇskrtnut´ı vybran´ ych kategori´ı a stisku tlaˇc´ıtka refresh se na ˇcasov´e ose zobraz´ı pouze ud´alost´ı z dan´ ych kategori´ı (pokud data takov´e ud´alosti obsahuj´ı). Pro kaˇzdou ze zaˇskrtnut´ ych kategori´ı se v ˇcasov´e ose vytvoˇr´ı vrstva, ve kter´e jsou zobrazeny pouze ud´alosti z dan´e kategorie (viz obr´azek 6.10). Vertik´aln´ı rozmˇer ˇcasov´e osy se mˇen´ı v z´avislosti na poˇctu vytvoˇren´ ych vrstev.
Obr´azek 6.10: Filtrov´an´ı - ˇcasov´a osa s vrstvami pro ud´alosti z kategori´ı kultura a sport
6.5.2
Pouˇ zit´ e knihovny
V aplikaci mus´ı b´ yt vloˇzeny vˇsechny skripty popsan´e v n´asleduj´ıc´ı kapitole, knihovna Almende Timeline a knihovna JQuery. Vˇsechny skripty a knihovny se pˇripojuj´ı elementem <script type=”text/javascript”src=”cesta ke knihovne”/>, kter´ y je v hlaviˇcce html str´anky s aplikac´ı.
6.5 Klientsk´a ˇc´ast - Almende Timeline
6.5.3
44
Struktura
Na zaˇc´atku t´eto podkapitoly je nejdˇr´ıve pops´ana adres´aˇrov´a strukura aplikace. N´asleduje popis kl´ıˇcov´ ych skript˚ u aplikace, vˇcetnˇe detailnˇejˇs´ıho popisu v´ yznamn´ ych funkc´ı a pouˇzit´ ych javascriptov´ ych konstrukc´ı. Adres´ aˇ rov´ a struktura Aplikace je um´ıstˇena ve sloˇzce WebApplicationCTK/timeline/, kter´a obsahuje sloˇzku scripts a str´anku timeline.html (viz 6.5.3) se samotnou aplikac´ı. Ve sloˇzkce timeline/scripts jsou um´ıstˇeny tyto soubory: • config.js - konfigurace aplikace • ctk timeline.js - script s definic´ı ˇcasov´e osy • timeline utils.js - pomocn´e funkce pro pr´aci s kategoriemi • timeline - adres´aˇr se zdrojov´ ymi k´ody knihovny Almende Timeline config.js Konfiguraˇcn´ı soubor ve kter´em jsou definov´any n´asleduj´ıc´ı konstanty pro nastaven´ı aplikace: • TIMELINE SERVER URL - ˇretˇezec ud´avaj´ıc´ı URL adresu serverov´e ˇca´sti aplikace (defaultn´ı hodnota: http://localhost:8084/WebApplicationCTK/ ) • TIMELINE RANGE - rozsah zobrazen´ı periodick´ ych ud´alost´ı, periodick´e ud´alosti budou vyobrazeny v tomto rozsahu pˇred a po souˇcasn´em datu (defaultn´ı hodnota: 10 ) • TIMELINE SOURCE URL - URL pro z´ısk´an´ı dat (defaultn´ı hodnota: http://localhost:8084/WebApplicationCTK/GetData?show=timeline”) ˇ • TIMELINE CATEGORIES - pole s n´azvy kategori´ı CTK ctk timeline.js ˇ Skript s definic´ı funkce pro vizualizaci dat CTK pomoc´ı API Almende Timeline. Obsahuje funkci timeline drawVisualization(timelineId, sourceUrl, checkedCategories). Popis parametr˚ u funkce: • timelineId - id DIV elementu pro ˇcasovou osu • sourceUrl - URL pro z´ısk´an´ı dat • checkedCategories - pole obsahuj´ıc´ı n´azvy zaˇskrtnut´ ych kategori´ı
6.5 Klientsk´a ˇc´ast - Almende Timeline
45
Data pro vizualizaci jsou pˇrij´ım´ana v JSON form´atu a z´ısk´avaj´ı se pomoc´ı Ajaxu dotazem na server. N´asleduj´ıc´ı ˇc´asti k´odu demonstruj´ı z´akladn´ı princip vytv´aˇren´ı ˇcasov´e osy, tj. inicializaci a vloˇzen´ı dat. Detaily kter´e zohledˇ nuj´ı rozd´ıln´e typy dat (viz kapitola 2), pr´aci s kategoriemi, vrstvami a periodick´ ymi ud´alostmi nebo vytv´aˇren´ı listener˚ u jsou podrobnˇe komentovan´e ve zdrojov´em k´odu. 1) Deklarace: var t i m e l i n e D a t a = [ ] ; / / p o l e pro data var t i m e l i n e ; / / ˇc a s o v ´a osa var o p t i o n s = { . . . } ; / / n a s t a v e n´ı ˇc a s o v´e osy 2) Pˇrid´an´ı ud´alosti do ˇcasov´e osy, kde jednotliv´a data mohou m´ıt strukturu JSON nebo Google DataTable: t i m e l i n e D a t a . push ({ ’ s t a r t ’ : new Date ( date ) , // ˇc a s u d a´ l o s t i ’ c ont ent ’ : ”  ; div >” ,// v z h l e d a obsah buˇ n ky ’ jsonData ’ : data [ i ] // d a l ˇs´ı data ve form´a tu JSON }) ; 3) Vytvoˇren´ı objektu ˇcasov´e osy a vykreslen´ı ˇcasov´e osy: timeline = new l i n k s . T i m e l i n e ( document . getElementById ( t i m e l i n e I d ) ) ; t i m e l i n e . draw ( t i m e l i n e D a t a , o p t i o n s ) ; Standardn´ı ud´alost m´a 2 povinn´e a 4 voliteln´e parametry10 . D´ıky tomu, ˇze struktura ud´alosti pouˇz´ıv´a JSON form´at, je moˇzn´e pˇridat i dalˇs´ı parametry k ud´alosti (viz parametr jsonData v bodˇe 2) ve v´ yˇse uveden´em k´odu ). K takov´ ymto parametr˚ um nen´ı moˇzno pˇristupovat pˇr´ımo pomoc´ı API, ale lze tato data z´ıskat n´asleduj´ıc´ım zp˚ usobem: var data = t i m e l i n e . getData ( ) [ row ] . jsonData ; T´ımto zp˚ usobem lze k ud´alosti pˇripojit libovoln´a data. timeline.html Html str´anka pro pˇr´ıstup k aplikaci. V elementu BODY vol´a pˇri naˇcten´ı funkci timeline drawVisualization(’timeline’, TIMELINE SOURCE URL) ze skriptu ctk timeline.js. Ve sv´em tˇele obsahuje pouze jeden DIV element, kter´ y slouˇz´ı jako kontejner pro ˇcasovou osu a definici formul´aˇre (jednotliv´e prvky pro kategorie se generuj´ı dynamicky). Obsah elementu BODY : 10
Viz dokumentace http://almende.github.com/chap-links-library/js/timeline/doc/#Data Format
6.5 Klientsk´a ˇc´ast - Almende Timeline
46
Za t´ımto k´odem n´asleduje skript, kter´ y vol´a funkci pro vygenerov´an´ı formul´aˇrov´ ych prvk˚ u jednotliv´ ych kategori´ı ze souboru timeline utils.js a definuje funkci pro aktualizaci ˇcasov´e osy pˇri zmˇenˇe vybran´ ych kategori´ı (vol´a funkci timeline drawVizualization(timelineId, sourceUrl, checkedCategories) se vˇsemi jej´ımi parametry). Vybran´e kategorie, kter´e potˇrebujeme jako tˇret´ı parametr t´eto funkce dostaneme zavol´an´ım n´asleduj´ıc´ı funkce definovan´e v souboru timeline utils.js: t i m e l i n e g e t C h e c k e d V a l u e s ( document . forms [ ’ c a t e g o r i e s ’ ] . elements [ ’ category ’ ] )
47
Kapitola 7 Dosaˇ zen´ e v´ ysledky 7.1
Testov´ an´ı shlukovac´ıho algoritmu
ˇ Vzhledem k tomu, ˇze jsem dat s GPS souˇradnicemi mˇel od CTK pouze omezen´e mnoˇzstv´ı, vygeneroval jsem si pro tyto u ´ˇcely n´ahodnˇe 50 000 unik´atn´ıch GPS souˇradnic z okol´ı Prahy, jejichˇz maxim´aln´ı vzd´alenost od Prahy ˇcinila 300 km. K tomu jsem vyuˇzil Random Point Generator 1 . V´ ypoˇcetn´ı sloˇzitost shlukovac´ıho algoritmu nelze pˇresnˇe urˇcit, protoˇze velmi z´aleˇz´ı na samotn´ ych datech, ne jen na jejich poˇctu. Asymptotickou sloˇzitost algoritmu lze omezit zhora i zdola. V ide´aln´ım pˇr´ıpadˇe (doln´ı mez) je sloˇzitost algoritmu line´arn´ı O(N). Pro nejhorˇs´ı pˇr´ıpad je sloˇzitost shora omezena kvadratickou funkc´ı a spad´a do tˇr´ıdy O(N2 ). Algoritmus m´a line´arn´ı sloˇzitost v pˇr´ıpadˇe, ˇze vˇsechna data reprezentovan´a GPS souˇradnicemi se nach´az´ı bl´ızko“ sebe2 . V opaˇcn´em pˇr´ıpadˇe, ” kdy jsou vˇsechna data od sebe pˇr´ıliˇs“ vzd´alena (m˚ uˇze b´ yt zp˚ usobeno napˇr. velk´ ym ” pˇribl´ıˇzen´ım - zoomem) je ˇcasov´a sloˇzitost algoritmu t´emˇeˇr kvadratick´a a nemus´ı b´ yt vytvoˇren vytvoˇren ˇz´adn´ y shluk. V´ ysledky testov´an´ı ˇcasov´e n´aroˇcnosti algoritmu jsou uvedeny v tabulce 7.1.1 a zobrazeny v grafu 7.1. U OpenStreetMaps, kter´e jsem pouˇzil jako mapov´e podklady se zoom skl´ad´a z osmn´acti u ´rovn´ı (1-18), pˇriˇcemˇz hodnota 18 je nejvˇetˇs´ı moˇzn´e pˇribl´ıˇzen´ı. Tabulka 7.1.1 obsahuje pouze u ´rovnˇe 1-6, pˇriˇcemˇz posledn´ı ˇr´adek3 ukazuje teoreticky nejhorˇs´ı moˇzn´ y pˇr´ıpad z hlediska asymptotick´e sloˇzitosti, kdy v´ ystup algoritmu je roven jeho vstupu. 1
http://www.geomidpoint.com/random/ Vzd´ alenost dat se zde odv´ıj´ı od u ´rovnˇe zoomu, podle kter´eho je definov´ana mez urˇcuj´ıc´ı zda jsou data bl´ızko“ sebe a mohou tvoˇcit shluk ˇci nikoli ” 3 Tyto hodnoty byly zjiˇstˇeny bˇehem testov´an´ı se ˇspatnˇe implementovanou funkc´ı pro v´ ypoˇcet minim´ aln´ı vzd´ alenosti, kdy pro u ´roveˇ n zoomu vˇetˇs´ı neˇz 6 algoritmus pˇrestal vytv´aˇret shluky. V souˇcasn´e dobˇe je tento probl´em jiˇz odstranˇen a algoritmus pracuje spr´avnˇe pro vˇsechny u ´rovnˇe zoomu. 2
7.1 Testov´an´ı shlukovac´ıho algoritmu
7.1.1
48
Konfigurace poˇ c´ıtaˇ ce
Poˇcet znaˇcek
Testy shlukovac´ıho algoritmu byly prov´adˇeny na poˇc´ıtaˇci s n´asleduj´ıc´ı softwarovou a hardwarovou konfigurac´ı: 1) SW: Windows 7 Professional, Java JDK 1.6, Apache Tomcat 6.0.18; 2) HW: Intel Core 2 Duo T5870, 4 GB RAM.
ˇ Tabulka 7.1: Casov´ a n´aroˇcnost shlukovac´ıho algoritmu. P pˇredstavuje poˇcet vznikl´ ych shluk˚ u, t1 dobu vytvoˇren´ı shluk˚ u [ms], t2 dobu v´ ypoˇctu centroid˚ u [ms]
ˇ Obr´azek 7.1: Casov´ a n´aroˇcnost shlukovac´ıho algoritmu v z´avislosti na poˇctu znaˇcek au ´rovni zoomu
7.2 Geografick´a vizualizace
7.1.2
49
Shrnut´ı
Jak je patrn´e z tabulky 7.1.1 a grafu 7.1 shlukovac´ı algoritmus s vyj´ımkou nejhorˇs´ıho pˇr´ıpadu kdy nevznikne ˇz´adn´ y shluk dosahuje velice dobr´ ych v´ ysledk˚ u i pˇres ˇ to, ˇze jsem v testu pouˇzil data s unik´atn´ımi GPS souˇradnicemi. Casov´ a n´aroˇcnost v´ ypoˇctu centroid˚ u je ve vˇsech pˇr´ıpadech zanedbateln´a (v ˇra´dech milisekund). Na ˇ re´aln´ ych datech CTK bude prob´ıhat proces shlukov´an´ı mnohem rychleji, protoˇze na dan´em vzorku dat m´a pouze 20% dat unik´atn´ı GPS souˇradnice. Tuto vlastnost dat je moˇzno vyuˇz´ıt pro pˇredzpracov´an´ı a zredukovat tak vstup algoritmu pouze na unik´atn´ı souˇradnice. Toho jsem v aplikaci doc´ılil pouˇzit´ım haˇsovac´ı tabulky, jej´ıˇz kl´ıˇc tvoˇrily GPS souˇradnice a hodnotu MarkBean. Stejn´e GPS souˇradnice nevloˇzily do haˇsovac´ı tabulky nov´ y prvek, pouze v jiˇz existuj´ıc´ım z´aznamu inkrementovaly ˇc´ıtaˇc reprezentuj´ıc´ı poˇcet znaˇcek na tˇechto souˇradnic´ıch. Nev´ yhoda pouˇzit´eho shlukovac´ıho algoritmu spoˇc´ıv´a v pˇr´ıpadech, kdy jsou od sebe data pˇr´ıliˇs vzd´alena a nezvnik´a ˇz´adn´ y shluk (viz tabulka 7.1.1), coˇz pˇri pouˇzit´ı OpenStreetMap nast´av´a zpravidla pˇri velk´em pˇribl´ıˇzen´ı. Proveden´ı algoritmu pak zabere hodnˇe ˇcasu s minim´aln´ım pˇr´ınosem. K odstranˇen´ı tohoto probl´emu bych navrhoval pˇred shlukov´an´ım omezit mnoˇzinu dat pouze na data s GPS souˇradnicemi v aktu´aln´ım v´ yˇrezu mapy. API Leaflet obsahuje metodu pro z´ısk´an´ı GPS souˇradnic hranic aktu´aln´ıho v´ yˇrezu mapy4 . Doporuˇcil bych vˇsak zv´aˇzit, zda se na data z v´ yˇrezu nedotazovat pouze od urˇcit´e u ´rovnˇe zoomu ˇci velikosti dat. D˚ uvodem je moˇzn´e posouv´an´ı mapy, pˇri kter´em se by se v takov´em pˇr´ıpadˇe musela data ze serveru naˇc´ıtat znovu pˇri kaˇzd´em posunut´ı.
7.2
Geografick´ a vizualizace
Hlavn´ı probl´em u geografick´e vizualizace bylo pˇrehledn´e zobrazen´ı vˇetˇs´ıho poˇctu znaˇcek. Toho jsem doc´ılil pˇredzpracov´an´ım dat se stejn´ ymi GPS souˇradnicemi a shlukov´an´ım, kter´e jsem implementoval na serverov´e stranˇe aplikace. Shlukovac´ı algoritmus vytv´aˇr´ı shluky podle vz´ajemn´e vzd´alenosti dat a u ´rovnˇe zoomu. V´ ysledky implementovan´ ych postup˚ u jsou vidˇet na obr´azc´ıch 7.2, 7.3 a 7.4. Modr´e znaˇcky zde reprezentuj´ı jedin´ y z´aznam, ˇcerven´e znaˇcky v´ıce z´aznam˚ u na stejn´ ych GPS souˇradnic´ıch a zelenou barvou jsou oznaˇceny shluky vytvoˇren´e pomoc´ı shlukovac´ıho algoritmu. Na obr´azku 7.5 je vidˇet kombinace shlukov´an´ı znaˇcek a jejich n´asledn´a reprezentace kol´aˇcov´ ymi grafy, kter´e reprezentuj´ı procentu´aln´ı zastoupen´ı kategori´ı dat na dan´ ych GPS souˇradnic´ıch. Konkr´etnˇe se jedn´a o zobrazen´ı kategori´ı Politika ˇ (pol), Parlamenty a vl´ady (for). (pod), Politika CR C´ılem pr´ace bylo prozkoum´an´ı moˇznost´ı a zp˚ usob˚ u zobrazen´ı geografick´ ych dat, nikoli vytvoˇren´ı konkr´etn´ı aplikace. Hlavn´ı poˇzadavky ze strany zadavatele byly n´asleduj´ıc´ı: 1) vhodn´e API; 2) celosvˇetov´e mapov´e pokryt´ı; 3) shlukov´an´ı znaˇcek; 4) zobrazen´ı kategori´ı; 5) v´ yvoj na mapˇe z hlediska ˇcasu. Vytvoˇren´a aplikace vˇsechny tyto poˇzadavky splˇ nuje. Vybr´ano bylo API Leaflet v kombinaci s OpenStreetMap, 4
Viz http://leafletjs.com/reference.html#map-get-methods
Obr´azek 7.3: Geografick´a vizualizace (zoom = 5) - neshlukovan´e znaˇcky (vlevo) a shlukovan´e znaˇcky (vpravo) kter´e zajiˇst’uj´ı glob´aln´ı mapov´e pokryt´ı. Shlukov´an´ı znaˇcek je realizov´ano implementovan´ ym shlukovac´ım algoritmem na serverov´e stranˇe a tak´e pluginem pro API Leaflet na klientsk´e stranˇe. M´ısto znaˇcek je moˇzn´e zobrazit na mapˇe vybran´e kategorie formou kol´aˇcov´ ych graf˚ u, kter´e reprezentuj´ı procentu´aln´ı pod´ıl dat z kategori´ı v dan´e oblasti. Jejich v´ yvoj lze sledovat v ˇcase posouv´an´ım pˇr´ısluˇsn´ ych ovl´adac´ıch prvk˚ u (posuvn´ık˚ u). Implementaci posuvn´ıku urˇcuj´ıc´ıho rok by pro budouc´ı vyuˇzit´ı bylo vhodn´e upravit. V souˇcasn´e implementaci se tahem posuvn´ıku myˇs´ı generuje (pro kaˇzdou zmˇenu hodnoty posuvn´ıku) poˇzadavek na server. Lze tak doc´ılit plynul´eho v´ yvoje v ˇcase, ale za cenu zv´ yˇsen´ı z´atˇeˇze na serveru. Pokud uˇzivatel bude cht´ıt napˇr. zobrazit konkr´etn´ı rok vzd´alen´ y o x let od souˇcasn´e hodnoty a pˇresune posuvn´ık na tento rok tahem, vygeneruje se zbyteˇcnˇe x poˇzadavk˚ u. Pro zamezen´ı tˇechto situac´ı bych doporuˇcoval obsluhu posuvn´ıku urˇcuj´ıc´ı rok zaregistrovat na jinou ud´alost (napˇr.
Obr´azek 7.5: Geografick´a vizualizace - zobrazen´ı kol´aˇcov´ych graf˚ u puˇstˇen´ı posuvn´ıku tlaˇc´ıtkem myˇsi) a pro zachov´an´ı v´ yvoje v ˇcase bych k posuvn´ıku pˇridal tlaˇc´ıtka posouvaj´ıc´ı posuvn´ık o +/-“ 1 rok. ”
7.3
Vizualizace ˇ casov´ ych dat
V aplikaci zobrazuj´ıc´ı data na ˇcasov´e ˇradˇe jsem nemusel ˇreˇsit ˇza´dn´e probl´emy. Knihovna Almende Timeline 5.7, kterou jsem pro realizaci t´eto aplikace pouˇzil je velmi dobˇre navrˇzen´a a umoˇzn ˇuje automatick´e shlukov´an´ı vˇetˇs´ıho poˇctu znaˇcek na ˇcasov´e ose. Shlukov´an´ı funguje obdobnˇe jako implementovan´e ˇreˇsen´ı pro geografickou vizualizaci popsan´e v t´eto pr´aci. Podle u ´rovnˇe zoomu a vzd´alenosti dat (velikost
7.3 Vizualizace ˇcasov´ ych dat
52
ˇcasov´eho intervalu) znaˇcky seskupuje do shluk˚ u. Aplikace komunikuje se serverem pouze v pˇr´ıpadˇe naˇcten´ı, nebo pˇri pouˇzit´ı filtru vybran´ ych kategori´ı. Na serverov´e stranˇe neprob´ıh´a ˇza´dn´e shlukov´an´ı, pouze parsov´an´ı dat z XML form´atu. Proto bych pro vylepˇsen´ı t´eto aplikace navrhoval zaslat rozparsovan´a data najednou tak jako je to doposud a realizovat filtrov´an´ı kategor´ı v JavaScriptu aby se odstranila zbyteˇcn´a z´atˇeˇz na serveru. Na rozd´ıl od mapov´ ych API dok´aˇze knihovna Almende Timeline zobrazovat na ˇcasov´e ose plynule 10 000 z´aznam˚ u [14]. Knihovna Almende Timeline se neust´ale vyv´ yj´ı a doporuˇcuji sledovat jej´ı webov´e str´anky, nebot’ mezi vytvoˇren´ım aplikace vyuˇz´ıvaj´ıc´ı tuto knihovnu a seps´an´ım tohoto textu vyˇsly dvˇe nov´e verze, kter´e pˇrin´aˇsej´ı nov´e funkce.
53
Kapitola 8 Z´ avˇ er ˇ e tiskov´e kancel´aˇre V poˇca´teˇcn´ı f´azi t´eto pr´ace jsem se vˇenoval anal´ yze dat Cesk´ a vhodn´ ych volnˇe dostupn´ ych n´astroj˚ u, kter´e by bylo moˇzn´e vyuˇz´ıt pro vizualizaci dat a to zejm´ena pro komerˇcn´ı pouˇzit´ı. V´ ysledkem t´eto f´aze je pˇrehled sedmi n´astroj˚ u spoleˇcnˇe se srovn´an´ım jejich v´ yhod a nev´ yhod. Na z´akladˇe t´eto anal´ yzy jsem vybral dva n´astroje. API Leaflet pro geografickou vizualizaci dat a knihovnu Almende Timeline pro zobrazen´ı dat z pohledu ˇcasu. Pomoc´ı tˇechto n´astroj˚ u jsem implementoval dvˇe webov´e aplikace klient-server, kter´e ˇ r˚ uzn´ ymi zp˚ usoby vizualizuj´ı data CTK typu ud´alosti a dokumenty. Prvn´ı aplikace zobrazuje data podle jejich pozice uveden´e v metadatech. Umoˇzn ˇuje zobrazen´ı dat na mapˇe z r˚ uzn´ ych pohled˚ u vˇcetnˇe kol´aˇcov´ ych graf˚ u (na z´akladˇe kategori´ı) a jejich v´ yvoje z pohledu ˇcasu. Uspokojivˇe ˇreˇs´ı probl´em zobrazen´ı vˇetˇs´ıho mnoˇzstv´ı dat vyuˇzit´ım shlukovac´ıho algoritmu. Shlukovac´ı algoritmus je vlastn´ı modifikac´ı existuj´ıc´ıho algoritmu [2]. Algoritmus shlukuje data na z´akladˇe jejich vzd´alenosti a u ´rovnˇe zoomu. Jeho pˇrednost´ı je rychlost shlukov´an´ı dat a kvalitn´ı reprezentace shluk˚ u. Druh´a samostatn´a aplikace zobrazuje data na ˇcasov´e ose. Probl´em zobrazen´ı vˇetˇs´ıho mnoˇzstv´ı dat v t´eto aplikaci ˇreˇs´ı pouˇzit´a knihovna Almende Timeline na klientsk´e stranˇe, kter´a umoˇzn ˇuje shlukov´an´ı dat. Ud´alosti na ˇcasov´e ose lze filtrovat podle kategori´ı, pˇriˇcemˇz pro kaˇzdou vybranou kategorii je vytvoˇrena nad ˇcasovou osou horizont´aln´ı vrstva obsahuj´ıc´ı ud´alosti z dan´e kategorie. D´ıky dobr´emu n´avrhu je takto implementovanou ˇcasovou ˇradu moˇzno zakomponovat do prvn´ı aplikace bez nutnosti zmˇen ve zdrojov´em k´odu.
54
Pˇ rehled zkratek API Application Programing Interface (aplikaˇcn´ı programovac´ı rozhran´ı) ˇ y Statistick´ ´ rad ˇ U ´ Cesk´ y Uˇ CS ˇ a Tiskov´a Kancel´aˇr ˇ CTK Cesk´ DOM Document Object Model (objektov´ y model dokumentu) EPD Europe’s Public Data (port´al poskytuj´ıc´ı veˇrejn´e datasety) GPS Global Positioning System (glob´aln´ı druˇzicov´ y polohov´ y syst´em) HTTP Hypertext Transfer Protocol (Komumikaˇcn´ı protokol pro v´ ymˇenu hyperm´edi´ı) IPTC International Press Telecommunication Council (mezin´arodn´ı organizace vyv´ıjej´ıc´ı technick´e stanadrdy pro v´ ymˇenu zpr´av) JAK JAvaScriptov´a Knihovna JSON JavaScript Object Notation (textov´ y form´at pro v´ ymˇenu dat) KPV Key-Value-Pair (dvojice kl´ıˇc-hodnota) ODL Open Database Licence (typ softwarov´e licence) OGC Open Geospatial Consorium (mezin´arodn´ı standardizaˇcn´ı organizace pro geografick´a data) URL Uniform Resource Locator (jednotn´ y lok´ator zdroj˚ u) WGS 84 World Geodetic System 1948 (svˇetov´ y geodetick´ y standard) WMS Web Map Service (webov´a mapov´a sluˇzba) WMTS Web Map Tile Service (webov´a mapov´a dlaˇzdicov´a sluˇzba) XML Extensible Markup Language (rozˇsiˇriteln´ y znaˇckovac´ı jazyk)
55
Literatura R Web Map Tile Service Implementation Standard, 2013. Dostupn´ [1] OpenGIS e z: http://portal.opengeospatial.org/files/?artifact_id=35326.
[11] The top seven alternatives to the Google Maps API [online]. 2013. [cit. 8. 3. 2013]. Dostupn´e z: http://www.netmagazine.com/features/ top-seven-alternatives-google-maps-api. [12] OpenGIS WMS protocol [online]. 2013. [cit. 7. 3. 2013]. Dostupn´e z: http: //www.demis.nl/home/pages/wms/docs/opengiswms.htm. [13] ALLAN, A. Thunderforest maps. http://www.thunderforest.com, 2013. [14] ALMENDE. Timeline. http://chap.almende.com/timeline, 2013. [15] CLOUDMADE. Leaflet API. http://leafletjs.com/, 2013. [16] GOOGLE. Google Maps API. https://developers.google.com/maps/, 2013.
Literatura
56
[17] GOOGLE. Gson: A Java library to convert JSON to Java object and vice-versa. https://code.google.com/p/google-gson/, 2013. [18] MAPY.CZ. Mapy API. http://api4.mapy.cz/, 2013. [19] MICROSOFT. Bing Maps. http://www.microsoft.com/maps/, 2013. [20] SEZNAM.CZ. JAK: JavaScriptov´a Knihovna. https://jak.seznam.cz, 2013. [21] SIMILE. Timeline. http://www.simile-widgets.org/timeline/, 2013. ˇ ˇ [22] CTK. Form´at NewsML CTK. Technick´ y popis, verze 1.0, 2007. [23] WWW.IPTC.ORG. IPTC Web NewsML. http://www.iptc.org/site/News Exchange Formats/NewsML 1/, 2013. [24] WWW.OPENGEOSPATIAL.ORG. OGC Implementation Standards, 2013. Dostupn´e z: http://www.opengeospatial.org/standards/is.
57
Pˇ r´ılohy
58
Pˇ r´ıloha A Struktura DVD Na pˇriloˇzen´em DVD se nach´az´ı n´asleduj´ıc´ı stromov´a struktura adres´aˇr˚ u: • adres´aˇr doc – adres´aˇr src – zdrojov´e LATEXov´e soubory t´eto pr´ace – adres´aˇr pdf – tato pr´ace v PDF form´atu • adres´aˇr vizualization – adres´aˇr s webov´ ymi aplikacemi a zdrojov´ ymi soubory aplikac´ı – adres´aˇr javadoc – adres´aˇr s javadoc dokumentac´ı serverov´e ˇca´sti – adres´aˇr lib – knihovny vyuˇz´ıvan´e serverovou ˇc´ast´ı aplikace ych ˇc´ast´ı aplikace – adres´aˇr src klient – zdrojov´e soubory klientsk´ – adres´aˇr src server – zdrojov´e soubory serverov´e ˇc´asti aplikace – adres´aˇr WebApplicationCTK – adres´aˇr s projektem aplikace pro v´ yvojov´e prostˇred´ı NetBeans – WebApplicationCTK.war – soubor s vytvoˇrenou webovou aplikac´ı
59
Pˇ r´ıloha B Struktura .war souboru aplikace • adres´aˇr leaflet – adres´aˇr s klientskou ˇca´st´ı aplikace vytvoˇrenou pomoc´ı API Leaflet • adres´aˇr META-INF – adres´aˇr s manifestem dan´eho .war souboru • adres´aˇr scripts – adres´aˇr se skripty (knihovnami), kter´e jsou spoleˇcn´e pro vˇsechny vytvoˇren´e klientsk´e aplikace • adres´aˇr timeline – adres´aˇr s klientskou ˇca´st´ı aplikace vytvoˇrenou pomoc´ı Almende Timeline • adres´aˇr WEB-INF – adres´aˇr s konfigurac´ı serverov´e ˇca´sti aplikace a jej´ımi pˇreloˇzen´ ymi tˇr´ıdami • adres´aˇr index – u ´vodn´ı str´anka aplikace
60
Pˇ r´ıloha C UML Diagram serverov´ eˇ c´ asti aplikace
61
Obr´azek C.1: UML diagram serverov´e ˇc´asti aplikace
62
Pˇ r´ıloha D Uˇ zivatelsk´ a pˇ r´ıruˇ cka Tato kapitola popisuje nahr´an´ı aplikace na server (deploy), jej´ı nutnou konfiguraci a ovl´ad´an´ı. Pˇredpokladem pro spr´avn´e fungov´an´ı aplikace je webov´ y server Apache Tomcat 6.0.18 (d´ale jen server), pod kter´ ym byla aplikace vyv´ıjena nebo jeho vyˇsˇs´ı verze.
D.1
Deploy aplikace
Aplikace se nach´az´ı na pˇriloˇzen´em DVD ve form´atu .war souboru. Pro deploy aplikace na server staˇc´ı zkop´ırovat soubor WebApplicationCTK.war do adres´aˇre pro webov´e aplikace, kde se s´am rozbal´ı. Defaultnˇe je tento adres´aˇr nastaven na $catalina home/webapps 1 . Definice toho adres´aˇre se nach´az´ı v souboru $catalina home/conf/server.xml, konkr´etnˇe se jedn´a o atribut appBase elementu Host.
D.2 D.2.1
Konfigurace Serverov´ aˇ c´ ast
Konfigurace serverov´e ˇc´asti se nach´az´ı v souboru WebApplicationCTK/WEBINF/web.xml. Serverov´a aplikace nevyˇzaduje ˇz´adnou dodateˇcnou konfiguraci pro ˇ demonstraci vytvoˇren´ ych aplikac´ı na testovac´ıch datech poskytnut´ ych CTK. ˇ V souboru web.xml je specifikov´an adres´aˇr, obsahuj´ıc´ı data CTK pro vizualizaci: <param−name>document root <param−value >data Jedin´a dalˇs´ı vˇec v konfiguraci serveru kter´a stoj´ı za zm´ınku, je nastaven´ı vhodn´e d´elky ˇzivotnosti sessions, aby zbyteˇcnˇe na serveru nezab´ıraly pamˇet’. 1
$catalina home - koˇrenov´ y adres´aˇr ve kter´em je nainstalovan´ y Tomcat
D.3 Pouˇzit´ı aplikace
D.2.2
63
Klientsk´ eˇ c´ asti
Klientsk´e ˇc´asti aplikace se konfiguruj´ı souborem v podadres´aˇri scripts/config.js dan´eho API. V kapitol´ach 6.5.3 a 6.4.3 jsou jednotliv´e parametry konfigurace detailnˇe pops´any.
D.3
Pouˇ zit´ı aplikace
Pokud je aplikace nahr´ana na webov´em serveru a je spuˇstˇen´ y, staˇc´ı do internetov´eho prohl´ıˇzeˇce zadat adresu serveru, spoleˇcnˇe s n´azvem vytvoˇren´e aplikace. Napˇr´ıklad: http://localhost:8084/WebApplicationCTK. Pot´e se zobraz´ı u ´vodn´ı str´anka (viz. ˇ obr´azek D.1, kde je na v´ ybˇer pˇet r˚ uzn´ ych dokument˚ u CTK a tˇri API. Na t´eto str´ance vybereme API, kter´e chceme pro vizualizaci pouˇz´ıt a dokument, kter´ y chceme vizualizovat. Tlaˇc´ıtkem Show se odeˇsou zvolen´e parametry na server, kter´ y n´as pot´e pˇresmˇeruje na str´anku ve kter´e je implnementovan´a vizualizace pomoc´ı vybran´eho API.
´ Obr´azek D.1: Uvodn´ ı str´anka aplikace Popis funkˇcnosti a ovl´ad´an´ı je pro jednotliv´a API rozeps´an v kapitol´ach 6.4.1 (pro API Leaflet) a 6.5.1 (Almende Timeline). V pˇr´ıpadˇe dlouh´e neˇcinnosti, se m˚ uˇze st´at ˇze na serverov´e stranˇe vypˇrˇs´ı timeout pro session dan´eho uˇzivatele. V takov´em pˇr´ıpadˇe je pˇri akci na klientsk´e stranˇe, kter´a vyˇzaduje komunikaci se serverem (napˇr. zmˇena zoomu pˇri vybran´em m´odu, ve kter´em prob´ıh´a shlukov´an´ı dat na stranˇe serveru) vyps´ano varov´an´ı a n´aslednˇe je str´anka pˇresmˇerov´ana zpˇet na u ´vodn´ı str´anku, kde lze znovu vybrat data pro vizualizaci.