Ukážem ti: Leaflet – mapa zadarmo
Leaflet je knižnica, ktorú používajú milióny webov na zobrazenie máp. Je zadarmo a pridá sa dvoma riadkami do <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>Potom stačí box pre mapu a pár riadkov JavaScriptu:
<div id="mapa" style="height: 400px; border-radius: 12px;"></div>
<script>
// Coordinates for the map's center and zoom level (bigger number = closer)
const mapa = L.map('mapa').setView([49.19, 16.61], 13);
// Map tiles from OpenStreetMap (free)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
}).addTo(mapa);
// A pin with a popup
L.marker([49.19, 16.61])
.addTo(mapa)
.bindPopup('<strong>We are here!</strong>');
</script>Tri kroky: vytvor mapu, pridaj podkladovú vrstvu, polož pripináčku. Pripináčiek môžeš pridať koľko chceš – stačí opakovať L.marker.
Knižnica je kód, ktorý napísal niekto iný a ty si ho požičiavaš, aby si nemusel všetko písať sám. Leaflet za teba rieši posúvanie, približovanie a dotyky na mobile. Ty len povieš mape, čo má ukázať.
Viac pripináčiek zo zoznamu
Keď máš viac miest, ulož ich do poľa a prejdi slučkou – presne ako pri počasí:
const mista = [
{ nazev: 'Šumava 2025', lat: 49.06, lng: 13.61 },
{ nazev: 'Lipno – camping trip', lat: 48.63, lng: 14.23 },
{ nazev: 'Prague – school trip', lat: 50.09, lng: 14.42 },
];
for (const misto of mista) {
L.marker([misto.lat, misto.lng]).addTo(mapa).bindPopup(misto.nazev);
}Teraz ty 💪
🏫 Web školy – riešenie
Mapa so školou na stránke „Kontakt”. Bonus: druhá pripináčka na telocvičňu alebo ihrisko na telke.
🙋 Osobný web – riešenie
Mapa „Moje miesta”: kde bývaš (len približne – stačí mesto!), obľúbené ihrisko, kam chodíš na dovolenku.
🌍 Cestovný denník – riešenie
Tvoja hviezdna lekcia: mapa všetkých výletov s pripináčkami zo zoznamu. Každý popup môže odkazovať na zápis z výletu.
⚽ Web klubu – riešenie
Mapa „Kde hráme”: domáce ihrisko + ihriská súperov. Hosťujúci rodičia to ocenia.
Súkromie: na web nikdy nedávaj presnú adresu domu. Pripináčka na námestí v meste je viac než dosť.
Skontroluj sa: Tvoj web má posúvateľnú, približovateľnú mapu s aspoň dvoma pripináčkami a popupmi.
Čo si z tejto lekcie odnášaš
- Knižnice (ako Leaflet) ti požičajú hotové super schopnosti.
- Mapa = mapa + podkladová vrstva + pripináčky.
- Zoznam miest v poli + slučka = mapa ľubovoľnej veľkosti.
© 2026 Ing. Martin Polak / AlgoRhino · Podmienky používania obsahu