Pokažem ti: Leaflet – brezplačen zemljevid
Leaflet je knjižnica, ki jo milijoni strani uporabljajo za zemljevide. Brezplačna je in se doda z dvema vrsticama 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>Nato potrebuješ le škatlo za zemljevid in nekaj vrstic 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>Trije koraki: ustvari zemljevid, dodaj osnovno plast, spusti žebljiček. Žebljičkov je lahko toliko, kolikor hočeš – samo ponovi L.marker.
Knjižnica je koda, ki jo je napisal nekdo drug in jo izposodiš, da ne pišeš vsega sam. Leaflet za tebe ureja premikanje, povečavo in dotike na mobilniku. Ti zemljevidu samo poveš, kaj naj pokaže.
Več žebljičkov iz seznama
Ko imaš več krajev, jih shrani v polje in greš skozi z zanko – kot pri vremenu:
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);
}Zdaj si na vrsti 💪
🏫 Šolska stran – rešitev
Zemljevid z lokacijo šole na strani “Kontakt”. Bonus: drugi žebljiček za telovadnico ali igrišče.
🙋 Osebna stran – rešitev
Zemljevid “Moji kraji”: kje živiš (približno – mesto zadostuje!), najljubše igrišče, kam greš na dopust.
🌍 Potovalni dnevnik – rešitev
Tvoja zvezdna lekcija: zemljevid vseh potovanj z žebljički iz seznama. Vsak popup lahko vodi na zapis o potovanju.
⚽ Klubska stran – rešitev
Zemljevid “Kje igramo”: domače igrišče + igrišča nasprotnikov. Gostujoči starši bodo navdušeni.
Zasebnost: na stran nikoli ne daj natančnega domačega naslova. Žebljiček na glavnem trgu mesta je več kot dovolj.
Preveri se: Tvoja stran ima zemljevid, ki ga lahko premikaš in povečuješ, z vsaj dvema žebljičkoma s popupi.
Kaj si vzameš iz te lekcije
- Knjižnice (kot Leaflet) ti posodijo pripravljene supermoči.
- Zemljevid = zemljevid + osnovna plast + žebljički.
- Seznam krajev v polju + zanka = zemljevid poljubne velikosti.
© 2026 Ing. Martin Polak / AlgoRhino · Pogoji uporabe vsebine