BRT-Achtergrondkaart (Web Mercator) in OpenLayers 4 by emacgillavry

index.html

<!doctype html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <title>BRT-Achtergrondkaart (Web Mercator) in OpenLayers</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
  <meta name="author" content="Edward Mac Gillavry">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css">
  <link rel="stylesheet" href="main.css">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
</head>
<body>
  <div id="map-canvas" class="map"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js"></script>
  <script src="main.js"></script>
</body>
</html>

main.css

html, body, #map-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}
#map-canvas {
  width: 100%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAACVBMVEUAAADl5eX////EwbxGAAAAAXRSTlMAQObYZgAAABFJREFUeAFjYESCKACdT38ZAAWhAAxcPQc7AAAAAElFTkSuQmCC) repeat scroll 0 0 #f9f9f9;
}

main.js

var projection = ol.proj.get('EPSG:3857');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(20);
var matrixIds = new Array(20);
for (var z = 0; z < 20; ++z) {
    resolutions[z] = size / Math.pow(2, z);
    matrixIds[z] = ("0" + z).slice(-2);
}

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            opacity: 0.7,
            source: new ol.source.WMTS({
                attributions: 'Kaartgegevens: &copy; <a href="https://www.kadaster.nl">Kadaster</a>',
                url: 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts?',
                layer: 'brtachtergrondkaart',
                matrixSet: 'EPSG:3857',
                format: 'image/png',
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds
                }),
                style: 'default',
                wrapX: false
            })
        })
    ],
    target: 'map-canvas',
    controls: ol.control.defaults({
        attributionOptions: {
            collapsible: false
        }
    }),
    view: new ol.View({
        minZoom: 6,
        maxZoom: 20,
        projection: projection,
// These coordinates (meters) are in Web Mercator too!       
        center: [631711.827985, 6856275.890632],
        zoom: 8
    })
});