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>.'; | |
| } |