Näytän sinulle: Leaflet – ilmainen kartta
Leaflet on kirjasto, jota miljoonat verkkosivut käyttävät karttojen näyttämiseen. Se on ilmainen ja lisätään kahdella rivillä <head>:ssä:
<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>Sitten tarvitset vain laatikon kartalle ja muutaman rivin JavaScriptiä:
<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>Kolme askelta: luo kartta, lisää pohjakerros, pudota nappi. Voit lisätä niin monta nappia kuin haluat – toista vain L.marker.
Kirjasto on koodi, jonka joku muu on kirjoittanut ja jonka lainaat, jotta sinun ei tarvitse kirjoittaa kaikkea itse. Leaflet hoitaa panoroinnin, zoomauksen ja mobiilin kosketusliikkeet puolestasi. Sinä kerrot vain kartalle mitä näyttää.
Lisää nappeja listasta
Kun sinulla on useita paikkoja, tallenna ne taulukkoon ja käy läpi – aivan kuin sään kanssa:
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);
}Nyt sinun vuorosi 💪
🏫 Koulun verkkosivu – ratkaisu
Kartta koulun sijainnilla “Yhteystiedot”-sivulla. Bonus: toinen nappi liikuntasalille tai kentälle.
🙋 Henkilökohtainen verkkosivu – ratkaisu
“Omat paikat” -kartta: missä asut (vain likimäärin – kaupunki riittää!), suosikkipaikkasi, minne menet lomalle.
🌍 Matkakirja – ratkaisu
Tämä on tähtiopetuksesi: kartta kaikista matkoistasi napeilla listasta. Jokainen popup voi linkittää matkakertomukseen.
⚽ Seuran verkkosivu – ratkaisu
“Missä pelaamme” -kartta: kotikenttä + vastustajien kentät. Vierailevat vanhemmat arvostavat sitä.
Yksityisyys: älä koskaan laita tarkkaa kotiosoitettasi verkkosivulle. Nappi kaupungin pääaukiolla riittää enemmän kuin tarpeeksi.
Tarkista: Verkkosivullasi on panorattava, zoomattava kartta vähintään kahdella popup-napilla.
Mitä opit tästä oppitunnista
- Kirjastot (kuten Leaflet) lainaavat valmiita supervoimia.
- Kartta = kartta + pohjakerros + napit.
- Paikkojen lista taulukossa + silmukka = minkä kokoinen tahansa kartta.
© 2026 Ing. Martin Polak / AlgoRhino · Sisällön käyttöehdot