Et kort på siden din

Legg til et interaktivt kort med pins til din nettside – til skole, ture og banen.

Jeg viser deg: Leaflet – et gratis kort

Leaflet er et bibliotek, som millioner af nettsider bruker til at vise kort. Det er gratis og legger til 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: opprett kortet, legg til basislaget, sett en pin. Du kan legg til så mange pins, du vil – gjenta 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 deg. Du forteller bare kortet, hva det skal vise.

Flere pins fra en liste

Når du har flere steder, lagre dem i et array og løb igjennom det – som med været:

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);
}

Nå er det din tur 💪

🏫 Skolenettside – løsning

Et kort med skolens placering på siden “Kontakt”. Bonus: en anden pin til gymnastiksalen eller banen brukt til idræt.

🙋 Personlig nettside – løsning

Et “Mine steder”-kort: hvor du bor (bare cirka – en by er nok!), din yndlingslegeplads, hvor du tar på ferie.

🌍 Reisejournal – løsning

Dette er din stjerneleksjon: et kort over alle dine ture med pins fra en liste. Hver popup kan linke til en turberetning.

⚽ Klubnettside – løsning

Et “Hvor vi spiller”-kort: hjemmebane + modstandernes baner. Gæstende foreldre vil elske det.

⚠️

Privatliv: sett aldrig din nøyaktige hjemmeadresse på en nettside. En pin på byens hovedplads er mere end nok.

✅

Sjekk: Din nettside har et kort, du kan panorere og zoome i, med mindst to pins med popups.

Dette tar du med deg fra leksjonen

Biblioteker (som Leaflet) udlåner deg ferdige superkræfter.
Et kort = et kort + et basislag + pins.
En liste over steder i et array + en løkke = et kort i hver størrelse.

Denne leksjonen er del av et betalt nivå

Jeg viser deg: Leaflet – et gratis kort

Flere pins fra en liste

Nå er det din tur 💪

Dette tar du med deg fra leksjonen