Wer Code geschrieben hat, der mit einer Kartenbibliothek kommuniziert, hat Code geschrieben, der den Viewport berührt. Der Viewport ist der Laufzeitzustand der Karte: wo sie zentriert ist, wie weit hineingezoomt, in welche Richtung sie zeigt und optional wie stark sie geneigt ist. Jedes Schwenken, Zoomen, Drehen und Klicken hängt davon ab.
Dieser Leitfaden erklärt, was ein Viewport tatsächlich ist, die vier Kernwerte, die ihn beschreiben, wie er mit Kacheln und Bounding Boxes interagiert, und die Produktionsmuster zum Speichern, Wiederherstellen und Teilen des Viewport-Zustands.
Die vier Kernwerte
Ein moderner Webkarten-Viewport wird durch bis zu vier Werte beschrieben:
- Center (
{ lat, lng }): die geografische Koordinate in der Mitte des Bildschirms. - Zoom (eine Zahl, oft ein Float): wie weit die Karte hineingezoomt ist. Höhere Zahlen zeigen kleinere Gebiete in mehr Detail.
- Bearing (eine Zahl in Grad, Standard 0): die Rotation der Karte von "Norden oben". 90 bedeutet Osten oben.
- Pitch (eine Zahl in Grad, 0 bis etwa 85): die 3D-Neigung. 0 ist flach von oben, 60 ist eine starke Perspektivansicht.
Jede moderne Kartenbibliothek (MapLibre GL, Mapbox GL, OpenLayers, Leaflet, MapAtlas Dynamic Maps) stellt diese als les- und schreibbaren Zustand bereit. Eine rein 2D-Bibliothek wie Leaflet kann Bearing und Pitch möglicherweise nicht bereitstellen.
Zoomstufen im Detail
Die Zoomstufe ist die meistgefragte der vier. Sie ist eine ganze (oder gebrochene) Zahl, die die Welt auf eine Kachelpyramide abbildet:
- Zoom 0: gesamte Welt in einer 256x256-Kachel
- Zoom 1: Welt aufgeteilt in 4 Kacheln
- Zoom 2: 16 Kacheln
- ...
- Zoom 14: ~268 Millionen Kacheln, Stadtviertelmaßstab
- Zoom 18: Gebäudemaßstab
- Zoom 22+: in der Regel mit Vector-Style-Hochskalierung statt neuer Kacheldaten gerendert
Eine nützliche Faustregel am Äquator: jede Zoomstufe halbiert die sichtbare Breite auf dem Bildschirm. Bei Zoom 14 zeigt ein Bildschirm typischerweise einige Häuserblocks. Bei Zoom 10 einen Ballungsraum. Bei Zoom 6 ein Land. Die effektive Auflösung hängt von der Bildschirmgröße und der Projektion ab (Web Mercator verzerrt in Nord-Süd-Richtung in Richtung der Pole).
Die meisten Produktionscodes speichern den Zoom als Float (z. B. 14,5), weil flüssige Zoom-Animationen zwischen ganzzahligen Zoomstufen interpolieren. Kachel-Fetches erfolgen auf der ganzzahligen Ebene, auf- oder abgerundet je nach Bibliothekskonvention.
Viewport vs. Bounding Box
Ein Viewport ist ein Kamerazustand. Eine Bounding Box ist das aktuell sichtbare geografische Rechteck. Die Bbox aus dem Viewport wird jedes Mal berechnet, wenn der Server gefragt werden soll: "Was soll innerhalb dieser Ansicht angezeigt werden?"
In Code:
const bbox = map.getBounds(); // gibt { _sw: {lat, lng}, _ne: {lat, lng} } zurück
const params = new URLSearchParams({
bbox: `${bbox._sw.lng},${bbox._sw.lat},${bbox._ne.lng},${bbox._ne.lat}`,
});
const features = await fetch(`/api/places?${params}`).then(r => r.json());
Dieses Muster (Bbox aus Viewport berechnen, an Server senden, zurückgegebene Features rendern) ist das Herzstück jeder Viewport-basierten Sucherfahrung: Immobilien, Listings, Store-Locators, Flottentracking, Ride-Share.
Wie der Viewport das Laden von Kacheln steuert
Wenn sich der Viewport ändert, ermittelt die Kartenbibliothek, welche Kacheln den neuen sichtbaren Bereich auf der aktuellen Zoomstufe abdecken, holt fehlende Kacheln vom Server (oder aus dem In-Memory-Cache) und rendert sie. Bereits gecachte Kacheln werden wiederverwendet; Kacheln außerhalb des Viewports werden für den Fall behalten, dass der Nutzer zurückschwenkt.
Ein flüssiges Schwenken und Zoomen fühlt sich nahtlos an, weil die Bibliothek diese Arbeit asynchron erledigt: Sie zeichnet, was sie hat, holt, was sie braucht, und aktualisiert das Canvas, wenn neue Kacheln eintreffen. Vector-Tile-Pipelines leisten zusätzliche Arbeit, um Geometrie auf der GPU in Pixel zu rendern, weshalb moderne Webkarten bei jedem Zoom und jeder Rotation scharf bleiben.
Viewport-Zustand speichern und teilen
Den Viewport in der URL zu speichern ist das Standardmuster für teilbare Kartenlinks. Die meisten Produkte verwenden einen URL-Hash wie #map=14.5/52.5200/13.4050 (Zoom, Lat, Lng). Beim Laden der Seite den Hash parsen und den Viewport anwenden. Bei Viewport-Änderungen einige hundert Millisekunden debounce und den Hash aktualisieren, damit der Browser-Zurück-Button nützlich bleibt.
Für browserinternen Zustand über Tabs oder Sitzungen hinweg funktioniert ein localStorage-Key mit derselben Struktur. Für server-gerenderte Seiten taucht der Viewport oft als Query-Parameter für SEO-freundliche URLs auf (?zoom=14&lat=52.52&lng=13.405).
Viewport-Bias für Suche und Autocomplete
Geocoding-APIs nehmen den Viewport (oder seine Bbox) als Bias-Parameter entgegen. MapAtlas stellt boundary.rect.* für einen harten Filter und focus.point.* für einen weichen Bias bereit. Ohne Bias gibt ein Autocomplete für "Springfield" whichever Springfield global am populärsten ist. Mit einem Viewport-Bias bekommt ein Nutzer, der in seine Karte von Massachusetts tippt, zuerst Massachusetts-Ergebnisse.
Diesen Bias bei jedem Tastendruck anwenden. Der Aufwand ist ein Parameter und deutlich relevantere Vorschläge.
Initialer Viewport: Wo anfangen
Die erste Entscheidung jeder Karten-App ist, wo sie startet. Gängige Muster:
- Standard nach Nutzer-Locale: Ein Nutzer in Deutschland landet auf einem Viewport über Berlin, ein Nutzer in Frankreich über Paris.
- Standard auf letzten Viewport des Nutzers: Viewport sitzungsübergreifend speichern.
- Standard auf die Daten: Wenn die Karte Suchergebnisse zeigt, beim initialen Rendering auf die Bbox dieser Ergebnisse einpassen.
- Standard auf IP-Geolokalisierung des Nutzers: Geringe Präzision, keine Berechtigung erforderlich, guter Fallback.
- Browser-Geolokalisierung nur bei explizitem Opt-in anfragen: Nie beim ersten Laden ohne UI-Zustimmung.
Einen sinnvollen initialen Viewport zu wählen ist ein kleines Detail mit großem Einfluss auf die wahrgenommene Qualität.
Wie MapAtlas Viewport-Zustand bereitstellt
Die MapAtlas Dynamic Maps-Komponente stellt dieselbe getCenter, getZoom, getBearing, getPitch und setView-API bereit, die jede entwicklerorientierte Webkarte anbietet, ergänzt um EU-only-Hosting und konsistente Viewport-Bias-Parameter über die Geocoding und Search-Endpoints. Für einen tieferen Einblick, wie Viewport mit Kacheln und Projektionen zusammenhängt, Was ist ein Vector Tile und Was ist Web Mercator lesen.
Häufig gestellte Fragen
Was ist ein Map Viewport?
Ein Map Viewport ist das sichtbare Fenster einer Karte: der geografische Bereich, der aktuell auf dem Bildschirm angezeigt wird, beschrieben durch eine Center-Koordinate (Breiten- und Längengrad), eine Zoomstufe (wie weit hinein- oder herausgezoomt ist) und optional ein Bearing (Rotation) und Pitch (3D-Neigung). Jede moderne Webkarte (Google Maps, MapLibre, Mapbox GL, MapAtlas) stellt den Viewport als Zustand bereit, der programmatisch gelesen und gesetzt werden kann. Der Viewport ändert sich jedes Mal, wenn der Nutzer die Karte schwenkt, zoomt, dreht oder neigt.
Was ist eine Zoomstufe?
Die Zoomstufe ist eine ganze (oder gebrochene) Zahl, die steuert, wie viel von der Welt in einer Kachel fixer Größe sichtbar ist. Zoom 0 passt die gesamte Welt in eine einzige 256x256-Kachel. Jede folgende Zoomstufe verdoppelt die Auflösung: Zoom 1 hat 4 Kacheln, Zoom 2 hat 16 usw. Zoom 14 entspricht grob dem Maßstab eines Stadtviertels, Zoom 18 dem Gebäudemaßstab. Die meisten Produktionskarten unterstützen Zoomstufen von 0 bis 22 oder darüber hinaus, obwohl zugrunde liegende Kacheln nur bis zu einer bestimmten Zoomstufe existieren und darüber hinaus hochskaliert werden.
Was ist der Unterschied zwischen Viewport und Bounding Box?
Ein Viewport ist der Kamerazustand (Center, Zoom, Bearing, Pitch). Eine Bounding Box ist das geografische Rechteck, das die Kamera aktuell zeigt. Die Bbox wird aus dem Viewport berechnet: Gegeben Center, Zoom und Bildschirmgröße berechnet die Kartenbibliothek, welches Lat/Lng-Rechteck sichtbar ist. Die Bbox ist das, was man als Viewport-Bias an die Geocoding-API übergibt, womit die Datenbank nach sichtbaren Features abgefragt wird, und was man protokolliert, wenn man wissen möchte, was der Nutzer angesehen hat.
Wie speichere und stelle ich einen Map Viewport wieder her?
Die vier Kernwerte (Center-Breitengrad, Center-Längengrad, Zoom, Bearing falls Rotation unterstützt wird) in die URL oder in den lokalen Speicher serialisieren. Ein gängiges Muster ist ein Hash wie #map=14.5/52.5200/13.4050 für Zoom 14,5 im Zentrum von Berlin. Beim Laden der Seite den Hash parsen und map.setView(...) oder map.flyTo(...) aufrufen. MapAtlas, MapLibre und Mapbox GL stellen alle eine getCenter / getZoom / getBearing-API und ein setView-Äquivalent bereit, sodass dieser Round-Trip eine einzige Hilfsfunktion in jeder Produktions-Codebase ist.
