ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA STAVEBNÍ
BAKALÁŘSKÁ PRÁCE
PRAHA 2014
Jan KLÍMA
ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA STAVEBNÍ STUDIJNÍ PROGRAM GEODÉZIE A KARTOGRAFIE OBOR GEOINFORMATIKA
BAKALÁŘSKÁ PRÁCE Využití Google Maps API pro mapovou aplikaci sportovních aktivit v Orlických horách
Vedoucí práce: Doc. Ing. Jiří Cajthaml, Ph.D. Katedra geomatiky
červen 2014
Jan KLÍMA
ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE Fakulta stavební Thákurova 7, 166 29 Praha 6
ZADÁNÍ
BAKALÁŘSKÉ PRÁCE
studijní program:
Geodézie a kartografie
studijní obor:
Geoinformatika
akademický rok:
2013/2014
Jméno a příjmení studenta: Jan Klíma Zadávající katedra:
K155 - Katedra geomatiky
Vedoucí bakalářské práce:
Doc. Ing. Jiří Cajthaml, Ph.D.
Název bakalářské práce:
Využití Google Maps API pro mapovou aplikaci sportovních aktivit v Orlických horách
Název bakalářské práce v anglickém jazyce
Usage of Google Maps API for web map application of sport activities in Orlické hory
Rámcový obsah bakalářské práce: Hlavním tématem této bakalářské práce je tvorba webové mapové aplikace s využitím Google Maps API a Google Earth API, které umožňují překrývat vlastní data nad mapovými podklady Googlu. Cílem je vytvoření interaktivní mapové aplikace, která by sloužila pro sportovní aktivity v Orlických horách. Datum zadání bakalářské práce:
17.2.2014
Termín odevzdání:
16.5.2014
(vyplňte poslední den výuky příslušného semestru)
Pokud student neodevzdal bakalářskou práci v určeném termínu, tuto skutečnost předem písemně zdůvodnil a omluva byla děkanem uznána, stanoví děkan studentovi náhradní termín odevzdání bakalářské práce. Pokud se však student řádně neomluvil nebo omluva nebyla děkanem uznána, může si student zapsat bakalářskou práci podruhé. Studentovi, který při opakovaném zápisu bakalářskou práci neodevzdal v určeném termínu a tuto skutečnost řádně neomluvil nebo omluva nebyla děkanem uznána, se ukončuje studium podle § 56 zákona o VŠ č. 111/1998. (SZŘ ČVUT čl. 21, odst. 4) Student bere na vědomí, že je povinen vypracovat bakalářskou práci samostatně, bez cizí pomoci, s výjimkou poskytnutých konzultací. Seznam použité literatury, jiných pramenů a jmen konzultantů je třeba uvést v bakalářské práci. ........................................................ vedoucí bakalářské práce Zadání bakalářské práce převzal dne: 17.2.2014
....................................................... vedoucí katedry ....................................................... student
Formulář nutno vyhotovit ve 3 výtiscích – 1x katedra, 1x student, 1x studijní odd. (zašle katedra) Nejpozději do konce 2. týdne výuky v semestru odešle katedra 1 kopii zadání BP na studijní oddělení a provede zápis údajů týkajících se BP do databáze KOS.
Anotace Tato bakal´aˇrsk´a pr´ace se zab´ yv´a n´avrhem a realizac´ı webov´e mapov´e aplikace, kter´a by v budoucnu mohla slouˇzit pro pl´anov´an´ı sportovn´ıch a dalˇs´ıch volnoˇcasov´ ych aktivit v Or´ lick´ ych hor´ach. Uvodn´ ı ˇc´ast je zamˇeˇrena na struˇcn´e sezn´amen´ı se spoleˇcnost´ı Google a jej´ımi mapov´ ymi sluˇzbami Google Maps a Google Earth. V druh´e ˇc´asti se pˇredloˇzen´a pr´ace vˇenuje podrobnˇejˇs´ımu popisu rozhran´ı Google Maps JavaScript API v3, pomoc´ı kter´eho byl vytvoˇren z´aklad aplikace. N´asleduj´ıc´ı ˇc´ast zahrnuje praktick´e pˇr´ıklady vyuˇzit´ı rozhran´ı Maps API a tvorbu grafick´e podoby aplikace s pouˇzit´ım programovac´ıch jazyk˚ u HTML, CSS a JavaScript. Souˇc´ast´ı pr´ace je i kapitola popisuj´ıc´ı moˇznosti aplikace z pohledu bˇeˇzn´eho uˇzivatele.
Kl´ıˇ cov´ a slova Google Maps API, Google Earth API, webov´a mapov´a aplikace, interaktivn´ı mapa, mashup
Annotation This bachelor thesis describes the draft and implementation of web mapping application, which could be used in the future for planning of sports and other leisure activities in the Eagle Mountains. The first part is focused on the brief introduction of Google and its mapping services as Google Maps and Google Earth. In the second part, this thesis deals with a more detailed description of the Google Maps JavaScript API v3, by which the base of application was created. The following section includes practical examples of the used Maps API and the creation of graphic design applications, by using programming languages HTML, CSS and JavaScript. The paper also includes a chapter describing the application possibilities from the perspective of an average user.
Key words Google Maps API, Google Earth API, web mapping application, interactive map, mashup
Prohl´ aˇ sen´ı Prohlaˇsuji, ˇze jsem pˇredloˇzenou bakal´aˇrskou pr´aci na t´ema Vyuˇzit´ı Google Maps pro ” mapovou aplikaci sportovn´ıch aktivit v Orlick´ ych hor´ach“ vypracoval samostatnˇe pod veden´ım Doc. Ing. Jiˇr´ıho Cajthamla, Ph.D. Pouˇzitou literaturu a podkladov´e materi´aly uv´ad´ım v seznamu zdroj˚ u na konci tohoto dokumentu. V Praze dne
............
........................ (podpis autora)
Podˇ ekov´ an´ı Na tomto m´ıstˇe bych chtˇel podˇekovat vedouc´ımu bakal´aˇrsk´e pr´ace Doc. Ing. Jiˇr´ımu Cajthamlovi, Ph.D. za odborn´e veden´ı pr´ace a za podporu a trpˇelivost pˇri jej´ım vytv´aˇren´ı. Dˇekuji tak´e Ing. Janu Langrovi ze spoleˇcnosti T-Mapy spol. s.r.o. a vydavatelstv´ı SHOCart za poskytnut´a data. R´ad bych podˇekoval tak´e sv´e rodinˇe, vˇsem bl´ızk´ ym a pˇr´atel˚ um, kteˇr´ı mˇe pˇri vytv´aˇren´ı t´eto pr´ace podpoˇrili, a bez jejichˇz pomoci by nebylo moˇzn´e pr´aci dokonˇcit.
Obsah ´ Uvod 1 Google 1.1 Google Maps a Google Earth . 1.1.1 Spoleˇcn´a historie . . . . 1.1.2 Zdroje dat . . . . . . . . 1.1.3 Kartografick´e zobrazen´ı . 1.1.4 Souˇradnicov´ y syst´em . .
1
. . . . .
2 Vyuˇ zit´ı Google Maps API v3 ´ 2.1 Uvod do JavaScriptu . . . . . . . 2.2 Vloˇzen´ı mapy na str´anku . . . . . 2.2.1 Rozbor k´odu . . . . . . . 2.2.2 Adres´aˇrov´a struktura . . . 2.2.3 Mobiln´ı zaˇr´ızen´ı . . . . . . 2.3 Nastaven´ı uˇzivatelsk´eho rozhran´ı 2.3.1 Pozice objektu na mapˇe . 2.3.2 Metody tˇr´ıdy Map . . . . 2.4 Vlastn´ı styl mapy . . . . . . . . . 2.5 Pˇrid´an´ı pˇrekryvn´e vrstvy . . . . . 2.5.1 Vrstva KML a GeoRSS . . 2.5.2 Dynamick´e tabulky . . . . 2.5.3 Dalˇs´ı vrstvy . . . . . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
3 . 5 . 7 . 8 . 10 . 11
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
12 13 14 16 18 20 20 23 24 26 28 28 28 29
3 Realizace aplikace 3.1 Specifikace a historie HTML . . . . 3.2 HTML5 a Geolocation API . . . . 3.2.1 Zjiˇstˇen´ı polohy . . . . . . . 3.2.2 Aplikace lokalizace . . . . . 3.2.3 Pouˇzit´ı s Google Maps API 3.3 Vzhled str´anky . . . . . . . . . . . 3.4 JavaScript a knihovna jQuery . . . 3.4.1 Pouˇzit´ı knihovny jQuery . . 3.4.2 Kalendar plugin . . . . . . . 3.5 Pˇr´ıprava a import turistick´ ych tras ´ 3.5.1 Uprava dat . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
31 31 32 33 34 35 37 38 38 39 40 40
i
3.6
3.7
3.5.2 Publikaˇcn´ı sluˇzby ArcGIS Serveru Virtu´aln´ı prohl´ıdka a Google Earth API 3.6.1 Vytvoˇren´ı okna s prohl´ıdkou . . . 3.6.2 Zobrazen´ı prohl´ıdek v mapˇe . . . Testov´an´ı aplikace . . . . . . . . . . . . .
4 Aplikace z pohledu bˇ eˇ zn´ eho uˇ zivatele 4.1 Sezn´amen´ı se s uˇzivatelsk´ ym rozhran´ım 4.2 Sledov´an´ı polohy . . . . . . . . . . . . 4.3 Vyhled´avac´ı pole . . . . . . . . . . . . 4.4 Pˇrep´ın´an´ı vrstev . . . . . . . . . . . . 4.4.1 Virtu´aln´ı prohl´ıdky . . . . . . . 4.5 Kalend´aˇr akc´ı . . . . . . . . . . . . . .
. . . . . .
a . . . .
Google Maps API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
41 42 43 44 46
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
47 47 48 50 50 52 53
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
Z´ avˇ er
54
Seznam pouˇ zit´ e literatury
55
A Elektronick´ e pˇ r´ılohy
58
ii
Seznam obr´ azk˚ u 1.1 1.2 1.3 1.4 1.5 1.6 1.7
Sluˇzby poskytovan´e Googlem . . . . . Desktopov´a aplikace Google Earth . . Online aplikace Google maps . . . . . . Velitelstv´ı NATO v Nizozem´ı . . . . . Aktualizace sn´ımk˚ u ze dne 21.1.2014 . Mercatorovo zobrazen´ı . . . . . . . . . Souˇradnice mapov´ ych dlaˇzdic na u ´rovni
. . . . . . . . . . . . 2.
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. 4 . 6 . 6 . 9 . 9 . 10 . 11
2.1 2.2 2.3 2.4 2.5 2.6
Praha - zoom level 0, 10 a 17 . . . . . Pˇr´ıklad adres´aˇrov´e struktury . . . . . . Z´akladn´ı mapa . . . . . . . . . . . . . Horizontal bar a Dropdown menu . . . ZoomControlStyle Large a Small . . . Styled Map Wizard - vlastn´ı styl mapy
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
18 18 20 22 23 27
3.1 3.2 3.3 3.4 3.5 3.6
Povolen´ı sledov´an´ı polohy v prohl´ıˇzeˇci Google Chrome . Sch´ema Geolocation API . . . . . . . . . . . . . . . . . Vizualizace polohy a jej´ı pˇresnosti . . . . . . . . . . . . Transformace souˇradnic - ArcGIS Project Tool . . . . . Posun u soubˇeˇzn´ ych tras . . . . . . . . . . . . . . . . . N´astroj v´ yvoj´aˇre Google Chrome . . . . . . . . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
33 35 37 41 42 46
4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.10
Hlavn´ı okno aplikace . . . . . . . . . . . Sledov´an´ı polohy . . . . . . . . . . . . . 3D model Zemˇe . . . . . . . . . . . . . . Vyhled´av´an´ı m´ıst a adres . . . . . . . . . Uk´azka turistick´ ych a cyklistick´ ych tras . Lyˇzaˇrsk´e are´aly, bˇeˇzkaˇrsk´e tratˇe, poˇcas´ı a Google StreetView . . . . . . . . . . . . V´ ybˇer virtu´aln´ı prohl´ıdky . . . . . . . . Virtu´aln´ı prohl´ıdka . . . . . . . . . . . . Kalend´aˇr akc´ı . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . dopravn´ı info nad zimn´ı mapou . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . .
48 49 49 50 51 51 51 52 52 53
iii
. . . . . .
Seznam tabulek 2.1 2.2 2.3 2.4 2.5 2.6 2.7
Rozˇsiˇruj´ıc´ı API . . . . . . . . . Limity pro vyuˇzit´ı Google Maps Nastaven´ı ovl´adac´ıch prvk˚ u . . Metody pro zmˇenu nastaven´ı . . Ud´alosti . . . . . . . . . . . . . FeaturesTypes . . . . . . . . . . ElementTypes . . . . . . . . . .
. . . . . . JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
iv
. . . API . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
12 14 22 25 25 26 26
´ UVOD Posledn´ı desetilet´ı pˇrineslo do svˇeta internetu celou ˇradu novinek a nov´ ych technologick´ ych ˇreˇsen´ı, kter´e znaˇcnou mˇerou ovlivnily dalˇs´ı trend tohoto modern´ıho odvˇetv´ı. Dramatick´ y v´ yvoj zaznamenaly a st´ale zaznamen´avaj´ı pˇredevˇs´ım webov´e aplikace a sluˇzby, kter´e jsou schopny plnˇe nahradit bˇeˇzn´e programy instalovan´e na lok´aln´ıch poˇc´ıtaˇc´ıch. Na poli webov´ ych sluˇzeb p˚ usob´ı mnoho spoleˇcnost´ı, ale pravdˇepodobnˇeji tou nejzn´amˇejˇs´ı je americk´a spoleˇcnost Google. Tato spoleˇcnost se proslavila internetov´ ym vyhledavaˇcem a pozdˇeji vlastn´ı webovou mapovou aplikac´ı Google Maps. Tyto internetov´e mapy si bˇehem kr´atk´e doby z´ıskaly oblibu mezi bˇeˇzn´ ymi uˇzivateli, ale tak´e v´ yvoj´aˇri, kteˇr´ı pomoc´ı veˇrejn´eho rozhran´ı mohou vytv´aˇret rozmanit´e mapov´e aplikace. Mapovou aplikaci jsem se rozhodl vytvoˇrit jednak proto, ˇze mˇe samotn´e vytv´aˇren´ı internetov´ ych map vˇzdy zaj´ımalo a tak´e proto, ˇze jsem se chtˇel odliˇsit od bakal´aˇrsk´ ych prac´ı, kter´e danou problematiku ˇreˇs´ı sp´ıˇse teoreticky. Hlavn´ım c´ılem bakal´aˇrsk´e pr´ace je sezn´amit se s rozhran´ım Google Maps JavaScript API a s jeho pomoc´ı vytvoˇrit webovou mapovou aplikaci, kter´a by v budoucnu mohla slouˇzit pro pl´anov´an´ı sportovn´ıch a dalˇs´ıch volnoˇcasov´ ych aktivit v Orlick´ ych hor´ach. ’ Souˇc´ast´ı aplikace by mˇela b´ yt s´ıt znaˇcen´ ych pˇeˇs´ıch, cyklistick´ ych a bˇeˇzkaˇrsk´ ych tras, ale tak´e nejv´ yznamnˇejˇs´ı lyˇzaˇrsk´e are´aly v t´eto lokalitˇe. Od podobn´ ych projekt˚ u by se tato aplikace mˇela odliˇsit vysokou m´ırou interaktivity a integrovan´ ymi virtu´aln´ımi prohl´ıdkami tras ve 3D. Prvn´ı kapitola se bude vˇenovat kr´atk´emu sezn´amen´ı se spoleˇcnost´ı Google, jej´ı historii a tak´e pˇrehledn´emu souhrnu nejzn´amˇejˇs´ıch sluˇzeb. Podrobnˇeji se zamˇeˇr´ım na mapov´e sluˇzby Google Maps a Google Earth. Hlavn´ı d˚ uraz budu kl´ast na p˚ uvod podkladov´ ych map, pouˇzit´e kartografick´e zobrazen´ı a souˇradnicov´e syst´emy. Ve druh´e kapitole se pokus´ım objasnit relativnˇe nov´ y pojem API a jeho spojen´ı s Google Maps. D´ale pop´ıˇsi alespoˇ n z´akladn´ı principy programovac´ıho jazyka JavaScript, kter´ y knihovna Google Maps API vyuˇz´ıv´a. Na praktick´em pˇr´ıkladu pˇredvedu jednoduch´e vloˇzen´ı mapy na str´anku spolu s podrobn´ ym rozborem zdrojov´eho k´odu. Pokus´ım se tak´e vytvoˇrit vlastn´ı styl mapy. Tˇret´ı kapitola se bude zab´ yvat praktickou tvorbou webov´e aplikace s vyuˇzit´ım programovac´ıch jazyk˚ u HTML, CSS a knihovny jQuery. Velk´a ˇc´ast bude tak´e patˇrit sezn´amen´ı s novou specifikac´ı, kter´a dovoluje sledovat aktu´aln´ı polohu zaˇr´ızen´ı. Zamˇeˇr´ım se na zp˚ usoby zjiˇstˇen´ı polohy z pohledu jejich pˇresnosti, ale tak´e na zaˇclenˇen´ı t´eto sluˇzby do vlastn´ı aplikace. D´ale pop´ıˇsi u ´pravu vektorov´ ych dat, kter´e pro u ´ˇcely t´eto bakal´aˇrsk´e pr´ace poskytlo kartografick´e vydavatelstv´ı SHOCart ve spolupr´aci se spoleˇcnost´ı T-Mapy. Ve ˇctvrt´e kapitole se budu vˇenovat popisu aplikace pro bˇeˇzn´eho uˇzivatele, kde uˇzivateli
1
ˇ CVUT v Praze poskytnu n´avod jak aplikaci ovl´adat a jak vyuˇz´ıt vˇsechny jej´ı moˇznosti. Kromˇe z´akladn´ıch funkc´ı pro pr´aci s mapou by mˇela aplikace obsahovat funkce vyhled´av´an´ı ˇc´ı sledov´an´ı polohy.
2
KAPITOLA
Google Americk´a spoleˇcnost Google se s´ıdlem v Silicon Valley je pˇredn´ım hr´aˇcem na trhu s informaˇcn´ımi technologiemi. Od ostatn´ıch firem v Silicon Valley se liˇs´ı pˇredevˇs´ım rychlost´ı sv´eho r˚ ustu a vysok´ ymi ambicemi zorganizovat informace z cel´eho svˇeta a poskytovat je sv´ ym uˇzivatel˚ um. Zakladatel´e spoleˇcnosti Sergey Brin a Larry Page, studenti postgradu´aln´ıho studia na Stanfordsk´e Universitˇe, zaˇc´ınaj´ı v roce 1996 pracovat na spoleˇcn´em projektu webov´eho vyhledavaˇce s n´azvem BackRub, kter´ y se aˇz do roku 1997 pouˇz´ıv´a na Stanfordsk´ ych serverech. Pozdˇeji tento vyhledavaˇc pˇrejmenov´avaj´ı na Google. N´azev pˇredstavuje vysok´e ambice zakladatel˚ u - vznikl z pˇrepisu matematick´eho oznaˇcen´ı googol“, kter´ y oznaˇcuje ” nesm´ırnˇe velik´e ˇc´ıslo zn´azornˇen´e jako posloupnost jedniˇcky a sto nul. Smˇel´ ych pl´an˚ u student˚ u si vˇsimne spoluzakladatel spoleˇcnosti Sun Andy Bechtolsheim a vypisuje ˇsek v hodnotˇe 100 000 USD spoleˇcnosti Google Inc., kter´ y umoˇzn´ı spoleˇcnosti raketov´ y start. Spoleˇcnost Google Inc. se 4. z´aˇr´ı 1998 registruje ve st´atˇe Kalifornie a o p´ar mˇes´ıc˚ u pozdˇeji jiˇz odpov´ı 10 tis´ıc dotaz˚ u dennˇe. To neujde pozornosti investor˚ ua odborn´ ych ˇcasopis˚ u, jako je PC Magazine, kter´ y vyhledavaˇc zaˇrad´ı mezi 100 nejlepˇs´ıch web˚ u. Google tak zaˇz´ıv´a explozivn´ı n´ar˚ ust dotaz˚ u - jiˇz v roce 1999 odpov´ı v´ıce jak 3 miliony dotaz˚ u dennˇe. [26] D´ıky nov´ ym technologi´ım, nab´ızen´ ym sluˇzb´am a vzr˚ ustaj´ıc´ımu poˇctu uˇzivatel˚ u se Google dok´azal prosadit i pˇres velikou konkurenci a mohl si zaˇc´ıt budovat dominantn´ı pozici nejen na Americk´em trhu. V souˇcasn´e dobˇe je Google celosvˇetovˇe nejrozˇs´ıˇrenˇejˇs´ım vyhledavaˇcem s mnohojazyˇcn´ ym uˇzivatelsk´ ym prostˇred´ım. To tak´e dokazuj´ı souhrnn´e statistiky pouˇz´ıvanosti vyhledavaˇc˚ u za rok 2013, kde se vyhledavaˇc Google um´ıstil na prvn´ım m´ıstˇe s velikou pˇrevahou 90%. Druh´e a tˇret´ı m´ısto obsadili vyhledavaˇce Bing a Yahoo!, kter´e maj´ı shodnˇe 3%. Zbyl´a 4% procenta pˇripadaj´ı m´enˇe rozˇs´ıˇren´ ym vyhledavaˇc˚ um, jako je napˇr´ıklad ˇc´ınsk´ y vyhledavaˇc Baidu a dalˇs´ı. [25]
Sluˇ zby poskytovan´ e Googlem Bˇehem sv´ ych zaˇca´tk˚ u se Google musel pot´ ykat s konkurenˇcn´ımi spoleˇcnostmi, nab´ızej´ıc´ımi mimo internetov´ ych vyhledavaˇc˚ u i jin´e webov´e sluˇzby, vˇcetnˇe emailov´ ych 3
1
ˇ CVUT v Praze
1 Google
klient˚ u. To samozˇrejmˇe zp˚ usobilo odchod n´avˇstˇevn´ık˚ u z webov´ ych str´anek Googlu. Mezi tyto spoleˇcnosti patˇrili i takov´ı softwarov´ı velik´ani jako Yahoo! nebo Microsoft. Google se tak odkloˇ nuje od sv´eho p˚ uvodn´ıho zamˇeˇren´ı pouze na webov´e vyhled´av´an´ı a zaˇc´ın´a investovat pen´ıze z´ıskan´e z c´ılen´ ych reklam do webov´ ych sluˇzeb, oznaˇcovan´ ych jako Software as a Service. Prvn´ı takovou vlaˇstovkou bylo vytvoˇren´ı emailov´eho klienta, pozdˇeji pojmenovan´eho jako Gmail. Google pˇriˇsel hned s nˇekolika novinkami. Podaˇrilo se mu spojit algoritmy na vyhled´av´an´ı c´ılen´ ych reklam v z´avislosti na textu emailov´e zpr´avy, k pˇrehlednˇejˇs´ımu vyhled´av´an´ı pouˇzil s´ılu sv´eho vyhledavaˇce a sv´ ym z´akazn´ık˚ um poskytl prostor 1 GB, s moˇznost´ı zakoupen´ı vˇetˇs´ı kapacity. V souˇcasn´e dobˇe nab´ız´ı kapacitu 15 GB, kter´a je vˇsak sd´ılena spolu s prostorem pro fotografie na soci´aln´ı s´ıti Google+ a dokumenty na Google Disk. [26] Google Docs (Dokumenty Google) je dalˇs´ı webov´a sluˇzba umoˇzn ˇuj´ıc´ı online/offline vytv´aˇren´ı, editov´an´ı a prohl´ıˇzen´ı dokument˚ u, tabulek nebo prezentac´ı. Vˇsechny tyto dokumenty jsou uloˇzeny na serverech Googlu (tzv. cloud) a pˇr´ıstup k nim je moˇzn´ y z jak´ehokoli zaˇr´ızen´ı, bez ohledu na operaˇcn´ı syst´em. Nutn´e je pouze pˇripojen´ı k internetu a v pˇr´ıpadˇe editace podporovan´ y internetov´ y prohl´ıˇzeˇc. V´ yhodou je st´al´a aktu´alnost ’ softwaru, kter´ y nen´ı nutn´e instalovat do poˇc´ıtaˇce, nebot bˇeˇz´ı na centralizovan´em serveru. To dˇel´a pˇredevˇs´ım vr´asky na ˇcele spoleˇcnosti Microsoft a jej´ımu kancel´aˇrsk´emu bal´ıku Microsoft Office. [12] Dalˇs´ı rozv´ıjej´ıc´ı sluˇzbou jsou Google Maps (Mapy Google), poskytuj´ıc´ı mapov´e podklady kaˇzd´eho koutu naˇs´ı planety, a aplikace Google Earth, kter´a nab´ız´ı souvisl´e zobrazen´ı satelitn´ıch nebo leteck´ ych sn´ımk˚ u na virtu´aln´ım gl´obu. Tˇemito sluˇzbami se budu na n´asleduj´ıc´ıch str´ank´ach textu zab´ yvat podrobnˇeji. Jak je vidˇet, Google je bl´ızko naplnˇen´ı svoji vize z´ıskat a zorganizovat vˇsechny informace svˇeta. Je vˇsak ot´azkou, jestli je to v˚ ubec spr´avn´e, aby jedna spoleˇcnost operovala s takov´ ym mnoˇzstv´ım informac´ı a znalost´ı o n´as.
Obr´azek 1.1: Sluˇzby poskytovan´e Googlem
4
ˇ CVUT v Praze
1.1
1 Google
Google Maps a Google Earth
Google Maps a Google Earth jsou velmi podobn´e aplikace poskytuj´ıc´ı interaktivn´ı mapov´e a satelitn´ı sn´ımky. N´ıˇze v t´eto kapitole jsou pops´any jednotliv´e aplikace samostatnˇe. Aplikace Google Earth poskytuje prostˇrednictv´ım virtu´aln´ıho gl´obusu realistick´e zobrazen´ı svˇeta a moˇznost cestovat po cel´em svˇetˇe, prohl´ıˇzet si satelitn´ı sn´ımky ve vysok´em rozliˇsen´ı nebo se proch´azet mˇestem s 3D budovami a ter´enem. D´ıky reˇzimu Oce´an v Google Earth je moˇzn´e nahl´ednout pod hladinu oce´an˚ u a prozkoumat reli´ef moˇrsk´eho dna. Dalˇs´ı reˇzimy Obloha, Mˇes´ıc a Mars umoˇzn ˇuj´ı prozkoumat i m´ısta mimo naˇsi planetu. Google Earth je distribuov´an v podobˇe desktopov´e aplikace dostupn´e pro nejrozˇs´ıˇrenˇejˇs´ı operaˇcn´ı syst´emy jako je Windows, Mac a Linux. Jsou poskytov´any hned tˇri verze t´eto aplikace. Z´akladn´ı verzi pro bˇeˇzn´e uˇzivatele je moˇzn´e bezplatnˇe st´ahnout na ofici´aln´ıch str´ank´ach produktu. Pro profesion´aln´ı pouˇzit´ı je vˇsak vhodnˇejˇs´ı pouˇz´ıt verzi Pro, kter´a oproti bezplatn´e verzi nab´ız´ı speci´aln´ı funkce navrˇzen´e pro firemn´ı uˇzivatele. Tˇret´ı verzi Enterprise ocen´ı hlavnˇe firmy a organizace, kter´e potˇrebuj´ı vizualizovat velk´e mnoˇzstv´ı dat. Dostupn´a je tak´e verze aplikace pro mobiln´ı zaˇr´ızen´ı pouˇz´ıvaj´ıc´ı platformu Android a iOS nebo rozˇsiˇruj´ıc´ı plugin pro webov´e prohl´ıˇzeˇce, d´ıky kter´emu je moˇzn´e zobrazit geografick´a data pˇr´ımo na webov´ ych str´ank´ach. Pˇri pˇrechodu na libovolnou str´anku obsahuj´ıc´ı rozhran´ı Google Earth v´am webov´ y prohl´ıˇzeˇc automaticky nab´ıdne instalaci, pˇr´ıpadnˇe aktualizaci tohoto pluginu. Plugin Google Earth je v souˇcasn´e dobˇe podporov´an operaˇcn´ımi syst´emy a prohl´ıˇzeˇci uveden´ ymi n´ıˇze. Data jsou beze zmˇeny pˇrevzata z ofici´aln´ıch str´anek podpory tohoto pluginu. [13] 1. Microsoft Windows (Windows XP, Windows Vista a Windows 7) (a) Google Chrome 5.0 nebo novˇejˇs´ı (b) Internet Explorer 7 nebo novˇejˇs´ı (32 bit˚ u) (c) Firefox 2.0 nebo novˇejˇs´ı (d) Flock 1.0 nebo novˇejˇs´ı 2. Apple Mac OS X 10.5.0 a vyˇsˇs´ı (pouze Intel) (a) Google Chrome 5.0 nebo novˇejˇs´ı (b) Safari 3.1 nebo novˇejˇs´ı (c) Firefox 3.0 nebo novˇejˇs´ı V map´ach Google je moˇzn´e vyhled´avat, proch´azet se ulicemi a pl´anovat trasy po cel´em svˇetˇe. Pro vyhled´av´an´ı slouˇz´ı vyhled´avac´ı pole, kter´e umoˇzn´ı zobrazit na mapˇe adresy, obchody, restaurace a mnoho dalˇs´ıho vˇcetnˇe podrobn´ ych informac´ı. Pro nˇekter´a 5
ˇ CVUT v Praze
1 Google
Obr´azek 1.2: Desktopov´a aplikace Google Earth vˇetˇs´ı mˇesta a oblasti svˇeta je k dispozici mapov´a vrstva s informac´ı o aktu´aln´ı dopravn´ı ˇ e Republice situaci, vrstva veˇrejn´e dopravy nebo vrstva s cyklistick´ ymi trasami. V Cesk´ jsou informace o dopravˇe dostupn´e pro nˇekter´e hlavn´ı silniˇcn´ı tahy a d´alnice, zat´ımco informace a vyhled´av´an´ı spoj˚ u ve veˇrejn´e dopravˇe jsou prozat´ım dostupn´e pouze v hlavn´ım mˇestˇe. Pro pouˇzit´ı Google Maps je nutn´e m´ıt nainstalovan´ y pouze podporovan´ y internetov´ y prohl´ıˇzeˇc a dostateˇcnˇe rychl´e internetov´e pˇripojen´ı pro stahov´an´ı mapov´ ych podklad˚ u. Ty jsou pro u ´sporu velikosti datov´eho pˇrenosu uloˇzeny v podobˇe mapov´ ych dlaˇzdic pro kaˇzdou u ´roveˇ n pˇribl´ıˇzen´ı. Nen´ı tedy naˇc´ıt´ana cel´a mapa, ale pouze dlaˇzdice, kter´e jsou nutn´e pro zobrazen´ı poˇzadovan´eho u ´zem´ı v z´avislosti na pˇribl´ıˇzen´ı. [14]
Obr´azek 1.3: Online aplikace Google maps
6
ˇ CVUT v Praze
1.1.1
1 Google
Spoleˇ cn´ a historie
Google musel reagovat pˇredevˇs´ım na technologick´ y v´ yvoj konkurenˇcn´ı spoleˇcnosti Yahoo!, kter´a sv´ ym uˇzivatel˚ um nab´ıdla online mapov´e sluˇzby MapQuest. Proto Google vytvoˇril malou skupinu sv´ ych inˇzen´ yr˚ u, kteˇr´ı mˇeli vyvinout vlastn´ı sluˇzbu pro online poskytov´an´ı map a vyhled´av´an´ı cest, pozdˇeji zn´amou jako Google Maps. Nedaleko s´ıdla spoleˇcnosti v Silicon Valley vznikla v roce 2000 bez povˇsimnut´ı mal´a firma Keyhole, kter´a mˇela do budoucnosti velmi smˇel´e pl´any. Spoleˇcnost Keyhole pl´anovala ˇsirok´e veˇrejnosti zpˇr´ıstupnit online sluˇzbu obsahuj´ıc´ı satelitn´ı sn´ımky z´ıskan´e od soukrom´ ych spoleˇcnost´ı, kter´e mˇely povolen´ı vl´ady USA k vys´ıl´an´ı druˇzic, nesouc´ı zaˇr´ızen´ı pro poˇrizov´an´ı fotografi´ı Zemˇe ve vysok´em rozliˇsen´ı. Soubor tˇechto sn´ımk˚ u pokr´ yvaj´ıc´ı 2 celou pevninu, kter´a m´a rozlohu 149 000 000 km , zabral miliony gigabajt˚ u. Sluˇzba mˇela b´ yt zaloˇzena na pˇredplatn´em a sv´ ym uˇzivatel˚ um mˇela nab´ıdnout trojrozmˇernou nepˇreruˇsovanou mozaiku satelitn´ıch sn´ımk˚ u. To vˇsak bylo velmi n´aroˇcnˇe jak na v´ ypoˇcetn´ı v´ ykon osobn´ıch poˇc´ıtaˇc˚ u, tak na rychlost internetov´eho pˇripojen´ı, kter´e v t´e dobˇe bylo pˇr´ıliˇs pomal´e pro pˇrenos takov´eho objemu dat. Rozmach internetu a nov´a technologie spoleˇcnosti Keyhole, kter´a zobrazovala jeden sn´ımek, ale z´aroveˇ n naˇc´ıtala sn´ımky soused´ıc´ı, umoˇzn ˇovaly plynul´ y pˇrechod mezi sn´ımky. Prvn´ı lid´e, mimo zamˇestnance Pentagonu a spoleˇcnosti Keyhole, si tak mohli uˇz´ıt pˇrelet“ nad satelitn´ımi sn´ımky. Roˇcn´ı ” pˇredplatn´e 20 000 Kˇc a investice do v´ ykonn´ ych osobn´ıch poˇc´ıtaˇc˚ u vˇsak vˇetˇsinu uˇzivatel˚ u odradilo. D´ıky st´ale se zlepˇsuj´ıc´ımu v´ ykonu osobn´ıch poˇc´ıtaˇc˚ u a reklamˇe televizn´ı stanice CNN, kter´a vyuˇz´ıvala software spoleˇcnosti Keyhole Earth Viewer k pˇribl´ıˇzen´ı se k m´ıstu, kde se odehr´avaly zpr´avy, sluˇzba pˇrit´ahla v roce 2003 z´ajem potencion´aln´ıch z´akazn´ık˚ u. Tˇemi vˇsak byly pˇrev´aˇznˇe realitn´ı makl´eˇri, vl´adn´ı agentury a inˇzen´ yrsk´e firmy. To vˇsak bylo st´ale daleko od myˇslenky prod´avat a poskytovat online sluˇzbu veˇrejn´ ym z´akazn´ık˚ um. Sergey Brin, spoluzakladatel spoleˇcnosti Google, v roce 2004 narazil na malou spoleˇcnost nab´ızej´ıc´ı poutav´ y z´aˇzitek v podobˇe pˇreletu Zemˇe, kter´a byla tvoˇrena satelitn´ımi sn´ımky. Ihned se podˇelil s v´ ykonn´ ym t´ ymem spoleˇcnosti a sch˚ uzi pˇreruˇsil uk´azkou, kter´a vˇsechny nadchla - na sv´em laptopu sletˇel“ z v´ yˇsky aˇz k dom˚ um kaˇzd´eho z nich. ” Kdyˇz t´ehoˇz roku Google pozval z´astupce spoleˇcnosti Keyhole na n´avˇstˇevu a prezentaci jejich sluˇzby, nech´apali, co m˚ uˇze m´ıt internetov´ y gigant spoleˇcn´eho s jejich sluˇzbou. V Googlu vˇsak mˇeli pˇrevratnou a vizion´aˇrskou myˇslenku. Vyuˇz´ıt mapy a satelitn´ı sn´ımky jako n´astroj pro zobrazen´ı a uspoˇr´ad´an´ı vˇsech informac´ı. Kdyˇz o p´ar let pozdˇeji John Hanke, ˇreditel spoleˇcnosti Keyhole, vzpom´ınal na ambici´ozn´ı pl´an Googlu, neubr´anil se koment´aˇre: To nebyl jen z´avan ˇcerstv´eho vzduchu, to byla pˇr´ımo bomba! Mysleli jsme, ˇze ” bud’ blouzn´ı, nebo jsou skuteˇcn´ı vizion´ aˇri.“. K dokonˇcen´ı koupˇe spoleˇcnosti Keyhole doˇslo 27. ˇr´ıjna 2004. V u ´noru 2005 vydal Google prohl´aˇsen´ı o spuˇstˇen´ı online mapov´e aplikace Google Maps. Prvn´ı verze obsahovala pouze mapy ulic a moˇznost pl´anov´an´ı cest, ale jeˇstˇe nebyla integrov´ana moˇznost zobrazit satelitn´ı sn´ımky spoleˇcnosti Keyhole jako spodn´ı vrstvu. Pˇrinesla tak´e novinku v podobˇe moˇznosti posouvat mapu kter´ ymkoliv smˇerem a zobrazit pˇril´ehaj´ıc´ı oblasti bez nutnosti pˇrekreslen´ı cel´e str´anky. Technologii pˇrevzala z online
7
ˇ CVUT v Praze
1 Google
sluˇzby spoleˇcnosti Keyhole - z´aroveˇ n se stahovala i data nutn´a pro rozˇs´ıˇren´ı pr´avˇe zobrazen´e mapy. Tehdejˇs´ı internetov´e prohl´ıˇzeˇce nebyly schopny zpracov´avat obr´azky s velmi vysok´ ym rozliˇsen´ım, kter´e nab´ızely satelitn´ı sn´ımky. Proto si uˇzivatel´e museli nainstalovat speci´aln´ı software Google Earth, kter´ y vznikl pouze pˇrejmenov´an´ım aplikace EarthViewer a doplnˇen´ım satelitn´ıch sn´ımk˚ u pokr´ yvaj´ıc´ı cel´ y svˇet. Aby doˇslo k masovˇejˇs´ımu rozˇs´ıˇren´ı, byl tento software poskytov´an pro dom´ac´ı a nekomerˇcn´ı u ´ˇcely zdarma. Dalˇs´ı rozvoj Google Maps a Google Earth umoˇznily tzv. mashupy (hybridn´ı webov´e aplikace), kter´e umoˇzn ˇovaly zobrazen´ı dat tˇret´ıch stran nad mapov´ ymi podklady Googlu. ’ Bylo tak moˇzn´e objevit s´ıt restaurac´ı, benzinov´ ych stanic a zobrazit data, kter´a p˚ uvodnˇe nemˇela geografick´ y charakter. Google pozdˇeji dal uˇzivatel˚ um i moˇznost opravovat chyby a pˇrid´avat nov´a m´ısta. [26] [24] [12]
1.1.2
Zdroje dat
Mapy a satelitn´ı sn´ımky v aplikac´ıch Google Maps a Google Earth jsou z´ısk´av´any z mnoha zdroj˚ u a je nutn´e podotknout, ˇze datab´aze obsahuj´ıc´ı vrstvu se satelitn´ımi sn´ımky je spoleˇcn´a pro obˇe tyto aplikace. V historii byly mapy poˇrizov´any pˇrev´aˇznˇe od komerˇcn´ıch spoleˇcnost´ı Tele Atlas a Navteq, zat´ımco satelitn´ı sn´ımky byly poˇrizov´any jak od komerˇcn´ı spoleˇcnosti DigitalGlobe, tak od americk´e vl´ady. P˚ uvodn´ı satelitn´ı sn´ımky poˇr´ızen´e satelity s n´ızk´ ym rozliˇsen´ım nebyly schopny jasnˇe zobrazovat pˇredmˇety menˇs´ı neˇz 60 cm. P˚ uvodn´ı sn´ımky byly vˇsak postupnˇe nahrazov´any nov´ ymi sn´ımky ve stˇredn´ım rozliˇsen´ı 15 metr˚ u na pixel a sn´ımky s vysok´ ym rozliˇsen´ım 70 cm na pixel. Tyto sn´ımky pokr´ yvaly pouze 1/3 svˇetov´eho obyvatelstva a byly jiˇz tak podrobn´e, ˇze se na nich daly rozeznat jednotliv´e domy a auta. Dalˇs´ı rozvoj umoˇznil rozliˇsen´ı 10 cm na pixel. Jeˇstˇe podrobnˇejˇs´ı sn´ımky pˇrineslo vyuˇz´ıv´an´ı leteck´eho sn´ımkov´an´ı. Na rozd´ıl od satelit˚ u, ob´ıhaj´ıc´ıch Zemi ve v´ yˇsk´ach okolo 500 km, se letadla sn´ımaj´ıc´ı zemsk´ y povrch pohybuj´ı ve v´ yˇsk´ach od 250 do 500 m. Spolu s rozvojem leteck´eho sn´ımkov´an´ı se do map dostaly i sn´ımky poˇr´ızen´e z u ´hlu 45o . Pro takov´eto fotografie se ust´alilo oznaˇcen´ı ptaˇc´ı pohled“. ” Google neust´ale shromaˇzd’uje sn´ımky s nejvyˇsˇs´ı moˇznou kvalitou a nejvyˇsˇs´ım moˇzn´ ym rozliˇsen´ım, ale i pˇresto existuje nˇekolik oblast´ı, pro kter´e nejsou data ve vysok´em rozliˇsen´ı k dispozici. Na druhou stranu sn´ımky obsahuj´ıc´ı mraky nebo nespr´avn´e barvy se mohou i pˇres vysok´e rozliˇsen´ı zd´at rozmazan´e. Se zvyˇsuj´ıc´ım se rozliˇsen´ım sn´ımk˚ u rostla pˇr´ımou u ´mˇerou tak´e obava veˇrejnosti a vl´adn´ıch organizac´ı. Veˇrejnost mˇela obavy o sv´e vlastn´ı soukrom´ı a vl´adn´ı organizace mˇely strach z podrobnosti, s jakou byly zobrazov´any vl´adn´ı budovy a vojensk´a zaˇr´ızen´ı. Jejich obavy smˇeˇrovaly pˇredevˇs´ım k hrozbˇe vyuˇzit´ı tˇechto sn´ımk˚ u pro teroristick´e u ´toky. Proto jsou nˇekter´e budovy ˇci cel´e oblasti na satelitn´ıch sn´ımc´ıch zamaskov´any tak, jak je uk´az´ano na obr´azku 1.4, kde je zobrazena budova velitelstv´ı NATO v Nizozem´ı. [26] 8
ˇ CVUT v Praze
1 Google
Obr´azek 1.4: Velitelstv´ı NATO v Nizozem´ı Datab´aze satelitn´ıch sn´ımk˚ u nen´ı poskytov´ana v aktu´aln´ım ˇcase, ale aktualizuje se pravidelnˇe dvakr´at do mˇes´ıce, nejˇcastˇeji kolem ˇsest´eho a dvac´at´eho dne pˇr´ısluˇsn´eho mˇes´ıce. V r´amci kaˇzd´e aktualizace je obnovena pouze mal´a ˇc´ast svˇeta. Spolu s n´ı je vyd´av´an KML soubor obsahuj´ıc´ı pˇrehled zmˇenˇen´ ych dat, kter´a jsou vizualizov´ana jako ˇcerven´e obrysy. Aktu´aln´ı soubor je moˇzn´e st´ahnout z webov´e str´anky http://mw1.google. com/mw-earth-vectordb/Imagery_Updates/imagery_updates.kml. Pˇredem nen´ı jasn´e, kter´e sn´ımky budou v n´asleduj´ıc´ı aktualizaci obnoveny. V´ yjimku tvoˇr´ı pouze pˇr´ırodn´ı katastrofy, kdy jsou sn´ımky obnovov´any co nejrychleji tak, aby mohly pomoci z´achran´aˇr˚ um a dotˇcen´ ym obyvatel˚ um v postiˇzen´e oblasti. Google na sv´ ych str´ank´ach uv´ad´ı, ˇze vˇetˇsina satelitn´ıch sn´ımk˚ u by nemˇela b´ yt starˇs´ı tˇr´ı let.[20]
Obr´azek 1.5: Aktualizace sn´ımk˚ u ze dne 21.1.2014
9
ˇ CVUT v Praze
1.1.3
1 Google
Kartografick´ e zobrazen´ı
Zobrazen´ı je matematicky definovan´ y vztah pouˇz´ıvan´ y pro reprezentaci 3D povrchu Zemˇe do roviny mapy (2D). Pˇri zobrazen´ı z jedn´e referenˇcn´ı plochy do druh´e doch´az´ı vˇzdy k deformac´ım, kter´e zkresluj´ı jednu nebo v´ıce veliˇcin - tvar, plochu, vzd´alenost nebo smˇer. Existuje spousta mapov´ ych zobrazen´ı a pˇri volbˇe jednoho z nich je nutn´e br´at ohled na u ´ˇcel v´ ysledn´e mapy. Google Maps pro u ´ˇcely v´ ypoˇctu zemˇepisn´ ych souˇradnic a zobrazen´ı zemsk´eho povrchu do roviny vyuˇz´ıv´a Mercatorovo zobrazen´ı. Jedn´a se o druh v´alcov´eho u ´hlojevn´eho zobrazen´ı, jehoˇz autorem je vl´amsk´ y kartograf Gerhard Mercator. Pˇrestoˇze bylo zobrazen´ı poprv´e pˇredstaveno v roce 1569, je pro svoje vlastnosti hojnˇe vyuˇz´ıv´ano i dnes. Vˇsechny rovnobˇeˇzky vˇcetnˇe rovn´ıku se zobrazuj´ı jako s´ıt’ rovnobˇeˇzn´ ych pˇr´ımek a obrazy ’ poledn´ık˚ u tvoˇr´ı s´ıt stejnˇe odlehl´ ych pˇr´ımek kolm´ ych na rovnobˇeˇzky. V d˚ usledku r˚ uzn´e odlehlosti rovnobˇeˇzek smˇerem od rovn´ıku, se severn´ı a jiˇzn´ı p´ol zobrazuj´ı v nekoneˇcnu. Z toho tak´e vypl´ yv´a, ˇze d´elkov´e zkreslen´ı se bude smˇerem od rovn´ıku st´ale zvˇetˇsovat. Mapa je z tohoto d˚ uvodu a z d˚ uvodu, aby tvoˇrila ˇctverec, uˇr´ıznuta pˇribliˇznˇe od 85o severn´ı a jiˇzn´ı ˇs´ıˇrky. Nejd˚ uleˇzitˇejˇs´ı vlastnost´ı Marcatorova zobrazen´ı je pˇredevˇs´ım konformita. Ta zaruˇcuje zachov´an´ı tvaru i u menˇs´ıch objekt˚ u, coˇz je pˇredevˇs´ım d˚ uleˇzit´e pro zobrazen´ı satelitn´ıch sn´ımk˚ u, kde je poˇzadavek na nezkreslen´ı p˚ uvodn´ıho tvaru budov a n´amˇest´ı. Nezkreslen´ ych u ´hl˚ u (azimut˚ u) vyuˇz´ıv´a tak´e loxodroma, kter´a je v tomto zobrazen´ı zn´azornˇena pˇr´ımkou. [3] Pro jednoduˇsˇs´ı v´ ypoˇcty je pro zobrazen´ı map Google pouˇz´ıv´ano zobrazen´ı z koule do roviny, nikoli z elipsoidu poskytuj´ıc´ı vyˇsˇs´ı pˇresnost. To zp˚ usob´ı mˇeˇr´ıtkov´e zkreslen´ı pouze 0,33% ve smˇeru osy Y (smˇer ze z´apadu na v´ ychod) a je tedy moˇzn´e ho zanedbat. Aplikace a doplˇ nkov´ y plugin Google Earth pouˇz´ıv´a jednoduch´e v´alcov´e zobrazen´ı, kde jsou rovnobˇeˇzky a poledn´ıky zobrazeny jako pravideln´a s´ıt’ stejnˇe odlehl´ ych a vz´ajemnˇe kolm´ ych pˇr´ımek. Toto zobrazen´ı je tak´e zn´amo jako Marinovo zobrazen´ı. [13]
Obr´azek 1.6: Mercatorovo zobrazen´ı 10
ˇ CVUT v Praze
1.1.4
1 Google
Souˇ radnicov´ y syst´ em
Aˇckoliv Google pro zobrazen´ı vyuˇz´ıv´a Mercatorovo zobrazen´ı a jeho sf´erickou variantu, v´ ypoˇcet souˇradnic prob´ıh´a na elipsoidu WGS84 (World Geodetic System 1984). K vyj´adˇren´ı polohy bodu slouˇz´ı zemˇepisn´a d´elka a zemˇepisn´a ˇs´ıˇrka. Stejn´ y souˇradnicov´ y syst´em pouˇz´ıv´a napˇr´ıklad satelitn´ı navigace GPS. Pro vyhled´an´ı bodu v map´ach Google je nutn´e zadat souˇradnice ve form´atu, kter´ y je podporov´an. Pˇrehledn´ y seznam podporovan´ ych form´at˚ u je zobrazen n´ıˇze. • Stupnˇe, minuty a sekundy: 50o 40 56.5300 , 14o 260 54.4200 • Stupnˇe a desetinn´e minuty: 50o 4.9420 , 14o 26.9070 • Desetinn´e stupnˇe: 50.08237, 14.44845 Souˇradnice mapov´ ych dlaˇzdic jsou pro bˇeˇzn´eho uˇzivatele nepodstatn´ ym pojmem, kter´emu ani nen´ı nutn´e vˇenovat pozornost, ale pro v´ yvoj´aˇre webov´ ych mapov´ ych aplikac´ı je jejich znalost t´emˇeˇr podm´ınkou. Jak jiˇz bylo zm´ınˇeno dˇr´ıve v t´eto kapitole, Google Maps stejnˇe jako ˇrada dalˇs´ıch poskytovatel˚ u online mapov´ ych sluˇzeb vyuˇz´ıv´a mapov´ ych dlaˇzdic ke zrychlen´ı naˇc´ıt´an´ı cel´e str´anky. Mapov´e dlaˇzdice jsou pˇredem generovan´e ˇctvercov´e rastrov´e obr´azky o konstantn´ı velikosti 256 x 256 pixel˚ u, kter´e jsou logicky uspoˇra´d´any tak, aby jejich spojen´ım vznikla souvisl´a mapa na kaˇzd´e u ´rovni pˇribl´ıˇzen´ı. Z pˇredeˇsl´e vˇety je tedy patrn´e, ˇze pro kaˇzdou u ´roveˇ n pˇribl´ıˇzen´ı mus´ı existovat rozd´ıln´a sada mapov´ ych dlaˇzdic. Pˇri kaˇzd´e zmˇenˇe stˇredu nebo mˇeˇr´ıtka mapy Maps API vyhodnocuje situaci a pˇr´ıpadnˇe vrac´ı souˇradnice dlaˇzdic, kter´e maj´ı b´ yt aktu´alnˇe zobrazeny. Souˇradnice jsou vyj´adˇreny hodnotami x a y. Poˇca´tek souˇradnic je um´ıstˇen v severoz´apadn´ım rohu mapy, pˇriˇcemˇz hodnota x vzr˚ ust´a smˇerem na v´ ychod a hodnota y vzr˚ ust´a smˇerem na jih. Cel´ y svˇet na u ´rovni pˇribl´ıˇzen´ı 0 pokryje pouze jedna jedin´a dlaˇzdice, ale s kaˇzdou u ´rovn´ı pˇribl´ıˇzen´ı jejich poˇcet roste. L´epe to bude pochopiteln´e na pˇr´ıkladu. Mapa na u ´rovn´ı pˇribl´ıˇzen´ı jedna bude obsahovat 4 dlaˇzdice (grid 2x2) a celkov´e rozliˇsen´ı mapy bude 512 x 512 pixel˚ u, na u ´rovni 2 uˇz bude mapa sloˇzena z 16 dlaˇzdic (grid 4x4) a celkov´e rozliˇsen´ı naroste na 1024 x 1024 pixel˚ u. Takto by bylo moˇzn´e pokraˇcovat d´ale aˇz do nejvyˇsˇs´ıho pˇribl´ıˇzen´ı. [14]
Obr´azek 1.7: Souˇradnice mapov´ ych dlaˇzdic na u ´rovni 2 11
KAPITOLA
Vyuˇzit´ı Google Maps API v3 Application Programming Interface (API) je oznaˇcen´ı pro programov´e rozhran´ı vyuˇz´ıvaj´ıc´ı promˇenn´e, funkce a metody veˇrejn´e knihovny. Souˇca´st´ı tohoto rozhran´ı je dokument, kter´ y detailnˇe popisuje definici jednotliv´ ych tˇr´ıd a jejich chov´an´ı. S´ıla Google Maps API spoˇc´ıv´a ve vytv´aˇren´ı interaktivn´ıch webov´ ych aplikac´ı nad mapov´ ymi podklady nejpouˇz´ıvanˇejˇs´ı mapov´e sluˇzby na svˇetˇe. Nad t´ımto mapov´ ym podkladem je moˇzn´e vizualizovat vlastn´ı data nebo data z rozs´ahl´e datab´aze m´ıst udrˇzovan´e Googlem. Mimo to je moˇzn´e vyuˇz´ıt veˇsker´e sluˇzby zn´am´e z online map - satelitn´ı sn´ımky, sn´ımky z pohledu 45 stupˇ n˚ u, Street View, trasy j´ızdy a v´ yˇskov´e profily. Google Maps API pro web jsou zaloˇzeny na velmi jednoduch´e sadˇe tˇr´ıd napsan´e v jazyce JavaScript. Mapov´e dlaˇzdice jsou asynchronnˇe naˇc´ıt´any na pozad´ı str´anky vol´an´ım Ajax pˇr´ıkaz˚ u a n´aslednˇe um´ıstˇeny do elementu
. Pˇri pohybu mapou nebo pˇri oddalov´an´ı ˇci pˇribl´ıˇzen´ı API opˇet pomoc´ı Ajax pˇr´ıkaz˚ u pos´ıl´a informace o zmˇen´ach a vrac´ı nov´e dlaˇzdice. V´ yhodou naˇc´ıt´an´ı dlaˇzdic pomoc´ı Ajax pˇr´ıkaz˚ u je odstranˇen´ı nutnosti naˇc´ıtat a pˇrekreslovat cel´e webov´e str´anky. Mimo Google Maps JavaScript API jsou dostupn´e i rozhran´ı pro mobiln´ı zaˇr´ızen´ı pouˇz´ıvaj´ıc´ı operaˇcn´ı syst´em iOS nebo Android a dalˇs´ı API rozˇsiˇruj´ıc´ı moˇznosti mapy. [8]
N´azev
Popis
Places API
detailn´ı datab´aze m´ıst
Direction API
trasa mezi body na mapˇe
Geocoding API
konvertor adresy na geografick´e souˇradnice
Elevation API
v´ yˇska bodu a v´ yˇskov´ y profil trasy
Static Maps API
statick´e sn´ımky mapy
Street View Image API
statick´e sn´ımky Street View
Google Earth API
digit´aln´ı 3D gl´obus Tabulka 2.1: Rozˇsiˇruj´ıc´ı API
12
2
ˇ CVUT v Praze
2 Vyuˇzit´ı Google Maps API v3
Podle serveru programmableweb je Google Maps API mezi uˇzivateli dlouhodobˇe nejpouˇz´ıvanˇejˇs´ım programov´ ym rozhran´ım, kter´e dnes pouˇz´ıv´a v´ıce jak 800 000 web˚ u. D´ıky takov´e rozˇs´ıˇrenosti mezi uˇzivateli a program´atory existuje cel´a ˇradu web˚ u a internetov´ ych diskuz´ı, kter´e se zab´ yvaj´ı touto t´ematikou. Spolu s dobˇre zpracovanou dokumentac´ı a referenc´ı jednotliv´ ych tˇr´ıd na str´ank´ach Google Developers tvoˇr´ı tyto weby nepˇrebern´e mnoˇzstv´ı ˇreˇsen´ ych pˇr´ıklad˚ u a zdrojov´ ych k´od˚ u. [23] Mimo aplikaˇcn´ı programov´e rozhran´ı od Googlu nab´ız´ı moˇznost pˇrizp˚ usobit a um´ıstit mapu na webov´e str´anky dalˇs´ı hr´aˇci na trhu s online mapov´ ymi aplikacemi, napˇr´ıklad: • Bing Maps API, • Yahoo Maps API, • ArcGIS API for JavaScript, • MapQuest JavaScript API, • Here Maps API, • OpenLayer Javascript API, • Mapy API (Seznam.cz).
2.1
´ Uvod do JavaScriptu
Jak jiˇz bylo naps´ano v´ yˇse, Google Maps API jsou zaloˇzeny na programovac´ım jazyce JavaScript. Tento skriptovac´ı jazyk patˇr´ı mezi objektovˇe orientovan´e programovac´ı jazyky a vyuˇz´ıv´a se pˇri tvorbˇe webov´ ych str´anek, do kter´ ych umoˇzn ˇuje vkl´adat dynamick´e prvky a vytv´aˇret tak vizu´alnˇe poutav´e weby. JavaScript je z´avisl´ y na internetov´em prohl´ıˇzeˇci a pro spr´avn´e zobrazen´ı obsahu str´anky je nutn´e m´ıt v prohl´ıˇzeˇci JavaScript povolen´ yu vˇetˇsiny prohl´ıˇzeˇc˚ u ve v´ ychoz´ım nastaven´ı. Bˇeˇzn´ ym omylem b´ yv´a spojov´an´ı JavaScriptu s programovac´ım jazykem Java. Tyto dva jazyky vˇsak spojuje pouze podobn´a syntaxe, kter´a patˇr´ı do stejn´e rodiny jako syntaxe jazyk˚ u C a C++. Pro pochopen´ı n´asleduj´ıc´ıch kapitol je nutn´e porozumˇet z´aklad˚ um tohoto jazyka. Programovac´ı jazyky C++ a Java odliˇsuj´ı promˇenn´e pro ˇc´ıseln´e hodnoty, textov´e ˇretˇezce a dalˇs´ı, zat´ımco JavaScript m´a pouze jednu promˇennou umoˇzn ˇuj´ıc´ı uchov´avat vˇsechny typy hodnot. Promˇenn´a je deklarov´ana kl´ıˇcov´ ym slovem var. var var var var var
number = 5.2; text = ’JavaScript’; text = ”JavaScript”; boolen = true; boolen = false; 13
ˇ CVUT v Praze
2 Vyuˇzit´ı Google Maps API v3
Dalˇs´ım podstatn´ ym rozd´ılem v syntaxi je vytv´aˇren´ı funkc´ı. V jazyce JavaScript se deklarace funkce skl´ad´a z kl´ıˇcov´eho slova function a n´azvu funkce, za kter´ ym n´asleduj´ı jednoduch´e a n´aslednˇe sloˇzen´e z´avorky. Hodnoty v jednoduch´ ych z´avork´ach vstupuj´ı do funkce jako parametry a sloˇzen´e z´avorky pak ohraniˇcuj´ı vlastn´ı funkci. Funkce je pak zavol´ana ops´an´ım n´azvu funkce a vloˇzen´ım povinn´ ych parametr˚ u funkce. V´ ysledkem vol´an´ı n´asleduj´ıc´ı funkce je okno s textem Hello world“. [27] ” function message(text){alert(text);} message(”Hello world”)
2.2
Vloˇ zen´ı mapy na str´ anku
T´ematem t´eto pr´ace je vytvoˇren´ı webov´e mapov´e aplikace s vyuˇzit´ım Google Maps API. Z tohoto d˚ uvodu jsem se rozhodl podrobnˇe popsat jednotliv´e kroky vedouc´ı od vloˇzen´ı jednoduch´e mapy na str´anku, pˇres nastaven´ı vlastn´ıho uˇzivatelsk´eho rozhran´ı, aˇz po vytvoˇren´ı vlastn´ıho stylu mapy. Aplikace vyuˇz´ıvaj´ıc´ı Google Maps API by mˇela obsahovat tzv. API key, kter´ y umoˇzn ˇuje sledovat aktivity na webov´ ych st´ank´ach vˇcetnˇe ˇcerp´an´ı limit˚ u. Ty jsou nastaveny podle verze API. Pˇri pˇrekroˇcen´ı limit˚ u, kter´e nab´ız´ı bezplatn´a verze, je moˇzn´e dodateˇcnˇe kv´oty dokoupit nebo pˇrej´ıt na placenou verzi Google Maps API for Business. Kl´ıˇc m˚ uˇze b´ yt pˇridˇelen pouze pˇrihl´aˇsen´ ym uˇzivatel˚ um, a proto je nutn´e jiˇz vlastnit nebo si vytvoˇrit nov´ y u ´ˇcet u spoleˇcnosti Google. S t´ımto u ´ˇctem je moˇzn´e se pˇrihl´asit na str´ank´ach Google Developers Console, vytvoˇrit nov´ y projekt a aktivovat Google Maps JavaScript API v3. Pˇri vytv´aˇren´ı projektu a pˇri aktivaci API je nutn´e se sezn´amit s licenˇcn´ımi podm´ınkami vyuˇz´ıvan´ ych sluˇzeb (Google APIs, Google Maps/Earth APIs) a souhlas s nimi potvrdit. Pˇri generov´an´ı nov´eho kl´ıˇce je tak´e z bezpeˇcnostn´ıch d˚ uvod˚ u doporuˇceno vloˇzit dom´enu, na kter´e bude aplikace um´ıstˇena. T´ım se zamez´ı zneuˇzit´ı kl´ıˇce neopr´avnˇenou osobou na jin´ ych str´ank´ach, neˇz kter´e jsou uvedeny v seznamu. [9] Sluˇzba
Limit
Geocoding Web Service
2 500 poˇzadavk˚ u za den
Directions Web Service
2 500 poˇzadavk˚ u za den + 10 bod˚ u na poˇzadavek
Distance Matrix Web Service
2 500 prvk˚ u za den + 100 prvk˚ u na dotaz
Elevation Web Service
2 500 poˇzadavk˚ u za den
Static Maps API
Maxim´aln´ı rozliˇsen´ı 640 x 640 pixel˚ u
Street View Image API
Maxim´aln´ı rozliˇsen´ı 640 x 640 pixel˚ u
Tabulka 2.2: Limity pro vyuˇzit´ı Google Maps JavaScript API 14
ˇ CVUT v Praze
2 Vyuˇzit´ı Google Maps API v3
< html > < head > < title > Orlicke hory < meta name = " viewport " content = " initial-scale =1.0 , user-scalable = no " / > < meta charset = " utf-8 " > < style type = " text / css " > html { height: 100% } body { height: 100%; margin: 0; padding: 0 } # map-canvas { height: 100% } < script type = " text / javascript " src = " https: / / maps . googleapis . com / maps / api / js ? key = API_KEY & sensor = false " < script type = " text / javascript " > function initialize () { var mapOptions = { center: new google . maps . LatLng (50.25955 , 16.41699) , zoom: 11 }; var map = new google . maps . Map ( document . getElementById ( " map-canvas " ) , mapOptions ) ; } google . maps . event . addDomListener ( window , ’ load ’ , initialize ); < body > < div id = " map-canvas " / >
Listing 2.1: Z´akladn´ı mapa
15
ˇ CVUT v Praze
2.2.1
2 Vyuˇzit´ı Google Maps API v3
Rozbor k´ odu
Kaˇzd´ y spr´avn´ y HTML soubor zaˇc´ın´a ˇra´dkou <doctype>, kter´a internetov´emu prohl´ıˇzeˇci sdˇeluje jak str´anku spr´avnˇe interpretovat dle specifikace W3C 1 . V pˇr´ıpadˇe ˇza´dn´eho nebo ˇspatnˇe zadan´eho typu vykreslovac´ıho reˇzimu se str´anka automaticky pˇrepne do quirk m´odu“, kter´ y tuto specifikaci z´amˇernˇe poruˇsuje, aby mohla b´ yt str´anka i tak ” naˇctena. Tento m´od je tak´e ˇcasto naz´ yv´an jako adaptivn´ı reˇzim“. Deklarace starˇs´ıch ” HTML byly v´ıceˇra´dkov´e a nebylo jednoduch´e si je zapamatovat. S pˇr´ıchodem HTML5 se deklarace zjednoduˇsila pouze na dvˇe slova, tak jak je uvedeno n´ıˇze. I pˇrestoˇze se jedn´a o typ vztahuj´ıc´ı se k HTML5, je plnˇe kompatibiln´ı i s pˇrechoz´ımi verzemi HTML.
Dalˇs´ı obsah k´odu je vhodn´e um´ıstit mezi poˇca´teˇcn´ı a koncovou znaˇcku , i pˇrestoˇze se jedn´a o znaˇcku nepovinnou. Pro znaˇcku je v nˇekter´ ych ˇcesk´ ych a vˇetˇsinˇe cizojazyˇcn´ ych literatur´ach pouˇz´ıv´an pojem tag. Hlaviˇcka souboru zaˇc´ın´a a konˇc´ı p´arovou znaˇckou resp. . V hlaviˇcce je um´ıstˇena ta ˇca´st dokumentu, kter´a se na str´ance nezobrazuje. V´ yjimku tvoˇr´ı prost´ y text, kter´ y se v nˇekter´ ych prohl´ıˇzeˇc´ıch zobraz´ı na zaˇc´atku str´anky. V hlaviˇcce je um´ıstˇeno hned nˇekolik d˚ uleˇzit´ ych, avˇsak nepovinn´ ych element˚ u. Prvn´ım z nich je element
, jenˇz obsahuje n´azev str´anky. Element <meta charset> je nutn´ y pro spr´avn´e jazykov´e k´odov´an´ı str´anky. J´a jsem pro svoji aplikaci pouˇzil k´odov´an´ı utf” 8“, kter´e zajiˇst’uje spr´avnou interpretaci ˇcesk´ ych znak˚ u. Dalˇs´ımi elementy obsaˇzen´ ymi v hlaviˇcce, kter´e budou podrobnˇeji pops´any n´ıˇze, jsou style a script. Mimo jin´e lze do hlaviˇcky um´ıstit popis str´anky, kl´ıˇcov´a slova nebo jm´eno autora. < title > Orlicke hory </ title > < meta name = " viewport " content = " initial-scale =1.0 , user-scalable = no " / > < meta charset = " utf-8 " ><br />
<br />
Webov´e str´anky se od sebe liˇs´ı pˇredevˇs´ım obsahem, ale tak´e svoji formou. Formou se v tomto pˇr´ıpadˇe rozum´ı jejich vzhled a uspoˇr´ad´an´ı jednotliv´ ych ˇc´ast´ı. Pro form´atov´an´ı str´anky jsou v dneˇsn´ı dobˇe nejbˇeˇznˇeji pouˇz´ıv´any kask´adov´e styly ( Cascading Style Sheet“ ” nebo tak´e CSS), kter´e oproti form´atov´an´ı v HTML pˇrin´aˇs´ı rozs´ahlejˇs´ı moˇznosti. Mimo to oddˇeluj´ı obsahovou ˇc´ast dokumentu (HTML) od t´e vizu´aln´ı (CSS). Pro z´apis stylu v jazyce CSS se pouˇz´ıv´a p´arov´a znaˇcka <style> s oznaˇcen´ ym typem stylu, tak jak je uvedeno na pˇr´ıkladu. V tomto konkr´etn´ım pˇr´ıpadˇe jsou nastavov´any vlastnosti element˚ u html, body a odd´ılu div s n´azvem map-canvas“, kter´ y byl vytvoˇren ve vlastn´ım tˇele ” dokumentu mezi tagy <body> a </body>. Tento odd´ıl vyhrazuje m´ısto pro vloˇzen´ı mapy. Atributy height pˇr´ıpadnˇe width nastavuj´ı velikost tohoto odd´ılu, kter´a m˚ uˇze b´ yt ud´ana 1<br />
<br />
World Wide Web Consortium - mezin´arodn´ı konsorcium pro v´ yvoj webov´ ych standard˚ u.<br />
<br />
16<br />
<br />
ˇ CVUT v Praze<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
v pixelech nebo v procentech. [15] < style type = " text / css " > html { height: 100% } body { height: 100%; margin: 0; padding: 0 } # map-canvas { height: 100% } </ style ><br />
<br />
Do takto vytvoˇren´e webov´e str´anky je jiˇz moˇzn´e naˇc´ıst Google Maps API v podobˇe JavaScript souboru, kter´ y je um´ıstˇen na serverech Googlu. Odkaz na tento soubor v podobˇe adresy URL se um´ıst´ı do atributu src, kter´ y je jedn´ım ze dvou povinn´ ych atribut˚ u elementu <script>. T´ım prvn´ım je atribut type, kter´ y definuje programovac´ı jazyk skriptu. I v adrese odkazu na JavaScript soubor se ukr´ yvaj´ı dva povinn´e parametry, kter´e mus´ı b´ yt vyplnˇeny. Parametr key obsahuje aplikaˇcn´ı kl´ıˇc nezbytn´ y pro chod aplikace. Zp˚ usob z´ısk´an´ı tohoto kl´ıˇce byl jiˇz podrobnˇe pops´an v u ´vodu kapitoly 2.2 na stranˇe 14. Dalˇs´ı poˇzadovan´ y parametr sensor d´av´a aplikaci informaci o tom, zda pˇr´ıstroj m´a ˇci nem´a zaˇr´ızen´ı pro urˇcov´an´ı polohy. To je d˚ uleˇzit´e pˇredevˇs´ım pro mobiln´ı zaˇr´ızen´ı se sensorem GPS. Parametr nab´ yv´a dvou hodnot, true a false. True v pˇr´ıpadˇe, ˇze zaˇr´ızen´ı m˚ uˇze pro urˇcov´an´ı polohy vyuˇz´ıvat sensor, a false v pˇr´ıpadˇe opaˇcn´em. [4] < script type = " text / javascript " src = " https: / / maps . googleapis . com / maps / api / js ? key = API_KEY & sensor = false " </ script ><br />
<br />
Po naˇcten´ı Google Maps API zb´ yv´a nastavit pouze vlastnosti naˇc´ıtan´e mapy, jejichˇz deklarace je souˇca´st´ı objektu Map options. Z´akladn´ım a povinn´ ym nastaven´ım kaˇzd´e mapy je stˇred mapy (center) a u ´roveˇ n pˇribl´ıˇzen´ı (zoom): • Center pomoc´ı souˇradnic definuje stˇred mapy. Nov´ y objekt vytvoˇren´ y metodou google.maps.LatLng(lat: number, lng: number), jej´ıˇz vstupem jsou souˇradnice v poˇrad´ı zemˇepisn´a ˇs´ıˇrka a zemˇepisn´a d´elka. • Zoom ud´av´a u ´roveˇ n pˇribl´ıˇzen´ı. Nab´ yv´a pouze celoˇc´ıseln´ ych hodnot od 0 do 21, dle oblasti.<br />
<br />
var mapOptions = { center: new google . maps . LatLng (50.25955 , 16.41699) , zoom: 11 }; var map = new google . maps . Map ( document . getElementById ( " map-canvas " ) , mapOptions ) ;<br />
<br />
17<br />
<br />
ˇ CVUT v Praze<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
Obr´azek 2.1: Praha - zoom level 0, 10 a 17 Posledn´ı ˇra´dek tohoto k´odu umist’uje mapu s vlastn´ım nastaven´ım do odd´ılu s n´azvem map-canvas“. Aby byla cel´a mapa bez nepˇredv´ıdateln´eho chov´an´ı naˇctena, je nutn´e ” veˇsker´e nastaven´ı a chov´an´ı mapy zabalit do funkce, kter´a bude spuˇstˇena aˇz po naˇcten´ı cel´e str´anky. [27] google . maps . event . addDomListener ( window , ’ load ’ , initialize ) ;<br />
<br />
2.2.2<br />
<br />
Adres´ aˇ rov´ a struktura<br />
<br />
Z´akladn´ı mapa m´a pouze nˇekolik ˇra´dk˚ u zdrojov´eho k´odu a nen´ı tedy probl´em ps´at k´od do jednoho souboru. S pˇrib´ yvaj´ıc´ımi ˇr´adky by se vˇsak k´od mohl st´at nepˇrehledn´ ym a chaotick´ ym. Proto je velice praktick´e oddˇelit JavaScript a kask´adov´e styly CSS od hlavn´ıho k´odu do samostatn´ ych soubor˚ u. V´ yhodou tohoto oddˇelen´ı je vysok´a ˇcitelnost i v pˇr´ıpadˇe sloˇzit´e webov´e aplikace. Oddˇelen´ım se tak´e zrychl´ı naˇc´ıt´an´ı cel´e str´anky, nebot’ prohl´ıˇzeˇc m˚ uˇze do mezipamˇeti naˇc´ıtat JavaScript soubor nez´avise na HTML. Dobr´ ym ’ zvykem b´ yv´a umist ovat tyto soubory do odliˇsn´ ych adres´aˇr˚ u.<br />
<br />
Obr´azek 2.2: Pˇr´ıklad adres´aˇrov´e struktury Pro pˇrehlednost zde uv´ad´ım obsah vˇsech soubor˚ u. Podle adres´aˇrov´e struktury nejprve soubor se styly style.css, pot´e JavaScript soubor s nastaven´ım mapy google map.js a na z´avˇer HTML soubor index.html. 18<br />
<br />
ˇ CVUT v Praze<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
html { height: 100% } body { height: 100%; margin: 0; padding: 0 } # map-canvas { height: 100% }<br />
<br />
Listing 2.2: style.css function initialize () { var mapOptions = { center: new google . maps . LatLng (50.25955 , 16.41699) , zoom: 11 , }; var map = new google . maps . Map ( document . getElementById ( " map-canvas " ) , mapOptions ) ; } google . maps . event . addDomListener ( window , ’ load ’ , initialize );<br />
<br />
Listing 2.3: google map.js <! DOCTYPE html > < html > < head > < title > Orlicke hory </ title > < meta name = " viewport " content = " initial-scale =1.0 , user-scalable = no " / > < meta charset = " utf-8 " > < script type = " text / javascript " src = " https: / / maps . googleapis . com / maps / api / js ? key = A I z a S y A U f P f t 3 O T Y n x _ L a R x 0 m W 7 L - H 3 3 e W z I n r U & sensor = false " > </ script > < script type = " text / javascript " src = " js / google_map . js " > </ script > < link type = " text / css " rel = " stylesheet " href = " css / style . css " > </ head > < body > < div id = " map-canvas " / > </ body > </ html ><br />
<br />
Listing 2.4: index.html<br />
<br />
19<br />
<br />
ˇ CVUT v Praze<br />
<br />
2.2.3<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
Mobiln´ı zaˇ r´ızen´ı<br />
<br />
St´ale popul´arnˇejˇs´ı mobiln´ı zaˇr´ızen´ı s internetov´ ym pˇripojen´ım maj´ı zpravidla menˇs´ı velikost displeje neˇz osobn´ı poˇc´ıtaˇce a tak´e nab´ızej´ı jin´e moˇznosti ovl´ad´an´ı mapy. Proto se v´ yvoj´aˇri z t´ ymu Maps API pˇri v´ yvoji verze 3 zamˇeˇrili na funkˇcnost aplikace na mobiln´ıch zaˇr´ızen´ıch s operaˇcn´ım syst´emem iOS a Android. Pro spr´avnou funkˇcnost aplikace na tˇechto zaˇr´ızen´ıch je pro um´ıstˇen´ı mapy doporuˇceno pouˇz´ıvat < div > s parametry width a height nastaven´ ymi na 100%. Existuje vˇsak metoda detekov´an´ı zaˇr´ızen´ı, kter´a umoˇzn ˇuje pˇrizp˚ usobit nastaven´ı mapy individu´alnˇe pro rozd´ıln´a zaˇr´ızen´ı. [4]<br />
<br />
Obr´azek 2.3: Z´akladn´ı mapa<br />
<br />
2.3<br />
<br />
Nastaven´ı uˇ zivatelsk´ eho rozhran´ı<br />
<br />
Souˇc´ast´ı kaˇzd´e vkl´adan´e mapy jsou z´akladn´ı ovl´adac´ı prvky umoˇzn ˇuj´ıc´ı interaktivn´ı ovl´ad´an´ı. Do mapy s minimem nastaven´ı, tak jak bylo podrobnˇe pops´ano v pˇredeˇsl´e podkapitole, se automaticky vloˇz´ı ovl´adac´ı prvky pro volbu podkladov´e mapy a prvky pro pr´aci s mapou (posun a pˇribl´ıˇzen´ı). N´asleduje kompletn´ı v´ yˇcet a popis ovl´adac´ıch prvk˚ u a kl´avesov´ ych zkratek, kter´e Google Maps API nab´ız´ı. [10] • MapTypeControl umoˇzn ˇuje uˇzivateli pˇrep´ınat mezi jednotliv´ ymi typy map (satelitn´ı sn´ımky, ter´enn´ı mapa). Ve v´ ychoz´ım stavu je tento ovl´adac´ı prvek nastaven na hodnotu TRUE a je um´ıstˇen v prav´em horn´ım rohu mapy. • ZoomControl slouˇz´ı k pˇribl´ıˇzen´ı a odd´alen´ı mapy. Ve v´ ychoz´ım stavu je tento ovl´adac´ı prvek nastaven na hodnotu TRUE a je um´ıstˇen v lev´em horn´ım rohu mapy, v pˇr´ıpadˇe dotykov´ ych zaˇr´ızen´ı v lev´em doln´ım rohu. 20<br />
<br />
ˇ CVUT v Praze<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
• PanControl umoˇzn ˇuje uˇzivateli posunovat mapou kliknut´ım na poˇzadovan´ y smˇer posunu zn´azornˇen´ y ˇsipkou. Ve v´ ychoz´ım stavu je tento ovl´adac´ı prvek nastaven na hodnotu TRUE a je um´ıstˇen v lev´em horn´ım rohu nad Zoom Control. • ScaleControl zobrazuje aktu´aln´ı mˇeˇr´ıtko mapy. Ve v´ ychoz´ım stavu je nastaven na hodnotu FALSE. Pokud by byl prvek explicitnˇe nastaven na hodnotu TRUE, zobrazil by se v prav´em doln´ım rohu. • StreetViewControl je vizualizov´an pomoc´ı ˇzlut´eho pan´aˇcka, kter´eho je moˇzn´e pˇresunout nad urˇcit´e m´ısto na mapˇe a aktivovat tak reˇzim Street View. Ve v´ ychoz´ım stavu je nastaven na hodnotu TRUE a je um´ıstˇen mezi ovl´adac´ı prvky pˇribl´ıˇzen´ı a posunu mapy. • RotateControl je tvoˇren malou ikonou, kter´a umoˇzn ˇuje uˇzivateli rotovat s mapou. ◦ Tento ovl´adac´ı prvek je spojen s 45 sn´ımky a jeho zobrazen´ı/skryt´ı z´avis´ı pr´avˇe na povolen´ı tˇechto sn´ımk˚ u. • OverviewMapControl zobrazuje v prav´em doln´ım rohu zmenˇsenou a odd´alenou mapu aktu´alnˇe zobrazovan´eho u ´zem´ı. Ve v´ ychoz´ım stavu je vˇsak nastaven na hodnotu FALSE. • DisableDoubleClickZoom nastaven´ım na hodnotu TRUE zak´aˇze pˇribl´ıˇzen´ı a nastaven´ı stˇredu mapy dvojklikem. • Draggable nastaven´ım na hodnotu FALSE zak´aˇze pohybovat mapou taˇzen´ım myˇsi. • KeyboardShortcuts nastaven´ım na hodnotu FALSE zak´aˇze ovl´ad´an´ı mapy pomoc´ı kl´avesov´ ych zkratek. Pro pohyb v mapˇe je moˇzn´e vyuˇz´ıt navigaˇcn´ıch tlaˇc´ıtek (ˇsipek) a pro pˇribl´ıˇzen´ı nebo odd´alen´ı kl´avesy +/−. • Scrollwheel nastaven´ım na hodnotu FALSE zak´aˇze pˇribliˇzov´an´ı a oddalov´an´ı mapy koleˇckem myˇsi. Jak jiˇz bylo zm´ınˇeno v´ yˇse, vloˇzen´a mapa obsahuje z´akladn´ı prvky uˇzivatelsk´eho rozhran´ı. Google Maps API d´av´a program´atorovi n´astroj, jak toto automatick´e nastaven´ı zruˇsit a vytvoˇrit si nastaven´ı vlastn´ı. Zruˇsen´ı nastaven´ı se provede pˇriˇrazen´ım hodnoty TRUE ke tˇr´ıdˇe disableDefaultUI, kter´a je souˇc´ast´ı objektu MapOptins. dis ableDefaultUI: true<br />
<br />
I kdyˇz je v´ ychoz´ı uˇzivatelsk´e rozhran´ı vypnuto, je st´ale moˇzn´e povolit nebo zak´azat zobrazen´ı ovl´adac´ıch prvk˚ u individu´alnˇe. mapTypeControl: boolean , zoomControl: boolean , panControl: boolean , scaleControl: boolean , st re et ViewCont rol: boolean , o ve r v ie w M apCont r o l: boolean<br />
<br />
21<br />
<br />
ˇ CVUT v Praze<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
Vˇetˇsinu ovl´adac´ıch prvk˚ u je moˇzn´e pˇrizp˚ usobit individu´aln´ım poˇzadavk˚ um aplikace. Vlastnosti prvk˚ u jsou vkl´ad´any spolu s ostatn´ım nastaven´ım mapy do objektu MapOptions. N´asleduj´ıc´ı tabulka shrnuje jednotliv´e ovl´adac´ı prvky a jejich moˇznosti u ´pravy. [27] Prvek<br />
<br />
mapTypeControl<br />
<br />
Nastaven´ı<br />
<br />
Tˇr´ıdy<br />
<br />
position<br />
<br />
google.maps.ControlPosition<br />
<br />
style<br />
<br />
google.maps.MapTypeControlStyle<br />
<br />
mapTypeId google.maps.MapTypeId position<br />
<br />
google.maps.ControlPosition<br />
<br />
style<br />
<br />
google.maps.ZoomControlStyle<br />
<br />
panControl<br />
<br />
position<br />
<br />
google.maps.ControlPosition<br />
<br />
scaleControl<br />
<br />
position<br />
<br />
google.maps.ControlPosition<br />
<br />
streetViewControl<br />
<br />
position<br />
<br />
google.maps.ControlPosition<br />
<br />
rotateControl<br />
<br />
position<br />
<br />
google.maps.ControlPosition<br />
<br />
overviewMapControl<br />
<br />
position<br />
<br />
google.maps.ControlPosition<br />
<br />
zoomControl<br />
<br />
Tabulka 2.3: Nastaven´ı ovl´adac´ıch prvk˚ u<br />
<br />
MapTypeControlOptions Pokud je MapTypeControl aktivn´ı, ovl´ad´a tento parametr vlastnosti tohoto prvku. Prvn´ı nastaven´ı, style, definuje grafickou podobu. Hodnota DEFAULT automaticky nastavuje podobu v z´avislosti na velikosti okna a dalˇs´ıch faktorech. Dalˇs´ım moˇzn´ ym nastaven´ım je DROPDOWN MENU nebo HORIZONTAL BAR. Druh´e nastaven´ı mapTypeId kontroluje zobrazen´e typy map, ze kter´ ych m´a uˇzivatel aplikace na v´ ybˇer (ROADMAP, SATELITTE, HYBRID, TERRAIN).<br />
<br />
Obr´azek 2.4: Horizontal bar a Dropdown menu<br />
<br />
22<br />
<br />
ˇ CVUT v Praze<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
ZoomControlOptions U ovl´adac´ıho prvku ZoomControl je moˇzn´e nav´ıc nastavit pouze podobu. Google Maps API nab´ız´ı program´ator˚ um hned tˇri podoby. Nastaven´ım DEFAULT se podoba nastavuje s ohledem na velikost okna. Pokud je dostatek prostoru, je zvolena varianta LARGE. V opaˇcn´em pˇr´ıpadˇe varianta SMALL, kter´a obsahuje pouze mal´a tlaˇc´ıtka +/−.<br />
<br />
Obr´azek 2.5: ZoomControlStyle Large a Small<br />
<br />
2.3.1<br />
<br />
Pozice objektu na mapˇ e<br />
<br />
Z pˇredeˇsl´e tabulky vypl´ yv´a, ˇze kaˇzd´emu prvku lze explicitnˇe pˇridˇelit pozici na mapˇe. Ovl´adac´ı prvky nepouˇz´ıvaj´ı absolutn´ı pozicov´an´ı, ale v z´avislosti na velikosti mapy pouˇz´ıvaj´ı inteligentn´ı rozloˇzen´ı ovl´adac´ıch prvk˚ u kolem st´avaj´ıc´ıch prvk˚ u. Moˇzn´a je tak´e kolize s prvky uˇzivatelsk´eho rozhran´ı, kter´ ym pozici mˇenit nelze (logo spoleˇcnosti nebo panel s informacemi o datech). V takov´em pˇr´ıpadˇe jsou ovl´adac´ı prvky um´ıstˇeny co nejbl´ıˇze poˇzadovan´e pozici. N´asleduj´ıc´ıch nˇekolik ˇra´dk˚ u obsahuje kompletn´ı seznam a popis moˇzn´ ych pozic vˇcetnˇe chov´an´ı v kolizn´ıch situac´ıch. Pot´e n´asleduje grafick´e zn´azornˇen´ı prvk˚ u na mapˇe. [10] TOP LEFT pozice v lev´e ˇc´asti horn´ıho okraje mapy. V pˇr´ıpadˇe kolize se prvek posune do stˇredu horn´ıho okraje mapy. TOP CENTER pozice pod´el horn´ıho okraje mapy. TOP RIGHT pozice v prav´e ˇca´sti horn´ıho okraje mapy. V pˇr´ıpadˇe kolize se prvek posune do stˇredu horn´ıho okraje mapy. LEFT TOP pozice v lev´e ˇca´sti horn´ıho okraje mapy, avˇsak pod prvkem s pozic´ı TOP LEFT. RIGHT TOP pozice v prav´e ˇca´sti horn´ıho okraje mapy, avˇsak pod prvkem s pozic´ı TOP RIGHT. 23<br />
<br />
ˇ CVUT v Praze<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
LEFT CENTER pozice pod´el lev´eho okraje mapy. RIGHT CENTER pozice pod´el prav´eho okraje mapy. LEFT BOTTOM pozice v lev´e ˇca´sti doln´ıho okraje mapy, avˇsak nad prvkem s pozic´ı BOTTOM LEFT. RIGHT BOTTOM pozice v prav´e ˇca´sti doln´ıho okraje mapy, avˇsak nad prvkem s pozic´ı BOTTOM RIGHT. BOTTOM LEFT pozice v lev´e ˇca´sti doln´ıho okraje mapy. V pˇr´ıpadˇe kolize se prvek posune do stˇredu doln´ıho okraje mapy. BOTTOM CENTER pozice pod´el doln´ıho okraje mapy. BOTTOM RIGHT pozice v prav´e ˇca´sti doln´ıho okraje mapy. V pˇr´ıpadˇe kolize se prvek posune do stˇredu doln´ıho okraje mapy. TOP LEFT<br />
<br />
TOP CENTER<br />
<br />
LEFT TOP<br />
<br />
RIGHT TOP<br />
<br />
LEFT CENTER<br />
<br />
RIGHT CENTER<br />
<br />
LEFT BOTTOM<br />
<br />
RIGHT BOTTOM<br />
<br />
BOTTOM LEFT<br />
<br />
2.3.2<br />
<br />
TOP RIGHT<br />
<br />
BOTTOM CENTER<br />
<br />
BOTTOM RIGHT<br />
<br />
Metody tˇ r´ıdy Map<br />
<br />
Nastaven´ı mapy, kter´e je souˇca´st´ı objektu MapOptions, je vhodn´e pouze pˇri zakl´ad´an´ı nov´e mapy (po naˇcten´ı str´anky jiˇz nen´ı moˇzn´e toto nastaven´ı mˇenit). Pokud program´ator chce mˇenit nastaven´ı i mimo tento objekt, mus´ı vyuˇz´ıt jednu z ˇclensk´ ych metod, kter´e patˇr´ı mezi nejd˚ uleˇzitˇejˇs´ı ˇca´st´ı Google Maps API. Existuj´ı dva typy tˇechto metod: komplexn´ı metoda nastavuj´ıc´ı poˇzadovan´e vlastnosti nebo specifick´a metoda pro nastaven´ı konkr´etn´ı vlastnosti. N´asleduj´ıc´ı tabulka shrnuje nejpouˇz´ıvanˇejˇs´ı metody. Pro vˇetˇsinu vlastnost´ı lze jeˇstˇe rozliˇsit dvˇe metody ˇcasto oznaˇcovan´e jako gettry“ a settry“. Zjednoduˇsenˇe ˇreˇceno ” ” gettry“ se pouˇz´ıvaj´ı pro zjiˇstˇen´ı aktu´alnˇe pouˇzit´e vlastnosti a settry“ se pouˇz´ıvaj´ı pro ” ” nastaven´ı vlastnosti nov´e. [4]<br />
<br />
24<br />
<br />
ˇ CVUT v Praze Nastaven´ı Options<br />
<br />
Center<br />
<br />
Zoom<br />
<br />
MapType<br />
<br />
Pan<br />
<br />
2 Vyuˇzit´ı Google Maps API v3 Metoda<br />
<br />
Popis<br />
<br />
tato metoda umoˇzn ˇuje nastaven´ı mapy vˇcetnˇe setOptions vypnut´ı/zapnut´ı ovl´adac´ıch prvk˚ u a kl´avesov´ ych zkratek nastavuje stˇred mapy, vstupem je promˇenn´a setCenter uchov´avaj´ıc´ı zemˇepisn´e souˇradnice navrac´ı zemˇepisn´e souˇradnice aktu´aln´ıho stˇredu getCenter mapy nastavuje u ´roveˇ n pˇribl´ıˇzen´ı, vstupem je celoˇc´ıseln´a setZoom hodnota navrac´ı celoˇc´ıselnou hodnotu aktu´aln´ı u ´rovnˇe getZoom pˇribl´ıˇzen´ı nastavuje typ mapy (silniˇcn´ı, satelitn´ı, hybridn´ı, setMapTypeId ter´enn´ı) n´avratovou hodnotou je typ mapy v podobˇe texgetMapTypeId tov´eho ˇretˇezce animovan´ y posun mapy o hodnoty udan´ ych v pipanBy xelech animovan´ y posun mapy na pozici udanou panTo v zemˇepisn´ ych souˇradnic´ıch Tabulka 2.4: Metody pro zmˇenu nastaven´ı<br />
<br />
Tˇr´ıda Map obsahuje i dalˇs´ı metody, kter´e vˇsak bˇehem t´eto pr´ace nebyly pouˇzity, a proto zde nejsou uvedeny. Metody se st´avaj´ı opravdu siln´ ym n´astrojem aˇz ve spojen´ı s posluchaˇci (event listeners) a ud´alostmi (events), kter´e reaguj´ı na nejr˚ uznˇejˇs´ı podnˇety uˇzivatele a umoˇzn ˇuj´ı tak vz´ajemnou interakci. Prvn´ı skupina tzv. user events je t´emˇeˇr totoˇzn´a se standardn´ımi DOM ud´alostmi, ale ve skuteˇcnosti jsou tyto ud´alosti souˇca´st´ı Maps API. D˚ uvodem je vyˇsˇs´ı kompatibilita napˇr´ıˇc prohl´ıˇzeˇci. Dalˇs´ı skupinu tvoˇr´ı ud´alosti reaguj´ıc´ı na zmˇeny v mapˇe, napˇr´ıklad zmˇena pˇribl´ıˇzen´ı nebo zmˇena stˇredu mapy. N´asleduje pouze seznam Maps API ud´alost´ı, nebot’ jejich v´ yznam je patrn´ y z n´azvu. [10] click dbclick rightclick mousemove mouseout mouseover<br />
<br />
center changed zoom changed maptypeid changed bounds changed tilt changed projection changed Tabulka 2.5: Ud´alosti 25<br />
<br />
drag dragend dragstart resize idle tilesloaded<br />
<br />
ˇ CVUT v Praze<br />
<br />
2.4<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
Vlastn´ı styl mapy<br />
<br />
Novinka, kter´a se objevila aˇz ve verzi Google Maps JavaScript API v3, nab´ız´ı moˇznost upravit vizu´aln´ı podobu jednotliv´ ych prvk˚ u z´akladn´ı mapy, jako jsou napˇr´ıklad silnice, parky a zastavˇen´e oblasti. D´ıky t´eto funkci je moˇzn´e mapu pˇrizp˚ usobit designu webov´ ych str´anek nebo konkr´etn´ımu u ´ˇcelu pouˇzit´ı. K vytvoˇren´ı vlastn´ıho stylu vyuˇz´ıv´a API featuresTypes, elementTypes a stylers. Prvn´ı zmiˇ novan´a ˇc´ast je pouˇz´ıv´ana pro v´ ybˇer geografick´eho objektu. Je moˇzn´e volit z kategori´ı jako vodn´ı plochy, krajina, silnice nebo body z´ajmu. Vˇetˇsina z tˇechto kategori´ı je jeˇstˇe rozˇs´ıˇrena o podkategorie, kter´e bl´ıˇze specifikuj´ı rozsah pouˇzit´ı. Geografick´e objekty jsou velmi ˇcasto tvoˇreny geometrickou ˇca´st´ı, n´azvem a v nˇekter´ ych pˇr´ıpadech i znaˇckou. ElementTypes umoˇzn ˇuje aplikovat styl pouze na nˇekter´e z tˇechto zvolen´ ych ˇca´st´ı. Kategorie<br />
<br />
Podkategorie<br />
<br />
administrative country, land parcel, locality, neighborhood, province landscape<br />
<br />
man made, natural<br />
<br />
poi<br />
<br />
attraction, business, government, medical, park<br />
<br />
road<br />
<br />
arterial, highway, local<br />
<br />
transit<br />
<br />
line, station (airport, bus, rail)<br />
<br />
water<br />
<br />
nem´a ˇza´dnou podkategorii Tabulka 2.6: FeaturesTypes Kategorie Podkategorie geometry<br />
<br />
fill, stroke<br />
<br />
labels<br />
<br />
icon, text (fill, stroke)<br />
<br />
Tabulka 2.7: ElementTypes Stylers kombinac´ı hodnot odst´ınu, sytosti, jasu a dalˇs´ıch vlastnost´ı definuje podobu jednotliv´ ych geografick´ ych objekt˚ u a jejich ˇca´st´ı. Barvu lze nastavit jednou jedinou hodnotou color nebo v´ yˇse zm´ınˇenou kombinac´ı odst´ınu, sytosti a jasu. Tyto dvˇe r˚ uzn´e metody nastaven´ı barvy je vˇsak moˇzn´e kombinovat, pˇriˇcemˇz vlastnosti se projevuj´ı ve stejn´em poˇrad´ı, ve kter´em jsou definov´any. Vytvoˇren´ı vlastn´ıho stylu mapy m˚ uˇze b´ yt ˇcasovˇe n´aroˇcn´e a v´ ysledek nemus´ı b´ yt uspokojiv´ y. Naˇstˇest´ı existuje online interaktivn´ı n´astroj Styled Map Wizard, kter´ y umoˇzn ˇuje proj´ıt vˇsechny kroky nastaven´ı a v´ ysledek okamˇzitˇe zobrazovat v mapˇe. Pokud je uˇzivatel s mapou spokojen, staˇc´ı vygenerovat JSON 2 , vloˇzit k´od do inicializaˇcn´ı funkce mapy a pˇridˇelit vlastn´ı mapˇe identifikaˇcn´ı n´azev ID. [10] 2<br />
<br />
JavaScript Obejct Notation - JavaScriptov´ y objektov´ y datov´ y form´at<br />
<br />
26<br />
<br />
ˇ CVUT v Praze<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
Obr´azek 2.6: Styled Map Wizard - vlastn´ı styl mapy<br />
<br />
var styles = [ { " featureType " : " all " , " elementType " : " geometry . fill " , " stylers " : [ { " hue " : " #00 c3ff " } , { " visibility " : " on " } , { " saturation " : 11 } , { " lightness " : 13 } , { " gamma " : 1 } ] } ] var styledMap = new google . maps . StyledMapType ( styles , { name: " Zimni mapa " }) ; map . mapTypes . set ( ’ winter_map ’ , styledMap ) ;<br />
<br />
27<br />
<br />
ˇ CVUT v Praze<br />
<br />
2.5 2.5.1<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
Pˇ rid´ an´ı pˇ rekryvn´ e vrstvy Vrstva KML a GeoRSS<br />
<br />
Form´at KML je pouˇz´ıv´an pro zobrazov´an´ı dvojrozmˇern´ ych i trojrozmˇern´ ych prostorov´ ych dat pˇredevˇs´ım v mapov´ ych aplikac´ıch Google Earth a Google Maps. P˚ uvodnˇe byl tento form´at vyvinut pro prohl´ıˇzeˇc Keyhole Earth Viewer a odtud tak´e poch´az´ı jeho p˚ uvodn´ı n´azev Keyhole Markup Language. Ten je vˇsak v souˇcasn´e dobˇe zastaral´ y a ofici´alnˇe pouˇz´ıvan´ ym n´azvem je zkratka tˇechto tˇr´ı slov KML. KML je strukturovan´ y znaˇckovac´ı jazyk pouˇz´ıvaj´ıc´ı vnoˇren´e elementy a atributy zaloˇzen´e na standardu XML (Extensible Markup Language). V roce 2008 Open Geospatial Consortium (OGC), mezin´arodn´ı standardizaˇcn´ı organizace spolupracuj´ıc´ı na v´ yvoji a implementaci standard˚ u pro geoprostorov´a data a sluˇzby, pˇrijalo form´at KML ve verzi 2.2 jako mezin´arodnˇe uzn´avan´ y otevˇren´ y standard, coˇz zaruˇcuje harmonizaci dalˇs´ıch verz´ı s normami OGC. KML se tak stal doplˇ nkem k existuj´ıc´ım standard˚ um GML (Geography Markup Language), WFS (Web Feature Service) a WMS (Web Map Service). Pr´avˇe z v´ yˇse uveden´eho standardu GML odvozuje reprezentaci geometrick´ ych prvk˚ u jako je bod, pˇr´ımka, linie nebo polygon. Ty jsou definov´any jako souˇradnice lomov´ ych bod˚ u v souˇradnicov´em syst´emu WGS84 vloˇzen´ ych do elementu <coordinates>. Aplikace podporuj´ıc´ı form´at KML zpracov´avaj´ı soubory s pˇr´ıponou n´azvu souboru .kml a .kmz (komprimovan´a verze souboru KML) obdobn´ ym zp˚ usobem, jako webov´e prohl´ıˇzeˇce zpracov´avaj´ı soubory HTML nebo XML. [21] Form´at GeoRSS rozˇsiˇruje st´avaj´ıc´ı kan´aly RSS o prostorovou informaci. RSS je form´at zaloˇzen´ y na standardu XML a jeho hlavn´ım c´ılem je jednoduˇse zprostˇredkov´avat a sd´ılet aktu´aln´ı novinky na webov´ ych str´ank´ach, kde ˇcasto doch´az´ı ke zmˇenˇe obsahu (zpravodajsk´e servery). Polohu lze prostˇrednictv´ım GeoRSS interpretovat dvˇema zp˚ usoby. GeoRSS Simple se pokouˇs´ı o co nejjednoduˇsˇs´ı z´apis geografick´e informace, kter´ y umoˇzn´ı rychl´e nasazen´ı v r´amci webu. Druh´a varianta GeoRSS GML dodrˇzuje standardy form´atu GML a nab´ız´ı ˇsirˇs´ı moˇznosti. [5] Do mapy je moˇzn´e geografick´a data ve v´ yˇse popsan´ ych form´atech vloˇzit s vyuˇzit´ım objektu KmlLayer, jehoˇz konstruktor m´a povinn´ y pouze jeden parametr a to adresu nebo cestu k tomuto souboru. Vlastnosti vrstvy jsou souˇca´st´ı souboru a nen´ı moˇzn´e je ve zdrojov´em k´odu aplikace ovlivnit.<br />
<br />
2.5.2<br />
<br />
Dynamick´ e tabulky<br />
<br />
Google Fusion Tables (v ˇceˇstinˇe pouˇz´ıvan´ y v´ yraz Dynamick´e tabulky“) je experi” ment´aln´ı webov´a aplikace, kter´a umoˇzn ˇuje zach´azet s velk´ ym objemem prostorov´ ych dat. 28<br />
<br />
ˇ CVUT v Praze<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
Data je moˇzn´e vytv´aˇret v grafick´em prostˇred´ı aplikace nebo importovat vlastn´ı soubory s maxim´aln´ı velikost´ı 100MB. Celkov´ y limit dat na jednoho uˇzivatele je omezen na 250MB s t´ım, ˇze je moˇzn´e potˇrebn´ y prostor dokoupit. Fusion Tables podporuje bˇeˇzn´e tabulky ve form´atu .csv, .tsv., xlsx nebo .ods a samozˇrejmost´ı je podpora Google Spreadsheets. Geografick´a data je prozat´ım moˇzn´e importovat pouze z KML soubor˚ u. I zde plat´ı nˇekter´a omezen´ı, kter´a stanovuj´ı maxim´aln´ı poˇcet znak˚ u v buˇ nce. Pˇri pˇrekroˇcen´ı jednoho milionu znak˚ u v popisu KML se import souboru nezdaˇr´ı a skonˇc´ı varovnou hl´aˇskou. Importovan´a nebo vytvoˇren´a data je moˇzn´e d´ale kombinovat, sd´ılet s ostatn´ımi uˇzivateli, prov´adˇet nad daty anal´ yzy a dotazy nebo data graficky vizualizovat. K vizualizaci lze vyuˇz´ıt grafy nebo kaˇzd´emu ˇra´dku datab´aze pˇriˇradit informaci o geografick´e poloze a prvky vizualizovat v mapˇe. Pro bˇeˇzn´eho uˇzivatele, kter´emu staˇc´ı prostor 250MB, je Fusion Tables velice v´ yhodnou alternativou ke klasick´ ym datab´azov´ ym syst´em˚ um, jejichˇz poˇrizovac´ı n´aklady neb´ yvaj´ı nejlevnˇejˇs´ı. Data lze tak´e pouˇz´ıt jako vlastn´ı vrstvu v aplikaci vyuˇz´ıvaj´ıc´ı Google Maps API. Komunikaci s Fusion Tables obstar´av´a jednoduch´ y objekt FusionTablesLayer. Velikou v´ yhodou je zobrazen´ı dat na z´akladˇe specifick´ ych dotaz˚ u, kter´e jsou souˇc´ast´ı FusionTablesLayerOptions a maj´ı velmi podobnou syntax jako pˇr´ıkazy jazyka SQL (select, from a where). Na z´akladˇe tˇechto podm´ınek je moˇzn´e jednotliv´e prvky graficky odliˇsit a vytv´aˇret tak jednoduch´e tematick´e mapy. Na rozd´ıl od ostatn´ıch vrstev nejsou geografick´a data zobrazov´ana jako jednotliv´e prvky, ale na stranˇe serveru jsou vytv´aˇreny rastry, ze kter´ ych jsou n´aslednˇe generov´any mapov´e dlaˇzdice odpov´ıdaj´ıc´ı sch´ematu dlaˇzdic, kter´e pouˇz´ıvaj´ı podkladov´e mapy Google Maps. Pˇri vkl´ad´an´ı tabulky do mapy je d˚ uleˇzit´e dodrˇzet hned nˇekolik pravidel a omezen´ı. Hlavn´ı pravidlo ˇr´ık´a, ˇze tabulka mus´ı b´ yt veˇrejnˇe sd´ılena a data mus´ı m´ıt vloˇzeny informace o poloze. Poloha m˚ uˇze b´ yt urˇcena zemˇepisn´ ymi souˇradnicemi, adresou nebo spojen´ım se souborem KML. Omezen´ı se t´ ykaj´ı pˇredevˇs´ım poˇctu vkl´adan´ ych tabulek, poˇctu sloupc˚ u a jejich velikosti. [11]<br />
<br />
2.5.3<br />
<br />
Dalˇ s´ı vrstvy<br />
<br />
Mapa je tak´e vhodn´a pro vizualizaci aktu´aln´ı dopravn´ı informace, s´ıtˇe mˇestsk´e hromadn´e dopravy, pˇredpovˇedi poˇcas´ı nebo oblaˇcnosti. Toho si je Google vˇedom, a tak uˇzivatel˚ um vyuˇz´ıvaj´ıc´ı Maps API umoˇzn ˇuje tato data vkl´adat jako pˇrekryvn´e vrstvy nad podkladovou mapou. N´asleduj´ıc´ı text zmiˇ nuje pouze ty vrstvy, kter´e byly v t´eto aplikaci pouˇzity. [4] Vrstva Traffic layer zobrazuje aktu´aln´ı dopravn´ı situaci, dopravn´ı nehody nebo ˇ e Republiky omezena pl´anovan´e dlouhodob´e uzav´ırky. Tato vrstva je vˇsak v r´amci Cesk´ pouze na nˇekolik hlavn´ıch silnic a d´alnic, ale i pˇresto m˚ uˇze znatelnˇe zkr´atit dojezdov´e ˇcasy. Jej´ı implementace je jen jednoˇr´adkov´a a je zaloˇzena na vytvoˇren´ı objektu new google.maps.TrafficLayer() a vloˇzen´ı tohoto objektu do mapy.<br />
<br />
29<br />
<br />
ˇ CVUT v Praze<br />
<br />
2 Vyuˇzit´ı Google Maps API v3<br />
<br />
Vrstva poˇcas´ı a oblaˇcnosti vyˇzaduje pˇrid´an´ı knihovny weather“ na ko” nec reference odkazuj´ıc´ı na Google Maps API. Vytvoˇren´ım objektu new google.maps.weather.ClouadLayer() bude do mapy pˇrid´ana vrstva oblaˇcnosti viditeln´e v rozsahu pˇribl´ıˇzen´ı 0 aˇz 6. Aktu´aln´ı teploty vˇcetnˇe ikon se do mapy vloˇz´ı vytvoˇren´ım objektu new google.maps.weather.WeatherLayer(). Kliknut´ım na jednu z ikon se otevˇre nov´e okno obsahuj´ıc´ı doplˇ nkov´e informace o vlhkosti a smˇeru vˇetru, ale tak´e ˇctyˇrdenn´ı pˇredpovˇed’ poˇcas´ı pro dan´e m´ısto. Zdrojem pro aktu´aln´ı stav a pˇredpovˇed’ poˇcas´ı je server www.weather.com. Vrstva Panoramio je tvoˇrena fotografiemi, jejichˇz souˇca´st´ı jsou souˇradnice m´ısta poˇr´ızen´ı. Pˇrid´av´an´ı geografick´ ych metadat k fotografi´ım ˇci jin´ ym m´edi´ım je ˇcasto oznaˇcov´ano ciz´ım term´ınem geotagging“. Podobnˇe jako u vrstvy poˇcas´ı ” je nutn´e nejdˇr´ıve naˇc´ıst knihovnu Panoramio a pot´e vytvoˇrit objekt new google.maps.panoramio.PanoramioLayer(). Informace o pouˇzit´ı sluˇzby Panoramio jsou dostupn´e na str´ank´ach www.panoramio.com. Na tˇechto str´ank´ach je moˇzn´e opatˇrit svoje vlastn´ı fotografie geotaggem, zobrazit v mapˇe a sd´ılet s ostatn´ımi uˇzivateli vyuˇz´ıvaj´ıc´ı tuto sluˇzbu.<br />
<br />
30<br />
<br />
KAPITOLA<br />
<br />
Realizace aplikace Pˇri vytv´aˇren´ı aplikace byla pouˇzita cel´a ˇrada programovac´ıch jazyk˚ u, kter´e spolu s v´ yvojov´ ym prostˇred´ım Google Maps API vytv´aˇr´ı celkov´ y vzhled str´anky a pˇr´ıvˇetiv´e uˇzivatelsk´e rozhran´ı aplikace. Pouˇzit´e programovac´ı jazyky jsou HTML, CSS , JavaScript a JavaScriptov´a knihovna jQuery. Psan´ı zdrojov´eho k´odu m˚ uˇze zjednoduˇsit spr´avn´ y v´ ybˇer editoru. Nejjednoduˇsˇs´ı variantou je editace v pozn´amkov´em bloku, kter´ y je souˇc´ast´ı kaˇzd´e instalace Windows. Tato varianta se hod´ı sp´ıˇse pro drobn´e u ´pravy, neˇz pro psan´ı cel´eho projektu, a proto je vhodnˇejˇs´ı zvolit speci´aln´ı editor, jehoˇz velikou v´ yhodou je zv´ yraznˇen´ı syntaxe podporovan´ ych programovac´ıch jazyk˚ u. Na internetu je ke staˇzen´ı velk´e mnoˇzstv´ı volnˇe dostupn´ ych editor˚ u pro nejpouˇz´ıvanˇejˇs´ı operaˇcn´ı syst´emy. Po pˇreˇcten´ı nˇekter´ ych diskuz´ı a rad jsem zvolil editor Sublime Text, se kter´ ym jsem byl velmi spokojen, a mohu ho proto zaˇc´ınaj´ıc´ım program´ator˚ um doporuˇcit. V n´asleduj´ıc´ı kapitole se podrobnˇeji zamˇeˇr´ım na jednotliv´e programovac´ı jazyky vˇcetnˇe praktick´eho vyuˇzit´ı v aplikaci. Souˇc´ast´ı kapitoly jsou tak´e informace o datov´ ych vrstv´ach a jejich zpracov´an´ı.<br />
<br />
3.1<br />
<br />
Specifikace a historie HTML<br />
<br />
HyperText Markup Language, ve zkratce HTML, je oznaˇcen´ı pro znaˇckovac´ı jazyk pouˇz´ıvan´ y pro tvorbu webov´ ych str´anek a publikaci dokument˚ u na internetu. Jazyk HTML je charakteristick´ y mnoˇzinou znaˇcek (tzv. tag˚ u), mezi kter´e se uzav´ıraj´ı ˇca´sti textu, a t´ım se urˇcuje jejich s´emantika. V´ yvoj a definice tohoto jazyka byla ovlivnˇena pˇredevˇs´ım v´ yvojem webov´ ych prohl´ıˇzeˇc˚ u. Historie jazyka HTML je pro pochopen´ı samotn´e tvorby webov´ ych str´anek celkem nepodstatn´a a d´a se bez jej´ı znalosti obej´ıt, ale podle m´eho n´azoru je velmi zaj´ımav´a a kaˇzd´ y program´ator str´anek by mˇel m´ıt minim´alnˇe povˇedom´ı o v´ yvoji tohoto znaˇckovac´ıho jazyka. Za zakladatele jazyka HTML jsou povaˇzov´any zamˇestnanci v´ yzkumn´eho centra CERN Tim Berners-Lee a Robert Caillau, kteˇr´ı pro CERN vyv´ıjeli jednoduˇsˇs´ı alternativu ke sloˇzit´ ym programovac´ım jazyk˚ um, urˇcen´ ym k vytv´aˇren´ı dokument˚ u (TeX, PostScript nebo SGML). Prvn´ı koncept jazyka HTML a protokolu pro pˇrenos hypertextu HTTP se zrodil v roce 1989 spolu s projektem WWW a o rok pozdˇeji s prvn´ım webov´ ym prohl´ıˇzeˇcem WorldWideWeb pro poˇc´ıtaˇc NeXT v CERNu. Ten mimo jin´e obsahoval moˇznost samotn´e editace dokumentu. Webov´ y prohl´ıˇzeˇc a hypertext mˇel slouˇzit vˇedc˚ um a vˇedeck´ ym insti-<br />
<br />
31<br />
<br />
3<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
tuc´ım po cel´em svˇetˇe ke sd´ılen´ı v´ yzkumn´ ych prac´ı. Prvn´ı n´avrh jazyka HTML byl silnˇe zaloˇzen na architektuˇre jazyka SGML, kter´ y dodrˇzuje mezin´arodnˇe dohodnut´e metody ˇclenˇen´ı textu do konstrukˇcn´ıch celk˚ u, jako jsou napˇr´ıklad odstavce, nadpisy nebo poloˇzky seznamu. V´ yraznou novinkou oproti SGML byly tehdy napˇr´ıklad hypertextov´e odkazy. V roce 1991 se po zveˇrejnˇen´ı specifikac´ı jazyka HTML zvedla vlna diskus´ı o budoucnosti a vyuˇzit´ı HTML pro ˇsirokou veˇrejnost. Prostˇrednictv´ım elektronick´ ych diskuz´ı si nadˇsenci z ˇrad akademick´ ych a v´ yzkumn´ ych pracovn´ıku vymˇen ˇovali nejr˚ uznˇejˇs´ı n´apady na vylepˇsen´ı. Takov´ ym nadˇsencem byl napˇr´ıklad Dave Raggett ze spoleˇcnosti HewlettPackard, kter´ y po n´avratu z n´avˇstˇevy u Tima Bernerse-Leea zaˇcal pracovat na obohacen´e verzi s oznaˇcen´ım HTML+ a pozdˇeji tak´e na sv´em vlastn´ım prohl´ıˇzeˇci Arena. V t´e dobˇe se tak´e o HTML zaˇcala zaj´ımat organizace NCSA (National Center for Supercomputer Applications), kter´a povˇeˇrila program´atora Marca Andreessena vytvoˇren´ım webov´eho prohl´ıˇzeˇce s implementac´ı HTML. Prohl´ıˇzeˇc byl zveˇrejnˇen v roce 1993 a nesl n´azev Mosaic. Byl to prvn´ı prohl´ıˇzeˇc s grafick´ ym uˇzivatelsk´ ym rozhran´ım, ale jiˇz bez moˇznosti editace. Marc Adreessen se pozdˇeji stal zakladatelem spoleˇcnosti Netscape, kter´a d´ıky u ´spˇeˇsn´emu prohl´ıˇzeˇci byla ˇcasto mylnˇe pokl´ad´ana za tv˚ urce webu. Novˇe vznikaj´ıc´ı webov´e prohl´ıˇzeˇce pˇrid´avaly do HTML sv´e vlastn´ı prvky, coˇz samozˇrejmˇe vedlo mezi program´atory a uˇzivateli k chaosu. Jako reakci na tento probl´em vytvoˇril Berners-Lee, pod z´aˇstitou skupiny IETF (Internet Engineering Task Force), n´avrh standardu HTML 2.0, kter´ y shromaˇzd’oval nejpouˇz´ıvanˇejˇs´ı HTML tagy napˇriˇc prohl´ıˇzeˇci. V roce 1994 vznikla, v tomto dokumentu jiˇz nˇekolikr´at zmiˇ novan´a, organizace World Wide Web Consortium, v jej´ımˇz ˇcele st´al Tim Berners-Lee. C´ılem organizace je kontrolovat otevˇren´e webov´e standardy pro World Wide Web a sjednotit rozd´ıln´e verze HTML. Prvn´ı verze standardu pod z´aˇstitou W3C byla vyd´ana v roce 1997 a nesla oznaˇcen´ı HTML 3.2. Ta kombinovala prvky z verze HTML 2.0 a 3.0, kter´a vznikla z HTML+ a pˇrinesla spoustu nov´ ych prvk˚ u, ale jejich u ´plnou podporu nab´ızel pouze prohl´ıˇzeˇc Arena. N´asledovala verze HTML 4.0, kter´a pouze obohacovala pˇredchoz´ı verzi o nˇekter´e prvky a r´amy. Drobn´e chyby a nedostatky byly ˇreˇseny aktualizac´ı na verzi 4.01. V´ yvoj jazyka HTML mˇel b´ yt ukonˇcen a nahrazen nov´ ym jazykem XHTML odvozen´ ym od standardu XML, ale tento krok se pozdˇeji uk´azal jako ˇspatn´ y. Prohl´ıˇzeˇce tento nov´ y jazyk vˇetˇsinou nepodporovaly a samotn´ı v´ yrobci zaloˇzili pracovn´ı skupinu WHATWG (The Web Hypertext Application Technology Working Group), kter´a mˇela za c´ıl rozˇsiˇrovat jazyk HTML. Slouˇcen´ım t´eto skupiny a organizace W3C vznikla nov´a pracovn´ı skupina, kter´a se od roku 2007 pod´ıl´ı na vzniku nov´eho standardu HTML 5. [31] [18]<br />
<br />
3.2<br />
<br />
HTML5 a Geolocation API<br />
<br />
HTML5 je nejnovˇejˇs´ı specifikace znaˇckovac´ıho jazyka HTML, kter´a oproti sv´ ym pˇredch˚ udc˚ um nab´ız´ı moˇznost vytv´aˇret bohatˇs´ı webov´e str´anky bez nutnosti naˇc´ıt´an´ı pˇr´ıdavn´ ych plugin˚ u. Nov´a specifikace obohacuje HTML o nov´e tagy, kter´e zvyˇsuj´ı<br />
<br />
32<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
pˇrehlednost zdrojov´eho k´odu (article, header, footer), moˇznost spouˇstˇet webov´e aplikace i bez nutnosti st´al´eho pˇripojen´ı k internetu, podporu audia i videa bez pouˇzit´ı flashe a dalˇs´ı novinky. HTML5 je multiplatformn´ı a je navrˇzen tak, aby byla podporov´ana veˇsker´a zaˇr´ızen´ı pˇres poˇc´ıtaˇce, tablety, chytr´e telefony aˇz po st´ale popul´arnˇejˇs´ı Smart TV. HTML5 tak´e podporuje ˇsirˇs´ı spolupr´aci s rozˇs´ıˇren´ ymi kask´adov´ ymi styly CSS3 a skriptovac´ım jazykem JavaScript, ke kter´emu pˇristupuje skrze Document Object Model, zkr´acenˇe DOM. Verze HTML5 nen´ı st´ale jeˇstˇe dokonˇcena a v souˇcasnosti je ve st´adiu oznaˇcovan´em jako Candidate Recommendation. U specifikace na str´ank´ach konsorcia je uvedeno datum zveˇrejnˇen´ı 4. ledna 2014. V t´eto f´azi je jazyk jiˇz dokonˇcen a ke koneˇcn´emu doporuˇcen´ı konsorcia Recommendation zb´ yv´a jen nˇekolik krok˚ u v podobˇe testov´an´ı kompatibility na r˚ uzn´ ych prohl´ıˇzeˇc´ıch a dolad’ov´an´ı nˇekter´ ych detail˚ u. [33] Novˇe pˇredstavenou novinkou, kter´e se budu v t´eto ˇcast´ı dokumentu podrobnˇeji zab´ yvat, je geolokaˇcn´ı rozhran´ı Geolocation API. Pomoc´ı tohoto rozhran´ı je moˇzn´e zjistit a sledovat aktu´aln´ı pozici uˇzivatele, respektive polohu jeho zaˇr´ızen´ı, pˇr´ımo v prostˇred´ı webov´eho prohl´ıˇzeˇce. Doch´az´ı tak ke zjednoduˇsen´ı a sjednocen´ı metod pro z´ısk´av´an´ı souˇradnic ve webov´ ych aplikac´ıch. Geolocation API podporuje vˇetˇsina souˇcasn´ ych desktopov´ ych i mobiln´ıch prohl´ıˇzeˇc˚ u. Podporu konkr´etn´ıch verz´ı prohl´ıˇzeˇc˚ u lze dohledat na ofici´aln´ıch str´ank´ach specifikace konsorcia W3C. [29] Geolokaˇcn´ı rozhran´ı samo o sobˇe nezjiˇst’uje aktu´aln´ı pozici, ale pouze prostˇrednictv´ım webov´e aplikace a prohl´ıˇzeˇce s podporou HTML5 zprostˇredkov´av´a komunikaci se zaˇr´ızen´ım, kter´e z´ısk´a a odeˇsle zpˇet do aplikace aktu´aln´ı souˇradnice ve svˇetov´em souˇradnicov´em syst´emu WGS84. Odesl´an´ı poˇzadavku na zjiˇstˇen´ı aktu´aln´ı pozice mus´ı uˇzivatel vˇetˇsiny prohl´ıˇzeˇc˚ u nejdˇr´ıve povolit, ˇc´ımˇz je zajiˇstˇeno soukrom´ı uˇzivatele a vyvr´aceny veˇsker´e spekulace o nechtˇen´em sledov´an´ı. [2]<br />
<br />
Obr´azek 3.1: Povolen´ı sledov´an´ı polohy v prohl´ıˇzeˇci Google Chrome<br />
<br />
3.2.1<br />
<br />
Zjiˇ stˇ en´ı polohy<br />
<br />
Zdroj˚ u, pomoc´ı kter´ ych z´ısk´avaj´ı rozd´ıln´a zaˇr´ızen´ı informace o poloze, je hned nˇekolik a v nˇekter´ ych pˇr´ıpadech se tyto zdroje vz´ajemnˇe kombinuj´ı. Nejjednoduˇsˇs´ı a z´aroveˇ n nejm´enˇe pˇresnou metodou, jak z´ıskat aktu´aln´ı souˇradnice, je lokalizace pˇres IP adresu. Tato metoda vyuˇz´ıv´a informace o fyzick´e adrese poskytovatele, kter´a m˚ uˇze b´ yt od aktu´aln´ı polohy uˇzivatele aˇz stovky kilometr˚ u vzd´alen´a. Dalˇs´ı metoda lokalizace spoˇc´ıv´a ve v´ ypoˇctu polohy zaˇr´ızen´ı na z´akladˇe triangulace z vys´ılac´ıch stanic mobiln´ıch oper´ator˚ u a Wi-Fi pˇrij´ımaˇc˚ u. Metoda triangulace vrac´ı pˇrekvapivˇe pˇresn´e v´ ysledky, ale pouze v pˇr´ıpadˇe, ˇze je v okol´ı dostatek stanic a pˇrij´ımaˇc˚ u. Posledn´ım a tak´e nejpˇresnˇejˇs´ım zp˚ usobem je lokalizace pˇres GPS satelity na obˇeˇzn´e dr´aze Zemˇe. Pˇresnost t´eto metody se pohybuje v ˇr´adech metr˚ u, ale je nutn´e vlastnit zaˇr´ızen´ı s integrovan´ ym GPS pˇrij´ımaˇcem a m´ıt 33<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
pˇr´ım´ y v´ yhled na oblohu. Nev´ yhodou se m˚ uˇze zd´at delˇs´ı ˇcasov´a prodleva pˇred spuˇstˇen´ım samotn´eho pˇrij´ımaˇce a n´asledn´ ym spojen´ım se satelity GPS. Tento probl´em Geolocation API ˇreˇs´ı tak, ˇze nejprve urˇc´ı polohu na z´akladˇe jedn´e z pˇredchoz´ıch metod a tu n´aslednˇe po inicializaci GPS zpˇresˇ nuje. [22]<br />
<br />
3.2.2<br />
<br />
Aplikace lokalizace<br />
<br />
Kaˇzd´a aplikace, vyuˇz´ıvaj´ıc´ı Geolocation API, by mˇela zaˇc´ınat jednoduch´ ym testem na pˇr´ıtomnost objektu knihovny navigator.geolocation, jehoˇz inicializace je z´avisl´a na internetov´em prohl´ıˇzeˇci a svolen´ı uˇzivatele tato data vyuˇz´ıvat. T´ım se vyvarujeme nechtˇen´ ym chyb´am pˇri samotn´em bˇehu aplikace. Pˇri kladn´em v´ ysledku tohoto testu m˚ uˇze b´ yt v aplikaci vyuˇzita jedna z metod tohoto objektu, v pˇr´ıpadˇe opaˇcn´em m˚ uˇze b´ yt vyps´ana varovn´a hl´aˇska informuj´ıc´ı uˇzivatele o nemoˇznosti sledov´an´ı polohy. Z´akladn´ı metodou pro zjiˇstˇen´ı aktu´aln´ı polohy uˇzivatele je metoda getCurrentPosition(), jej´ımˇz vstupem je jeden povinn´ y a dva nepovinn´e parametry. ge tC ur rentPosi tion ( succesCallback , errorCallback , options ) ;<br />
<br />
Prvn´ı povinn´ y parametr succesCallback definuje n´avratovou metodu, kter´e je hned po zjiˇstˇen´ı pozice pˇred´an objekt se dvˇema atributy - coords a timestamp. Tento objekt je mimo jin´e potomkem objektu, kter´ y implementuje rozhran´ı position. Atribut timestamp (ˇcasov´e raz´ıtko) obsahuje pouze informaci o ˇcase zjiˇstˇen´ı polohy, zat´ımco atribut coords obsahuje vˇsechny d˚ uleˇzit´e informace o poloze. Ty spolu s jednotliv´ ymi metodami a objekty 1 pˇrehlednˇe zobrazuje sch´ema na obr´azku 3.2 . Informace o zemˇepisn´ ych souˇradnic´ıch jsou reprezentov´any dvoj´ıc´ı latitude, longitude a atributem accuracy, ud´avaj´ıc´ı pˇresnost urˇcen´ı polohy v metrech. Souˇradnice jsou ud´av´any ve form´atu desetinn´eho ˇc´ısla. Atribut altitude vrac´ı nadmoˇrskou v´ yˇsku v metrech s pˇresnost´ı urˇcen´ı altitudeAccuracy. Ke zjiˇstˇen´ı aktu´aln´ı rychlosti v metrech za sekundu nebo smˇeru pohybu zaˇr´ızen´ı slouˇz´ı atributy speed respektive headings. Smˇer pohybu je ´ ud´av´an azimutem, coˇz je u ´hel mezi myˇslenou pˇr´ımkou k severu a smˇerem pohybu. Uhel je poˇc´ıt´an po smˇeru hodinov´ ych ruˇciˇcek. Takˇze napˇr´ıklad pˇri smˇeru pohybu na v´ ychod bude hodnota headings 90 stupˇ n˚ u. Prvn´ı nepovinn´ y parametr errorCallback urˇcuje n´avratovou metodu, kter´a je zavol´ana v pˇr´ıpadˇe chyby nebo nesplnˇen´ı nˇekter´e podm´ınky funkˇcnosti lokalizace. Posledn´ı a z´aroveˇ n druh´ y nepovinn´ y parametr je objekt obsahuj´ıc´ı n´asleduj´ıc´ı moˇznosti: 1. enableHighAccuracy je hodnota typu boolean, kter´a v pˇr´ıpadˇe nastaven´ı na hodnotu true zap´ın´a zjiˇst’ov´an´ı polohy nejpˇresnˇejˇs´ım dostupn´ ym zp˚ usobem, napˇr´ıklad vyuˇzit´ım sign´alu z GPS druˇzic. Nejedn´a se tedy o zpˇresnˇen´ı v´ ysledku, jak by mohlo b´ yt z n´azvu ˇspatnˇe pochopeno. 1<br />
<br />
http://imdavidwebb.files.wordpress.com/2012/10/stractureofgeoapi.jpg<br />
<br />
34<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
Obr´azek 3.2: Sch´ema Geolocation API 2. timeout nastavuje maxim´aln´ı ˇcasov´ y limit, bˇehem kter´eho se prohl´ıˇzeˇc snaˇz´ı z´ıskat ˇ je ud´av´an v milisekund´ach. Pˇri ne´ informace o poloze. Cas uspˇeˇsn´em pokusu se po vyprˇsen´ı intervalu vyvol´a definovan´a chybov´a hl´aˇska. 3. maximumAge specifikuje, jak star´e mˇeˇren´ı m˚ uˇze b´ yt v aplikaci pouˇzito. Napˇr´ıklad nastaven´ım na hodnotu 600 000 milisekund je zaruˇceno, ˇze pozice bude maxim´alnˇe 10 minut star´a. V´ yˇse popsan´a metoda getCurrentPosition je dostateˇcn´a u statick´ ych zaˇr´ızen´ı jako jsou napˇr´ıklad stoln´ı poˇc´ıtaˇce, ale pro mobiln´ı zaˇr´ızen´ı, kter´a mohou pr˚ ubˇeˇznˇe mˇenit svoji polohu, je vhodnˇejˇs´ı vyuˇz´ıt metodu watchPosition(). Tyto dvˇe metody jsou t´emˇeˇr stejn´e s jedn´ım jedin´ ym rozd´ılem, ˇze druh´a zmiˇ novan´a metoda vrac´ı aktu´aln´ı souˇradnice pˇri kaˇzd´e zmˇenˇe polohy. Zruˇsen´ı sledov´an´ı polohy obstar´av´a metoda clearPosition(). [32]<br />
<br />
3.2.3<br />
<br />
Pouˇ zit´ı s Google Maps API<br />
<br />
K vizualizaci aktu´aln´ı polohy uˇzivatele v prostˇred´ı Google Maps API jsem vyuˇzil tˇr´ıdu google.maps.Marker, jej´ıˇz konstruktor m´a na vstupu pouze dva povinn´e parametry position a map. Prvn´ı parametr urˇcuje poˇca´teˇcn´ı um´ıstˇen´ı znaˇcky, zat´ımco druh´ y parametr urˇcuje mapu, na kter´e se znaˇcka zobraz´ı.<br />
<br />
35<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
var position = new google . maps . LatLng ( position . coords . latitude , position . coords . longitude ) ; d e v i c e P o s i t i o n M a r k e r . setOptions ({ position: position , map: map , icon: { url: " css / icon / gps_button . png " , size: new google . maps . Size (34 , 34) , scaledSize: new google . maps . Size (17 , 17) , anchor: new google . maps . Point (8 , 8) } }) ;<br />
<br />
Obsahem tohoto zdrojov´eho k´odu je praktick´a uk´azka vyuˇzit´ı Geolocation API k vytvoˇren´ı nov´e promˇenn´e uchov´avaj´ıc´ı zemˇepisnou ˇs´ıˇrku a zemˇepisnou d´elku aktu´aln´ı pozice uˇzivatele a n´asledn´emu um´ıstˇen´ı znaˇcky do mapy. Tˇr´ıda marker byla vytvoˇrena glob´alnˇe tak, aby k n´ı byl umoˇznˇen pˇr´ıstup z jak´ekoli ˇca´sti k´odu. To je d˚ uleˇzit´e pˇredevˇs´ım pˇri sledov´an´ı polohy metodou watchPosition(), kter´a k t´eto tˇr´ıdˇe pˇristupuje a kontinu´alnˇe, na z´akladˇe aktu´aln´ı polohy uˇzivatele, nastavuje novou pozici znaˇcky v mapˇe. [10] Parametr icon umoˇzn ˇuje nahradit v´ ychoz´ı styl ikony stylem vlastn´ım, kter´ y pomoc´ı r˚ uzn´ ych nastaven´ı definuje vizu´aln´ı chov´an´ı znaˇcky. V nejz´akladnˇejˇs´ım tvaru je nutn´e uv´est pouze odkaz na novou ikonu, kter´a nahrad´ı klasickou podobu pˇrip´ın´aˇcku. Velikost ikony je nastavena automaticky, nebo je moˇzn´e velikost nastavit ruˇcnˇe. Souˇca´st´ı nastaven´ı je tak´e mˇeˇr´ıtko a takzvan´ y kotv´ıc´ı bod, kter´ y je z´avisl´ y na tvaru znaˇcky. V tomto konkr´etn´ım pˇr´ıpadˇe je kotv´ıc´ı bod posunut od lev´eho horn´ıho rohu na souˇradnice odpov´ıdaj´ıc´ı stˇredu znaˇcky. Pouˇzit´ı jednoduch´e znaˇcky pro zobrazen´ı polohy, jej´ıˇz nepˇresnost m˚ uˇze b´ yt v nˇekter´ ych pˇr´ıpadech i nˇekolik kilometr˚ u, by mohlo b´ yt pro uˇzivatele znaˇcnˇe matouc´ı. Bylo by tedy velmi uˇziteˇcn´e nepˇresnost urˇcen´ı polohy nˇejak´ ym zp˚ usobem vizualizovat. V tomto pˇr´ıpadˇe se pˇr´ımo nab´ız´ı vyuˇz´ıt tˇr´ıdu google.maps.Circle, kter´a nedˇel´a nic jin´eho, neˇz jen vykresluje kruh s urˇcit´ ym stˇredem a polomˇerem. Pr´avˇe tyto dva parametry, reprezentovan´ y souˇradnicemi aktu´aln´ı polohy a pˇresnost´ı jej´ıho urˇcen´ı, jsou pro vizualizaci nejd˚ uleˇzitˇejˇs´ı. Doplˇ nuj´ıc´ı parametry, jako je napˇr´ıklad barva v´ yplnˇe, pr˚ uhlednost nebo tlouˇst’ka obvodov´e ˇca´ry, definuj´ı grafickou podobu kruhu. Ze stejn´ ych d˚ uvod˚ u jako tˇr´ıda marker byla i tato tˇr´ıda vytvoˇrena glob´alnˇe. d e v i c e P o s i t i o n C i r c l e . setOptions ({ center: position , map: map , radius: position . coords . accuracy , strokeColor: " #1 bb6ff " , strokeOpacity: 0.4 , strokeWeight: 1 , fillColor: " #61 a0bf " , fillOpacity: 0.4 }) ;<br />
<br />
36<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
Vizualizace byla d´ale doplnˇena o informaˇcn´ı okno tˇr´ıdy google.maps.InfoWindow, kter´e informuje uˇzivatele o aktu´aln´ıch souˇradnic´ıch, rychlosti pohybu a pˇresnosti urˇcen´ı polohy.<br />
<br />
Obr´azek 3.3: Vizualizace polohy a jej´ı pˇresnosti<br />
<br />
3.3<br />
<br />
Vzhled str´ anky<br />
<br />
Bˇehem v´ yvoje jazyka HTML vznikaly rozd´ıln´e metody jak text form´atovat. Starˇs´ı a dnes jiˇz t´emˇeˇr nepouˇz´ıvan´ y zp˚ usob form´atoval text definovan´ ymi HTML tagy, kter´e nepopisovaly obsah, ale zp˚ usob jeho zobrazen´ı. Tato metoda nebyla velmi praktick´a, a proto vˇetˇsina modern´ıch web˚ u vyuˇz´ıv´a pro nastaven´ı vzhledu str´anky jazyk CSS, tedy Cascade Style Sheets“. ” Autorem tohoto jazyka je norsk´ y v´ yvoj´aˇr H˚ akon Wium Lie, spolupracovn´ık Tima Bernerse-Leea, kter´ y na prvotn´ım n´avrhu zaˇcal pracovat z podnˇetu standardizaˇcn´ı organizace W3C. C´ılem bylo vytvoˇrit jazyk, kter´ y by oddˇeloval vzhled dokumentu od jeho obsahu. To je dnes moˇzn´e tˇremi zp˚ usoby. Pˇr´ımo v textu u form´atovan´eho elementu, v hlaviˇcce zdrojov´eho k´odu nebo v extern´ım souboru, coˇz je z hlediska pˇrehlednosti nejpraktiˇctˇejˇs´ı. Kask´adov´e styly jsou s elementy propojeny takzvan´ ymi selektory, kter´e na z´akladˇe tˇr´ıdy nebo identifik´atoru pˇriˇrazuj´ı elementu definovan´ y styl. [15] Nejnovˇejˇs´ı verze kask´adov´ ych styl˚ u nese oznaˇcen´ı CSS3 a oproti sv´ ym pˇredch˚ udc˚ um pˇrin´aˇs´ı celou ˇradu nov´ ych vlastnost´ı, jako jsou kulat´e rohy, st´ıny, pohyby nebo rotace prvk˚ u. V´ yvoj nov´e verze kask´adov´ ych styl˚ u st´ale pokraˇcuje a m˚ uˇze se tedy st´at, ˇze nov´e vlastnosti nebudou nˇekter´ ymi webov´ ymi prohl´ıˇzeˇci a jejich starˇs´ımi verzemi podporov´any. Na druhou stranu podpoˇre napom´ah´a konkurenˇcn´ı souboj prohl´ıˇzeˇc˚ u, kter´e se vz´ajemnˇe pˇredh´anˇej´ı v rychlosti implementace novˇe pˇredstaven´ ych vlastnost´ı jak CSS3 tak HTML5. Jednotliv´e specifikace a aktu´aln´ı n´avrhy CSS3 je moˇzn´e dohledat na internetov´ ych str´ank´ach pracovn´ı skupiny Cascading Style Sheet working group“, p˚ usob´ıc´ı ” pod organizac´ı W3C. [34] . map_inner { - w e b k i t - b o r d e r - r a d i u s : 2 px ; - mo z - bo r d er-rad i u s: 2 px ; border-radius: 2 px ; }<br />
<br />
37<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
Praktick´ y pˇr´ıklad ukazuje vyuˇzit´ı vlastnosti border-radius, kter´a urˇcuje polomˇer zakulacen´ı roh˚ u element˚ u tˇr´ıdy map inner. Hodnota zakulacen´ı m˚ uˇze b´ yt ud´ana v pixelech nebo v procentech ˇs´ıˇrky elementu. Zad´an´ım posloupnosti ˇctyˇr hodnot je moˇzn´e zakulacovat kaˇzd´ y roh zvl´aˇst’, nebo vloˇzen´ım jedn´e hodnoty nastavit jednotn´e zakulacen´ı pro vˇsechny rohy. V pˇr´ıpadˇe prvn´ım se postupuje po smˇeru hodinov´ ych ruˇciˇcek v poˇrad´ı lev´ y horn´ı roh, prav´ y horn´ı roh, doln´ı prav´ y roh a doln´ı lev´ y roh. Vˇetˇsina novˇejˇs´ıch prohl´ıˇzeˇc˚ u podporuje vlastnost border-radius, nicm´enˇe pro zpˇetnou kompatibilitu je dobr´e uv´adˇet testovac´ı vlastnosti liˇs´ıc´ı se prefixem moz pro Mozillu a webkit pro prohl´ıˇzeˇce Chrome, Opera a Safari.<br />
<br />
3.4<br />
<br />
JavaScript a knihovna jQuery<br />
<br />
JavaScript je objektovˇe orientovan´ y skriptovac´ı jazyk, jehoˇz autorem je americk´ y v´ yvoj´aˇr Brendan Eich, b´ yval´ y zamˇestnanec spoleˇcnosti NetScape. Pˇri jeho pˇredstaven´ı v roce 1955 nebyl zn´am pod oznaˇcen´ım JavaScript, ale pod p˚ uvodn´ım oznaˇcen´ım Mocha. N´azev JavaScript z´ıskal aˇz o necel´ y rok pozdˇeji. Nyn´ı se nejˇcastˇeji pouˇz´ıv´a jako interpretovan´ y programovac´ı jazyk pro tvorbu webov´ ych str´anek. Jazyk je interpretov´an na stranˇe klienta, coˇz znamen´a, ˇze vˇsechny skripty jsou po naˇcten´ı webov´e str´anky doˇcasnˇe staˇzeny do prohl´ıˇzeˇce, kde se spust´ı (interpretuj´ı). V aplikaci sportovn´ıch aktivit v Orlick´ ych hor´ach byl programovac´ı jazyk JavaScript pouˇzit v´ yhradnˇe pro vloˇzen´ı mapy a ´ pr´aci s prostˇred´ım Google Maps API, a proto byl podrobnˇeji pops´an v kapitole 2.1 Uvod do JavaScriptu. [28] Pr´aci s JavaScriptem v´ yraznˇe usnadˇ nuje JavaScriptov´a knihovna jQuery, kter´a klade d˚ uraz na jednoduchost a rychlost tvorby dynamick´eho webu. Mimo to je obohacena o dalˇs´ı funkce pro vytv´aˇren´ı ud´alost´ı, animac´ı a manipulaci s kask´adov´ ymi styly. Myˇslenku vytvoˇrit knihovnu, kter´a by pouˇz´ıvala CSS selektory k propojen´ı JavaScriptu a HTML, publikoval poprv´e na sv´em blogu John Resig. Knihovna jQuery byla ofici´alnˇe pˇredstavena na BarCampu 2 o p˚ ul roku pozdˇeji, v lednu 2006. Prvn´ı stabiln´ı verze se uˇzivatel´e doˇckali aˇz o dalˇs´ıch 6 mˇes´ıc˚ u pozdˇeji. [16]<br />
<br />
3.4.1<br />
<br />
Pouˇ zit´ı knihovny jQuery<br />
<br />
Knihovna jQuery je poskytov´ana zdarma v souladu s licenˇcn´ımi podm´ınkami MIT, kter´e umoˇzn ˇuj´ı bezplatn´e pouˇzit´ı knihovny i v komerˇcn´ıch projektech. Jedinou podm´ınkou je zachov´an´ı autorsk´ ych pr´av v hlaviˇcce souboru. Pro pouˇzit´ı ve vlastn´ım projektu je pˇri prvn´ım kroku nutn´e vybrat spr´avnou verzi knihovny a st´ahnout potˇrebn´ y komprimovan´ y ˇci nekomprimovan´ y soubor. Alternativn´ı variantou m˚ uˇze b´ yt pˇrid´an´ı odkazu na knihovnu nach´azej´ıc´ı se na CDN (Content Delivery Network) serverech. Tato metoda umoˇzn ˇuje ke 2<br />
<br />
Mezin´ arodn´ı s´ıt’ otevˇren´ ych konferenc´ı zamˇeˇruj´ıc´ıch se na nov´e trendy v cel´e ˇradˇe obor˚ u<br />
<br />
38<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
knihovnˇe rychlejˇs´ı pˇr´ıstup, neˇz v pˇr´ıpadˇe um´ıstˇen´ı na vlastn´ım serveru nebo jin´e hostingov´e sluˇzbˇe. < script type = " text / javascript " src = " https: / / ajax . googleapis . com / ajax / libs / jquery / 1.11.0 / jquery . min . js " > </ script ><br />
<br />
Stejnˇe jako u jazyku CSS b´ yv´a dobr´ ym zvykem oddˇelit funkˇcnost str´anky, tedy k´ody psan´e v JavaScriptu, od vlastn´ıho obsahu a zapisovat funkce do extern´ıho souboru s koncovkou .js. V nˇekter´ ych dokumentech b´ yv´a toto chov´an´ı oznaˇcov´ano jako princip nevt´ırav´eho JavaScriptu. V´ ybˇer prvku v HTML str´ance prob´ıh´a pˇres selektory, pˇred nimiˇz mus´ı b´ yt um´ıstˇen znak dolaru, vymezuj´ıc´ı jmenn´ y prostor knihovny. Typick´a syntax obsahuje nejdˇr´ıve element, kter´ y chceme vybrat, pot´e n´azev ud´alosti a nakonec to, co chceme udˇelat. N´asleduj´ıc´ı pˇr´ıklad demonstruje praktick´e pouˇzit´ı nˇekter´ ych metod. [16] $ ( " # one " ) . click ( function () { $ ( " # pan_one " ) . slideToggle ( " linear " ) ; $ ( this ) . toggleClass ( " toggle_active " ) ; $ ( " # one . fa-plus " ) . toggleClass ( " fa-minus " ) ; }) ;<br />
<br />
Interpretace k´odu je n´asleduj´ıc´ı: HTML prvku s identifik´atorem one je pˇriˇrazena metoda click. Po kliknut´ı na tento element se spust´ı metoda slideToggle, kter´a za pouˇzit´ı jednoduch´e animace skryje ˇci zobraz´ı element s identifik´atorem pan one. Metoda toggleClass mˇen´ı jednotliv´ ym element˚ u tˇr´ıdu a t´ım umoˇzn ˇuje mˇenit vzhled.<br />
<br />
3.4.2<br />
<br />
Kalendar plugin<br />
<br />
Kalend´aˇr v aplikaci slouˇz´ı k pˇrehledn´emu zobrazen´ı chystan´ ych akc´ı v Orlick´ ych hor´ach. K vizualizaci a spr´avˇe kalend´aˇre je pouˇzit jQuery plugin, kter´ y napsal ˇsv´edsk´ y program´ator Eric Wennerberg. Kalend´aˇr je moˇzn´e pˇrizp˚ usobit vzhledu vlastn´ıch webov´ ych str´anek, nastavit ˇcesk´e n´azvy dn˚ u a mˇes´ıc˚ u, pˇrid´avat jedno i v´ıcedenn´ı ud´alosti nebo integrovat ud´alosti z vlastn´ıho kalend´aˇre Google. Pro posledn´ı moˇznost je nutn´e pouˇz´ıt kl´ıˇc Google Calendar API. Dostupn´a je verze Free a verze Pro, kter´a je poskytovan´a za drobn´ y poplatek 10 dolar˚ u, podporuj´ıc´ı dalˇs´ı v´ yvoj kalend´aˇre. [30] Pro pouˇzit´ı kalend´aˇre na vlastn´ıch str´ank´ach staˇc´ı vloˇzit ˇra´dek s adresou skriptu do hlaviˇcky zdrojov´eho k´odu a kalend´aˇr inicializovat, urˇcit tedy element div, kde se kalend´aˇr zobraz´ı. < script src = " http: / / ericwenn . se / kalendar / free / " > </ script > < script type = " text / javascript " > $ ( container ) . kalendar () ; </ script ><br />
<br />
39<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
Kalend´aˇr m´a pouze jeden nepovinn´ y parametr urˇcuj´ıc´ı jeho vlastnosti (barva, prvn´ı den v t´ ydnu, n´azvy) a dalˇs´ı moˇznosti stylov´an´ı vˇcetnˇe pˇrid´av´an´ı ud´alost´ı. N´asleduj´ıc´ı pˇr´ıklad ukazuje integraci s kalend´aˇrem Google, kter´ y byl pro aplikaci sportovn´ıch aktivit v Orlick´ ych hor´ach speci´alnˇe vytvoˇren. var options = { googleCal: [{ calendar: " s p o r t s a c t i v it yoh @g ma il . com " , apikey: " A I z a S y C P S W A K d m U q i P Y 4 S e z R b h v F p O S R a M n y s e g " }] };<br />
<br />
3.5<br />
<br />
Pˇ r´ıprava a import turistick´ ych tras<br />
<br />
Vektorov´a data turistick´ ych, cyklistick´ ych a bˇeˇzkaˇrsk´ ych tras poskytlo pro tvorbu a prezentaci t´eto bakal´aˇrsk´e pr´ace kartografick´e vydavatelstv´ı SHOCart ve spolupr´aci se spoleˇcnost´ı T-Mapy, kter´a mi pomohla konkr´etn´ı data zpracovat, a se kterou byla n´aslednˇe podeps´ana licenˇcn´ı smlouva. Veˇsker´a poskytnut´a data, pouˇzit´a v t´eto pr´aci, byla do vektorov´e podoby pˇrevedena z grafick´ ych prvk˚ u tematick´ ych n´apln´ı map v mˇeˇr´ıtku 1:50 000. Jednotliv´e vrstvy byly nav´ıc transformov´any ze souˇradnicov´eho syst´emu S-42, vyuˇz´ıvaj´ıc´ı Gauss Kr¨ ugerovo zobrazen´ı na Krasovsk´eho elipsoidu, do souˇradnicov´eho syst´emu JTSK s orientac´ı a oznaˇcen´ım os (-y, -x) v˚ uˇci S-JTSK (y, x). Liniov´e i bodov´e vektorov´e vrstvy byly uloˇzeny ve form´atu Esri shapefile. Pro dalˇs´ı pr´ace s daty byly pouˇzity produkty americk´e spoleˇcnosti Esri, kter´a dlouh´a l´eta patˇr´ı mezi nejvˇetˇs´ı producenty softwaru urˇcen´eho pro pr´aci s geografick´ ymi informaˇcn´ımi syst´emy, zkr´acenˇe GIS. Tyto produkty jsou zn´amy pod souhrnn´ ym oznaˇcen´ım ArcGIS a nab´ız´ı desktopov´e, serverov´e i mobiln´ı ˇreˇsen´ı. Desktopov´a verze ArcGIS for Desktop pom´ah´a data organizovat, vytv´aˇret, upravovat a analyzovat, zat´ımco u ´lohou serverov´eho ˇreˇsen´ı ArcGIS for Server je data publikovat a zpˇr´ıstupnit funkcionalitu GIS po internetu. Pro vyuˇzit´ı sluˇzeb ArcGIS serveru nen´ı nutn´e vlastnit specializovan´e softwary ani v´ ykonn´e poˇc´ıtaˇce, nebot’ cel´e zpracov´an´ı prob´ıh´a na serveru. Toho vyuˇz´ıvaj´ı webov´e a mobiln´ı aplikace, pro kter´e se vˇzilo spojen´ı lehk´ y klient“. [1] ”<br />
<br />
3.5.1<br />
<br />
´ Uprava dat<br />
<br />
Pro publikov´an´ı a pˇrid´an´ı vrstev do prostˇred´ı Google Maps API bylo zapotˇreb´ı data drobnˇe upravit. Poskytnut´a data vznikla oˇrez´an´ım p˚ uvodn´ıch dat podle hranic z´ajmov´eho u ´zem´ı, ˇc´ımˇz ale na hranic´ıch tohoto u ´zem´ı vznikly velmi kr´atk´e liniov´e prvky, poz˚ ustatky tras. Tyto prvky byly vybr´any a z liniov´e vrstvy odstranˇeny. 40<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
Aby byla zajiˇstˇena kompatibilita s mapov´ ymi podklady Googlu, bylo potˇreba data transformovat do souˇradnicov´eho syst´emu Web Mercator. Tento syst´em nevyuˇz´ıv´a pouze R Google, ale vˇetˇsina popul´arn´ıch poskytovatel˚ u mapov´ ych obsah˚ u, jako je Microsoft TM Bing nebo ArcGIS Online. V podstatˇe se ale d´a konstatovat, ˇze vˇetˇsina tˇechto spoleˇcnost´ı na Google navazuje. V programu ArcGIS Desktop je pro transformaci z jednoho do druh´eho souˇradnicov´eho syst´emu nejvhodnˇejˇs´ı zvolit n´astroj Project, kter´ y se ukr´ yv´a v ArcToolboxu - Data Management Tools - Projections and Transformations - Feature. N´astroj vytvoˇr´ı kopii st´avaj´ıc´ıch dat a p˚ uvodn´ı souˇradnicov´ y syst´em nahrad´ı syst´emem nov´ ym. V tomto konkr´etn´ım pˇr´ıpadˇe S-JTSK syst´emem, kter´ y je v ArcGIS oznaˇcovan´ y jako WGS1984 Web Mercator Auxilary Sphere.<br />
<br />
Obr´azek 3.4: Transformace souˇradnic - ArcGIS Project Tool<br />
<br />
3.5.2<br />
<br />
Publikaˇ cn´ı sluˇ zby ArcGIS Serveru a Google Maps API<br />
<br />
Po u ´pravˇe, transformaci a kontrole spr´avn´e funkˇcnosti byl v´ ystup publikov´an jako dynamick´a mapov´a sluˇzba ArcGIS Serveru. Pro tento zp˚ usob publikov´an´ı dat jsem se rozhodl proto, abych pˇri zobrazov´an´ı v mapov´e aplikaci zachoval u soubˇeˇzn´ ych tras nastaven´e posuny, takzvan´e offsety. Dynamick´a mapov´a sluˇzba se vykresluje pˇri kaˇzd´e zmˇenˇe zobrazen´ı, zat´ımco jej´ı alternativa, statick´a mapov´a sluˇzba, naˇc´ıt´a pˇredem pˇripraven´e dlaˇzdice a t´ım zrychluje komunikaci mezi klientem a serverem. Pro pˇrekryvnou vrstvu turistick´ ych tras je vˇsak tato varianta nevhodn´a. Je ˇskoda, ˇze Google Maps API dodnes zaˇclenˇen´ı webov´e mapov´e sluˇzby pˇr´ımo nepodporuje, ale na druhou stranu je moˇzn´e vyuˇz´ıt JavaScriptov´e knihovny tˇret´ıch stran. Prvn´ı takovou knihovnou, o kter´e se zde zm´ın´ım, je knihovna s v´ ystiˇzn´ ym n´azvem ArcGIS Extension for the Google Maps API. Rozˇs´ıˇren´ı nab´ız´ı moˇznost vyuˇz´ıt sluˇzeb ArcGIS serveru pro vizualizaci a anal´ yzu dat nad mapov´ ymi podklady Googlu. JavaScriptov´a knihovna a 41<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
Obr´azek 3.5: Posun u soubˇeˇzn´ ych tras jej´ı ofici´aln´ı dokumentace obsahuje velmi mnoho uˇziteˇcn´ ych funkc´ı a metod, kter´e jsou ale postaveny na starˇs´ı a dnes jiˇz nepodporovan´e verzi Google Maps API. Spoleˇcnost ESRI se o dalˇs´ı aktualizaci st´ale nevyj´adˇrila, a tak se m˚ uˇzeme domn´ıvat, ˇze v´ yvoj t´eto knihovny pokraˇcovat nebude. Dalˇs´ı moˇznost´ı je vyuˇzit´ı knihovny ArcGIS Server Link for Google Maps JavaScript API V3, kter´a je vyd´av´ana v r´amci open source projektu ˇsirok´e skupiny v´ yvoj´aˇr˚ u. Tato knihovna podporuje pˇrid´an´ı mapov´ ych zdroj˚ u pˇres ESRI ArcGIS Server REST API. Skripty, kompletn´ı dokumentace a praktick´e uk´azky vyuˇzit´ı jsou na ofici´aln´ıch str´ank´ach tohoto projektu. [6] K pˇrid´an´ı webov´e mapov´e sluˇzby vedou dva jednoduch´e kroky. V prvn´ım kroku je nutn´e pˇridat staˇzen´ y skript nebo odkaz na hostovanou verzi do hlaviˇcky dokumentu, vˇzdy aˇz po odkazu na Google Maps API. Druh´ y krok jiˇz zahrnuje pˇrid´an´ı dynamick´e mapov´e sluˇzby poskytovan´e ArcGIS Serverem. Pro implementaci t´eto sluˇzby je urˇcen objekt MapOverlay. Ten se velmi podob´a ofici´aln´ımu objektu google.maps.GroundOverlay, kter´ y nad mapu pˇrid´av´a statick´ y sn´ımek. var url = " http: / / geo103b . fsv . cvut . cz:6080 / arcgis / rest / services / klima / data / MapServer " layer = new gmaps . ags . MapOverlay ( url ) ; layer . setMap ( map ) ;<br />
<br />
3.6<br />
<br />
Virtu´ aln´ı prohl´ıdka a Google Earth API<br />
<br />
Prostˇrednictv´ım pluginu Google Earth a jeho v´ yvoj´aˇrsk´emu rozhran´ı JavaScript API je velice snadn´e vytv´aˇret poutav´e webov´e str´anky s moˇznost´ı proch´azet a zkoumat zemˇepisn´a data na 3D zemˇekouli. Pro zobrazen´ı virtu´aln´ıho gl´obu ve webov´em prostˇred´ı je nutn´e pouˇz´ıt jeden z podporovan´ ych internetov´ ych prohl´ıˇzeˇc˚ u a m´ıt nainstalovan´ y plugin Google Earth. Aktu´aln´ı seznam podporovan´ ych prohl´ıˇzeˇc˚ u a n´avod na instalaci pluginu jsem jiˇz podrobnˇe popsal v kapitole 1.1 na stranˇe 5. Zaj´ımav´ ym srovn´an´ım dostupn´ ych technologi´ı pro vizualizaci prostorov´ ych model˚ u se ve sv´e diplomov´e pr´aci zab´ yv´a Miroslav Kopeck´ y. [17] Pomoc´ı Google Earth API je moˇzn´e vyuˇz´ıt t´emˇeˇr vˇsechny n´astroje desktopov´e verze a zobrazovat tak na str´ank´ach 3D modely budov, nebo si vytvoˇrit svoji vlastn´ı virtu´aln´ı 42<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
prohl´ıdku. V n´asleduj´ıc´ım textu se podrobnˇeji zamˇeˇr´ım na integraci okna Google Earth a virtu´aln´ı prohl´ıdky do sv´e vlastn´ı aplikace.<br />
<br />
3.6.1<br />
<br />
Vytvoˇ ren´ı okna s prohl´ıdkou<br />
<br />
Stejnˇe jako u Google Maps API je nutn´e do hlaviˇcky str´anky vloˇzit odkaz na JavaScript soubor, kter´ y definuje jednotliv´e metody a vlastnosti. Vlastn´ı zdrojov´ y k´od lze ps´at do samostatn´eho souboru a tento soubor v hlaviˇcce opˇet naˇc´ıst, nebo k´od um´ıstit do hlavn´ıho dokumentu mezi tagy <script> a </script>. Nejd˚ uleˇzitˇejˇs´ı metoda, google.load, naˇc´ıt´a jednotliv´e funkce rozhran´ı a m´a tˇri povinn´e parametry - co se m´a naˇc´ıst, pouˇzitou verzi API a zda je pro urˇcen´ı polohy povoleno pouˇz´ıvat sensor GPS. Nad tˇret´ım parametrem m´am trochu otazn´ık, nebot’ Google Earth plugin nen´ı podporov´an ˇz´adn´ ym mobiln´ım zaˇr´ızen´ım. D´ale je nutn´e vytvoˇrit instanci pluginu a dvˇe funkce. Prvn´ı funkce je vol´ana po u ´spˇeˇsn´em naˇcten´ı pluginu, a funkce druh´a v pˇr´ıpadˇe, ˇze se naˇc´ıt´an´ı nezdaˇr´ı. Dalˇs´ı nastaven´ı ovlivˇ nuj´ıc´ı vzhled a chov´an´ı str´anky se umist’uj´ı pr´avˇe do prvn´ı funkce initCB(). Je moˇzn´e pˇrid´avat datov´e vrstvy, napˇr´ıklad 3D budovy, stromy nebo silniˇcn´ı s´ıt’, a upravovat ovl´adac´ı prvky pro pr´aci s mapou. [7] Z´akladn´ı skript obsahuj´ıc´ı novˇe pˇridan´e vrstvy a ovl´adac´ı prvky vypad´a n´asledovnˇe: < script type = " text / javascript " > var ge ; google . load ( " earth " , " 1 " , { " other_params " : " sensor = false " }) ; function init () { google . earth . createInstance ( ’ map3d ’ , initCB , failureCB ) ; } function initCB ( instance ) { ge = instance ; ge . getWindow () . setVisibility ( true ) ; ge . g e t N a v i g a t i o n Control () . setVisibility ( ge . VISIBILITY_AUTO ) ; ge . getTime () . getControl () . setVisibility ( ge . VISIBILITY_SHOW ) ; ge . getSun () . setVisibility ( true ) ; ge . getLayerRoot () . enableLayerById ( ge . LAYER_BUILDINGS , true ); ge . getLayerRoot () . enableLayerById ( ge . LAYER_TERRAIN , true ) ; ge . getLayerRoot () . enableLayerById ( ge . LAYER_TREES , true ) ; } function failureCB ( errorCode ) { " Something is wrong " } google . se tOnLoadCallback ( init ) ; </ script ><br />
<br />
43<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
Virtu´aln´ı prohl´ıdku, spustitelnou v pluginu, je nutn´e nejprve vytvoˇrit v aplikaci Google Earth a n´aslednˇe exportovat do souboru KML. Pˇri vytv´aˇren´ı prohl´ıdky, kter´a sleduje trasu, lze nastavit u ´hel naklonˇen´ı kamery, rozsah kamery a rychlost prohl´ıdky. Tento soubor jiˇz m˚ uˇze b´ yt vstupem pro metodu ge.getTourPlayer, obstar´avaj´ıc´ı naˇcten´ı a ovl´ad´an´ı prohl´ıdky. D˚ uleˇzit´e je, aby byl tento soubor um´ıstˇen na veˇrejnˇe pˇr´ıstupn´e adrese. [7] Inicializace tohoto objektu je velmi snadn´a: var href = ’ http: / / www . sportsactivityoh . wz . cz / data / tours / view0 . kml ’; google . earth . fetchKml ( ge , href , kmlFinish edLoading ) ; function kmlFinishedLoa di ng ( object ) { ge . getTourPlayer () . setTour ( object ) ; }<br />
<br />
Takto vytvoˇren´a prohl´ıdka se v aplikaci zobrazuje pomoc´ı jQuery knihovny FancyBox.<br />
<br />
3.6.2<br />
<br />
Zobrazen´ı prohl´ıdek v mapˇ e<br />
<br />
Pro tvorbu prohl´ıdek jsem zvolil pouze nˇekter´e u ´seky z p˚ uvodn´ı s´ıtˇe turistick´ ych a cyklistick´ ych tras, pˇriˇcemˇz celkov´a d´elka jednoho u ´seku se pohybuje v rozmez´ı od tˇr´ı do pˇeti kilometr˚ u. Pro vizualizaci tˇechto u ´sek˚ u bylo nezbytn´e vyuˇz´ıt tˇr´ıdu google.maps.Polyline, kter´a jako jedin´a nab´ız´ı ud´alosti mouseover a mouseout. Ty jsou d˚ uleˇzit´e pro zmˇenu grafick´e podoby linie po najet´ı myˇsi, ˇc´ımˇz se odliˇs´ı pr´avˇe vybran´ yu ´sek. Vytv´aˇren´ı jednotliv´ ych polylini´ı jsem si zjednoduˇsil cyklem, kter´ y pˇres Fusion Tables proch´az´ı KML soubor a separuje d´ılˇc´ı souˇradnice lomov´ ych bod˚ u. [10] / * FUSION TABLES * / var script = document . createElement ( ’ script ’) ; var url = [ ’ https: / / www . googleapis . com / fusiontables / v1 / query ? ’ ]; url . push ( ’ sql = ’) ; var query = ’ SELECT type , geometry FROM ’ + ’1 W v b x F N q R i t g C q F e Z H C J j V E N N 3 a o a - t a J e 4 s Z x n 0 i ’; var encodedQuery = en co deURICompon ent ( query ) ; url . push ( encodedQuery ) ; url . push ( ’& callback = drawPolyline ’) ; url . push ( ’& key = A I z a S y B k G p t e F 7 v h C 9 Y _ q M W T 0 K A Z V V N V Y P O Q w C 8 ’) ; script . src = url . join ( ’ ’) ; var body = document . g et E lementsBy TagName ( ’ body ’) [0]; body . appendChild ( script ) ; index = 0; function drawPolyline ( data ) { var rows = data [ ’ rows ’ ]; for ( var i in rows ) {<br />
<br />
44<br />
<br />
ˇ CVUT v Praze<br />
<br />
3 Realizace aplikace<br />
<br />
var geometries = rows [ i ][1][ ’ geometries ’ ]; if ( geometries ) { for ( var j in geometries ) { var newCoordinates = c on st r uc t Ne wC o or d in at e s ( geometries [ j ]) ; layers [ index ]= new google . maps . Polyline ({ path: newCoordinates , strokeColor: " #19 A3FF " , strokeOpacity: 0.4 , strokeWeight: 5 , geodesic: true }) ; } } else { var newCoordinates = c on st r uc t Ne wC o or d in at e s ( rows [ i ][1][ ’ geometry ’ ]) ; layers [ index ] = new google . maps . Polyline ({ path: newCoordinates , strokeColor: " #19 A3FF " , strokeOpacity: 0.4 , strokeWeight: 5 , geodesic: true }) ; } index = index + 1; } } function c o n s t r u c t N e w C o o r d i na te s ( polyline ) { var newCoordinates = []; var coordinates = null ; if ( polyline [ ’ coordinates ’ ]) coordinates = polyline [ ’ coordinates ’ ]; if ( coordinates . length == 1) { coordinates = coordinates [0]; alert ( " length = 1 " ) ; }; for ( var i in coordinates ) { newCoordinates . push ( new google . maps . LatLng ( coordinates [ i ][1] , coordinates [ i ][0]) ) ; }; return newCoordinates ; };<br />
<br />
45<br />
<br />
ˇ CVUT v Praze<br />
<br />
3.7<br />
<br />
3 Realizace aplikace<br />
<br />
Testov´ an´ı aplikace<br />
<br />
Vˇetˇsina dneˇsn´ıch modern´ıch prohl´ıˇzeˇc˚ u nab´ız´ı integrovan´e n´astroje pro ladˇen´ı webov´ ych aplikac´ı, coˇz v´ yvoj´aˇr˚ um znatelnˇe ulehˇcuje pr´aci. N´astroje se v r˚ uzn´ ych prohl´ıˇzeˇc´ıch liˇs´ı, ale funkce pro testov´an´ı a ladˇen´ı webu z˚ ust´avaj´ı t´emˇeˇr stejn´e a pˇri jejich pouˇz´ıv´an´ı jde tedy jen o zvyk. Osobnˇe jsem z˚ ustal vˇern´ y prohl´ıˇzeˇci Google Chrome a nebyl d˚ uvod tohoto kroku litovat. N´astroje pro v´ yvoj´aˇre je moˇzn´e spustit kl´avesovou zkratkou Ctrl + Shift + I nebo v´ ybˇerem z nab´ıdky pˇres N´astroje - N´ astroje pro v´yvoj´ aˇre. Vˇsechny dostupn´e funkce jsou pˇrehlednˇe zobrazeny v horn´ı liˇstˇe v´ yvoj´aˇrsk´e konzole a hned prvn´ı z´aloˇzku Elements jsem vyuˇz´ıval asi nejˇcastˇeji. Tato funkce umoˇzn ˇuje pˇr´ımo v prohl´ıˇzeˇci manipulovat s HTML DOM elementy a mˇenit jim v CSS styl. Tyto zmˇeny se projev´ı pouze v prohl´ıˇzeˇci a to bez nutnosti str´anku znovu nahr´avat, pˇriˇcemˇz p˚ uvodn´ı zdrojov´ y k´od z˚ ustane nedotˇcen. Takto jsem napˇr´ıklad testoval rozloˇzen´ı a grafickou podobu prvk˚ u. D´ale jsem ocenil n´astroj skr´ yvaj´ıc´ı se pod z´aloˇzkou Sources. Tento n´astroj umoˇzn ˇuje proch´azet JavaScriptov´e funkce krok po kroku a jednoduˇseji tak odhalit chybu. Z dalˇs´ıch n´astroj˚ u jsem pro z´avˇereˇcn´a ladˇen´ı vyuˇzil grafick´e zn´azornˇen´ı ˇcasov´e sloˇzitosti jednotliv´ ych poˇzadavk˚ u aplikace a informace o celkov´em objemu pˇrenesen´ ych dat. [19]<br />
<br />
Obr´azek 3.6: N´astroj v´ yvoj´aˇre Google Chrome<br />
<br />
46<br />
<br />
KAPITOLA<br />
<br />
Aplikace z pohledu bˇeˇzn´eho uˇzivatele Tato kapitola m´a za u ´ˇcel sezn´amit bˇeˇzn´eho uˇzivatele s prostˇred´ım aplikace mapuj´ıc´ı sportovn´ı aktivity v Orlick´ ych hor´ach. Obsahuje podrobn´ y popis uˇzivatelsk´eho rozhran´ı vˇcetnˇe popisu jednotliv´ ych n´astroj˚ u a ovl´adac´ıch prvk˚ u, kter´e umoˇzn ˇuj´ı interaktivn´ı pr´aci s mapou. Pro pouˇz´ıv´an´ı aplikace doporuˇcuji vyuˇz´ıt nejnovˇejˇs´ı verze webov´ ych prohl´ıˇzeˇc˚ u Google Chrome a Opera, na kter´ ych byla aplikace testov´ana, a na kter´ ych je zaruˇcena stoprocentn´ı funkˇcnost. V pˇr´ıpadˇe starˇs´ıch verz´ı ˇci jin´ ych prohl´ıˇzeˇc˚ u se m˚ uˇze st´at, ˇze funkˇcnost aplikace bude z ˇc´asti omezena. V nˇekter´ ych situac´ıch pom˚ uˇze doinstalov´an´ı poˇzadovan´ ych plugin˚ u, jako je napˇr´ıklad plugin Google Earth. Aplikaci je tak´e moˇzn´e spustit na mobiln´ıch zaˇr´ızen´ıch s pˇripojen´ım k internetu. Zde je ale bohuˇzel nedostupn´a funkce virtu´aln´ıch prohl´ıdek, nebot’ Google Earth plugin podporu mobiln´ıch zaˇr´ızen´ı dosud nenab´ız´ı.<br />
<br />
4.1<br />
<br />
Sezn´ amen´ı se s uˇ zivatelsk´ ym rozhran´ım<br />
<br />
Pˇri kaˇzd´em spuˇstˇen´ı aplikace je nutn´e vyˇckat na naˇcten´ı mapov´ ych podklad˚ u. Tato akce by vˇsak v z´avislosti na rychlosti internetov´eho pˇripojen´ı nemˇela trvat d´ele, neˇz nˇekolik m´alo sekund. Po u ´spˇeˇsn´em naˇcten´ı str´anky se zobraz´ı hlavn´ı okno aplikace s mapou a dvˇema ovl´adac´ımi panely. V lev´em ovl´adac´ım panelu se pod vysouvac´ımi liˇstami nach´az´ı n´asleduj´ıc´ı n´astroje: • Vyhled´av´an´ı, • Vrstvy, • Legenda, • Kalend´aˇr akc´ı, • N´apovˇeda, • O aplikaci. Pokud pouˇz´ıv´ate pouze jeden n´astroj a zbyl´e v´as matou, je moˇzn´e tyto n´astroje kliknut´ım na znam´enko minus − skr´ yt. Opˇetovn´e otevˇren´ı n´astroje provedete kliknut´ım na 47<br />
<br />
4<br />
<br />
ˇ CVUT v Praze<br />
<br />
4 Aplikace z pohledu bˇeˇzn´eho uˇzivatele<br />
<br />
znam´enko plus +. Pro pohyb mezi n´astroji je k dispozici posuvn´a liˇsta, kter´a se automaticky zobraz´ı a skryje, v z´avislosti na poˇctu otevˇren´ ych n´astroj˚ u. Posunovat lze pˇr´ımo liˇstou nebo kliknut´ım na ˇsipky zn´azorˇ nuj´ıc´ı poˇzadovan´ y smˇer posunu. Pokud nevyuˇz´ıv´ate ˇza´dn´ y z n´astroj˚ u a radˇeji chcete pracovat s mapou, m˚ uˇzete cel´ y lev´ y panel schovat kliknut´ım na tlaˇc´ıtko, kter´e se nach´az´ı v prav´em horn´ım rohu panelu.<br />
<br />
Obr´azek 4.1: Hlavn´ı okno aplikace Druh´ y ovl´adac´ı panel um´ıstˇen´ y v prav´em horn´ım rohu okna je urˇcen pro v´ ybˇer mapov´eho podkladu. Uˇzivatel m´a na v´ ybˇer hned ze ˇctyˇr moˇznost´ı: • Bˇeˇzn´a mapa, • Zimn´ı mapa, • Ter´enn´ı mapa, • Satelitn´ı sn´ımky.<br />
<br />
4.2<br />
<br />
Sledov´ an´ı polohy<br />
<br />
Souˇc´ast´ı tohoto panelu jsou i n´astroje pro spuˇstˇen´ı sluˇzby sledov´an´ı polohy nebo aktivaci okna s 3D virtu´aln´ım gl´obem. Pro aktivaci sledov´an´ı polohy je urˇcena ikona ve tvaru ˇsipky. Po kliknut´ı na tuto ikonu se mapa automaticky pˇresune na vaˇsi pozici. Pro vyuˇzit´ı t´eto sluˇzby je nutn´e pouˇz´ıvat aktu´aln´ı verze internetov´ ych prohl´ıˇzeˇc˚ u a sledov´an´ı polohy povolit - ˇz´adost o povolen´ı se automaticky objev´ı u horn´ıho okraje okna. Pozice je v mapˇe vizualizov´ana modrou teˇckou, kolem kter´e je modr´a pr˚ uhledn´a kruˇznice, zn´azorˇ nuj´ıc´ı pˇresnost urˇcen´ı polohy. Podrobnosti o poloze, vˇcetnˇe zemˇepisn´ ych souˇradnic 48<br />
<br />
ˇ CVUT v Praze<br />
<br />
4 Aplikace z pohledu bˇeˇzn´eho uˇzivatele<br />
<br />
a pˇresnosti jej´ıho urˇcen´ı, vyvol´ate kliknut´ım na modrou teˇcku. Mapou m˚ uˇzete d´ale pohybovat, a pokud byste se chtˇeli vr´atit zpˇet na svou pozici, staˇc´ı opˇet stisknout tlaˇc´ıtko ˇsipky. Sledov´an´ı polohy lze vypnout ikonou pˇripom´ınaj´ıc´ı pˇreˇskrtnut´e oko.<br />
<br />
Obr´azek 4.2: Sledov´an´ı polohy Posledn´ı z trojice ikon slouˇz´ı pro otevˇren´ı pˇrekryvn´eho okna s 3D modelem Zemˇe. Pˇri otevˇren´ı se automaticky pˇresunete na vaˇsi aktu´aln´ı pozici. Prostˇrednictv´ım tohoto okna je moˇzn´e si prohl´ıˇzet 3D modely budov, proch´azet se ter´enem, pozorovat noˇcn´ı oblohu nebo cestovat v ˇcase. Ovl´ad´an´ı je velmi intuitivn´ı a lze vyuˇz´ıt jak ovl´ad´an´ı pomoc´ı myˇsi, tak pomoc´ı integrovan´ ych ovl´adac´ıch prvk˚ u. Tento m´od se vyp´ın´a tlaˇc´ıtkem X v prav´em horn´ım rohu.<br />
<br />
Obr´azek 4.3: 3D model Zemˇe<br />
<br />
49<br />
<br />
ˇ CVUT v Praze<br />
<br />
4.3<br />
<br />
4 Aplikace z pohledu bˇeˇzn´eho uˇzivatele<br />
<br />
Vyhled´ avac´ı pole<br />
<br />
Vyhled´avac´ı pole je urˇceno pro vyhled´av´an´ı nejr˚ uznˇejˇs´ıch m´ıst, adres, stravovac´ıch a ubytovac´ıch zaˇr´ızen´ı. Pˇri psan´ı do vyhled´avac´ıho pole se automaticky zobrazuje nab´ıdka m´ıst, kter´a jsou podobn´a napsan´emu dotazu. Po zvolen´ı poˇzadovan´eho m´ısta se do mapy um´ıst´ı znaˇcka s dalˇs´ımi podrobnostmi. Pro vymaz´an´ı v´ yrazu staˇc´ı kliknout na kˇr´ıˇzek.<br />
<br />
Obr´azek 4.4: Vyhled´av´an´ı m´ıst a adres<br />
<br />
4.4<br />
<br />
Pˇ rep´ın´ an´ı vrstev<br />
<br />
Dalˇs´ım n´astrojem na ploˇse je panel umoˇzn ˇuj´ıc´ı vyp´ın´an´ı ˇci zap´ın´an´ı pˇrekryvn´ ych vrstev, jako jsou turistick´e trasy, bˇeˇzkaˇrsk´e trasy a cyklistick´e stezky nebo vrstvy s aktu´aln´ım stavem a pˇredpovˇed´ı poˇcas´ı na 4 dny dopˇredu. Vrstva s fotografiemi zobrazuje fotografie ze sluˇzby Panoramio. Tyto fotografie jsou opatˇreny souˇradnicemi m´ısta poˇr´ızen´ı, takzvan´ ymi geotagy“. Pokud byste chtˇeli, aby se i vaˇse fotografie v mapˇe zobrazovaly, pˇrejdˇete na ” str´anky www.panoramio.com a nahrajte poˇr´ızen´e fotografie. Jednotliv´e vrstvy lze aktivovat kliknut´ım na jezdce nalevo od n´azvu vrstvy. Ten se plynule posune a jeho pozad´ı se zbarv´ı do zelena. V aplikaci je tak´e integrov´ana velmi popul´arn´ı sluˇzba StreetView nab´ızej´ıc´ı panoramatick´e pohledy. Chcete-li zobrazit sn´ımky StreetView, kliknˇete na ikonu pan´aˇcka v prav´em doln´ım rohu a pˇret´ahnˇete ji na poˇzadovan´e m´ısto v mapˇe.<br />
<br />
50<br />
<br />
ˇ CVUT v Praze<br />
<br />
4 Aplikace z pohledu bˇeˇzn´eho uˇzivatele<br />
<br />
Obr´azek 4.5: Uk´azka turistick´ ych a cyklistick´ ych tras<br />
<br />
Obr´azek 4.6: Lyˇzaˇrsk´e are´aly, bˇeˇzkaˇrsk´e tratˇe, poˇcas´ı a dopravn´ı info nad zimn´ı mapou<br />
<br />
Obr´azek 4.7: Google StreetView<br />
<br />
51<br />
<br />
ˇ CVUT v Praze<br />
<br />
4.4.1<br />
<br />
4 Aplikace z pohledu bˇeˇzn´eho uˇzivatele<br />
<br />
Virtu´ aln´ı prohl´ıdky<br />
<br />
Virtu´aln´ı prohl´ıdky v´am umoˇzn´ı plynule pˇrel´etnout z jednoho m´ısta na jin´e, zobrazit ter´en a libovolnˇe se rozhl´ıˇzet po okol´ı. Po zapnut´ı vrstvy Virtu´ aln´ı prohl´ıdky a vybr´an´ı trasy m˚ uˇzete prozkoumat detaily ter´enu z pohodl´ı vaˇseho domova. V lev´em doln´ım rohu 3D prohl´ıˇzeˇce jsou um´ıstˇeny ovl´adac´ı prvky, d´ıky nimˇz m˚ uˇzete pr˚ ubˇeh prohl´ıdky ovlivˇ novat. Prohl´ıdku spust´ıte nebo pozastav´ıte kliknut´ım na tlaˇc´ıtko Pozastavit/Pˇrehr´at. Prohl´ıdku m˚ uˇzete tak´e zrychlit a zpomalit opakovan´ ym stisknut´ım tlaˇc´ıtek ˇsipek, nebo se pomoc´ı posuvn´ıku pˇresunout na jakoukoli ˇc´ast prohl´ıdky. Bˇehem prohl´ıdky tak´e m˚ uˇzete mˇenit u ´hel a smˇer pohledu, ale tak´e se pomoc´ı n´astroje v lev´em horn´ım rohu pˇresunout v ˇcase a pozorovat v´ ychod slunce ˇci zd´anliv´ y pohyb hvˇezd po obloze.<br />
<br />
Obr´azek 4.8: V´ ybˇer virtu´aln´ı prohl´ıdky<br />
<br />
Obr´azek 4.9: Virtu´aln´ı prohl´ıdka<br />
<br />
52<br />
<br />
ˇ CVUT v Praze<br />
<br />
4.5<br />
<br />
4 Aplikace z pohledu bˇeˇzn´eho uˇzivatele<br />
<br />
Kalend´ aˇ r akc´ı<br />
<br />
V kalend´aˇri je moˇzn´e vyhled´avat pl´anovan´e v´ ystavy, slavnosti a sportovn´ı ud´alosti v Orlick´ ych hor´ach. Je moˇzn´e proch´azet jednotliv´e mˇes´ıce i dny. Den s ud´alost´ı je v kalend´aˇri zv´ yraznˇen b´ıl´ ym obd´eln´ıˇckem. Po rozkliknut´ı se zobraz´ı podrobnˇejˇs´ı informace obsahuj´ıc´ı n´azev ud´alosti, term´ın kon´an´ı a m´ısto kon´an´ı. Pro n´avrat na mˇes´ıˇcn´ı pˇrehled staˇc´ı kliknout na ˇc´ıslo dne.<br />
<br />
Obr´azek 4.10: Kalend´aˇr akc´ı<br />
<br />
53<br />
<br />
´ ER ˇ ZAV C´ılem t´eto bakal´aˇrsk´e pr´ace bylo popsat moˇznosti v´ yvojov´eho rozhran´ı Google Maps JavaScript API a s jeho vyuˇzit´ım vytvoˇrit funkˇcn´ı webovou mapovou aplikaci. V r´amci pr´ace byly tak´e pˇredstaveny z´akladn´ı principy tvorby webov´ ych aplikac´ı se zamˇeˇren´ım na programovac´ı jazyky HTML, CSS a JavaScript. V´ıce jsem se pak zamˇeˇril na popis geolokaˇcn´ıho rozhran´ı Geolocation API, kter´e je souˇc´ast´ı novˇe pˇredstaven´e specifikace HTML5. Kr´atce jsem se tak´e zm´ınil o experiment´aln´ım n´astroji Google Fusion Tables a jeho vyuˇzit´ı pro vizualizaci geoprostorov´ ych dat v mapˇe. V´ ysledn´a aplikace by mohla slouˇzit sportovn´ım nadˇsenc˚ um a ostatn´ım n´avˇstˇevn´ık˚ um Orlick´ ych hor, kteˇr´ı si chtˇej´ı z pohodl´ı domova napl´anovat smˇer sv´e cesty. To jim usnadn´ı s´ıt’ znaˇcen´ ych turistick´ ych, cyklistick´ ych a bˇeˇzkaˇrsk´ ych tras, ale tak´e virtu´aln´ı prohl´ıdky, d´ıky kter´ ym se budou moci vydat pˇr´ımo na hˇrebeny hor. Aplikace je plnˇe kompatibiln´ı s mobiln´ımi zaˇr´ızen´ımi maj´ıc´ı st´al´e pˇripojen´ı k internetu, coˇz ˇcin´ı tuto aplikaci pouˇzitelnou i v ter´enu. Nepostradateln´ ym n´astrojem by pak pro mnoh´e mohlo b´ yt sledov´an´ı polohy a zobrazen´ı aktu´aln´ı pozice v mapˇe. Pro u ´ˇcely testov´an´ı a prezentace webov´e mapov´e aplikace byla vytvoˇrena internetov´a str´anka www.sportsactivityoh.wz.cz, vyuˇz´ıvaj´ıc´ı hostingov´e sluˇzby serveru webzdarma. Z d˚ uvodu zamezen´ı neopr´avnˇen´eho pouˇzit´ı poskytnut´ ych dat a dodrˇzen´ı licenˇcn´ıch podm´ınek bylo nutn´e tyto str´anky zabezpeˇcit pˇrihlaˇsovac´ım jm´enem:xxxxxxxx a heslem:xxxxxxxxxxxxxxx . Aˇckoliv v´ yvojov´e prostˇred´ı Google Maps nab´ız´ı ˇsirokou ˇsk´alu funkc´ı a metod, byl jsem v nˇekter´ ych konkr´etn´ıch pˇr´ıkladech nucen vyuˇz´ıt alternativn´ı ˇreˇsen´ı. Takov´ ym probl´emem bylo napˇr´ıklad vloˇzen´ı znaˇcen´ ych turistick´ ych tras, kter´e jsou v nˇekter´ ych u ´sec´ıch vz´ajemnˇe soubˇeˇzn´e. Pˇri jejich exportu do souboru KML a n´asledn´em vloˇzen´ı do mapy vznikala velmi chaotick´a situace, kdy se jednotliv´e trasy pˇrekr´ yvaly. Dlouhou dobu jsem nemohl naj´ıt ˇreˇsen´ı, kter´e by toto odsazen´ı soubˇeˇzn´ ych tras zachovalo. Situace byla nakonec vyˇreˇsena publikov´an´ım dat na ArcGIS server a pouˇzit´ım knihovny ArcGIS Server Link for Google Maps JavaScript API V3, kter´a do map umoˇzn ˇuje pˇridat webov´e mapov´e sluˇzby tohoto serveru. Dalˇs´ı komplikaci pˇrineslo vytv´aˇren´ı liniov´e vrstvy, kter´a ˇ sen´ı tohoto probl´emu by reagovala zmˇenou grafick´e podoby, pˇri kaˇzd´em pˇrejet´ı myˇsi. Reˇ jsem vˇcetnˇe zdrojov´eho k´odu popsal v kapitole 3.6.2 na stranˇe 44. Bˇehem tvorby webov´e mapov´e aplikace vznikaly dalˇs´ı n´apady na vylepˇsen´ı, kter´e se vˇsak v r´amci t´eto bakal´aˇrsk´e pr´ace nepodaˇrilo uskuteˇcnit. V budoucnu bych chtˇel napˇr´ıklad obohatit aplikaci o moˇznost zobrazen´ı v´ yˇskov´eho profilu trasy. Dalˇs´ım pl´anem je vytvoˇrit uˇzivatelsk´e rozhran´ı pro editaci a pˇrid´av´an´ı vlastn´ıch tras exportovan´ ych z pˇrenosn´ ych GPS pˇr´ıstroj˚ u.<br />
<br />
54<br />
<br />
Literatura [1] ARCDATA PRAHA: Produkty ArcGIS [online]. 2014 [cit. 2014-04-19]. Dostupn´e z: http://www.arcdata.cz/produkty-a-sluzby/software/arcgis/ ˇTASTN ˇ ´ [2] S Y, Jiˇr´ı: HTML5 geolokaˇcn´ı rozhran´ı [online]. 2012 [cit. 2014-04-11]. Dostupn´e z: http://programujte.com/clanek/ 2011052400-html5-geolokacni-rozhrani/ ˇ [3] BUCHAR, Petr: Matematick´ a kartografie. Nakladatelstv´ı CVUT, 2007, ISBN 97880-01-03765-2. [4] DINCER, Alper a URAZ, Balkan: Google Maps JavaScript API Cookbook. Packt Publishing, 2013, ISBN 978-1-84969-882-5. [5] GEORSS: Geographically Encoded Objects for RSS feeds [online]. 2013 [cit. 2014-0405]. Dostupn´e z: http://www.georss.org/ [6] GOOGLE CODE: ArcGIS Server Link for Google Maps API V3 [online]. 2014 [cit. 2014-04-19]. Dostupn´e z: http://google-maps-utility-library-v3. googlecode.com/svn/trunk/arcgislink/docs/examples.html [7] GOOGLE DEVELOPERS: Google Earth API [online]. 2012 [cit. 2014-04-24]. Dostupn´e z: https://developers.google.com/earth/ [8] GOOGLE DEVELOPERS: Hello map [online]. 2014 [cit. 2014-02-25]. Dostupn´e z: https://developers.google.com/maps/ [9] GOOGLE DEVELOPERS: Google Maps API licensing [online]. 2014 [cit. 2014-0228]. Dostupn´e z: https://developers.google.com/maps/licensing [10] GOOGLE DEVELOPERS: Google Maps Javascript API v3 [online]. 2014 [cit. 201403-02]. Dostupn´e z: https://developers.google.com/maps/web/ [11] GOOGLE Inc.: Fusion Tables [online]. 2013 [cit. 2014-04-06]. Dostupn´e z: https: //support.google.com/fusiontables/ [12] GOOGLE Inc.: O spoleˇcnosti Google [online]. 2014 [cit. 2014-02-10]. Dostupn´e z: http://www.google.cz/intl/cs_cz/about/ [13] GOOGLE Inc.: N´apovˇeda Google Earth [online]. 2014 [cit. 2014-02-15]. Dostupn´e z: https://support.google.com/earth/ [14] GOOGLE Inc.: N´apovˇeda Google Maps [online]. 2014 [cit. 2014-02-16]. Dostupn´e z: https://support.google.com/maps/ 55<br />
<br />
ˇ CVUT v Praze<br />
<br />
Literatura<br />
<br />
´ Duˇsan: Jak ps´at web: o tvorbˇe internetov´ych str´ [15] JANOVSKY, anek [online]. 2014 [cit. 2014-03-01]. Dostupn´e z: http://www.jakpsatweb.cz/ [16] JQUERY: The jQuery Foundation [online]. 2014 [cit. 2014-04-13]. Dostupn´e z: https: //jquery.org/ ´ Miroslav: Moˇznosti interaktivn´ı prezentace prostorov´ych model˚ [17] KOPECKY, u na inˇ ternetu. Praha, 2013. Diplomov´a pr´ace. CVUT v Praze, Fakulta stavebn´ı. [18] KOSEK, Jiˇr´ı: Historie a v´yvoj HTML [online]. 2013 [cit. 2014-04-10]. Dostupn´e z: http://htmlguru.cz/uvod-historie.html ˇ AK, ´ [19] MAN Michal: Lad´ıme webov´e str´ anky pˇr´ımo v prohl´ıˇzeˇci Google Chrome [online]. 2010 [cit. 2014-05-01]. Dostupn´e z: http://www.manakmichal.cz/blog/ prohlizece/ladime-webove-stranky-primo-v-prohlizeci-google-chrome/ [20] MELLEN, Mickey: How often does Google update the imagery in Google Earth [online]. 2010 [cit. 2014-02-18]. Dostupn´e z: http://www.gearthblog.com/blog/ archives/2010/10/how_often_does_google_update_the_im.html [21] OPEN GEOSPATIAL CONSORTIUM: KML standards [online]. 1994 - 2014 [cit. 2014-04-05]. Dostupn´e z: http://www.opengeospatial.org/standards/kml [22] PILGRIM, Mark: Dive into HTML5 [online]. 2009 - 2011 [cit. 2014-04-11]. Dostupn´e z: http://diveintohtml5.info/geolocation.html [23] PROGRAMMABLEWEB: API news [online]. 2005 - 2014 [cit. 2014-02-25]. Dostupn´e z: http://www.programmableweb.com/ [24] SCHNEIDER, F.; BLACHMAN, N.; FREDRICKSEN, E.: How to Do Everything with Google. McGraw Hill Professional, 2004, ISBN 0-07-223174-2. [25] STATCOUNTER: Globals Stats [online]. 1999 - 2014 [cit. 2014-02-10]. Dostupn´e z: http://gs.statcounter.com/ [26] STROSSS, Randall: Planeta Google. Computer Press, 2009, ISBN 978-80-251-2412-3. [27] SVENNERBERG, Gabriel: Beginning Google Maps API 3. Apress, 2010, ISBN 9781-4302-2803-5. [28] W3C: A Short History of JavaScript [online]. 2012 [cit. 2014-04-13]. Dostupn´e z: https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript [29] W3RESOURCE: Web development tutorials [online]. 2013 - 2014 [cit. 2014-04-11]. Dostupn´e z: http://www.w3resource.com/ [30] WENNERBERG, Eric: Kalendar [online]. 2014 [cit. 2014-04-15]. Dostupn´e z: http: //www.ericwenn.se/kalendar/ [31] WESLEY, Addison: A history of HTML [online]. 1998[cit. 2014-04-10]. Dostupn´e z: http://www.w3.org/People/Raggett/book4/ch02.html 56<br />
<br />
ˇ CVUT v Praze<br />
<br />
Literatura<br />
<br />
[32] WORLD WIDE WEB CONSORTIUM: Geolocation API Specification [online]. 2012 [cit. 2014-04-12]. Dostupn´e z: http://dev.w3.org/geo/api/spec-source.html [33] WORLD WIDE WEB CONSORTIUM: HTML5 Candidate Recommendation [online]. 2014 [cit. 2014-04-11]. Dostupn´e z: http://www.w3.org/TR/html5 [34] WORLD WIDE WEB CONSORTIUM: Standards and Drufts of CSS [online]. 2014 [cit. 2014-04-13]. Dostupn´e z: http://www.w3.org/TR/#tr_CSS<br />
<br />
57<br />
<br />
Pˇ r´ıloha A Elektronick´ e pˇ r´ılohy Pˇriloˇzen´e CD obsahuje elektronickou verzi tohoto dokumentu a zdrojov´e soubory webov´e mapov´e aplikace. Zdrojov´e k´ody jsou dle u ´ˇcelu rozdˇeleny do adres´aˇr˚ u. • icon - sloˇzka se styly ikon Font Awesome • scrollbar.css - kask´adov´e styly pro posuvnou liˇstu • style.css - kask´adov´e styly pro layout aplikace • data - sloˇzka s KML soubory a HTML soubory prohl´ıdek • fancybox - funkce pro zobrazen´ı ve Fancyboxu • arcgislink.js - funkce pro pouˇzit´ı s ArcGIS serverem • google maps.js - z´akladn´ı funkce pro pr´aci s mapou a vrstvami • panels.js - funkce pro dynamick´e efekty • scrollbar.js - funkce pro pr´aci s posuvnou liˇstou • map.html - hlavn´ı HTML dokument aplikace • BP.pdf - bakal´aˇrsk´a pr´ace ve form´atu PDF<br />
<br />
58<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/eske-vysoke-ueni-technicke-v-praze-fakulta-stavebni-bakalask84bf06579724e62ad67033f23c81718d50833" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA STAVEBNÍ BAKALÁŘSKÁ PRÁCE"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
