|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>TWIAV - Onderzoek & 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> |