Vis mig: Leaflet – et gratis kort
Leaflet er et bibliotek, som millioner af hjemmesider bruger til at vise kort. Det er gratis og tilføjes med to linjer 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>Så skal du bare have en boks til kortet og et par linjer 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 trin: opret kortet, tilføj basislaget, sæt en pin. Du kan tilføje så mange pins, du vil – gentag bare L.marker.
Et bibliotek er kode, nogen andre har skrevet, som du låner, så du ikke skal skrive alt selv. Leaflet håndterer panning, zoom og mobile touch-gestus for dig. Du fortæller bare kortet, hvad det skal vise.
Flere pins fra en liste
Når du har flere steder, gem dem i et array og løb igennem det – ligesom med vejret:
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 er det din tur 💪
🏫 Skolehjemmeside – løsning
Et kort med skolens placering på siden “Kontakt”. Bonus: en anden pin til gymnastiksalen eller banen brugt til idræt.
🙋 Personlig hjemmeside – løsning
Et “Mine steder”-kort: hvor du bor (bare cirka – en by er nok!), din yndlingslegeplads, hvor du tager på ferie.
🌍 Rejsejournal – løsning
Dette er din stjernelektion: et kort over alle dine ture med pins fra en liste. Hver popup kan linke til en turberetning.
⚽ Klubhjemmeside – løsning
Et “Hvor vi spiller”-kort: hjemmebane + modstandernes baner. Gæstende forældre vil elske det.
Privatliv: sæt aldrig din præcise hjemmeadresse på en hjemmeside. En pin på byens hovedplads er mere end nok.
Tjek: Din hjemmeside har et kort, du kan panorere og zoome i, med mindst to pins med popups.
Det tager du med fra denne lektion
- Biblioteker (som Leaflet) udlåner dig færdige superkræfter.
- Et kort = et kort + et basislag + pins.
- En liste over steder i et array + en løkke = et kort i enhver størrelse.
© 2026 Ing. Martin Polak / AlgoRhino · Vilkår for indholdsbrug