2 of 13

Obsah lekce

Webové mapové knihovny
Získání polohy uživatele
Mapy.cz API
Leaflet.js
ESRI StoryMaps

Praktické cvičení: Využití mapových knihoven pro webové projekty

3 of 13

1. Webové mapové knihovny

Knihovna = označení pro souhrn procedur a funkcí, často také konstant a datových typů (v objektovém programování též tříd, objektů a zdrojů), který může být využíván více počítačovými programy. Knihovny usnadňují programátorovi tvorbu aplikací tím, že umožňují využití hotového kódu, použití jednou vytvořeného kódu v jiných programech; při týmové práci mohou sloužit k dělbě práce.

API = Application Programming Interface. Jde o rozhraní využívané při vývoji mobilních i webových aplikací a tvorbě internetových stránek. Smyslem API je zajištění komunikace mezi dvěma platformami, které si vzájemně vyměňují data. Umožňují využívat již naprogramovaná řešení a integrovat je do vlastních webů či softwaru, díky čemuž šetří programátorský čas a tím i peníze.

SDK = Software development kit. Sada vývojových nástrojů umožňující vytváření aplikací pro určité softwarové balíčky, frameworky, počítačové systémy, herní konzole, operační systémy nebo podobné platformy. Pro vytvoření vlastní aplikace je nutné si kromě konkrétního programovacího jazyka stáhnout také Software development kit.

4 of 13

3. Mapy.cz API - informace

JavaScriptová knihovna (API) od předního českého mapového portálu Mapy.cz, spadajícího pod společnost Seznam.cz
Dokumentace na https://api.mapy.cz/
Použití Mapy API je zcela zdarma a je možné i pro komerční účely - pro většinu činností není jeho používání nijak omezeno
Základním mapovým podkladem jsou mapové podklady Mapy.cz
Kromě základních úkonů umožňuje využívat například i služeb jako Panorama, geokódování, plánování trasy apod.

5 of 13

3. Mapy.cz API – základní implementace

<iframe

style="border:none" src="https://frame.mapy.cz/s/cukopapubo" width="400"

height="280"

frameborder="0">

</iframe>

6 of 13

3. Mapy.cz API – lepší implementace

7 of 13

4. 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

8 of 13

4. Leaflet.js – základní implementace

9 of 13

5. ESRI StoryMaps – základní informace

Inovativní online mapový nástroj od giganta na poli geoinformatiky, americké firmy ESRI
Spojení GIS a multimediálního obsahu vytváří tak úplně novou a mnohem atraktivnější způsob prezentace map.
Pomocí jednoduchých aplikací můžete prezentovat výsledky své práce kolegům a zákazníkům ale třeba i jen vyprávět příběh z cest svým přátelům.
Na výběr mnoho šablon, které stačí jen doplnit o mapy a fotografie, videa a grafy a další obsah
Dokumentace na https://storymaps.arcgis.com/
Dostupné zdarma, nutná registrace
Příklad „I v Česku se mění klima (ČHMÚ)“

10 of 13

Praktické cvičení

Nasazení mapového okna do webového projektu

11 of 13

Vložte do webové stránky okna map vytvořených pomocí Leaflet.js a Mapy.cz API a zobrazte v nich bodem polohu fakulty. �Následně se pokuste daná mapová okna co nejvíce „vyšperkovat“.

12 of 13

Na doma

Využijte možností mapových knihoven pro svůj semestrální projekt

13 of 13

mail@mjakl.cz

Tel. 608 544 839

Web: mjakl.cz

Telegram: t.me/mikimikimikia

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