Základy Leafletu
Cvičení 8
Webová kartografie – úvod
Podzim 2024  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

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

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
Ideální pro jednoduché webové mapy a menší projekty, kde je důležitá rychlost vývoje a snadnost
použití.
Filip Leitner
Základy Leafletu




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

L.MAP
Filip Leitner
Základy Leafletu
const  MAP = L.map("mapId").setView([lat, lon], zoom);

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

L.MARKER
Filip Leitner
Základy Leafletu
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);

VEKTOR:  L.PATH
L.polyline  L.polygon  L.rectangle  L.circle  L.circleMarker
Filip Leitner
Základy Leafletu

VEKTOR:  L.POLYLINE
Filip Leitner
Základy Leafletu
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());

L.LAYERGROUP
Filip Leitner
Základy Leafletu
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);

OSTATNí:  L.CONTROL
L.control umožňuje přidat:
zoom tlačítka
citaci zdroje vrstvy (attribution)  grafické měřítko
správce vrstev:
Filip Leitner
Základy Leafletu
const baseLayers = {  "Carto": CARTO,
"OpenStreetMap": OSM,
"Google Maps": GMAPS
};
const overlays = {  Vectors: LG
};
MAP.addControl(L.control.layers(baseLayers, overlays));

PROCVIčOVÁNí
nastavte maximální a minimální zoom level mapy
přidejte do mapy WMS vrstvu jako podkladovou nebo překryvnou  vrstvu
zeptejte se uživatele na jeho polohu a mapu podle toho vystřeďte
prompt()
změňte vzhled pro přidávanou linii pomocí konfiguračního objektu
L.polyline
1
2
3
4
Filip Leitner
Základy Leafletu
const LINE = L.polyline(lineData, {  property: value,
// viz dokumentace
});

PROCVIčOVÁNí  -  RIEšENIE
1
Filip Leitner
Základy Leafletu
Riešenie precvičovania + kód z hodiny https://gist.github.com/
FilipLeitner/fda843a25debf4c05239eabdf7c823d9

Ú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
Filip Leitner
Základy Leafletu

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

Ptejte se
Filip Leitner
Základy Leafletu
kdykoliv  kdekoliv  jakkoliv
co nejdřív …