Created
July 30, 2020 10:50
-
-
Save erikvullings/d4a1228e280107e34c122fb7a621344f to your computer and use it in GitHub Desktop.
Add a Dutch background map to your leaflet application.
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> | |
| <title>PDOK achtergrondkaarten</title> | |
| <!-- https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a- | |
| Zie ook de wizard hier: | |
| https://nlmaps.nl/ | |
| PDOK biedt 4 base maps aan van NL: standaard, grijs, water, en pastel. Deze kun je gratis gebruiken | |
| in je favoriete kaartengine, en op bovenstaande website vind je een wizard om de code voor leaflet, | |
| openlayers, mapbox of google maps te generen. | |
| Daarnaast kun je ook eenvoudig de volgende kaartlagen toevoegen: percelen, gebouwen, hoogte, en | |
| drone-no-fly-zones. | |
| --> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /> | |
| <style> | |
| /* Box sizing rules */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| /* Remove default padding */ | |
| ul[class], | |
| ol[class] { | |
| padding: 0; | |
| } | |
| /* Remove default margin */ | |
| body, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| p, | |
| ul[class], | |
| ol[class], | |
| li, | |
| figure, | |
| figcaption, | |
| blockquote, | |
| dl, | |
| dd { | |
| margin: 0; | |
| } | |
| /* Set core body defaults */ | |
| body { | |
| min-height: 100vh; | |
| scroll-behavior: smooth; | |
| text-rendering: optimizeSpeed; | |
| line-height: 1.5; | |
| } | |
| /* Remove list styles on ul, ol elements with a class attribute */ | |
| ul[class], | |
| ol[class] { | |
| list-style: none; | |
| } | |
| /* A elements that don't have a class get default styles */ | |
| a:not([class]) { | |
| text-decoration-skip-ink: auto; | |
| } | |
| /* Make images easier to work with */ | |
| img { | |
| max-width: 100%; | |
| /* display: block; */ | |
| } | |
| /* Natural flow and rhythm in articles by default */ | |
| article > * + * { | |
| margin-top: 1em; | |
| } | |
| /* Inherit fonts for inputs and buttons */ | |
| input, | |
| button, | |
| textarea, | |
| select { | |
| font: inherit; | |
| } | |
| /* Remove all animations and transitions for people that prefer not to see them */ | |
| @media (prefers-reduced-motion: reduce) { | |
| * { | |
| animation-duration: 0.01ms !important; | |
| animation-iteration-count: 1 !important; | |
| transition-duration: 0.01ms !important; | |
| scroll-behavior: auto !important; | |
| } | |
| } | |
| body { | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| ul.list-inline li { | |
| display: inline; | |
| } | |
| ul { | |
| list-style: none; | |
| padding-inline-start: 5px; | |
| } | |
| ul > li > span { | |
| margin: 0 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.js"></script> | |
| <div id="map" style="height: 100vh; width: 100vw; margin: 0; padding: 0; overflow: hidden;"></div> | |
| <script> | |
| const myGeojson = { | |
| type: 'FeatureCollection', | |
| features: [ | |
| { | |
| type: 'Feature', | |
| properties: {}, | |
| geometry: { | |
| type: 'Polygon', | |
| coordinates: [ | |
| [ | |
| [5.664052963256836, 51.983241434598284], | |
| [5.65272331237793, 51.98186699036], | |
| [5.64396858215332, 51.97737332064479], | |
| [5.657873153686523, 51.96246168188569], | |
| [5.688686370849609, 51.9690720630921], | |
| [5.683708190917969, 51.97864216717502], | |
| [5.673494338989258, 51.98429867069855], | |
| [5.664052963256836, 51.983241434598284], | |
| ], | |
| ], | |
| }, | |
| }, | |
| ], | |
| }; | |
| //initialize the map | |
| const map = L.map('map').setView([51.9741, 5.6688], 9); | |
| // Add the PDOK map | |
| const pdokachtergrondkaart = new L.TileLayer( | |
| 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart/EPSG:3857/{z}/{x}/{y}.png', | |
| { | |
| minZoom: 3, | |
| maxZoom: 14, | |
| attribution: 'Map data: <a href="http://www.kadaster.nl">Kadaster</a>', | |
| } | |
| ); | |
| pdokachtergrondkaart.addTo(map); | |
| const pdokachtergrondkaartGrijs = new L.TileLayer( | |
| 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartgrijs/EPSG:3857/{z}/{x}/{y}.png', | |
| { | |
| minZoom: 3, | |
| maxZoom: 14, | |
| attribution: 'Map data: <a href="http://www.kadaster.nl">Kadaster</a>', | |
| } | |
| ); | |
| const pdokachtergrondkaartPastel = new L.TileLayer( | |
| 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', | |
| { | |
| minZoom: 3, | |
| maxZoom: 14, | |
| attribution: 'Map data: <a href="http://www.kadaster.nl">Kadaster</a>', | |
| } | |
| ); | |
| const pdokachtergrondkaartWater = new L.TileLayer( | |
| 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartwater/EPSG:3857/{z}/{x}/{y}.png', | |
| { | |
| minZoom: 3, | |
| maxZoom: 14, | |
| attribution: 'Map data: <a href="http://www.kadaster.nl">Kadaster</a>', | |
| } | |
| ); | |
| // ADD a WMS layer | |
| const cbs = L.tileLayer.wms('https://geodata.nationaalgeoregister.nl/wijkenbuurten2018/wms', { | |
| layers: 'cbs_buurten_2018', | |
| styles: 'wijkenbuurten2018:wijkenbuurten_thema_buurten_default', | |
| srs: 'EPSG:28992', | |
| format: 'image/png', | |
| transparent: true, | |
| }); | |
| // Create a marker style | |
| const geojsonMarkerOptions = { | |
| radius: 10, | |
| fillColor: '#ff7800', | |
| color: '#000', | |
| weight: 1, | |
| opacity: 1, | |
| fillOpacity: 0.8, | |
| }; | |
| //create a empty geojson layer | |
| const geojson = L.geoJson(myGeojson, { | |
| pointToLayer: (feature, latlng) => L.circleMarker(latlng, geojsonMarkerOptions), | |
| }).addTo(map); | |
| // Hash in URL | |
| const hash = new L.Hash(map); | |
| // Add the layer scale | |
| L.control.scale({ imperial: false, metric: true }).addTo(map); | |
| // Add a layer selection control | |
| L.control | |
| .layers( | |
| { | |
| standaard: pdokachtergrondkaart, | |
| grijs: pdokachtergrondkaartGrijs, | |
| water: pdokachtergrondkaartWater, | |
| pastel: pdokachtergrondkaartPastel, | |
| }, | |
| { | |
| cbs: cbs, | |
| } | |
| ) | |
| .addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment