Skip to content

Instantly share code, notes, and snippets.

@FrieseWoudloper

FrieseWoudloper/voorbeeld1.html

Last active November 10, 2019 17:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save FrieseWoudloper/b8f68be19299e19a3239ea2ee06c5a0f to your computer and use it in GitHub Desktop.
Save FrieseWoudloper/b8f68be19299e19a3239ea2ee06c5a0f to your computer and use it in GitHub Desktop.
Download ZIP
Voorbeelden uit blog post 'BRT als alternatief voor Google Maps'
Raw
voorbeeld1.html
<!doctype html>
<html>
<head>
<title>Voorbeeld 1</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
</head>
<body>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<div id="mapid" style="width: 600px; height: 450px;"></div>
<script>
var map = L.map('mapid').setView([52.15, 5.35], 7);
L.tileLayer('https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart/EPSG:3857/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '<a href="https://creativecommons.org/licenses/by/4.0/">CC-BY</a> Kadaster '
}).addTo(map);
</script>
</body>
</html>
Raw
voorbeeld2.html
<!doctype html>
<html>
<head>
<title>Voorbeeld 2</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
</head>
<body>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<div id="mapid" style="width: 600px; height: 450px;"></div>
<script>
var options = {maxZoom: 18, attribution: '<a href="https://creativecommons.org/licenses/by/4.0/">CC-BY</a> Kadaster'}
var standaard = L.tileLayer('https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart/EPSG:3857/{z}/{x}/{y}.png', options),
grijs = L.tileLayer('https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartgrijs/EPSG:3857/{z}/{x}/{y}.png', options),
pastel = L.tileLayer('https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', options),
water = L.tileLayer('https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartwater/EPSG:3857/{z}/{x}/{y}.png', options),
luchtfoto = L.tileLayer('https://geodata.nationaalgeoregister.nl/luchtfoto/rgb/wmts/Actueel_ortho25/EPSG:3857/{z}/{x}/{y}.jpeg', options);
var map = L.map('mapid', {
center: [53.219515, 6.568813],
zoom: 13,
layers: [standaard]
});
var baseMaps = {
"Standaard": standaard,
"Grijs": grijs,
"Pastel": pastel,
"Water": water,
"Luchtfoto": luchtfoto
};
L.control.layers(baseMaps, null, {collapsed: false}).addTo(map);
var marker = L.marker([53.219515, 6.568813]).addTo(map);
marker.bindPopup("Dit is de Martinitoren").openPopup();
</script>
</body>
</html>
Raw
voorbeeld3.html
<!doctype html>
<html>
<head>
<title>Voorbeeld 2</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
</head>
<body>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.js"></script>
<div id="mapid" style="width: 600px; height: 450px;"></div>
<script>
var crs = 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, 0.210],
bounds: L.bounds([-285401.92, 22598.08], [595401.9199999999, 903401.9199999999]),
origin: [-285401.92, 22598.08]
}
);
var map = L.map('mapid', {
crs: crs,
zoom: 13,
center: [53.219515, 6.568813]
});
new L.TileLayer('https://geodata.nationaalgeoregister.nl/tiles/service/tms/1.0.0/opentopoachtergrondkaart/EPSG:28992/{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 13,
tms: true,
attribution: '<a href="https://creativecommons.org/licenses/by/4.0/">CC-BY</a> Bron: J.W. van Aalst, <a href="http://www.opentopo.nl">www.opentopo.nl</a>'
}).addTo(map);
var marker = L.marker([53.219515, 6.568813]).addTo(map);
marker.bindPopup("Dit is de Martinitoren");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment