Základy Leafletu
Cvičení 6
Webová kartografie
Podzim 2019
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Proč?
Knihovny
Proč?
s Leafletem se naučíme vytvářet webové mapy
naučíme se číst a porozumět dokumentaci Leafletu
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Proč?
Knihovny
Knihovny
kód třetí strany
usnadňuje psaní kódu
licence – open source?
dokumentace knihoven, příklady použití, výukové materiály
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Základy
Vrstvy
Ovládací prvky
Leaflet
https://leafletjs.com/
v1.3.4
rozšiřitelný – pluginy
malá velikost
čisté API, jednoduchý na pochopení
podporuje Proj4
v základu neobsahuje podkladovou mapu – nutno přidat
vektorové, rastrové vrstvy
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Základy
Vrstvy
Ovládací prvky
L.*
vytvořte si nový HTML dokument (případně s hlavičkou svého
webu)
podle https://leafletjs.com/examples/quick-start/
si do HTML vložte potřebné zdroje
do HTML vložte <div id="map"></div> a nastavte jeho
výšku a šířku pomocí CSS (jednotky vw, vh, calc())
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Základy
Vrstvy
Ovládací prvky
L.map
const MAP = L.map("mapId").setView([lat, lon], zoom);
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Základy
Vrstvy
Ovládací prvky
Rastr: L.tileLayer
const URL = "https://cartodb-basemaps-{s}.global.ssl.fastly.net/" +
"light_all/{z}/{x}/{y}.png";→
const URL_OSM =
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";→
// Google Maps umí dlaždice ve vysokém rozlišení; je potřeba
specifikovat subdomény – viz příklad na závěr→
const URL_GMAPS =
"https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&scale=2";→
const CARTO = L.tileLayer(URL);
MAP.addLayer(CARTO);
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Základy
Vrstvy
Ovládací prvky
L.marker
const CENTER = L.marker(MAP.getCenter());
CENTER.bindPopup("The center of the universe!");
MAP.addLayer(CENTER);
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Základy
Vrstvy
Ovládací prvky
Vektor: L.path
L.Polyline
L.Polygon
L.Rectangle
L.Circle
L.CircleMarker
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Základy
Vrstvy
Ovládací prvky
Vektor: L.polyline
const LINE = L.polyline([[49.20489, 16.59728], [49.20498,
16.59745], [49.20548, 16.59693], [49.20560, 16.59716],
[49.20621, 16.59652]]);
→
→
MAP.addLayer(LINE);
MAP.fitBounds(LINE.getBounds());
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Základy
Vrstvy
Ovládací prvky
L.layerGroup
Jednotlivé prvky a vrstvy sjednotíme do jedné vrstvy pomocí
L.layerGroup()
const LG = L.layerGroup([CENTER, LINE]);
MAP.removeLayer(CENTER);
MAP.removeLayer(LINE);
MAP.addLayer(LG);
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Základy
Vrstvy
Ovládací prvky
Ostatní: L.control
L.control umožňuje přidat:
zoom tlačítka
citaci zdroje vrstvy (attribution)
grafické měřítko
správce vrstev:
const baseLayers = {
"Carto": CARTO,
"OpenStreetMap": OSM,
"Google Maps": GMAPS
};
const overlays = {
Vectors: LG
};
MAP.addControl(L.control.layers(baseLayers, overlays));
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
Procvičování
1 nastavte maximální a minimální zoom level mapy
2 přidejte do mapy WMS vrstvu jako podkladovou nebo
překryvnou vrstvu
3 zeptejte se uživatele na jeho polohu a mapu podle toho
vystřeďte
prompt()
4 změňte vzhled pro přidávanou linii pomocí konfiguračního
objektu L.polyline
const LINE = L.polyline(lineData, {
property: value,
// viz dokumentace
});
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
ESLint
Jak dál?
Úkol
vložte do své webové stránky mapu vytvořenou pomocí
Leafletu
mapa bude sloužit k zobrazení jevu, který jste si vybrali
využijte k zapracování připomínek
odevzdat do 11. 11. 24:00
tentokrát není bodované
odevzdávat v archivu (web.zip)
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
ESLint
Jak dál?
ESLint
Pomáhá odhalovat chyby v JavaScriptu (podobně jako
HTML a CSS validátor)
Většinou vyžaduje konfiguraci
Nejlépe používat integrovaný do textového editoru
Nastavení ESLint:
https://eslint.org/docs/user-guide/configuring
https://www.sitepoint.com/
comparison-javascript-linting-tools/
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
ESLint
Jak dál?
Jak dál?
Přečtěte si víc a procvičujte
https:
//bl.ocks.org/03e280d1708f0bcad5ffc759b7e8e6ad
Vladimir Agafonkin: https://github.com/mourner
https://javascript.info/
e-booky zdarma
https://github.com/getify/You-Dont-Know-JS
https://medium.com/
https://bost.ocks.org/mike/
Podzim 2019 Základy Leafletu
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Procvičování
Závěr
ESLint
Jak dál?
Ptejte se
kdykoliv
kdekoliv
jakkoliv
co nejdřív …
e-mail: leitgeb@mail.muni.cz
discord: https://discord.gg/ppscspX
Podzim 2019 Základy Leafletu