Jag visar: Leaflet – en gratis karta
Leaflet är ett bibliotek som miljontals webbplatser använder för att visa kartor. Det är gratis och läggs till med två rader i <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>Sedan behöver du bara en ruta för kartan och några rader JavaScript:
<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>Tre steg: skapa kartan, lägg till baslagret, sätt en nål. Du kan lägga till hur många nålar du vill – upprepa bara L.marker.
Ett bibliotek är kod någon annan skrivit som du lånar, så du inte behöver skriva allt själv. Leaflet hanterar panorering, zoom och touch på mobil åt dig. Du berättar bara för kartan vad den ska visa.
Fler nålar från en lista
När du har flera platser, spara dem i en array och loopa igenom – precis som med vädret:
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);
}Nu är det din tur 💪
🏫 Skolwebbplats – lösning
En karta med skolans plats på sidan “Kontakt”. Bonus: en andra nål för gymnastiksalen eller planen som används i idrott.
🙋 Personlig webbplats – lösning
En “Mina platser”-karta: var du bor (ungefär – en stad räcker!), din favoritlekplats, vart du åker på semester.
🌍 Resejournal – lösning
Det här är din stjärnlektion: en karta över alla dina resor med nålar från en lista. Varje popup kan länka till en reseberättelse.
⚽ Klubbwebbplats – lösning
En “Var vi spelar”-karta: hemmaplan + motståndarnas planer. Besökande föräldrar kommer älska det.
Integritet: lägg aldrig din exakta hemadress på en webbplats. En nål på stadens torg räcker mer än väl.
Kolla: Din webbplats har en karta du kan panorera och zooma i, med minst två nålar med popups.
Det här tar du med dig från lektionen
- Bibliotek (som Leaflet) lånar dig färdiga superkrafter.
- En karta = en karta + ett baslager + nålar.
- En lista med platser i en array + en loop = en karta i valfri storlek.
© 2026 Ing. Martin Polak / AlgoRhino · Villkor för innehållsanvändning