1 of 13

GIS 3�Pátá lekce

Mgr. Michal Jakl

2 of 13

Obsah lekce

  1. Připomenutí JavaScriptu
  2. Knihovna Leaflet

​

​

​

​

​

Praktické cvičení: Práce se knihovnou Leaflet

3 of 13

1. JavaScript - obecné informace

  • Multiplatformní, objektově orientovaný, událostmi řízený skriptovací jazyk
  • Vznik v roce 1995, autorem je Brendan Eich z tehdejší společnosti Netscape
  • Slovo Java je součástí názvu pouze z marketingových důvodů.
  • Vlastnosti:
    • interpretovaný -- nemusí se kompilovat
    • objektový -- využívá objektů prohlížeče a zabudovaných objektů
    • závislý na prohlížeči -- funguje ale ve většině prohlížečů
    • case sensitivní -- záleží na velikosti písem v zápisu
    • syntaxí podobný jazykům C, Java a podobným
    • dynamické přiřazování typů proměnným

4 of 13

1. JavaScript – omezení

  • JavaScript funguje pouze v prohlížeči.
  • Uživatel může JavaScript zakázat
  • Existují různé odlišné verze jazyka i prohlížečů, což vede k častým chybám.
  • Neumí přistupovat k souborům (kromě cookies) ani k žádným systémovým objektům.
  • Neumí žádná data uložit (kromě cookies).

5 of 13

1. JavaScript - využití

  • Webové stránky, do kterých je často vkládaný přímo jako součást HTML kódu stránky.
  • Interpretaci v provádí webový prohlížeč (klient) návštěvníka stránky.
    • Jsou jím obvykle ovládány různé interaktivní prvky GUI (= graphic user interface), tj. tlačítka, textová políčka nebo tvořeny animace a efekty obrázků.
    • Kód JavaScriptu se obvykle spouští až po stažení webové stránky z Internetu (tzv. na straně klienta), na rozdíl od např. od PHP, které se spouštějí na straně serveru ještě před stažením z Internetu.
  • Umožňuje vytvořit například hodiny, hodnotit data ve formuláři, počítat, dynamizovat data, umožňuje tvorbu všemožných prvků k oživení webu, přes blikající texty po jednoduché hry.
  • Základem dynamického webu je právě JavaScript.

6 of 13

1. JavaScript - zápis

Do těla HTML stránky

Do těla externího scriptu

In-line zápis

7 of 13

1. JavaScript - hlášky

Alert

Prompt

Confirm

8 of 13

1. JavaScript - operátory

Operátory přiřazení

Početní operátory

Logické operátory

9 of 13

1. JavaScript - funkce

Definice funkce v JavaScriptu

Volání funkce scriptem

Definice funkce událostí

10 of 13

2. Leaflet.js - informace

  • JavaScriptová knihovna se velkou komunitou a spoustou pluginů zaměřená na mobile-friendly interaktivní mapy
  • Základní knihovna má pouhých 39 kB, je zdarma a dá se libovolně upravovat

​

​

​

  • Dokumentace na https://leafletjs.com/
  • Autorem je Vladimir Agafonkin (viz prezentace v Moodlu Jednoduchost v GIS aplikacích)
  • Základním podkladem jsou OpenStreetMaps

​

11 of 13

Cvičení

  1. Vytvořte soubor leaflet.html a umístěte do něj základní leaflet mapu, kterou nastavíte na „fullscreen“ (5 b.)
  2. Mapu ve výchozím nastavení „zazoomujte“ na celou ČR (5 b.)
  3. Nastavte mapové podklady z webu Mapy.cz – uveďte je jako zdroj dat v zápatí! (5 b.)
  4. Načtěte ze vzdáleného serveru geoJSON vrstvy zemí a měst (10 b.)
    1. Adresa serveru je https://mjakl.cz/vyuka/gis3/index.php?name=XXX
    2. XXX je název požadované vrstvy, ve Vašem případě „mesta“ a „zeme“
    3. Vrstva měst má 20 MB – načítá se relativně dlouho ☺
  5. Bodovu vrstvu měst „zclustrujte“ (15 b.)
  6. Nastavte po kliknutí na bod města zobrazení „bubliny“ s jeho názvem (NAME) (5 b.)
  7. Přidejte mapový prvek pro změnu mapových podkladů (OSM, Mapy.cz) (10 b.)

​

  • Kdo zvládne vše -> + 20 b.
  • Nejrychlejší získá + 20 b.

​

Využívané Leaflet pluginy: leaflet-ajax a Leaflet.markercluster

https://cdnjs.com/libraries

?apikey=a7-5mTjgt8bBnirZ4BSu7lbA3PrgjowwCi3-OQvrhVI

12 of 13

Výsledek ZDE (i s prací z následující lekce)

13 of 13

Děkuji za pozornost a těším se příště!��Prostor pro zpětnou vazbu

mail@mjakl.cz

Tel. 608 544 839

Web: mjakl.cz

Telegram: t.me/mjakl_cz