Pokazat ću ti: Leaflet – besplatna karta
Leaflet je biblioteka koju milijuni web stranica koriste za prikaz karata. Besplatna je i dodaje se s dva retka u <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>Zatim treba samo kutija za kartu i nekoliko redaka JavaScripta:
<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 koraka: napravi kartu, dodaj osnovni sloj, stavi oznaku. Možeš dodati koliko god oznaka želiš – samo ponovi L.marker.
Biblioteka je kod koji je netko drugi napisao i koji posuđuješ, da ne moraš sve pisati sam. Leaflet rješava pomicanje, zumiranje i dodir na mobitelu za tebe. Ti samo kažeš karti što prikazati.
Više oznaka iz popisa
Kad imaš nekoliko mjesta, pohrani ih u niz i prođi kroz njih – baš kao s vremenom:
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);
}Sad si ti na redu 💪
🏫 Web stranica škole – rješenje
Karta s lokacijom škole na stranici “Kontakt”. Bonus: druga oznaka za dvoranu ili teren za tjelesni.
🙋 Osobna web stranica – rješenje
Karta “Moja mjesta”: gdje živiš (približno – grad je dovoljan!), omiljeno igralište, gdje ideš na odmor.
🌍 Putni dnevnik – rješenje
Ovo je tvoja zvjezdana lekcija: karta svih putovanja s oznakama iz popisa. Svaki popup može voditi na opis putovanja.
⚽ Web stranica kluba – rješenje
Karta “Gdje igramo”: domaći teren + tereni protivnika. Gostujući roditelji će to voljeti.
Privatnost: nikad ne stavljaj točnu kućnu adresu na web stranicu. Oznaka na glavnom trgu grada je više nego dovoljno.
Provjera: Tvoja web stranica ima kartu koju možeš pomicati i zumirati s barem dvije oznake s popupima.
Što ćeš ponijeti iz ove lekcije
- Biblioteke (poput Leafleta) posuđuju gotove supermoći.
- Karta = mapa + osnovni sloj + oznake.
- Popis mjesta u nizu + petlja = karta bilo koje veličine.
© 2026 Ing. Martin Polak / AlgoRhino · Uvjeti korištenja sadržaja