1
JavaScript a API
RNDr. Tomáš ŘEZNÍK, Ph.D.
Webová kartografie – úvod
Laboratoř geoinformatiky a kartografie, Masarykova univerzita Laboratoř geoinformatiky a kartografie, Masarykova univerzita
JavaScript
• Teorie – viz. přednáška
• PSPad/Notepad++
• Kombinace se známým (X)HTML
• V tomto předmětu pouze skripty vkládané do zdroj. kódu
• Samostatné skripty (.js nebo .jse)
• Potřeba opět webový prohlížeč
• Není validace
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
JavaScript
• Skript se píše mezi tagy
• Vkládají se i do , ale i
• Záleží podle účelu
• Syntaxe tagu
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
JavaScript vložený do stránky
• 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
• Prohlížeč by jinak vypsal skript jako normální text, takto ho bere jako
komentář a neukáže ho
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
JavaScript vložený do stránky
• JavaScript je Case sensitive
• Nejjednodušší skript
document.write("ahoj");
• Každá metoda, funkce nebo vlastnost skriptu má být ukončena
středníkem
• Bez uvozovek by prohlížeč ahoj bral za proměnnou
• Proto psaní uvozovek navíc potřebuje před znak “ ‘ lomítko
document.write("Tohle \"jsou\" uvozovky");
• Komentáře se přidávají pomocí znaků /* nebo */ pro víceřádkový
komentář
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Deklarace proměnné
• Vkládají dynamiku; každá proměnná má název a dynamiku
var prom = 23;
var město=“Paříž”;
var nadpis1=“
nadpis1
”;
var marker;
var position = new GLatLng(49.204876043213574,
16.597048044204712);
var map = new GMap2(document.getElementById(“mapField”));
• Zápis proměnné
var mesto = "Paříž";
document.write(mesto); //zapíše 'Paříž'
2
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Práce s proměnnými
var mesic_plat = 45000; //měsíční plat
var rok = 12; //rok má 12 měsíců
var rok_plat = mesic_plat*rok; //plat za rok
var rok_den = 365; //rok má 365 dní
var plat_den = rok_plat/rok_den; //plat za den
document.write("Váš měsíční plat činí "+mesic_plat+
+"Kč Váš roční plat činí "+rok_plat+"Kč Za den
dostanete"+plat_den+"Kč");
• Můžete využívat aritmetické operátory a++ přičte 1, a-- odečte 1,
a+=y přičte y, a-=y odečte y, a*=y vynásobí y, a/=y vydělí y
• Kromě proměnných existují i pole proměnných
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Funkce
• Kromě existujících funkcí JavaScriptu můžete přidávat své vlastní
• Deklarace funkce
function napis(){ document.write("ahoj"); }
• Klíčové slovo function deklaruje funkci – povinné
• Slovo napis je název funkce (pište je bez diakritiky)
• () uvádí, že se jedná o funkci s parametrem
• {} ohraničuje tělo funkce
• Vyvolání funkce
napis(); // funkce bez argumentu
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Události
• Najedete myší na text – změní barvu, kliknete na mapu – vrátí
vám informace o bodu,…
• Deklarují se u značek (X)HTML
• Zapsání jméno události="skript který se má
zavolat;"
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Nejčastější události pro webové mapy
• onClick Při kliknutí
• onDblClick Při dvojitém kliknutí
• onSubmit Při odesílání formuláře
• onMouseOver Při najetí kurzoru na objekt
• onMouseWheel Při rolování kolečkem
• Více o JavaScriptu např. na http://www.tvorba-
webu.cz/javascript/
GOOGLE MAPS API
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Google Maps API
• Princip API – viz. přednáška
• Hlavní zdroj https://developers.google.com/maps/
• Postup
– „upsat se“ pro API klíč na at
https://code.google.com/apis/console
– vložit klíč do svých stránek
– začít tvořit (nejlépe s ohledem na zdroje):
https://developers.google.com/maps
https://developers.google.com/maps/documentation/javascript/tut
orial
http://koti.mbnet.fi/ojalesa/exam/index.html
http://econym.org.uk/gmap/
3
• http://makingmaps.wordpress.com/2007/10/18/custom-map-
symbols-in-google-maps/
• http://atenasio.googlepages.com/gdd2007.html
• http://www.nelso.cz/mapa-cen-piva-v-praze/
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Další užitečné odkazy
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Google knihovny figurálních symbolů
• Dostupné na Google serveru
• Google mapy užívají KML renderer pro jejich vykreslování
• 4 složky ikon (http://maps.google.com/mapfiles/kml/pal2/ až 5)
• Každá složka obsahuje 64 ikon (icon0.png – icon64.png)
• Pro každou ikonu PNG (32×32) dostupný také stín PNG
(59×32) – pojmenování icon27s.png
• Nastavení vhodné pro většinu ikon
Icon.iconSize=new GSize(32,32);
Icon.shadowSize=new GSize(56,32);
Icon.iconAnchor=new GPoint(16,32);
Icon.infoWindowAnchor=new GPoint (16,0);
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Google knihovny figurálních symbolů
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Google knihovny figurálních symbolů
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Google knihovny figurálních symbolů
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Google knihovny figurálních symbolů