Leaflet deel 2 - NieneB/pzh_web_map GitHub Wiki

In Leaflet deel 2 gaan onze kaart omzetten naar de RDNew Projectie.

De geografische diensten in Nederland staan in de RD New projectie, maar Leaflet staat standaard in Web Mercator. De zoom levels van het Nederlandse tiling schema zijn ook wat anders van schaal.

Publieke Dienstverlening Op de Kaart (PDOK) (or Public Service on the Map) is a Dutch government initiative to provide a wide range of geographic web services. Many of these services provide data sets that are available under an open license. Typically, you would use a desktop GIS application or the OpenLayers JavaScript library to use these services. This is the where the Open Geospatial Consortium (OGC) standards for geographic web services were first implemented. Nevertheless, there are a number of ways you can just as well use Leaflet to consume these geographic web services for your online mapping application and leverage the potential of the wealth of data available from PDOK.

There is one caveat: maps from Google, Bing, OpenStreetMap come in the Web Mercator projection, whereas for the Netherlands the projection used is Rijksdriehoekstelsel (RD) or Amersfoort New. Each spatial reference system is identified by a code. The code for Web Mercator is EPSG:3857. The code for Amersfoort New is EPSG:28992. A third spatial reference system to keep in mind is WGS-84, the coordinates used by GPS systems that are recorded in longitude and latitude, identified by the code EPSG:4326.

Om toch te kunnen werken met Nederlandse data in Leaflet hebben we wat extra plug-ins nodig!

Proj4js and Proj4Leaflet:

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.js"></script>

▶️ In de <body> van je HTML bestand kunnen we naast de Leaflet bibliotheek ook deze bibliotheken toeven. Zet ze er bij!

<body>
    <h1>Voorbeeld</h1>
    <div id="map"></div>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.js"></script>
    <script>
            //...
    </script>
</body>

Nu kunnen we in ons script zelf de RD new projectie gaan definiëren want deze zit niet standaard in de Leaflet bibliotheek.

▶️ Kopieer de code in het script:

var RDnew = 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],
        bounds: L.bounds([-285401.92, 22598.08], [595401.9199999999, 903401.9199999999]),
        origin: [-285401.92, 22598.08]
    }
);

ℹ️ Met var RDnew L.Proj.CRS maken we een nieuwe Coordinate Reference System aan.

ℹ️ De string die we invullen is de officele definietie van het Rijksdriehoekstelsel. Zie de website van EPSG

ℹ️ bij resolutions staan de schalen per zoom level.

Daarna moeten we aangeven dat dit de gebruikte Coordinate Reference System is die we willen voor onze map.

▶️ Geef in de opties van de kaart aan dat de CRS RDnew is.

var map = L.map('map', {
    crs: RDnew,
    zoom: 12, //Zoom scale RD new
    center: [52.18, 5.5308] //webmercator coördinaten
});

ℹ️ Let op, de zoom levels zijn die van de RD Projectie. Maar de center coördinaten staan nog steeds in Web Mercator! Leaflet regelt dit zelf.

Nu kunnen we een achtergrond kaart van PDOK gaan gebruiken! In plaats van de Open Street Map kaart pakken we een achtergrond kaart van ons eigen Kadaster.

PDOK

Publieke Dienstverlening Op de Kaart Bij PDOK vind je open datasets van de overheid met actuele geo-informatie. Deze datasets zijn benaderbaar via geo webservices, RESTful API's en beschikbaar als downloads en linked data. Kijk ook eens op nlmaps.nl!

▶️ Voeg een nieuwe achtergrond laag toe aan je Leaflet kaart:

var pdokachtergrondkaart = 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>'
});

pdokachtergrondkaart.addTo(map);

▶️ Ververs je web pagina en zie of de PDOK kaart wordt binnengehaald!

▶️ Pas het zoom niveau zo aan dat je weer heel Zuid-Holland ziet bij het openen van de kaart. Want de zoom levels houding zich nu aan een andere schaal.

PDOK heeft een paar achtergrond kaart stijlen:

  • grijs
  • kleur
  • pastel
  • water

Zie het NGR voor de urls.

▶️ Kijk welke kaart jij het liefst wilt geburiken en pas de url aan!

➡️ Ga naar Leaflet deel 3

Workshop developed by: Niene Boeijen - voor Provincie Zuid-Holland -

⚠️ **GitHub.com Fallback** ⚠️