NL WMTS-service in OpenLayers by emacgillavry

index.html

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="utf-8">
    <title>BRT-Achtergrondkaart in OpenLayers</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="author" content="Edward Mac Gillavry">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div id="map-canvas"></div>
    <!--
        OpenLayers (//www.openlayers.org/) om interactieve kaarten in een website op te nemen
    -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
    <!--
        Proj4 (//trac.osgeo.org/proj4js/) om meerdere projecties te ondersteunen
    -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.css

html, body, #map-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
  font: 14px/22px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #57574D;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

#map-canvas {
  width: 100%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAACVBMVEUAAADl5eX////EwbxGAAAAAXRSTlMAQObYZgAAABFJREFUeAFjYESCKACdT38ZAAWhAAxcPQc7AAAAAElFTkSuQmCC) repeat scroll 0 0 #f9f9f9;
  cursor: move;
  -webkit-tap-highlight-color: transparent;
}

.olTileImage {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.olImageLoadError {
  background-image: url("http://webmapper.net/theme/img/missing-tile.png") !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

div.olControlZoom {
  position: absolute;
  z-index: 1003;
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  left: 8px;
  padding: 2px;
  position: absolute;
  top: 8px;
}
.olControlNoSelect {
  -moz-user-select: none;
}

div.olControlZoom a {
  background: none repeat scroll 0 0 rgba(160, 195, 63, 1.0);
  color: #FFFFFF;
  display: block;
  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
  font-size: 18px;
  font-weight: bold;
  height: 22px;
  line-height: 19px;
  margin: 1px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 22px;
}
div.olControlZoom a:hover {
  background: none repeat scroll 0 0 rgba(145, 177, 55, 1.0);
}

a.olControlZoomIn {
  border-radius: 4px 4px 0 0;
}
a.olControlZoomOut {
  border-radius: 0 0 4px 4px;
}

.olControlAttribution {
  background-color: rgba(255,255,255,0.6);
  bottom: 0px;
  display: block;
  font-size: smaller;
  position: absolute;
  padding: 0 2px;
  right: 0px;
  color: #666;
}

main.js

var map;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 1;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
window.Proj4js = {
  Proj: function(code) {
    return proj4(Proj4js.defs[code]);
  },
  defs: proj4.defs,
  transform: proj4
};

// Juiste projectieparameters voor Rijksdriehoekstelsel (EPSG:28992):
proj4.defs["EPSG:28992"] = "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000  +ellps=bessel  +towgs84=565.040,49.910,465.840,-0.40939,0.35971,-1.86849,4.0772 +units=m +no_defs";

window.onload = function() {
    var controls = [
        new OpenLayers.Control.Navigation(
            {dragPanOptions: {enableKinetic: true}}
        ),
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.Zoom()
    ];
    
    map = new OpenLayers.Map ('map-canvas',{
        controls: controls,
        theme: null,
        // Geldigheidsgebied van het tiling schema in RD-coördinaten:
        maxExtent: new OpenLayers.Bounds(-285401.92,22598.08,595401.9199999999,903401.9199999999),
        // Resoluties (pixels per meter) van de zoomniveaus:
        resolutions: [3440.64, 1720.32, 860.16, 430.08, 215.04, 107.52, 53.76, 26.88, 13.44, 6.72, 3.36, 1.68, 0.84, 0.42, 0.21],
        units: 'm',
        projection: new OpenLayers.Projection("EPSG:28992")
    });

    // Er zijn 15 (0 tot 14) zoomniveaus beschikbaar van de WMTS-service voor de BRT-Achtergrondkaart:

    var epsg28992matrixids = [];
    for (var i=0; i<14; ++i) {
        epsg28992matrixids[i] = 'EPSG:28992:' + i;
    }

    var tiledLayer = new OpenLayers.Layer.WMTS({
        name: 'BRT Achtergrondkaart',
        url: 'http://geodata.nationaalgeoregister.nl/wmts/',
        layer: 'brtachtergrondkaart',
        style: 'default',
        matrixSet: 'EPSG:28992',
        matrixIds: epsg28992matrixids,
        format: 'image/png8',
        isBaseLayer: true,
        attribution: 'Kaartgegevens: &copy; <a href="http://www.cbs.nl">CBS</a>, <a href="http://www.kadaster.nl">Kadaster</a>, <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        transitionEffect: 'resize'
        }
    );
    map.addLayer(tiledLayer);

    // Het kaartbeeld wordt gecentreerd op basis van een locatie die is gedefinieerd in lengte- en breedtegraden (WGS-84):

    var lonlat = new OpenLayers.LonLat(4.88750188,52.37653577);
    var wgs84 = new OpenLayers.Projection("EPSG:4326");
    lonlat.transform(wgs84, map.baseLayer.projection);
    map.setCenter(lonlat,9);
}