Wracamy do serii artykułów w których opisuję różne użycia Leaflet. Dzisiaj poruszymy temat GeoJson.
GeoJson jest to nic innego jak plik JSON, który reprezentuje cechy geograficzne. Nie posiada on formalnych standardów, może reprezentować punty, adresy i lokalizacje, kraje, prowincje i wiele innych elementów. Zerknijcie na wpis w wiki
Oczywiście poprzednio było HEX na RGB to oczywiście logiczne jest aby też podać i konwersję w drugą stronę 😉
function rgbToHex(rgb) {
let hex = Number(rgb).toString(16);
if(hex.length < 2) {
hex = '0' + hex;
}
return hex;
}
function colorHex(r,g,b) {
return rgbToHex(r) + rgbToHex(g) + rgbToHex(b);
}A wywołanie to zwyczajne przekazanie funkcji trzech liczb na które składa się kolot rgb(0, 161, 255).
console.log(colorHex(0, 161,255));
// => w wyniku otrzymujemy #00a1ffCreateDocumentFragment jest metodą, która tworzy fragment dokumentu, jest to wirtualny dokument. Jest on podobny do diva, ale przy wstawianiu go do dokumentu, wstawiamy jego dzieci.
Gdzie to stosować, tam gdzie zależy Ci na wydajności i danych których wstawiasz jest dużo. Gdy wstawiamy do html nowy element całe drzewo DOM musi być za każdym razem przebudowywane.
const fragment = document.createDocumentFragment();
const ul = document.createElement("ul");
for (let i = 0; i < 10; i += 1) {
ul.appendChild(document.createElement('li'))
.appendChild(document.createTextNode("li element " + (i + 1)));
fragment.appendChild(ul);
}
document.body.appendChild(fragment);
// wynik dostaniemy listę 10 elementów
// lista 1
// ...
// lista 10Przykład dodania 540 rekordów.
Wersja użycia innerHTML w pętli - czas wykonania: 0.146240234375ms zaś wersja korzystająca z createDocumentFragment - czas wykonania: 0.072041015625ms
Dzisiaj coś prostego, czyli hamburger menu.
<button class="hamburger">
<div class="hamburger-center"></div>
</button>Kilka użytecznych przykładów użycia "console".
Najpierw stwórzmy sobie plik html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<p>DZISIAJ W ...</p>
<script src="console.js"></script>
</body>
</html>