Skip to content

Instantly share code, notes, and snippets.

@mjepronk

mjepronk/index.html

Created January 6, 2022 12:38
Show Gist options
  • Save mjepronk/6336184f11cc7a79134f593b2c225686 to your computer and use it in GitHub Desktop.
Save mjepronk/6336184f11cc7a79134f593b2c225686 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet met BRT-Achtergrond kaart via PDOK
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#map { height: 500px; }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var center = L.latLng(52.15518, 5.38725);
var url = "https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/{layerName}/{crs}/{z}/{x}/{y}.{format}";
var config = {
crs: "EPSG:3857",
format: "png",
name: "pastel",
layerName: "pastel",
type: "wmts",
minZoom: 6,
maxZoom: 19,
tileSize: 256,
attribution: "Kaartgegevens &copy; <a href='https://www.kadaster.nl'>Kadaster</a> | \
<a href='https://www.verbeterdekaart.nl'>Verbeter de kaart</a>",
}
var map = L.map('map').setView(center, 9);
L.tileLayer(url, config).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment