Skip to content

Instantly share code, notes, and snippets.

@emacgillavry

emacgillavry/index.html

Last active June 7, 2017 19:44
Show Gist options
  • Save emacgillavry/5669391 to your computer and use it in GitHub Desktop.
Save emacgillavry/5669391 to your computer and use it in GitHub Desktop.
Download ZIP
NL WMTS-service in OpenLayers
Raw
index.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>BRT-Achtergrondkaart in OpenLayers</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="author" content="Edward Mac Gillavry">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="map-canvas"></div>
<!--
OpenLayers (http://www.openlayers.org/) om interactieve kaarten in een website op te nemen
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<!--
Proj4 (http://trac.osgeo.org/proj4js/) om meerdere projecties te ondersteunen
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
<script src="main.js"></script>
</body>
</html>
Raw
main.css
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
font: 14px/22px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-webkit-font-smoothing: antialiased;
color: #57574D;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
#map-canvas {
width: 100%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAACVBMVEUAAADl5eX////EwbxGAAAAAXRSTlMAQObYZgAAABFJREFUeAFjYESCKACdT38ZAAWhAAxcPQc7AAAAAElFTkSuQmCC) repeat scroll 0 0 #f9f9f9;
cursor: move;
-webkit-tap-highlight-color: transparent;
}
.olTileImage {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.olImageLoadError {
background-image: url("http://webmapper.net/theme/img/missing-tile.png") !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
}
div.olControlZoom {
position: absolute;
z-index: 1003;
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4);
border-radius: 4px;
left: 8px;
padding: 2px;
position: absolute;
top: 8px;
}
.olControlNoSelect {
-moz-user-select: none;
}
div.olControlZoom a {
background: none repeat scroll 0 0 rgba(160, 195, 63, 1.0);
color: #FFFFFF;
display: block;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
font-size: 18px;
font-weight: bold;
height: 22px;
line-height: 19px;
margin: 1px;
padding: 0;
text-align: center;
text-decoration: none;
width: 22px;
}
div.olControlZoom a:hover {
background: none repeat scroll 0 0 rgba(145, 177, 55, 1.0);
}
a.olControlZoomIn {
border-radius: 4px 4px 0 0;
}
a.olControlZoomOut {
border-radius: 0 0 4px 4px;
}
.olControlAttribution {
background-color: rgba(255,255,255,0.6);
bottom: 0px;
display: block;
font-size: smaller;
position: absolute;
padding: 0 2px;
right: 0px;
color: #666;
}
Raw
main.js
var map;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 1;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
window.Proj4js = {
Proj: function(code) {
return proj4(Proj4js.defs[code]);
},
defs: proj4.defs,
transform: proj4
};
// Juiste projectieparameters voor Rijksdriehoekstelsel (EPSG:28992):
proj4.defs["EPSG:28992"] = "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.040,49.910,465.840,-0.40939,0.35971,-1.86849,4.0772 +units=m +no_defs";
window.onload = function() {
var controls = [
new OpenLayers.Control.Navigation(
{dragPanOptions: {enableKinetic: true}}
),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Zoom()
];
map = new OpenLayers.Map ('map-canvas',{
controls: controls,
theme: null,
// Geldigheidsgebied van het tiling schema in RD-coördinaten:
maxExtent: new OpenLayers.Bounds(-285401.92,22598.08,595401.9199999999,903401.9199999999),
// Resoluties (pixels per meter) van de zoomniveaus:
resolutions: [3440.64, 1720.32, 860.16, 430.08, 215.04, 107.52, 53.76, 26.88, 13.44, 6.72, 3.36, 1.68, 0.84, 0.42, 0.21],
units: 'm',
projection: new OpenLayers.Projection("EPSG:28992")
});
// Er zijn 15 (0 tot 14) zoomniveaus beschikbaar van de WMTS-service voor de BRT-Achtergrondkaart:
var epsg28992matrixids = [];
for (var i=0; i<14; ++i) {
epsg28992matrixids[i] = 'EPSG:28992:' + i;
}
var tiledLayer = new OpenLayers.Layer.WMTS({
name: 'BRT Achtergrondkaart',
url: 'http://geodata.nationaalgeoregister.nl/wmts/',
layer: 'brtachtergrondkaart',
style: 'default',
matrixSet: 'EPSG:28992',
matrixIds: epsg28992matrixids,
format: 'image/png8',
isBaseLayer: true,
attribution: 'Kaartgegevens: &copy; <a href="http://www.cbs.nl">CBS</a>, <a href="http://www.kadaster.nl">Kadaster</a>, <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
transitionEffect: 'resize'
}
);
map.addLayer(tiledLayer);
// Het kaartbeeld wordt gecentreerd op basis van een locatie die is gedefinieerd in lengte- en breedtegraden (WGS-84):
var lonlat = new OpenLayers.LonLat(4.88750188,52.37653577);
var wgs84 = new OpenLayers.Projection("EPSG:4326");
lonlat.transform(wgs84, map.baseLayer.projection);
map.setCenter(lonlat,9);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment