Vectortegels vs. rastertegels: wat moet je webapp gebruiken?

Wanneer je een kaart integreert in een webapplicatie, bepaalt één architectuurbeslissing alles wat daarna volgt: rastertegels of vectortegels. Doe het goed en je kaart is snel, mooi en aanpasbaar. Doe het fout en je levert een korrelig, traag achtergrondafbeelding dat op elke stap botst met je ontwerpsysteem.

Deze gids legt het technische verschil tussen de twee formaten uit, doorloopt de echte afwegingen die werkelijk belangrijk zijn voor een front-end developer, en biedt je een helder beslissingsraamwerk. Aan het einde weet je precies welk formaat je voor je project moet kiezen en hoe je aan de slag gaat met vectortegels op MapAtlas.

De vraag over het tegelformaat duikt vroeg op in bijna elk kaartproject, en internet staat vol met oppervlakkige antwoorden die stoppen bij "vectortegels zijn nieuwer". Deze gids gaat dieper in op renderpijplijnen, payloadgroottes, browsercompatibiliteit, stylingcontrole en de specifieke scenario's waarin rastertegels de juiste keuze blijven.

Als je al bezig bent met bouwen en alleen de code nodig hebt, spring dan direct naar het gedeelte Snel Starten.

Wat Zijn Rastertegels?

Een rastertegel is een vooraf gerenderd PNG- of JPEG-afbeelding, doorgaans 256x256 of 512x512 pixels, dat een vaste schijf van de wereld op een bepaald zoomniveau weergeeft. Wanneer een gebruiker pant of zoomt, vraagt de browser de aangrenzende of hogere resolutietegels op, die de server al heeft gerenderd en gecachet.

Het renderen vindt volledig server-side plaats. De tegelafbeelding die in de browser arriveert, is een afgewerkt plaatje: pixels zijn al geplaatst, kleuren zijn al vastgelegd. De taak van de browser is simpelweg het weergeven ervan.

Hoe rastertegelservers werken

Een rastertegelstack ziet er doorgaans als volgt uit:

1. Ruwe geografische data (OpenStreetMap, kadastrale data, hoogtemodellen) wordt verwerkt in een database.
2. Een renderengine (Mapnik is de klassieke keuze) rendert vooraf tegels op elk zoomniveau in een tegelcache.
3. Een tegelserver (TileServer GL in rastermodus, of een beheerde CDN) levert de gecachete afbeeldingen via de URL-conventie /{zoom}/{x}/{y}.png.

Het resultaat is eenvoudig, snel en stateless. Elke HTTP-client kan een tegel opvragen: een browser, een mobiele app, een server-side proces dat een kaartafbeelding genereert of een GIS-desktopapplicatie.

Sterke punten van rastertegels

• Nul client-side renderoverhead. De browser geeft gewoon een afbeelding weer. Geen WebGL vereist, geen shadercompilatie, geen lettertype-rendering.
• Universele compatibiliteit. Werkt in elke browser, elke versie, inclusief Internet Explorer en headless renderingomgevingen.
• Voorspelbaar uiterlijk. De kaart ziet er precies uit zoals de tegelserver hem heeft gerenderd. Geen client-side variabiliteit.
• Eenvoudige server-side afbeeldingsgeneratie. Perfect voor het genereren van statische kaartafbeeldingen voor e-mail, PDF-rapporten of social sharing-kaarten.

Zwakke punten van rastertegels

• Grote bestandsgroottes. Een 256x256 PNG-tegel varieert van een paar KB boven open land tot zo'n 40-45 KB boven een dicht stadscentrum. Een Retina-tegel (512x512) heeft vier keer zoveel pixels.
• Korreligheid op high-DPI-schermen. Een tegel gerenderd voor een 1x-scherm ziet er wazig uit op een 2x Retina-scherm, tenzij je @2x-tegels aanbiedt, waardoor je bandbreedte verdubbelt.
• Geen rotatie of kanteling. Als je een rasterkaart roteert, roteren de tekstlabels mee en worden onleesbaar. Daarom worden rasterkaarten bijna altijd met het noorden boven getoond.
• Geen client-side stijlwijzigingen. Wil je de wegkleur veranderen, POI-pictogrammen verbergen of overschakelen naar donkere modus? Je hebt een nieuwe tegelset nodig, vooraf gerenderd server-side.
• Zoominterpolatie. Tussen gehele zoomniveaus schaalt de browser de bestaande afbeelding, waardoor deze wazig wordt. Het "vloeiende zoom"-gevoel dat je krijgt met vectortegels bestaat niet bij raster.

Wat Zijn Vectortegels?

Een vectortegel bevat de ruwe geografische data voor een kaartgebied: weggeometrieën, gebouwpolygonen, waterlichamen, landgebruiksgebieden, labelplaatsingsdata, gecodeerd als compact binair bestand (meestal het Mapbox Vector Tile-formaat, .mvt). De tegel bevat geen pixels. Het beschrijft wat er in dat gebied bestaat, niet hoe het eruit moet zien.

Het renderen vindt volledig client-side plaats met WebGL. Wanneer je een Mapbox GL JS-compatibele kaart laadt (zoals MapAtlas), vraagt de SDK vectortegels op, ontvangt geometriedata en gebruikt je stijlspecificatie om elke weg, elk gebouw en elk label in real-time op een <canvas>-element te tekenen, op maximaal 60 frames per seconde op geschikte hardware.

Hoe vectortegels worden gerenderd

Vectortegel (.mvt) + Stijl JSON → WebGL-shader → Canvas-pixels

De stijl JSON (een gestructureerd bestand dat je beheert) vertelt de renderer: teken wegen in deze kleur, teken gebouwextrusies op deze hoogte, gebruik dit lettertype voor labels, verberg deze laagtypen onder zoomniveau 12. De stijl kan op runtime worden gewijzigd, zonder nieuwe tegels op te halen.

Sterke punten van vectortegels

• Minder downloads tijdens het zoomen. Een vectortegel wordt opgehaald tot het maximale zoomniveau van de bron (vaak 14) en hergebruikt voor elk dichterbij gelegen zoomniveau, terwijl een rasterkaart bij elke zoomstap vier nieuwe tegels ophaalt. In dichte stadscentra kan één vectortegel groter zijn dan de bijbehorende rastertegel, dus de besparing komt uit hergebruik en niet uit kleinere bestanden.
• Scherp op elke resolutie. Vectorgeometrie schaalt wiskundig. Een Retina-scherm krijgt dezelfde tegel als een standaardscherm; de renderer geeft eenvoudigweg meer pixels uit. Geen @2x-tegelvarianten nodig.
• Vloeiend zoomen en draaien. Omdat de renderer werkt op ruwe geometrie, kan zoom continu worden geïnterpoleerd (niet alleen op gehele niveaus) en kan de kaart worden gekanteld en gedraaid met labels die altijd rechtop staan.
• Volledige client-side stylingcontrole. Wijzig elke visuele eigenschap, wegkleur, labellettertype, laagzichtbaarheid, dekking, door het stijlobject bij te werken. Geen nieuwe tegelaanvragen. Donkere modus is een stijl-JSON-wissel, geen nieuwe tegelset.
• 3D-gebouwextrusie. Vectortegels bevatten metagegevens over gebouwhoogte. Renderers kunnen polygonen in 3D extruderen met WebGL. Rastertegels hebben geen concept van hoogte.
• Datagestuurde styling. Kleur wegen op snelheidslimiet, schaduw landgebruik op categorie, schaal markeringen op bevolking: alles gedreven door data-eigenschappen in de tegel zonder de server aan te raken.

Zwakke punten van vectortegels

• WebGL vereist. Geen WebGL-ondersteuning betekent geen vectortegelrendering. Dit sluit zeer oude browsers (IE11) en bepaalde headless-omgevingen uit.
• Client-side CPU/GPU-belasting. Het renderen vindt plaats op het apparaat van de gebruiker. Op low-end Android-telefoons of zwaar belaste desktops kunnen complexe kaartstijlen met veel lagen frameverlagingen veroorzaken.
• Complexere initiële setup. Je hebt een renderingbibliotheek (Mapbox GL JS, MapLibre GL of de MapAtlas SDK) en een stijl-JSON nodig, niet alleen een <img>-tag.
• Lettertype- en glyph-laden. Labelrendering vereist dat glyphbestanden afzonderlijk worden aangeboden. Dit voegt een paar extra netwerkverzoeken toe bij het eerste laden.

Prestatievergelijking: Echte Cijfers

Om de afweging concreet te maken, zie je hier hoe het centrum van Amsterdam op zoomniveau 14 zich verhoudt op publieke OpenStreetMap-tegelservers (gemeten in september 2026):

Op schaal zie je het verschil vooral in het aantal aanvragen, minder in bytes. Een peer-reviewed loadtest liet zien dat zoom- en paninteracties één of twee vectortegels ophaalden tegenover 40 rastertegels, al bevatten de vectortegels meer data. Voor een middelgrote app die 10 miljoen tegelaanvragen per maand genereert, telt elke bespaarde aanvraag, omdat de tegelaanvraag de eenheid is waarop een maps-API factureert.

Wanneer Rastertegels Te Gebruiken

Rastertegels zijn niet verouderd. Er zijn duidelijke scenario's waarin ze de juiste keuze blijven:

Integratie van legacy-systemen. Als je een kaart insluit in een .NET WebForms-app, een server-gerenderde Rails-weergave of een omgeving waar je alleen HTML en basis-JavaScript beheert, is een rastertegellaag via Leaflet of OpenLayers eenvoudiger en betrouwbaarder dan het introduceren van een WebGL-renderer.

Server-side kaartafbeeldingsgeneratie. Als je kaartopnamen moet renderen op een Node.js-server voor e-mailsjablonen, PDF-exports of open graph-afbeeldingen, is headless rasterrendering je pad. Tools zoals node-canvas plus een rastertegelsbron werken waar WebGL dat niet doet.

Satelliet- en luchtfoto's. Luchtfotografie is van nature rasterdata. Zelfs op een vectorkaart wordt de satellietafbeeldingslaag altijd geleverd als rastertegels. Hybride kaarten combineren beide formaten: vector voor wegen en labels, raster voor de fotografische basis.

Zeer eenvoudige gebruiksscenario's. Wil je een statische locatiekaart insluiten op een contactpagina? Een eenvoudige Leaflet + OpenStreetMap-rasterconfiguratie duurt 20 minuten en heeft nul JavaScript-complexiteit. De upgrade naar vectortegels is niet gerechtvaardigd voor een niet-interactieve locatiepin.

Wanneer Vectortegels Te Gebruiken

Kies vectortegels voor elke moderne webapplicatie waarbij je belang hecht aan:

• Aangepaste merkstijling. Als je ontwerpsysteem specifieke kleuren heeft, zou je kaart dat ook moeten hebben. Vectortegels maken dit een JSON-wijziging.
• Ondersteuning voor donkere modus. Een donker stijl-JSON is één configuratiebestand. Schakelen tussen licht en donker is een map.setStyle()-aanroep.
• High-DPI/Retina-scherpte. Bijzonder belangrijk voor mobile-first apps en elke UI waarbij scherp renderen een ontwerprioriteit is.
• Vloeiende gebruikerservaring. De continue zoominterpolatie en vloeiende rendering van een vectorkaart zijn onmiddellijk merkbaar voor gebruikers. Rasterkaarten voelen houterig aan in vergelijking met interactieve contexten.
• Datavisualisatielagen. Het toevoegen van een heatmap, een choropleth of een clusterlaag aan een vectorkaart vereist alleen client-side configuratie. Op een rasterkaart zou je een nieuwe laag moeten tegelen of een canvas-overlay-hack gebruiken.
• 3D of gekantelde perspectieven. Alleen haalbaar met vectortegels en WebGL.

Snel Starten: Vectortegels met MapAtlas

MapAtlas levert vectortegels via een Mapbox GL JS-compatibele API. Als je eerder Mapbox GL JS hebt gebruikt, is migratie een stijl-URL-wijziging en een API-sleutelwissel. Als je helemaal opnieuw begint, is hier de volledige setup.

De SDK installeren

npm install @mapmetrics/mapmetrics-gl

Of via CDN voor gewone HTML-projecten:

<link rel="stylesheet" href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" />
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>

Een vectorkaart renderen

import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const map = new mapmetricsgl.Map({
  container: 'map',         // ID van uw <div>
  style: 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY',
  center: [4.9041, 52.3676], // [lengtegraad, breedtegraad], Amsterdam
  zoom: 12,
  pitch: 0,     // 0 = bovenaanzicht, 60 = 3D gekanteld
  bearing: 0,   // 0 = naar het noorden, elke waarde = gedraaid
});

De style-URL verwijst naar een JSON-bestand dat wordt gehost op MapAtlas-servers en dat alle lagen, lettertypen en bronnen definieert. Je kunt ook zelf een aangepast stijl-JSON-bestand hosten om elk visueel aspect van de kaart te beheren; zie de gids voor kaartvisualisatie en -styling.

Overschakelen naar donkere modus op runtime

const LIGHT_STYLE = 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY';
const DARK_STYLE  = 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_DARK_STYLE_ID/style.json&token=YOUR_API_KEY';
let isDark = false;

document.getElementById('toggle-dark').addEventListener('click', () => {
  isDark = !isDark;
  map.setStyle(isDark ? DARK_STYLE : LIGHT_STYLE);
});

Er worden geen nieuwe tegelaanvragen geactiveerd voor data die al gecachet is. Alleen de stijl verandert; de tegels blijven dezelfde binaire geometrie, opnieuw gerenderd met nieuwe kleuren.

Een GeoJSON-datalaag toevoegen

Een van de krachtigste vectortegelfuncties is het overlappen van je eigen data als een gestylede laag:

map.on('load', () => {
  // Voeg uw eigen databron toe
  map.addSource('delivery-zones', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [[[4.85, 52.34], [4.95, 52.34], [4.95, 52.40], [4.85, 52.40], [4.85, 52.34]]],
          },
          properties: { zone: 'Zone A', capacity: 150 },
        },
      ],
    },
  });

  // Stijl als een gekleurde vullaag
  map.addLayer({
    id: 'delivery-zones-fill',
    type: 'fill',
    source: 'delivery-zones',
    paint: {
      'fill-color': '#97C70A',
      'fill-opacity': 0.2,
    },
  });

  map.addLayer({
    id: 'delivery-zones-outline',
    type: 'line',
    source: 'delivery-zones',
    paint: {
      'line-color': '#97C70A',
      'line-width': 2,
    },
  });
});

Dit patroon, een bron toevoegen, een laag toevoegen, schilderen met stijlexpressies, is hetzelfde voor heatmaps, routelijnen, isochrone polygonen en choroplethkaarten. Het werkt omdat vectortegels de renderer ruwe geometrie geven, geen afgewerkte pixels.

Migreren van Raster naar Vector

Als je een bestaande Leaflet + rastertegel-setup hebt en wilt upgraden, is dit het minimale migratiepad:

1. Vervang Leaflet door de MapAtlas SDK (of MapLibre GL JS als je de voorkeur geeft aan een volledig open-source renderer).
2. Vervang de tegel-URL door een MapAtlas stijl-JSON-URL.
3. Verplaats overlays van Leaflet-lagen naar GL JS-bronnen en -lagen.
4. Test op omgevingen zonder WebGL. Voeg een fallback of een bericht voor degelijke degradatie toe voor het kleine percentage gebruikers dat geen WebGL beschikbaar heeft.

Het functionele resultaat is een kaart die scherper is, sneller laadt en opnieuw kan worden gestyled zonder de server aan te raken.

Voor een volledig overzicht van het toevoegen van markeringen, pop-ups, adreszoekfuncties en React-integratie bovenop een vectortegellaag, zie Hoe Interactieve Kaarten toe te voegen aan je Website.

Om de styling verder te ontwikkelen, donkere modus, merkkleuren, aangepaste lettertypen, watermerken verwijderen, zie Hoe een Aangepaste Merkkaart te Stylen.

En als je MapAtlas vergelijkt met Google Maps vanuit een kostenoogpunt, behandelt MapAtlas vs. Google Maps: Waarom Developers Overstappen de belangrijkste verschillen.

Samenvatting: Het Beslissingsraamwerk

Als je in 2026 iets interactiefs bouwt, zijn vectortegels de standaardkeuze. Rastertegels zijn de bewuste uitzondering voor specifieke compatibiliteits- of renderingbeperkingen.

Klaar om te bouwen met vectortegels? Meld je aan voor een gratis MapAtlas API-sleutel, geen creditcard vereist. Je sleutel werkt vanaf dag één voor tegels, geocodering, routering en isochrone API's.