Zeig mir das: Leaflet – eine kostenlose Karte
Leaflet ist eine Bibliothek, die Millionen von Websites nutzen, um Karten anzuzeigen. Sie ist kostenlos und wird mit zwei Zeilen im <head> eingebunden:
<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>Dann brauchst du nur noch einen Kasten für die Karte und ein paar Zeilen 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>Drei Schritte: Karte erstellen, Basisschicht hinzufügen, Markierung setzen. Du kannst so viele Markierungen hinzufügen, wie du willst – wiederhole einfach L.marker.
Eine Bibliothek ist Code, den jemand anderes geschrieben hat und den du ausleihst, damit du nicht alles selbst schreiben musst. Leaflet übernimmt Verschieben, Zoomen und Touch-Gesten auf dem Handy für dich. Du sagst der Karte nur, was sie zeigen soll.
Mehr Markierungen aus einer Liste
Wenn du mehrere Orte hast, speichere sie in einem Array und gehe sie in einer Schleife durch – genau wie beim Wetter:
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);
}Jetzt du 💪
🏫 Schulwebsite – Lösung
Eine Karte mit dem Schulstandort auf der Seite „Kontakt“. Bonus: eine zweite Markierung für die Turnhalle oder den Sportplatz.
🙋 Persönliche Website – Lösung
Eine Karte „Meine Orte“: wo du wohnst (nur ungefähr – die Stadt reicht!), dein Lieblingsspielplatz, wohin du in den Urlaub fährst.
🌍 Reisetagebuch – Lösung
Das ist deine Star-Lektion: eine Karte aller Reisen mit Markierungen aus einer Liste. Jedes Popup kann zu einem Reisebericht verlinken.
⚽ Vereinswebsite – Lösung
Eine Karte „Wo wir spielen“: Heimplatz + Gegnerplätze. Gasteltern werden es lieben.
Privatsphäre: Setze niemals deine genaue Wohnadresse auf eine Website. Eine Markierung auf dem Hauptplatz deiner Stadt reicht völlig.
Check: Deine Website hat eine verschiebbare, zoombare Karte mit mindestens zwei Markierungen und Popups.
Das nimmst du aus dieser Lektion mit
- Bibliotheken (wie Leaflet) leihen dir fertige Superkräfte.
- Eine Karte = eine Karte + Basisschicht + Markierungen.
- Eine Liste von Orten in einem Array + Schleife = eine Karte beliebiger Größe.
© 2026 Ing. Martin Polak / AlgoRhino · Nutzungsbedingungen für Inhalte