Pokročilý Leaflet
Cvičení 8
Webová kartografie
Podzim 2019
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Ú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
Podzim 2019 Pokročilý Leaflet
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Závěr
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
Podzim 2019 Pokročilý Leaflet
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Závěr
Zápis funkce
HTTP dotazy
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://www.codecademy.com/articles/what-is-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
Podzim 2019 Pokročilý Leaflet
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Závěr
Zápis funkce
HTTP dotazy
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);
});
Podzim 2019 Pokročilý Leaflet
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úvod
Leaflet
Závěr
Zápis funkce
HTTP dotazy
Fetch API
Budeme používat (ES6+):
fetch("http://example.com/data.json")
.then(response => response.json())
.then(data => console.log(data));
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/
Podzim 2019 Pokročilý Leaflet
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Ú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)
nebo použijete dočasně š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čtete ve stránce jako skript: