Als je ooit code hebt geschreven die met een kaartbibliotheek praat, heb je code geschreven die de viewport raakt. De viewport is de runtime-toestand van de kaart: waar die gecentreerd is, hoe ver ingezoomd, in welke richting die wijst en optioneel hoeveel die gekanteld is. Elk scrollen, zoomen, draaien en klikken hangt ervan af.
Deze gids legt uit wat een viewport daadwerkelijk is, de vier kernwaarden die hem beschrijven, hoe hij samenwerkt met tegels en bounding boxes en de productiepatronen voor het opslaan, herstellen en delen van viewport-toestand.
De vier kernwaarden
Een moderne webkaart-viewport wordt beschreven door maximaal vier waarden:
- Middelpunt (
{ lat, lng }): het geografische coördinaat in het midden van het scherm. - Zoom (een getal, vaak een float): hoe ver de kaart ingezoomd is. Hogere waarden tonen kleinere gebieden in meer detail.
- Bearing (een getal in graden, standaard 0): de rotatie van de kaart ten opzichte van "noord boven". 90 betekent oost boven.
- Pitch (een getal in graden, 0 tot ~85): de 3D-kanteling. 0 is plat bovenaanzicht, 60 is een sterk perspectief.
Elke moderne kaartbibliotheek (MapLibre GL, Mapbox GL, OpenLayers, Leaflet, MapAtlas Dynamic Maps) exposeert deze als leesbare en schrijfbare toestand. Een 2D-bibliotheek als Leaflet exposeert bearing en pitch mogelijk niet.
Zoomniveaus in detail
Zoomniveau is de meest gevraagde van de vier. Het is een getal (of float) dat de wereld koppelt aan een tegelpiramide:
- Zoomniveau 0: hele wereld in één 256x256-tegel
- Zoomniveau 1: wereld verdeeld in 4 tegels
- Zoomniveau 2: 16 tegels
- ...
- Zoomniveau 14: ~268 miljoen tegels, wijkniveau
- Zoomniveau 18: gebouwniveau
- Zoomniveau 22+: doorgaans gerenderd met vector-stijl-upscaling in plaats van verse tiledata
Een handige vuistregel bij de evenaar: elke zoomniveaustap halveert de zichtbare breedte op het scherm. Op zoomniveau 14 toont een scherm doorgaans een paar stadsblokken. Op zoomniveau 10 een stedelijk gebied. Op zoomniveau 6 een land. De effectieve resolutie hangt af van schermgrootte en de projectie (Web Mercator vervormt noord-zuid naarmate je richting de polen gaat).
De meeste productiecode slaat zoom op als float (bijv. 14.5) omdat vloeiende zoomanimaties interpoleren tussen gehele zoomniveaus. Tegelaanvragen vinden plaats op het afgeronde gehele niveau, afhankelijk van bibliotheekconventie.
Viewport versus bounding box
Een viewport is cameratoestand. Een bounding box is de geografische rechthoek die momenteel zichtbaar is. Je berekent de bbox uit de viewport elke keer dat je de server moet vragen "wat moet ik in deze weergave tonen?".
In code:
const bbox = map.getBounds(); // retourneert { _sw: {lat, lng}, _ne: {lat, lng} }
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());
Dit patroon (bbox berekenen uit viewport, naar server sturen, geretourneerde features renderen) is het kloppende hart van elke viewport-gebaseerde zoekervaring: vastgoed, listings, store locators, fleet tracking, deelvervoer.
Hoe de viewport het laden van tegels aanstuurt
Als de viewport verandert, bepaalt de kaartbibliotheek welke tegels het nieuwe zichtbare gebied dekken op het huidige zoomniveau, haalt ontbrekende tegels op van de server (of uit de in-memory cache) en rendert ze. Tegels die al gecached zijn worden hergebruikt; tegels buiten het viewport worden bewaard voor het geval de gebruiker terugscrollt.
Een vloeiend scrollen en zoomen voelt naadloos aan omdat de bibliotheek dit asynchroon doet: het tekent wat het heeft, haalt op wat het nodig heeft en updatet het canvas naarmate nieuwe tegels binnenkomen. Vector-tile-pipelines doen extra werk om geometrie naar pixels te renderen op de GPU, wat waarom moderne webkaarten scherp blijven bij elk zoomniveau en elke rotatie.
Viewport-toestand opslaan en delen
De viewport opslaan in de URL is het standaardpatroon voor deelbare kaartlinks. De meeste producten gebruiken een URL-hash als #map=14.5/52.5200/13.4050 (zoom, lat, lng). Parseer de hash bij het laden en pas de viewport toe. Debounce bij viewport-wijziging een paar honderd milliseconden en update de hash zodat de browser-terugknop bruikbaar blijft.
Voor browsertoestand over tabs of sessies werkt een localStorage-sleutel met dezelfde structuur. Voor server-gerenderde pagina's verschijnt de viewport vaak als queryparameters voor SEO-vriendelijke URLs (?zoom=14&lat=52.52&lng=13.405).
Viewport-bias voor zoeken en autocomplete
Geocoding-APIs accepteren de viewport (of zijn bbox) als bias-parameter. MapAtlas exposeert boundary.rect.* voor een harde filter en focus.point.* voor een zachte bias. Zonder bias retourneert autocomplete voor "Springfield" de meest populaire Springfield wereldwijd. Met een viewport-bias krijgt de gebruiker die typt in zijn kaart van Massachusetts eerst Massachusetts-resultaten.
Pas deze bias toe bij elke toetsaanslag. De kosten zijn één parameter en de suggesties zijn aanzienlijk relevanter.
Beginviewport: waar te starten
Het eerste wat elke kaart-app moet beslissen is waar te beginnen. Veelgebruikte patronen:
- Standaard naar de locale van de gebruiker: een gebruiker in Duitsland landt op een viewport boven Berlijn, een gebruiker in Frankrijk boven Parijs.
- Standaard naar de laatste viewport van de gebruiker: viewport bewaren over sessies.
- Standaard naar de data: als je kaart zoekresultaten toont, pas de bbox van die resultaten aan bij de eerste render.
- Standaard naar IP-geolocatie van de gebruiker: lage precisie, geen toestemming nodig, goede fallback.
- Vraag browserlocatie alleen als de gebruiker expliciet toestemming geeft: nooit bij eerste laad zonder UI-toestemming.
Een zinvol beginviewport kiezen is een klein detail met een groot effect op de waargenomen kwaliteit.
Hoe MapAtlas viewport-toestand exposeert
De MapAtlas Dynamic Maps-component exposeert dezelfde getCenter, getZoom, getBearing, getPitch en setView API die elke developer-grade webkaart biedt, aangevuld met EU-only hosting en consistente viewport-biasparameters in de Geocoding en Search-endpoints. Voor een diepere blik op hoe viewport samenwerkt met tegels en projecties, zie Wat is een vector tile en Wat is Web Mercator.
Veelgestelde vragen
Wat is een kaart-viewport?
Een kaart-viewport is het zichtbare venster van een kaart: het geografische gebied dat momenteel op het scherm wordt weergegeven, beschreven door een middelpuntcoördinaat (breedtegraad en lengtegraad), een zoomniveau (hoe ver in of uit de kaart is) en optioneel een bearing (rotatie) en pitch (3D-kanteling). Elke moderne webkaart (Google Maps, MapLibre, Mapbox GL, MapAtlas) exposeert de viewport als toestand die je programmatisch kunt lezen en instellen. De viewport verandert elke keer dat de gebruiker scrollt, zoomt, draait of kantelt.
Wat is een zoomniveau?
Zoomniveau is een getal (vaak een float) dat bepaalt hoeveel van de wereld zichtbaar is in een tegel met vaste afmetingen. Zoomniveau 0 past de hele wereld in één 256x256-tegel. Elk volgend zoomniveau verdubbelt de resolutie: zoomniveau 1 heeft 4 tegels, zoomniveau 2 heeft 16, enzovoort. Zoomniveau 14 is ruwweg wijkniveau, zoomniveau 18 is ruwweg gebouwniveau. De meeste productiekaarten ondersteunen zoomniveaus van 0 tot 22 of verder, hoewel de onderliggende tegels alleen tot een bepaald zoomniveau bestaan en daarna worden opgeschaald.
Wat is het verschil tussen viewport en bounding box?
Een viewport is de camerastaat (middelpunt, zoom, bearing, pitch). Een bounding box is de geografische rechthoek die de camera momenteel toont. Je berekent de bbox uit de viewport: gegeven een middelpunt, zoomniveau en schermgrootte berekent de kaartbibliotheek welke lat/lng-rechthoek zichtbaar is. De bbox is wat je als viewport-bias meegeeft aan de geocoding-API, waarmee je de database bevraagt voor zichtbare features en wat je logt als je wilt weten wat de gebruiker bekeek.
Hoe sla ik een kaart-viewport op en herstel ik die?
Sla de vier kernwaarden op (middelpunt breedtegraad, middelpunt lengtegraad, zoom, bearing als je rotatie ondersteunt) in de URL of local storage. Een veelgebruikt patroon is een hash als #map=14.5/52.5200/13.4050 voor zoomniveau 14.5 met het middelpunt boven Berlijn. Parseer bij het laden de hash en roep map.setView(...) of map.flyTo(...) aan. MapAtlas, MapLibre en Mapbox GL exposeren allemaal een getCenter / getZoom / getBearing API en een setView-equivalent, zodat deze round-trip één helperfunctie is in elke productiecode.
