Pokaż mi to: Leaflet – mapa zadarmo
Leaflet je knihovna, kterou používají miliony webů na zobrazení map. Je zadarmo a vkládá se dvěma řádky v <head>:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>Pak stačí krabice na mapu a pár řádků JavaScriptu:
<div id="mapa" style="height: 400px; border-radius: 12px;"></div>
<script>
// Souřadnice středu mapy a přiblížení (čím větší číslo, tím blíž)
const mapa = L.map('mapa').setView([49.19, 16.61], 13);
// Podklad mapy z OpenStreetMap (zadarmo)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
}).addTo(mapa);
// Špendlík s bublinou
L.marker([49.19, 16.61])
.addTo(mapa)
.bindPopup('<strong>Tady jsme!</strong>');
</script>Tři kroky: vytvoř mapu, přidej podklad, zapíchni špendlík. Špendlíků může být kolik chceš – stačí opakovat L.marker.
Knihovna je cizí kód, který si půjčíš, abys nemusel(a) všechno psát sám(a). Leaflet za tebe řeší posouvání, přibližování i dotyky na mobilu. Ty jen říkáš, co má mapa ukázat.
Více špendlíků ze seznamu
Když máš míst víc, ulož si je do pole a projdi cyklem – jako u počasí:
const mista = [
{ nazev: 'Šumava 2025', lat: 49.06, lng: 13.61 },
{ nazev: 'Lipno – stanování', lat: 48.63, lng: 14.23 },
{ nazev: 'Praha – výlet se školou', lat: 50.09, lng: 14.42 },
];
for (const misto of mista) {
L.marker([misto.lat, misto.lng]).addTo(mapa).bindPopup(misto.nazev);
}Teraz ty 💪
🏫 Stránky školy – řešení
Mapa s polohou školy na stránce „Kontakt”. Bonus: druhý špendlík na tělocvičnu nebo hřiště, kam se chodí na TV.
🙋 Osobní stránky – řešení
Mapa „Moje místa”: kde bydlíš (jen přibližně – město stačí!), oblíbené hřiště, kam jezdíš na prázdniny.
🌍 Dziennik podróży – řešení
Tohle je tvoje hvězdná lekce: mapa všech výletů se špendlíky ze seznamu. Každá bublina může mít odkaz na zápisek z výletu.
⚽ Web klubu – řešení
Mapa „Kde hrajeme”: domácí hřiště + hřiště soupeřů. Hostující rodiče ji budou milovat.
Prywatność: nikdy nedávej na web přesnou adresu svého bydliště. Špendlík na náměstí tvého města úplně stačí.
Kontrola: Na webu máš posouvatelnou, přibližovatelnou mapu s aspoň dvěma špendlíky s bublinami.
Co si z téhle lekce odnést
- Knihovny (Leaflet) ti půjčí hotové superschopnosti.
- Mapa = mapa + podklad + špendlíky.
- Seznam míst v poli + cyklus = libovolně velká mapa.
© 2026 Ing. Martin Polak / AlgoRhino · Warunki użytkowania treści