Skip to content

Instantly share code, notes, and snippets.

@webmappergists
Last active December 7, 2015 10:51
Show Gist options
  • Save webmappergists/cf8595cad73888fbe20e to your computer and use it in GitHub Desktop.
Save webmappergists/cf8595cad73888fbe20e to your computer and use it in GitHub Desktop.
Leaflet.js showing TMS and single-tile WMS in RD and WFS in WGS-84

This example shows how to use the popular Leaflet.js v.0.7.5 interactive mapping library with OGC-compliant geographic web services (in this case TMS and single-tile WMS) that both come in the Dutch reference system: Rijksdriehoekstelsel (RD), Amersfoort New (EPSG:28992) together with a WFS that returns GeoJSON in WGS-84. Leaflet natively supports tiled WMS. Using the PTV plugin for Leaflet, we can now include single-tile WMS services too!

Cheers,

Edward @emacgillavry

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet.js met TMS én single-tile WMS in RD en 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-0.7.5/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-0.7.5/leaflet.js"></script>
<script src="https://cdn.rawgit.com/ptv-logistics/Leaflet.NonTiledLayer/ad23ce7e6650209560697ab68456a322c0043c3e/NonTiledLayer.js"></script>
<script src="https://cdn.rawgit.com/ptv-logistics/Leaflet.NonTiledLayer/53d8d7844542faa1925eac3af7c9827d88456662/NonTiledLayer.WMS.js"></script>
<script src="https://cdn.rawgit.com/emacgillavry/Proj4Leaflet/master/src/proj4leaflet.js"></script>
<script src="main.js"></script>
</body>
</html>
body {
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);
}
html, body, #map-canvas {
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-bar {
box-shadow: none;
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4);
padding: 2px;
}
.leaflet-bar a, .leaflet-bar a:hover {
background: none repeat scroll 0 0 rgba(160, 195, 63, 1);
border-bottom: 1px solid #ccc;
color: #fff;
display: block;
height: 22px;
line-height: 19px;
text-align: center;
text-decoration: none;
width: 22px;
margin: 1px;
font-size: 18px;
font-weight: bold;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
}
.leaflet-bar a:hover {
background: none repeat scroll 0 0 rgba(145, 177, 55, 1);
}
.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.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, 0.210, 0.105, 0.0525]});
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', {
tms: true,
minZoom: 3,
maxZoom: 16,
attribution: 'Kaartgegevens: <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);
// WMS van bevolkingsdichtheid van CBS
var overlay = new L.NonTiledLayer.WMS('http://geodata.nationaalgeoregister.nl/wijkenbuurten2013/ows', {
zIndex: 0,
layers: 'gemeenten2013',
opacity: 0.8,
styles: 'wijkenbuurten_thema_gemeenten_gemeentewijkbuurt_bevolkingsdichtheid_inwoners_per_km2',
format: 'image/png',
transparent: true,
srs: 'EPSG:28992',
attribution: 'gemeentelijke statistieken: <a title="Centraal Bureau voor de Statistiek" href="http://www.cbs.nl/">CBS</a>',
});
map.addLayer(overlay);
var geojson = L.geoJson(null,
{
zIndex: 1,
style: {
color: 'green',
fillColor: 'red',
weight: 2.0,
opacity: 0.6,
fillOpacity: 0.2
},
// Zoomfunctionaliteit obv dubbelklik expliciet op de laag!
onEachFeature: function (feature, layer) {
layer.on({
dblclick: function(e) {map.setView(e.latlng, map.getZoom() + 1);}
});
}
}
).addTo(map);
// WFS-endpoint voor de buurt-, wijk- en gemeentekaart 2014 van het CBS:
var url = 'http://geodata.nationaalgeoregister.nl/wijkenbuurten2014/ows?';
// Deze parameters zijn voor alle GeoJSON-requests hetzelfde:
var params = 'service=WFS&version=1.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>.';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment