Als je de afgelopen tien jaar Google Maps, OpenStreetMap of een andere moderne webkaart hebt gebruikt, was elke weg en elk gebouw dat je zag waarschijnlijk geladen als een vector tile. Het formaat is de stille held van moderne webcartografie. Het is wat webkaarten snel laat laden, scherp doet ogen op elk scherm en designers in staat stelt mooie, gestijlde kaarten te shippen zonder de hele wereld opnieuw te renderen voor elk merk.
Deze gids legt uit wat een vector tile is, hoe het werkt, waarom het raster tiles voor de meeste toepassingen heeft vervangen en hoe MapAtlas ze in productie serveert.
De definitie in één zin
Een vector tile is een klein binair bestand met de geografische features voor één kaarttegel op een specifiek zoomniveau, gecodeerd als data in plaats van als een voorgerenderde afbeelding.
Het "data in plaats van afbeelding"-deel is precies waar het om gaat. Bij een rastertegel heeft de server al bepaald hoe elke pixel eruitziet. Bij een vector tile ontvangt de client de onderliggende geometrie (lijnen, polygonen, punten) en labels, en rendert die op de fly naar de door de gebruiker gekozen stijl.
Hoe webkaarten tegels gebruiken
Elke webkaart die je ooit hebt gebruikt, verdeelt de wereld in een tegel-grid. Op zoomniveau 0 past de hele wereld in één tegel. Op zoomniveau 1 zijn er 4 tegels, op 2 zijn er 16, enzovoort. Elke tegel wordt geïdentificeerd door drie getallen: zoom (z), kolom (x) en rij (y). Als je scrollt of zoomt, haalt de kaartbibliotheek alleen de zichtbare tegels op, slaat ze in de cache en gooit de tegels weg die het viewport verlaten.
Voor rastertegels rendert de server een PNG voor elke (z, x, y) combinatie. Dat werkt, maar heeft beperkingen: de stijl is vastgelegd op rendertijd, elke stijlwijziging betekent de hele wereld opnieuw renderen en afbeeldingen moeten in 1x en 2x resolutie worden aangeboden om scherp te zijn op retineschermen.
Vector tiles draaien het model om. De server stuurt geometrie. De client rendert. Één tileset ondersteunt elk aantal stijlen, is scherp op elke DPI en blijft klein over het netwerk.
Het MVT-formaat
Het de-facto standaardformaat is MVT, de Mapbox Vector Tile-specificatie. MVT is een Protocol Buffers-codering die features organiseert in benoemde lagen, doorgaans:
transportation(wegen, spoorwegen)buildings(gebouwvoetafdrukken)places(steden, dorpen, wijken)landuse(parken, woongebieden, commercieel)water(oceanen, meren, rivieren)boundaries(bestuurlijke gebieden)
Elk feature in een laag heeft een geometrie (punt, lijn, polygoon) en een set attributen (naam, type, belang, taalvarianten). Geometriecoördinaten zijn gehele getallen in tegelcoördinaten van 0 tot 4096, wat MVT zijn compacte formaat geeft.
MVT is volledig open, vendor-neutraal en ondersteund door elke grote rendering-engine: Mapbox GL JS, MapLibre GL JS, OpenLayers, deck.gl en de iOS- en Android-SDK's van Mapbox.
Waarom vector tiles raster tiles hebben vervangen
Er zijn vijf redenen waarom moderne webkaarten vrijwel universeel vector tiles gebruiken voor de basislaag:
Stijlflexibiliteit. Met één tileset kun je een licht thema, een donker thema, een printvriendelijke stijl, een satelliet-overlay stijl en een merkkleurstijl voor marketing renderen. Geen herrendering op de server.
Pixelscherp op elke DPI. Een rastertegel op 1x ziet er wazig uit op een Retina-scherm. Een vector tile wordt op de client vers gerenderd op de native resolutie van het apparaat.
Kleinere payloads. Een complexe stedelijke tegel is als MVT vaak kleiner dan als een hoogwaardige PNG, zeker na gzip.
Runtime-interactiviteit. Je kunt een specifieke weg highlighten bij hover, ongebruikte lagen uitfaden, animaties afspelen en reageren op feature-klikken, omdat de client weet wat elk pixel voorstelt.
Vloeiend zoomen en roteren. Vectorgeometrie roteert en schaalt zonder aliasing. Rastertegels zien er pixelig uit bij fractie-zoomniveaus of bij rotatie.
De kosten zijn CPU- en GPU-werk op de client, wat geen enkel probleem is op een toestel van de afgelopen tien jaar.
Wat je runtime kunt stijlen
Een stijldocument (doorgaans een JSON in de Mapbox Style Spec, ook overgenomen door MapLibre) beschrijft hoe elke laag getekend moet worden. Voorbeelden van wat je kunt aanpassen zonder de tiledata aan te raken:
- De kleur van elke wegklasse
- De breedte van weglijnen, variërend per zoomniveau
- Welke plaatslabels op welk zoomniveau zichtbaar zijn
- Lettertype, grootte en halo van elk tekstlabel
- Zichtbaarheid van volledige lagen (alle bestuurlijke grenzen uitzetten met één toggle)
- Patroonvullingen, gestreepte lijnen, kleurovergangen, blur-effecten
Dit is wat merkkaarten mogelijk maakt. Een designteam kan een Mapbox style JSON, een MapLibre style JSON of een MapAtlas stijlpreset aanleveren en dezelfde tileset rendert in hun merkidentiteit.
Caching en prestaties
Vector tiles cachen uitstekend omdat de geometrie van de wereld niet elke minuut verandert. CDN-edge-caches houden MVT-tegels doorgaans uren of dagen vast. De kaartbibliotheek haalt tegels alvast op in de richting waarin de gebruiker waarschijnlijk gaat scrollen en houdt recent bekeken tegels in het geheugen. Het resultaat is dat een gebruiker die over een stad scrollt een vloeiende ervaring heeft omdat de tegels voor het volgende viewport doorgaans al geladen zijn.
Productie-tileservices exposeren de tegels doorgaans op een pad als /{z}/{x}/{y}.pbf (PBF is de protobuf-binaire extensie). Een moderne HTTP/2- of HTTP/3-verbinding multiplext tientallen tegelverzoeken parallel.
Waar MapAtlas past
MapAtlas serveert MVT-compatibele vector tiles voor het Dynamic Maps-product, met EU-only hosting, voorspelbare prijzen en een tile-schema ontworpen voor downstream-styling en AI-annotatie. Dezelfde datalagen die de zichtbare kaart aansturen (plaatsen, transport, gebouwen, points of interest) zijn ook beschikbaar als gestructureerde data via de Geocoding en Search APIs, zodat een feature die je op de kaart ziet ook als getypeerd JSON-record voor je eigen logica op te halen is.
Voor een diepere blik op de renderlaag legt de Custom Map Styling-gids uit hoe je een merkconforme vector-tile-stijl van begin tot eind opzet.
Veelgestelde vragen
Wat is een vector tile?
Een vector tile is een klein binair bestand met de geografische features (wegen, gebouwen, points of interest, labels) voor één tegel van een webkaart op een specifiek zoomniveau. Anders dan een rastertegel, die een voorgerenderde PNG of JPG is, bevat een vector tile de onderliggende geometrie en attributen als data. De browser of mobiele client rendert die data op runtime naar pixels, wat betekent dat dezelfde tegel anders gestijld, gedraaid en op elke pixeldichtheid scherp weergegeven kan worden.
Wat is het verschil tussen een vector tile en een raster tile?
Een rastertegel is een vaste PNG of JPG, doorgaans 256x256 of 512x512 pixels, voorgerenderd op de server met een vaste stijl. Een vector tile is een binair bestand met geometrie en attributen, gerenderd naar pixels door de client. Vector tiles zijn kleiner over het netwerk, ondersteunen runtime-restyling, zien er scherp uit op elk zoomniveau en elke DPI en laten je lagen aan- en uitzetten zonder opnieuw op te halen. De afweging is dat de client het renderwerk moet doen, wat geen probleem is op elke moderne browser of telefoon.
Wat is het MVT-formaat?
MVT is de Mapbox Vector Tile-specificatie, het de-facto standaardformaat voor vector tiles. Het is een Protocol Buffers (protobuf) codering van geografische features voor één tegel, georganiseerd in benoemde lagen (bijv. roads, buildings, places). Het formaat is open, vendor-neutraal en ondersteund door elke moderne map-renderer (Mapbox GL, MapLibre, OpenLayers, deck.gl). MapAtlas serveert MVT-compatibele tiles via het dynamic-maps-endpoint.
Hoe klein zijn vector tiles?
Een typische stedelijke vector tile op zoomniveau 14 is tussen 50 KB en 200 KB over het netwerk, vaak gecomprimeerd naar 30-100 KB na gzip. De grootte hangt af van de datadichtheid van het gebied: een tegel die centraal Parijs dekt is zwaarder dan een tegel die de Atlantische Oceaan dekt. De meeste productiekaarten bereiken vloeiend scrollen en zoomen omdat tegels agressief gecached worden, vooraf geladen worden in de richting die de gebruiker waarschijnlijk op gaat en op de GPU gerenderd worden.
