Created
March 25, 2016 09:20
-
-
Save emacgillavry/6569c9826e120794591e to your computer and use it in GitHub Desktop.
Leaflet.js met TMS en WMS in RD én GetFeatureInfo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Leaflet.js met TMS en WMS in RD én GetFeatureInfo</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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, | |
| center: [52.3719,4.9012], | |
| zoom: 11 | |
| }); | |
| map.attributionControl.setPrefix(''); | |
| // Gebruik referentiekaart Gemeente Amsterdam: | |
| new L.TileLayer('https://t{s}.datapunt.amsterdam.nl/tms/1.0.0/topo_RD/EPSG28992/{z}/{x}/{y}.png', { | |
| subdomains: '1234', | |
| minZoom: 5, | |
| 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); | |
| // WMS van meetbouten | |
| var overlay = L.WMS.source("https://map.datapunt.amsterdam.nl/cgi-bin/mapserv?map=/srv/mapserver/meetbouten.map", { | |
| 'transparent': true, | |
| 'srs': 'EPSG:28992', | |
| 'format': 'image/png' | |
| }); | |
| overlay.addSubLayer('meetbouten_status'); | |
| overlay.addTo(map); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment