Ik laat je zien: Leaflet – een gratis kaart
Leaflet is een library die miljoenen websites gebruiken om kaarten te tonen. Het is gratis en wordt toegevoegd met twee regels in de <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>Dan heb je alleen een box voor de kaart en een paar regels JavaScript nodig:
<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>Drie stappen: maak de kaart, voeg de basislaag toe, plaats een pin. Je kunt zoveel pinnen toevoegen als je wilt – herhaal gewoon L.marker.
Een library is code die iemand anders schreef en die je leent, zodat je niet alles zelf hoeft te schrijven. Leaflet regelt pannen, zoomen en touch op mobiel voor je. Jij vertelt de kaart alleen wat te tonen.
Meer pinnen uit een lijst
Als je meerdere plekken hebt, bewaar ze in een array en loop erdoor – net als bij het weer:
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 jij 💪
🏫 Schoolwebsite – oplossing
Een kaart met de locatie van de school op de pagina “Contact”. Bonus: een tweede pin voor de gym of het veld voor gymles.
🙋 Persoonlijke website – oplossing
Een kaart “Mijn plekken”: waar je woont (ongeveer – een stad is genoeg!), je favoriete speeltuin, waar je op vakantie gaat.
🌍 Reisdagboek – oplossing
Dit is je sterles: een kaart van al je reizen met pinnen uit een lijst. Elke popup kan linken naar een reisverslag.
⚽ Clubwebsite – oplossing
Een kaart “Waar we spelen”: thuisveld + velden van tegenstanders. Bezoekende ouders waarderen het.
Privacy: zet nooit je exacte thuisadres op een website. Een pin op het centrale plein van je stad is ruim voldoende.
Controle: Je website heeft een kaart die je kunt verschuiven en zoomen, met minstens twee pinnen met popups.
Wat neem je mee uit deze les
- Libraries (zoals Leaflet) lenen je kant-en-klare superkrachten.
- Een kaart = een kaart + een basislaag + pinnen.
- Een lijst met plekken in een array + een lus = een kaart van elke grootte.
© 2026 Ing. Martin Polak / AlgoRhino · Contentgebruiksvoorwaarden