<html>
<head>
<title>Bestuurlijke grenzen</title>
<!-- bring in the OpenLayers javascript library
(here we bring it from the remote site, but you could
easily serve up this javascript yourself) -->
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers.
Using this hosted file will make sure we are kept up
to date with any necessary changes -->
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<style type="text/css">
.olImageLoadError {
background-color: transparent !important;
}
</style>
<script type="text/javascript">
// Start position for the map (hardcoded here for simplicity,
// but maybe you want to get this from the URL params)
var lat=51.94
var lon=4.66
var zoom=11
var map; //complex object of type OpenLayers.Map
function init() {
OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url=";
// allow testing of specific renderers via "?renderer=Canvas", etc
map = new OpenLayers.Map({
div: "map",
layers: [
new OpenLayers.Layer.OSM.Mapnik("Mapnik"),
new OpenLayers.Layer.Vector("Woonplaatsen", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
version: "1.1.0",
url: "http://geodata.nationaalgeoregister.nl/bagviewer/wfs",
featureType: "woonplaats",
featureNS: "http://bagviewer.geonovum.nl",
geometryName: "geometrie"
}),
styleMap: new OpenLayers.StyleMap(
{strokeColor: 'red', fillColor: '#eeeeee', graphicZIndex: 1, fillOpacity: 0.2,
strokeWidth: 4, strokeOpacity: 0.5, strokeLinecap: "butt"}),
projection: new OpenLayers.Projection("EPSG:4326")
}),
new OpenLayers.Layer.Vector("Bestuurlijke Grenzen - Gemeenten (WFS)", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
visibility: true,
version: '1.1.0',
url: "http://geodata.nationaalgeoregister.nl/bestuurlijkegrenzen/wfs",
featureType: "gemeenten_2012",
featureNS: "http://bestuurlijkegrenzen.geonovum.nl",
geometryName: 'geom',
outputFormat: 'GML2'
}),
styleMap: new OpenLayers.StyleMap(
{strokeColor: '#222222', fillColor: '#eeeeee', graphicZIndex: 2, fillOpacity: 0.2,
strokeWidth: 2}),
})
]
});
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter(lonLat, zoom);
}
</script>
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:90%; height:90%" id="map"></div>
</body>
</html>