Vectortegels vs. rastertegels: wat moet uw webapplicatie gebruiken in 2026?

Wanneer u een kaart integreert in een webapplicatie, bepaalt één architectuurbeslissing alles wat daarna volgt: rastertegels of vectortegels. Doe het goed en uw kaart is snel, mooi en aanpasbaar. Doe het fout en u levert een korrelig, traag achtergrondafbeelding dat op elke stap botst met uw 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 u een helder beslissingsraamwerk. Aan het einde weet u precies welk formaat u voor uw project moet kiezen en hoe u 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 u al bezig bent met bouwen en alleen de code nodig heeft, 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 typische 256x256 PNG-tegel is 30-200 KB afhankelijk van de inhoudsdichtheid. 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 u @2x-tegels aanbiedt, waardoor uw bandbreedte verdubbelt.
• Geen rotatie of kanteling. Als u een rasterkaart roteert, roteren de tekstlabels mee en worden onleesbaar. Daarom zijn rasterkaarten altijd naar het noorden gericht.
• Geen client-side stijlwijzigingen. Wilt u de wegkleur veranderen, POI-pictogrammen verbergen of overschakelen naar donkere modus? U heeft 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 u 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 u een Mapbox GL JS-compatibele kaart laadt (zoals MapAtlas), vraagt de SDK vectortegels op, ontvangt geometriedata en gebruikt uw stijlspecificatie om elke weg, elk gebouw en elk label in real-time op een <canvas>-element te tekenen, op 60 frames per seconde.

Hoe vectortegels worden gerenderd

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

De stijl JSON (een gestructureerd bestand dat u 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

• Kleine payloads. Binair gecodeerde geometrie is veel compacter dan een gerenderde afbeelding. Een typische vectortegel voor een dicht stedelijk gebied is 15-50 KB versus 80-200 KB voor de equivalente rastertegel.
• 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. U heeft 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, zijn hier metingen uit de praktijk voor een kaarttegel van het centrum van Amsterdam op zoomniveau 14:

Op schaal reduceren vectortegels kaartgerelateerde bandbreedte met 60-80%. Voor een middelgrote app die 10 miljoen tegelaanvragen per maand genereert, vermindert dat verschil de CDN-uitvoerkosten aanzienlijk.

Wanneer Rastertegels Te Gebruiken

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

Integratie van legacy-systemen. Als u een kaart insluit in een .NET WebForms-app, een server-gerenderde Rails-weergave of een omgeving waar u 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 u kaartopnamen moet renderen op een Node.js-server voor e-mailsjablonen, PDF-exports of open graph-afbeeldingen, is headless rasterrendering uw 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. Wilt u 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 u belang hecht aan:

• Aangepaste merkstijling. Als uw ontwerpsysteem specifieke kleuren heeft, zou uw 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 60 fps-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 u 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 u eerder Mapbox GL JS heeft gebruikt, is migratie een stijl-URL-wijziging en een API-sleutelwissel. Als u 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://tiles.mapatlas.eu/styles/basic/style.json?key=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. U 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

document.getElementById('toggle-dark').addEventListener('click', () => {
  const isDark = map.getStyle().name?.includes('dark');
  map.setStyle(
    isDark
      ? 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY'
      : 'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY'
  );
});

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 uw 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 u een bestaande Leaflet + rastertegel-setup heeft en wilt upgraden, is dit het minimale migratiepad:

1. Vervang Leaflet door de MapAtlas SDK (of MapLibre GL JS als u 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 uw Website.

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

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

Samenvatting: Het Beslissingsraamwerk

Als u 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 u aan voor een gratis MapAtlas API-sleutel, geen creditcard vereist. Uw sleutel werkt vanaf dag één voor tegels, geocodering, routering en isochrone API's.