mattijn
11/16/2016 - 1:46 PM

PDOK TMS and WFS shown in Leaflet using proj4.js/proj4leaflet.js

PDOK TMS and WFS shown in Leaflet using proj4.js/proj4leaflet.js

README.md
content_copyfile_download
  • Rendered
  • Source

A web application based on Leaflet showing Dutch public data from PDOK.

  • TMS Backgound map: BRT achtergrondkaart
  • TMS Aerial photo - please note this aerial photo can be used for non-commercial uses only (CC-BY-NC)
  • WFS National Parks

This example relies heavily on a gist published by Edward Mac Gillavry (Webmapper): Leaflet.js showing TMS in RD and WFS in WGS-84 - gist and block.

This example has been extended a little bit with a layer control and tooltips showing attribute information on the WFS layer.

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<title>TWIAV - Onderzoek &amp; Advies</title>
	<link rel="SHORTCUT ICON" href="http://twiav.nl/img/twiav.ico"/>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="Egge-Jan Pollé">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<style>
	body {
		font-family: Arial, Helvetica, sans-serif;
		padding-bottom: 40px;
	}
	/* ---- Header ---- */
	header {
		width: 900px;
		margin: 0 auto;
	}
	header h1 {
		font-size: 35px;
		font-weight: bold;
		color: #3366CC;
	}
	header p {
		margin: 20px 0 0 3px;
		font-size: 14px;
		color: #272727;
	}
	/* ---- Main Area ---- */
	#main {
		position: relative;
		width: 900px;
		margin: 0 auto;
	}
	#map {
		width: 800px; 
		height: 800px; 
		border: 2px solid #CCCCCC;
		margin-top: 25px;
	}
	</style>
</head>
<body>
	<header>
		<h1>Nationale Parken in Nederland</h1>
	</header>
	<div id="main">
		<div id="map"></div>
		<br>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	<script src="https://cdn.rawgit.com/emacgillavry/Proj4Leaflet/master/src/proj4leaflet.js"></script>
	<script>
		// Definitie Rijksdriehoekstelsel (EPSG:28992)
		var EPSG28992 = new L.Proj.CRS.TMS( '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', [-285401.92, 22598.08, 595401.9199999999, 903401.9199999999], {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]});

		var map = new L.Map('map', {
			crs: EPSG28992
		});

		// BRT achtergrondkaart:
		var brtachtergrond = new L.TileLayer('http://geodata.nationaalgeoregister.nl/tms/1.0.0/brtachtergrondkaart/{z}/{x}/{y}.png', {
			tms: true,
			minZoom: 3,
			maxZoom: 13,
			attribution: 'BRT achtergrondkaart: © <a href="http://www.kadaster.nl">Kadaster</a>, Basisregistratie Topografie (BRT) - <a href="http://creativecommons.org/licenses/by/4.0/">CC-BY</a>',
			continuousWorld: true
		}).addTo(map);

		// Luchtfoto (PDOK-achtergrond):
		var lufo = new L.TileLayer('https://geodata1.nationaalgeoregister.nl/luchtfoto/tms/1.0.0/luchtfoto_png/EPSG28992/{z}/{x}/{y}.png', {
			tms: true,
			minZoom: 3,
			maxZoom: 13,
			attribution: 'Luchtfoto (PDOK-achtergrond): © <a title="Publieke Dienstverlening Op de Kaart" href="https://www.pdok.nl/">PDOK</a> - <a href="http://creativecommons.org/licenses/by-nc/3.0/nl/">CC-BY-NC</a>',
			continuousWorld: true
		}).addTo(map);

		function styleL1(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: '#cc0000',
				fillOpacity: 0.70,
				fillColor: '#008000'
			};
		}

		function onEachFeatureL1(feature, layer) {
		 
			 layer.on('mouseover', function(e) {
				//open popup;
				var popup = L.popup()
				.setLatLng(e.latlng) 
				.setContent(feature.properties.naam)
				.openOn(map);
			});

		}

		var wfsLayer = L.geoJson(null, {
			style: styleL1,
			onEachFeature: onEachFeatureL1
		}).addTo(map);

		var baseLayers = {
			"BRT achtergrondkaart (TMS)": brtachtergrond,
			"Luchtfoto (TMS)": lufo
		};

		var overlays = {
			"Nationale Parken (WFS)": wfsLayer
		};

		L.control.layers(baseLayers, overlays,{collapsed:false}).addTo(map);

		// WFS endpoint:
		var url = 'https://geodata.nationaalgeoregister.nl/';

		url += 'nationaleparken';

		url += '/ows?';

		// Parameters voor het GeoJSON request:
		var params = 'service=WFS&version=2.0.0&request=GetFeature&outputFormat=application/json&srsName=EPSG:4326';

		// Deze parameters zijn per GeoJSON request aan te passen
		params += '&typeName=nationaleparken';

		// Alleen de velden met de naam en de geometrie
		params += '&propertyName=naam,the_geom';

		// Ajax zonder jQuery ;-)
		var xhr = new XMLHttpRequest();
		xhr.open('GET', encodeURI(url + params));
		xhr.onload = function() {
			if (xhr.status === 200) {
				wfsLayer.addData(JSON.parse(xhr.responseText));
				map.fitBounds(wfsLayer.getBounds());
			}
			else {
				alert('Request failed.  Returned status of ' + xhr.status);
			}
		};
		xhr.send();

		// Bronvermelding van de WFS:
		wfsLayer.getAttribution = function() {
			return 'nationale parken <a title="Publieke Dienstverlening Op de Kaart" href="https://www.pdok.nl/">PDOK</a>.';
		}
	</script>
</body>
</html>