1
KLIENTSKÁ ŘEŠENÍ
Klientská aplikace: plug-in
Laboratoř geoinformatiky a kartografie
mapa1.pdf
o_inmapy.htm
PDF
plug-in
Klientská aplikace: plug-in
Laboratoř geoinformatiky a kartografie
Výhody
• interaktivní mapy
• plug-in (zásuvný modul) je zdarma
• tisíce různých plug-inů – možnost rozšíření webové publikace
Nevýhody:
• nutnost instalace
• nutnost reinstalace při změně verzí (jako např. u SVG)
• mnohdy odlišné pro různé webové prohlížeče
Klientská aplikace: plug-in
Laboratoř geoinformatiky a kartografie
Hlavní využívané formáty:
• PDF (Portable Document Format) – PDF plug-in
• VML (Vector Markup Language) – v IE nativně; VML plug-in
• SVG (Scalable Vector Graphics) – SVG plug-in, Ffox i IE nativně
• SWF (Shockwave Flash) – Flash plug-in
• Silverlight
• …
Formáty využívající plug-in: VML
Laboratoř geoinformatiky a kartografie
• Vector Markup Language (aplikace XML 1.0)
• kódování vektorové informace s dalšími značkami
• standardizace a formát SVG byl v nedohlednu → Microsoft vytvořil
vlastní specifikaci
• ve specifikaci http://www.w3.org/TR/NOTE-VML uvedeny způsoby
zobrazení a editace
• pomocí vektorů (linií a křivek) vytváří nové formáty
• pro jejich formátování využívá CSS
• v IE nativně; jinde nedělá problémy – nezobrazí se
• dnes se nevyvíjí
Ukázka VML
Laboratoř geoinformatiky a kartografie
<v:shape style='top: 0; left: 0; width: 250; height: 250’
stroke="true" strokecolor="red" strokeweight="2" fill="true"
fillcolor="green" coordorigin="0 0" coordsize="175 175">
<v:path v="m 8,65
l 72,65,92,11,112,65,174,65,122,100,142,155,92,121,42,155,60,100
x e"/>
</v:shape>
2
Možnosti VML
Laboratoř geoinformatiky a kartografie
XHTML VML
HTML DOM VML canonical form
Pozice pro layout Pozice pro každý tvar
Rastrový výstup
DOM
SGML
CSS model
výstup
Proč užívat SVG/VML oproti bitmapové
grafice
Laboratoř geoinformatiky a kartografie
• manipulace (žádný grafický editor, editace zdrojového kódu)
• interpretace textu (text je (X)HTML; tudíž text)
• CSS
• DHTML (grafy, animace,…)
• poloha objektů (nemusí odpovídat pořadí ve zdrojovém kódu)
• menší datový objem (velikost grafiky srovnatelná s velikostí textu;
jen její načítání je pomalejší)
• rozlišení (takřka libovolná velikost – perfektní pro mapy)
• samostatnost objektů (nejsou propojeny; např. klikací mapy)
• kompatibilita (SVG/VML je založeno na XML)
Formáty využívající plug-in: SVG
Laboratoř geoinformatiky a kartografie
• Scalable Vector Graphics (aplikace XML 1.0)
• nativně podporován Operou (plně) a Firefoxem (výběr)
• původně pouze Adobe SVG plug-in, později Batik a další
• navázáno na DOM (Document Object Model)
• možnost vytvořit standardizované GUI
• podporuje hyperlinkové standardy a SMIL (interaktivní obsah
webových stránek)
• obsahuje kompresní algoritmus g-zip (úroveň přenosu: nativně
server i prohlížeč)
• i dnes bouřlivý vývoj
Formáty využívající plug-in: SVG
Laboratoř geoinformatiky a kartografie
• 3 základní typy grafických objektů
- vektorové tvary (vector graphic shapes)
- rastrové obrazy (raster images)
- texty
• vykreslovány pak jsou ve stejném pořadí jako ve zdrojovém kódu
• definice průhlednosti, ořezové masky, bitmapové masky
• možnost vícenásobného použití symbolu pomocí odkazů (paměť)
• možnost uchování tvary některých písmen (font subset) do SVG kódu
nebo externě uložit (zobrazení písem bez podpory)
• deklarativní animace (podobně jako GIF animace – bez SW podpory)
• kompatibilní se standardem SMIL (Synchronized Multimedia Integration
Language)
Formáty využívající plug-in: SVG
Laboratoř geoinformatiky a kartografie
• bezproblémové přenášení animací mezi editačními aplikacemi
• DOM funguje jako obdoba DHTML (možnost měnit nebo vytvářet
nové grafické objekty)
• standardně mechanismy událostí
• hlavní smysl – lehce modifikovatelná interaktivní vektorová grafika
Srovnání SVG a Flashe
Laboratoř geoinformatiky a kartografie
Flash SVG
Uzavřenost (pouze Adobe Flash) Otevřenost (stačí textový editor)
Proprietární řešení Založeno na XML
Vhodnější pro animace Složitejší vytváření animací
Nutnost exportu do SWF Snadná možnost generování grafiky na serveru z DB
Komplexní načítání Inkrementální načítání
Rozšířenost pluginů cca. 90% Rozšířenost pluginů + nativní podpory cca. 40%
Minimální podpora v mobilech Široce využívané na mobilech (SVG Tiny a Basic)
Adobe Flash (Adobe Design Premium CS3) Chybí vyspělé kreativní prostředí
SWF je rychlejší, plug-in lépe rychlostně optimalizovaný Pomalejší, delší doba načítání
Lepší provázanost na grafický software Komplikované vytvoření složitější grafiky
Jemnější časové fázování Hrubší časové fázování
Vhodný jako samostatná aplikace Možnost využití částí
Obsahuje WIDGET – ovládací prvky Nutnost napsat si ovládací prvky
Existence událostí Pouze události definované v DOM
3
SVG editory
Laboratoř geoinformatiky a kartografie
• Adobe Illustrator
• Corel Draw
• ArcMap
• Inkscape
http://www.inkscape.org/
• Sketsa
http://www.kiyut.com/products/sketsa/
Užitečné odkazy: plug-in formáty
Laboratoř geoinformatiky a kartografie
http://www.w3.org/TR/NOTE-VML
http://interval.cz/clanky/vml-vector-markup-language/
http://interval.cz/webdesign/grafika/
http://www.adobe.com/svg/viewer/install/
http://xmlgraphics.apache.org/batik/
http://www.tinyline.com
Spojení VML a SVG - AxioMap
Laboratoř geoinformatiky a kartografie
• Aplikace XML Interaktivního On-line Mapování
• softwarový balík založený na XML
• 2 části
- sbírka GIS extenzí a skriptů převádějící GIS data na XML
- interaktivní mapové prohlížeče zobrazující tyto XML soubory
• http://www.spatialdatasystems.com/
• hlavním omezením je rychlost CPU klienta
Spojení VML a SVG - AxioMap
Laboratoř geoinformatiky a kartografie
Spojení VML a SVG - AxioMap
Laboratoř geoinformatiky a kartografie
Java
Laboratoř geoinformatiky a kartografie
• platformě nezávislý objektový programovací jazyk
• vyvinut Sun Microsystems, 1995
• používaný ke tvorbě aplikací nebo jejich podpoře na počítači či síti
• malé aplikace – applety – mohou být také součástí www stránek
• applety umožňují interaktivitu
• pro prohlížení je třeba instalovat Java virtual machine – tzv. interpret
Javy
• objektově orientovaný, distribuovaný, bezpečný, přenositelný,…
• pomalejší start programů (oproti C++,…) – překlad a pak spuštění
• paměťová náročnost – nutnost mít v paměti celé běhové prostředí
• chybí některé „klasické“ funkce umožňující tvorbu chyb
4
kód Java
appletu
Klientská aplikace: Java
Laboratoř geoinformatiky a kartografie
mapa.class (X)HTML
dokument
Java
virtual
machine
<h1>Interaktivní mapy</h1>
<p>Interaktivní mapy patří mezi <strong>nejžádanější
mapové produkty</strong></p>
<h2>Jednoduché interaktivní mapy</h2>
<p>Zde zvidíte příklad takové interaktivní mapy</p>
<applet src=“mapa.class”>
Java
virtual
machine
Java
virtual
machine
Klientská aplikace: Java („Smart klient“)
Laboratoř geoinformatiky a kartografie
Klientská aplikace: Java („Smart klient“)
Laboratoř geoinformatiky a kartografie
Mobilní klientské aplikace
Laboratoř geoinformatiky a kartografie
Mobilní klientské aplikace
Laboratoř geoinformatiky a kartografie
• Mapy ČÚZK
JavaScript
Laboratoř geoinformatiky a kartografie
• jednoduchý skriptovací jazyk
• závislý na prohlížeči (uživatel jej může vypnout)
• v různých verzích prohlížečů nemusí korektně fungovat
• skript se může vložit přímo do stránky nebo uloží samostatně (přípona
.js nebo .jse)
• stačí libovolný editor zdrojového kódu
• skript se zapisuje mezi značky <script> a </script>
• použití od validace formulářů, mouseover na mapách,…
5
Rozdíl mezi Javou a JavaScriptem
Laboratoř geoinformatiky a kartografie
JavaScript Java
Interpretováno (nekompilováno) klientem Kompilace mezikódu staženého ze serveru
na klientovi
Objektově orientovaný – není rozdíl mezi
typy a objekty. Prototypová dědičnost;
vlastnosti a metody mohou být k jakémukoli
objektu přidány dynamicky
Objektově orientovaná – objekty jsou
rozděleny do tříd a instancí s plnou
dědičností. Třídy a instance nemohou mít
vlastnosti a metody přidávané dynamicky
Kód integrován a zakotven v (X)HMTL Applety přístupné z (X)HTML stránek
Nedeklarované proměnné datové typy Deklarované datové typy
Dynamické poskytování – reference objektů
zkontrolovány za běhu
Statické poskytování – reference objektů
musí existovat v době kompilace
Nemůže přímo zapisovat na pevný disk Může zapisovat na pevný disk
JavaScript klient
Laboratoř geoinformatiky a kartografie
JavaScript a API
Laboratoř geoinformatiky a kartografie
• JavaScript nemusí sloužit jen jako čistě klientská aplikace
• v praxi často kombinace serverového řešení a klientské části pomocí
API
• první byl Google – JavaScriptovské API již 2005
• v českém prostředí od roku 2007 Seznam a Atlas
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
JavaScript
• Skript se píše mezi tagy <script> </script>
• Vkládají se i do <head>, ale i <body>
• Záleží podle účelu
• Syntaxe tagu <script> je následující:
<script language="JavaScript" type="text/javascript"
src="cesta k externímu souboru">
<!–- samotný javascript - obsah skriptu //-->
</script>
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
JavaScript vložený do stránky
<script language="JavaScript" type="text/javascript">
<!–- samotný javascript - obsah skriptu //-->
</script>
• Atribut language – název skriptovacího jazyka
• Atribut type – typ skriptu – u našich webových map vždy
text/javascript
• Existují prohlížeče, které nemusí rozumět JavaScriptu → je vhodné
zapsat začátek skriptu <!–- a na konec //-->
• Prohlížeč by jinak vypsal skript jako normální text, takto ho bere jako
komentář a neukáže ho
Co je potřeba pro takovou vlastní mapu?
Laboratoř geoinformatiky a kartografie
• vygenerovat si klíč na domovské stránce API
api.mapy.cz
api.amapy.cz
google.com/apis/maps
• umístit základní JavaScriptovský kód na své stránky
- nutno specifikovat na jaký element www stránky se má mapa
navázat
- velikost mapy pomocí parametrů zdrojového kódu nebo CSS
• pokud se chce, přidat další funkcionalitu
6
Funkcionalita: Seznam mapy
Laboratoř geoinformatiky a kartografie
• API v4.0
• do roku 2010 nejslabší funkcionalita z této trojice (mapa, základní
interakce, značky): funkce i licenční podmínky nastaveny pro zobrazení
mapy jako statického obrázku u kontaktu, limit 1000 na maximální počet
zobrazení, pouze nekomerční využití
• nyní lze využívat i komerčně (placená podpora ze strany Seznamu)
• bez omezení počtu odeslaných požadavků za den
• v API přístupné všechny mapy z Mapy.cz kromě podrobné mapy
Evropy
• nejlepší podklady satelitních snímků i jiných map
• nemožnost využívat všechny podklady portálu mapy.cz
• propojení s IDOSem, obrovská návštěvnost portálu mapy.cz
Funkcionalita: Seznam mapy
Laboratoř geoinformatiky a kartografie
• Funkcionalita v roce 2012:
- šikmé snímky
- ovládací prvky pro natočení mapy
- hledání trasy
- geokódování
- náhledová mapa
- dynamická změna mapových projekcí
- větší definice ovládání mapy
- KML vizualizátor
Funkcionalita: Atlas mapy
Laboratoř geoinformatiky a kartografie
• ustrnutí vývoje v roce 2008, dříve nejnovější řešení, rychlejší v
porovnání se Seznamem, dnes výrazně horší
• funkcionalita: podpora vykreslování vektorových tras, přidávání
obsahu k bodům (např. fotografie, další mapy,…), více kartografických
souřadných systémů, podpora scriptingu, nemovitosti
• zdarma pro nekomerční využití
• podpora případným komerčním aplikacím
• nelze využít intranetově
• oficiálně se pracuje na geokódování – ale nikde už delší dobu nejsou
informace (vývojář API od Atlasu odešel)
• možnost je všechny využívat v API
Funkcionalita: Google mapy
Laboratoř geoinformatiky a kartografie
• nejstarší, ale nejvíce se dynamicky rozvíjející řešení
• 2005 zveřejněno JavaScript API, 2008 Flash API, dnes obsahuje i
StreetView
• minimální licenční omezení pro nekomerční využití
• omezení na geokódování, výškové služby, rozlišení Street View, věku
autora na 21 let, publikaci na nevhodných stránkách
• funkcionalita obdobná s mapy.cz:
- geokódování - vyhledávání tras
- vlastní mapy - přepočty souřadnic
- export do Google Earth - StreetView
Funkcionalita: Google mapy
Laboratoř geoinformatiky a kartografie
• globální řešení → nejhorší podklady pro ČR
• výborná dokumentace
• široká vývojářská komunita
• obrovské množství příkladů na
- https://developers.google.com/showcase/#tags=maps
• od verze 3 umožňuje stylovat mapy
- množství existujících ukázek na http://snazzymaps.com/
Specifická klientská mapová řešení:
Zoomify
Laboratoř geoinformatiky a kartografie
• jednoduché HTML řešení mapové publikace
• zdarma pro nekomerční využití
• není XHTML validní
• vytváří dlaždice na několik úrovní zoomu a skládá je do tabulky
<table>
• funkcionalita: zoom, posun, aktualizace obrazu
• převodník obrazu do dlaždic, prohlížeč
• podpora HTML, JPEG, Flash
• možnost exportu z Photoshopu do Zoomify
7
Specifická klientská mapová řešení:
Zoomify
Laboratoř geoinformatiky a kartografie
• pyramidování v případě zoomify
http://www.zoomify.com/
http://oldmaps.geolab.cz/map_region.pl?z_height=70&lang=cs&z_width=0&z_new
win=0&map_root=2vm&map_region=mo
http://www.inmapy.cz/imgbig/lyz_area.htm