Leaflet.js met TMS en WMS in RD én GetFeatureInfo by emacgillavry

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet.js met TMS en WMS in RD én GetFeatureInfo</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="Edward Mac Gillavry">
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
    <link rel="stylesheet" href="main.css" />
    <body>
        <div id="map-canvas"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
        <script src="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
        <script src="https://cdn.rawgit.com/kartena/Proj4Leaflet/leaflet-proj-refactor/src/proj4leaflet.js"></script>
        <script src="https://cdn.rawgit.com/heigeo/leaflet.wms/gh-pages/leaflet.wms.js"></script>
        <script src="main.js"></script>
    </body>
</html>

main.css

#map-canvas, html, body {
    width: 100%; height: 100%; padding: 0; margin: 0;
}

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

.leaflet-control-attribution {
    background-color: rgba(255,255,255,0.6);
    font-size: smaller;
    color: #666;
    padding: 0 5px;
    line-height: 22px;
}

.leaflet-control-attribution a {
    text-decoration: underline;
}

main.js

// Definitie Rijksdriehoekstelsel (EPSG:28992)
var RD = new L.Proj.CRS( 'EPSG:28992','+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs',
    {
        resolutions: [3440.640, 1720.320, 860.160, 430.080, 215.040, 107.520, 53.760, 26.880, 13.440, 6.720, 3.360, 1.680, 0.840, 0.420],
        bounds: L.bounds([-285401.92, 22598.08], [595401.9199999999, 903401.9199999999]),
        origin: [-285401.92, 22598.08]
    }
);

var map = new L.Map('map-canvas', {
    crs: RD,
    center: [52.3719,4.9012],
    zoom: 11
});

map.attributionControl.setPrefix('');

// Gebruik referentiekaart Gemeente Amsterdam:
new L.TileLayer('https://t{s}.datapunt.amsterdam.nl/tms/1.0.0/topo_RD/EPSG28992/{z}/{x}/{y}.png', {
    subdomains: '1234',
    minZoom: 5,
    maxZoom: 13,
    tms: true,
    attribution: 'Map data: <a href="http://www.kadaster.nl">Kadaster</a>',
    errorTileUrl: 'http://www.webmapper.net/theme/img/missing-tile.png', // plaatje als tegels niet worden gevonden...
}).addTo(map);

// WMS van meetbouten
var overlay = L.WMS.source("https://map.datapunt.amsterdam.nl/cgi-bin/mapserv?map=/srv/mapserver/meetbouten.map", {
    'transparent': true,
    'srs': 'EPSG:28992',
    'format': 'image/png'
});
overlay.addSubLayer('meetbouten_status');
overlay.addTo(map);