Skip to content

Instantly share code, notes, and snippets.

@webmappergists
Last active November 30, 2015 16:16
Show Gist options
  • Save webmappergists/6835958234124c5ea68f to your computer and use it in GitHub Desktop.
Save webmappergists/6835958234124c5ea68f to your computer and use it in GitHub Desktop.
Leaflet 1.0.0 showing TMS and single-tile WMS in RD and WFS in WGS-84

This example shows how to use the popular Leaflet.js v.1.0.0 beta 2 interactive mapping library with OGC-compliant geographic web service (in this case TMS) that comes in the Dutch reference system: Rijksdriehoekstelsel (RD), Amersfoort New (EPSG:28992) together with a WFS that returns GeoJSON in WGS-84.

Cheers,

Edward @emacgillavry

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet.js met TMS in RD én WFS in WGS-84</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="Edward Mac Gillavry">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<link rel="stylesheet" href="main.css" />
<body>
<div id="map-canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<script src="https://cdn.rawgit.com/kartena/Proj4Leaflet/leaflet-proj-refactor/src/proj4leaflet.js"></script>
<script src="https://cdn.rawgit.com/heigeo/leaflet.wms/gh-pages/leaflet.wms.js"></script>
<script src="main.js"></script>
</body>
</html>
#map-canvas, html, body {
width: 100%; height: 100%; padding: 0; margin: 0;
}
#map-canvas {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAACVBMVEUAAADl5eX////EwbxGAAAAAXRSTlMAQObYZgAAABFJREFUeAFjYESCKACdT38ZAAWhAAxcPQc7AAAAAElFTkSuQmCC) repeat scroll 0 0 #f9f9f9;
cursor: move;
-webkit-tap-highlight-color: transparent;
}
.leaflet-control-attribution {
background-color: rgba(255,255,255,0.6);
font-size: smaller;
color: #666;
padding: 0 5px;
line-height: 22px;
}
.leaflet-control-attribution a {
text-decoration: underline;
}
// Definitie Rijksdriehoekstelsel (EPSG:28992)
var RD = 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],
bounds: L.bounds([-285401.92, 22598.08], [595401.9199999999, 903401.9199999999]),
origin: [-285401.92, 22598.08]
}
);
var map = new L.Map('map-canvas', {
crs: RD
});
map.attributionControl.setPrefix('');
// Gebruik BRT-Achtergrondkaart van PDOK:
new L.TileLayer('http://geodata.nationaalgeoregister.nl/tms/1.0.0/brtachtergrondkaart/{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 13,
tms: true,
attribution: 'Map data: <a href="http://www.kadaster.nl">Kadaster</a>',
errorTileUrl: 'http://www.webmapper.net/theme/img/missing-tile.png', // plaatje als tegels niet worden gevonden...
}).addTo(map);
var geojson = L.geoJson(null,
{
style: {
color: 'green',
fillColor: 'red',
weight: 2.0,
opacity: 0.6,
fillOpacity: 0.2
}
}
).addTo(map);
// WFS-endpoint voor de buurt-, wijk- en gemeentekaart 2014 van het CBS:
var url = 'https://geodata.nationaalgeoregister.nl/wijkenbuurten2014/ows?';
// Deze parameters zijn voor alle GeoJSON-requests hetzelfde:
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
// Geef de buurtenkaart 2014:
params += 'typeName=wijkenbuurten2014:cbs_buurten_2014&';
// Alleen de velden met de gemeentecode, -naam en de geometrie
params += 'propertyName=gemeentecode,gemeentenaam,geom&';
// Alleen de buurten in de gemeente Amsterdam
params += 'cql_filter=gemeentenaam \= \'Amsterdam\'';
// Ajax zonder jQuery ;-)
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI(url + params));
xhr.onload = function() {
if (xhr.status === 200) {
geojson.addData(JSON.parse(xhr.responseText));
map.fitBounds(geojson.getBounds());
}
else {
alert('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
// Bronvermelding van de WFS:
geojson.getAttribution = function() {
return 'buurtgrenzen <a title="Centraal Bureau voor de Statistiek" href="http://www.cbs.nl/">CBS</a>.';
}
// WMS van bevolkingsdichtheid van CBS
var overlay = L.WMS.overlay("http://geodata.nationaalgeoregister.nl/wijkenbuurten2013/ows", {
'transparent': true,
'srs': 'EPSG:28992',
'format': 'image/png',
'layers': 'gemeenten2013',
'styles': 'wijkenbuurten_thema_gemeenten_gemeentewijkbuurt_bevolkingsdichtheid_inwoners_per_km2'
});
overlay.addTo(map);
overlay.setOpacity(0.8);
overlay.getAttribution = function() {
return 'gemeentelijke statistieken <a title="Centraal Bureau voor de Statistiek" href="http://www.cbs.nl/">CBS</a>.';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment