Was ist eine Kartenlegende? Bestandteile, Beispiele und Umsetzung in Webkarten

Jede Karte arbeitet mit Symbolen, und keines davon erklärt sich selbst. Eine blaue Linie kann ein Fluss, eine Straßenbahnlinie oder eine Autobahn sein, je nachdem, wer die Karte gezeichnet hat. In der Kartenlegende hält der Kartenersteller fest, was gemeint ist.

Dieser Leitfaden erklärt, was eine Kartenlegende ist, welche Bestandteile sie braucht, wie sich Legenden je nach Kartentyp unterscheiden und wie Sie eine Legende für eine interaktive Webkarte bauen, mit Code.

Was eine Kartenlegende ist

Eine Kartenlegende, auch Zeichenerklärung genannt, ist das Feld, das jedem Symbol einer Karte eine Beschriftung zuordnet, die sagt, wofür das Symbol steht.

Das Wort stammt vom lateinischen legenda, „das zu Lesende“. Der Name passt: Die Legende ist der Text, den Leser brauchen, bevor der Rest der Karte einen Sinn ergibt.

Im Englischen heißt die Legende map legend oder map key. Manche Lehrbücher der Kartografie trennen die Begriffe: Key ist die Liste der Symbole, Legend das ganze Feld mit Titel, Einheiten und Anmerkungen. In der Schule, in GIS-Software und im Alltag bedeuten Legende und Zeichenerklärung dasselbe, und so verwendet dieser Artikel die Begriffe.

Die Bestandteile einer Kartenlegende

Eine Karte braucht nur die Bestandteile, die sie tatsächlich verwendet. Jedes Symbol, das auf der Karte erscheint, braucht einen Eintrag.

Zwei Kartenelemente stehen oft neben der Legende, ohne zu ihr zu gehören. Die Maßstabsleiste setzt Entfernungen auf der Karte ins Verhältnis zu Entfernungen im Gelände. Der Nordpfeil zeigt die Ausrichtung, was bei gedrehten Karten und bei Karten in einer ungewöhnlichen Projektion wichtig ist.

Beispiele für Kartenlegenden nach Kartentyp

Die Legende folgt den Daten. Ein Straßenatlas und eine Zensuskarte brauchen beide eine Legende, aber jede Legende löst ein anderes Problem.

Topografische Karten haben lange Legenden. Nationale Vermessungsbehörden wie USGS, Ordnance Survey und IGN veröffentlichen vollständige Zeichenerklärungen für Höhenlinien, Vegetation, Gebäude und Landmarken. Höhenlinien bekommen einen Eintrag und einen Hinweis auf ihren Abstand, zum Beispiel „Äquidistanz 10 m“. Der Leitfaden zu Isolinienkarten erklärt, wie Sie diese Linien lesen.

Straßenkarten codieren die Straßenklasse über Farbe und Linienbreite. Die Legende listet die Klassen von der Autobahn bis zur Nebenstraße, dazu Symbole für Anschlussstellen, Mautstellen und Fähren.

Choroplethenkarten färben Regionen nach einem Wert ein, deshalb ist ihre Legende eine Farbskala mit einem Wertebereich pro Farbton. Die Bereiche tragen genauso viel Bedeutung wie die Farben, denn dieselben Daten können ruhig oder alarmierend wirken, je nachdem, wo die Klassengrenzen liegen. Der Leitfaden zu Choroplethenkarten zeigt, wie Sie die Grenzen wählen.

Heatmaps und Wetterkarten zeigen eine kontinuierliche Oberfläche. Ihre Legende ist ein Farbverlauf mit beschrifteten Markierungen, ohne einzelne Kästchen.

Karten mit proportionalen Symbolen skalieren einen Kreis oder ein Quadrat nach dem Wert. Die Legende zeigt drei oder vier Referenzgrößen, damit Leser die Werte dazwischen schätzen können.

Liniennetzpläne geben jeder Linie eine eigene Farbe und einen Namen. Die Legende dient zugleich als Linienverzeichnis, und Umsteigebahnhöfe bekommen ein eigenes Symbol.

Weitere Kartentypen und wann welcher passt, finden Sie unter Kartenarten und im Leitfaden zu thematischen Karten.

So lesen Sie eine Kartenlegende

Vier Prüfungen verhindern die meisten Fehlinterpretationen.

1. Lesen Sie Titel und Einheit. „Fälle“ und „Fälle pro 100.000 Einwohner“ ergeben aus denselben Daten sehr unterschiedliche Karten.
2. Prüfen Sie die Klassengrenzen. Bereiche unterschiedlicher Breite, etwa 0 bis 5 neben 5 bis 500, sind eine legitime Wahl, verändern aber, was jede Farbe bedeutet. Lesen Sie die Zahlen vor den Farben.
3. Prüfen Sie, wie Größen skalieren. Ein doppelt so breiter Kreis bedeckt die vierfache Fläche. Gut gemachte Karten mit proportionalen Symbolen skalieren über die Fläche und zeigen Referenzkreise.
4. Suchen Sie Datum und Quelle. Ohne Datum können Sie nicht erkennen, ob die Karte die Welt noch zutreffend beschreibt.

So gestalten Sie eine funktionierende Legende

Eine Legende ist Teil der Benutzeroberfläche einer Karte. Diese Regeln stammen aus der kartografischen Praxis und gelten für Druck und Bildschirm.

• Listen Sie nur auf, was auf der Karte ist. Blenden Sie auf einer Webkarte Einträge für Layer aus, die abgeschaltet oder in der aktuellen Zoomstufe nicht sichtbar sind.
• Zeichnen Sie jedes Symbol genau so, wie es auf der Karte erscheint. Verwenden Sie dieselbe Farbe, Größe, Kontur und Deckkraft. Ein Farbfeld mit voller Deckkraft neben einer Fläche mit 80 % Deckkraft passt nicht zusammen.
• Ordnen Sie Einträge nach Wert oder Wichtigkeit. Quantitative Klassen stehen in aufsteigender Reihenfolge. Die wichtigsten Kategorien kommen zuerst.
• Beschriften Sie Bereiche ohne Lücken und Überschneidungen. „Unter 50, 50 bis 199, 200 und mehr“ ordnet jedem Wert genau eine Klasse zu.
• Kombinieren Sie Farbe mit einem zweiten Merkmal. Etwa 1 von 12 Männern und 1 von 200 Frauen haben eine Form von Farbsehschwäche. Ergänzen Sie Beschriftungen, Muster oder unterscheidbare Symbolformen, und wählen Sie Paletten, die auf Farbenblindheit getestet sind, etwa die ColorBrewer-Sets.
• Halten Sie die Legende zurückhaltender als die Daten. Nutzen Sie kleine Schrift, einen schlichten Hintergrund und keine schweren Rahmen.
• Belassen Sie Beschriftungen als Text. HTML-Text lässt sich übersetzen, durchsuchen und von Screenreadern vorlesen. Eine in ein Bild eingebrannte Legende kann nichts davon.

So fügen Sie einer Webkarte eine Legende hinzu

MapLibre GL JS und die meisten anderen Web-Map-Bibliotheken gestalten Layer über einen JSON-Style und zeichnen keine Legenden. Die Legende bauen Sie selbst, als kleines HTML-Panel über der Karte.

Das Hauptrisiko ist Drift: Jemand ändert eine Farbe oder eine Klassengrenze im Style und vergisst die Legende. Definieren Sie die Klassen einmal und erzeugen Sie sowohl den Layer-Style als auch die Legende aus dieser Liste.

const classes = [
  { min: 0, color: '#edf8e9', label: 'Under 50' },
  { min: 50, color: '#bae4b3', label: '50 to 199' },
  { min: 200, color: '#74c476', label: '200 to 999' },
  { min: 1000, color: '#238b45', label: '1,000 and more' },
];

// 1. Build the layer style from the classes.
const fillColor = ['step', ['get', 'density'], classes[0].color];
for (const c of classes.slice(1)) fillColor.push(c.min, c.color);

map.on('load', () => {
  map.addSource('regions', { type: 'geojson', data: '/data/regions.geojson' });
  map.addLayer({
    id: 'density',
    type: 'fill',
    source: 'regions',
    paint: { 'fill-color': fillColor, 'fill-opacity': 0.8 },
  });
});

// 2. Build the legend from the same classes.
const legend = document.createElement('div');
legend.className = 'map-legend';

const title = document.createElement('h3');
title.textContent = 'People per km², 2024';
legend.append(title);

for (const c of classes) {
  const row = document.createElement('div');
  const swatch = document.createElement('span');
  swatch.style.background = c.color;
  swatch.style.opacity = '0.8'; // match the layer's fill-opacity
  row.append(swatch, c.label);
  legend.append(row);
}

map.getContainer().append(legend);

.map-legend {
  position: absolute;
  bottom: 32px;
  left: 12px;
  padding: 10px 12px;
  background: rgb(255 255 255 / 0.92);
  border-radius: 8px;
  font: 13px/1.5 system-ui, sans-serif;
}
.map-legend h3 { margin: 0 0 6px; font-size: 13px; }
.map-legend span {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 2px;
}

Der step-Ausdruck gibt jeder Region unter 50 die erste Farbe und wechselt die Farbe an jedem min-Wert. Die Legende durchläuft dasselbe classes-Array, deshalb aktualisieren eine fünfte Klasse oder eine geänderte Farbe Karte und Legende gemeinsam. Die Palette ist die vierstufige Greens-Skala von ColorBrewer. Die Beschriftungen werden über textContent gesetzt, was die Legende absichert, wenn Beschriftungen aus einer API oder aus Nutzereingaben stammen.

Sobald die einfache Legende funktioniert, lohnen sich drei Erweiterungen:

• Machen Sie Zeilen zu Schaltern. Wandeln Sie jede Zeile in einen Button um, der map.setFilter auf dem Layer aufruft, damit die Legende zugleich als Bedienelement dient.
• Folgen Sie der Zoomstufe. Reagieren Sie auf das Event zoomend und blenden Sie Zeilen für Layer außerhalb ihres minzoom und maxzoom aus.
• Klappen Sie die Legende auf kleinen Bildschirmen ein. Legen Sie die Legende in ein details-Element mit einer summary-Überschrift, dann erhalten Sie einen barrierefreien Umschalter zum Öffnen und Schließen ohne zusätzliches JavaScript.

Wo MapAtlas ins Spiel kommt

Eine Legende kann nur so konsistent sein wie der Style dahinter. MapAtlas Map Visualization & Styling liefert eigene Kartenstile in Ihren Farben, Schriften und Symbolen, mit Datenlayern, die nach Werten eingefärbt werden. Kombinieren Sie das mit dem Legendenmuster oben, und Karte und Legende bleiben stimmig, auch wenn sich die Daten ändern.