Základy Leafletu
Cvičení 8
Webová kartografie – úvod
Podzim 2022
Filip Leitner
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Proč?
s Leafletem se naučíme vytvářet webové mapy
naučíme se číst a porozumět dokumentaci Leafletu
Filip Leitner Základy Leafletu Webová kartografie 2 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Knihovny
kód třetí strany
usnadňuje psaní kódu
licence – open source?
dokumentace knihoven, příklady použití, výukové materiály
Filip Leitner Základy Leafletu Webová kartografie 3 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Leaflet
https://leafletjs.com/
v1.9.3
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
Filip Leitner Základy Leafletu Webová kartografie 4 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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())
Filip Leitner Základy Leafletu Webová kartografie 5 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
L.map
const MAP = L.map("mapId").setView([lat, lon], zoom);
Filip Leitner Základy Leafletu Webová kartografie 6 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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);
Filip Leitner Základy Leafletu Webová kartografie 7 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
L.marker
const CENTER = L.marker(MAP.getCenter());
CENTER.bindPopup("The center of the universe!");
MAP.addLayer(CENTER);
const ANOTHER = L.marker([49.204115, 16.598193]);
MAP.addLayer(ANOTHER);
Filip Leitner Základy Leafletu Webová kartografie 8 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Vektor: L.path
L.polyline
L.polygon
L.rectangle
L.circle
L.circleMarker
Filip Leitner Základy Leafletu Webová kartografie 9 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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());
Filip Leitner Základy Leafletu Webová kartografie 10 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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);
Filip Leitner Základy Leafletu Webová kartografie 11 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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));
Filip Leitner Základy Leafletu Webová kartografie 12 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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
});
Filip Leitner Základy Leafletu Webová kartografie 13 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Procvičování - riešenie
1 Riešenie precvičovania + kód z hodiny https://gist.github.com/
FilipLeitner/fda843a25debf4c05239eabdf7c823d9
Filip Leitner Základy Leafletu Webová kartografie 14 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úkol
vložte do své webové stránky mapu vytvořenou pomocí Leafletu
na Geoserveru vytvořte vrstvy pro vaše zdrojová data
mapa bude sloužit k zobrazení jevu, který jste si vybrali
využijte k zapracování připomínek
odevzdat do 29 11.
tentokrát není bodované
odevzdávat v archivu (web.zip)
Filip Leitner Základy Leafletu Webová kartografie 15 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Jak dál?
Přečtěte si víc a procvičujte
https://exercism.io/tracks/javascript
https://javascript.info/
e-booky zdarma
https://github.com/getify/You-Dont-Know-JS
Vladimir Agafonkin: https://github.com/mourner
https://bost.ocks.org/mike/
https://medium.com/
Filip Leitner Základy Leafletu Webová kartografie 16 / 17
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Ptejte se
kdykoliv
kdekoliv
jakkoliv
co nejdřív …
Filip Leitner Základy Leafletu Webová kartografie 17 / 17