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 and WMS) that come in the Dutch reference system: Rijksdriehoekstelsel (RD), Amersfoort New (EPSG:28992).
The Statistics Netherlands have calculated spatial statistics to a 100 meter grid. This is used as a guide to determine the accuracy of the scale bar.
Cheers,
Edward @emacgillavry
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Leaflet.js using TMS in EPSG:28992</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; | |
| } |
| // Definition of 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, 0.210, 0.105, 0.0525], | |
| bounds: L.bounds([-285401.92, 22598.08], [595401.9199999999, 903401.9199999999]), | |
| origin: [-285401.92, 22598.08] | |
| } | |
| ); | |
| // Thanks Per Liedman @liedman for these kludges! | |
| RD.distance = L.CRS.Earth.distance; | |
| RD.R = 6378137; | |
| var map = new L.Map('map-canvas', { | |
| crs: RD, | |
| maxZoom: 13, | |
| minzoom: 0, | |
| }); | |
| map.attributionControl.setPrefix(''); | |
| // Consume BRT-Achtergrondkaart from 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); | |
| L.control.scale({ | |
| metric: true, | |
| imperial: false | |
| }).addTo(map); | |
| // WMS van bevolkingsdichtheid van CBS | |
| var overlay = L.WMS.overlay("http://geodata.nationaalgeoregister.nl/cbsvierkanten100m/ows", { | |
| 'transparent': true, | |
| 'srs': 'EPSG:28992', | |
| 'format': 'image/png', | |
| 'layers': 'inwoners_2014_65_plus_jaar', | |
| 'styles': 'cbsvierkanten100m_i_65PL' | |
| }); | |
| 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>.'; | |
| } | |
| map.setView(new L.LatLng( 52.3719, 4.9012),9); |