Pokročilý Leaflet
Cvičení 9
Webová kartografie – úvod
Podzim 2024
Filip Leitner
Úvod Leaflet Závěr
Zápis funkce HTTP dotazy
Naučíme se:
zobrazovat v mapě externí data – GeoJSON
načítat externí data – asynchronní JavaScript
používat v Leafletu pluginy
zobrazovat velké objemy dat v Leafletu – clustering, vlastní ikony
Zápis funkce HTTP dotazy
Zápis funkce
Běžný zápis:
function (data) {
return data.user;
}
function (a, b) {
return a + b;
}
ES6+:
(data) => {
return data.user;
}
(a, b) => {
return a + b;
}
// nebo jednoduše:
data => data.user;
(a, b) => a + b;
pokud má funkce pouze jeden argument, můžeme vypustit závorky
pokud vracíme pouze jednoduchý výraz, můžeme vypustit
složené závorky i klíčové slovo return
Sync vs Async
HTTP dotazy
AJAX – Asynchronous JavaScript And XML umožňují dynamicky načítat data
na HTTP dotazy se vztahuje řada bezpečnostních limitů: Stránky načtené přes HTTPS by měly
dotazovat další zdroje opět přes HTTPS, ne HTTP
https://portswigger.net/web-security/cors
https://en.wikipedia.org/wiki/Cross-site_scripting
skript není zpracován lineárně, ale části kódu se spustí až po načtení externího zdroje
Úvod Leaflet Závěr
XMLHttpRequest
Dříve (nebudeme používat):
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
console.log(JSON.parse(this.response));
}
};
xhttp.open("GET", "http://example.com/data.json", true); xhttp.send();
// jednodušeji pomocí jQuery:
$.get("http://example.com/data.json", function (data) { console.log(data);
});
Úvod Leaflet Závěr
Zápis funkce HTTP dotazy
Fetch API
Budeme používat (ES6+):
Výraz v metodě .then() je zpracován asynchronně, po získání odpovědi.
http://bit.ly/medium-fetch-api
https://css-tricks.com/using-fetch/
fetch("http://example.com/data.json")
.then(response => response.json())
.then(data => console.log(data));
const getData = async () => {
const response = await fetch("http://example.com/data.json");
const data = await response.json();
console.log(data)
}
getData()
Úvod Leaflet Závěr
Zápis funkce HTTP dotazy
Špinavý trik
Pokud pracujete lokálně a nepoužíváte webserver,
fetch("./lokalni_data.json") vám nebude fungovat :-(
buďto nahrajete data na server (např. https://bit.ly/vozejkmap-geojson) – ve výsledném cvičení
používejte GeoJSON z WFS našeho Geoserveru
špinavý trik:
v souboru data.json vložíte před JSON objekt const DATA = data.json nejlépe uložte jako data.js
data.js načtěte ve stránce jako skript: