Widget:Karte

<script type="text/javascript" src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"> <script type="text/javascript" src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script> <script type="text/javascript" src="https://rawgithub.com/kartena/Proj4Leaflet/master/lib/proj4-compressed.js"></script> <script type="text/javascript" src="https://rawgithub.com/kartena/Proj4Leaflet/master/src/proj4leaflet.js"></script>

<style type="text/css"> .ak-map {

   height: 500px;
   width: 80%;

} </style>

<script type="text/javascript"> (function () {

function initMap(mapElement) { if (mapElement.dataset.initialised) { return; } mapElement.dataset.initialised = true;

var map = L.map(mapElement).setView([50.938056, 6.956944], 14);

map.on('zoom', function(event) { console.log("Zoom:", map.getZoom()); });

var baseMaps = {};

baseMaps['Tranchot 1801-1828'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_tranchot?', { layers: 'nw_tranchot', minNativeZoom: 12, minZoom: 10, maxZoom: 16, version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html">Datensatz</a>' }).addTo(map);

baseMaps['Uraufnahme 1836-1850'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?', { layers: 'nw_uraufnahme_gk', minNativeZoom: 14, minZoom: 12, maxZoom: 17, version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html">Datensatz</a>' });

// Nur für die Gegend um Detmold vorhanden. /*baseMaps['Lippe 1881-1883'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_lippe?', { layers: 'nw_lippe', minZoom: 12, version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1881/index.html">Datensatz</a>' });*/

baseMaps['Neuaufnahme 1891-1912'] = L.layerGroup([ // Since this map works well with transparency, we can put OSM below it as a base layer. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 10, maxZoom: 17, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }), L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?', { layers: 'nw_neuaufnahme', minNativeZoom: 12, minZoom: 10, maxZoom: 17, transparent: true, // Transparency only works with PNGs. format: 'image/png; mode=8bit', // TODO Figure out how to bound these maps correctly to avoid unnecessary requests. //bounds: [ // [637303, 6.4724e+06], // [1.06105e+06, 6.90972e+06] //], version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html">Datensatz</a>' }) ]);

baseMaps['TK25 1936-1945'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?', { layers: 'nw_tk25_1936-1945', minNativeZoom: 15, minZoom: 13, maxZoom: 17, version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html">Datensatz</a>' });

baseMaps['Deutsche Grundkarte -2016'] = L.layerGroup([ // Since this map works well with transparency, we can put OSM below it as a base layer. The only downside is that you see duplicate layers, in some cases on top of each other which makes them harder to read. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 13, maxZoom: 18, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }), L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dgk5?', { layers: 'nw_dgk5_grundriss', minNativeZoom: 16, minZoom: 13, maxZoom: 18, transparent: true, // Transparency only works with PNGs. format: 'image/png; mode=8bit', version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html">Datensatz</a>' }) ]);

baseMaps['Historische Orthophotos 1988-1994'] = L.layerGroup([ L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?', { layers: 'nw_histortho_1988-1994', minNativeZoom: 15, minZoom: 13, maxZoom: 18, version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html">Datensatz</a>' }), // Add an overlay to show streets etc. // This overlay was made for the current photos. This is not ideal since it can show roads that didn't exist at the time the photos were taken but it's probably still more helpful than it is confusing. L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dop_overlay?', { // TODO These layers don't work very well in a WMS because it's not meant to be displayed as tiles so labels are cut off at the tile borders or appear too many times (lots of tiles being displayed). Ideally we'd load this via WMTS. layers: 'nw_dop_overlay_Stadt-Bahn-Haltestellen,nw_dop_overlay_Bahnhoefe,nw_dop_overlay_geonamen,nw_dop_overlay_autobahn,nw_dop_overlay_autobahn_beschriftung_1,nw_dop_overlay_autobahn_beschriftung_2,nw_dop_overlay_bundesstrassen,nw_dop_overlay_bundesstrassen_beschriftung_1,nw_dop_overlay_bundesstrassen_beschriftung_2,nw_dop_overlay_landstrassen,nw_dop_overlay_landstrassen_beschriftung,nw_dop_overlay_kreisstrassen,nw_dop_overlay_kreisstrassen_beschriftung,nw_dop_overlay_ortsstrassen,nw_dop_overlay_ortsstrassen_beschriftung,nw_dop_overlay_unbefahrbare_wege,nw_dop_overlay_strassen_bau,nw_dop_overlay_bab_anschlussstellen,nw_dop_overlay_gem_namen,nw_dop_overlay_krs_namen,nw_dop_overlay_faehren', // nw_dop_overlay_hausnummern, // TODO Layer not available in coordinate systems supported natively by Leaflet. minZoom: 13, maxZoom: 18, bounds: [ [52.57192795134163, 9.683550865862706], [50.265130303028236, 5.532200974503678] ], // Since this is an overlay it doesn't make much sense without transparency. transparent: true, // Transparency only works with PNGs. format: 'image/png; mode=8bit', version: '1.3.0' }) ]);

// Funktioniert nicht (liefert nur weiße Tiles). /*baseMaps['Historische Orthophotos 1996-2015'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_hist_dop?', { layers: 'nw_hist_dop_2015', //minNativeZoom: 15, //minZoom: 13, //maxZoom: 18, version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html">Datensatz</a>' });*/

// Funktioniert nicht, ich werde auf die Capabilities-XML weitergeleitet. Ich nehme an, der Service unterstützt GetTile nicht, sondern nur Ressourcen-URLs. /*baseMaps['Digitale Orthophotos'] = L.tileLayer.wmts('https://www.wmts.nrw.de/geobasis/wmts_nw_dop', { layer: 'nw_dop', format: 'image/png', style: 'normal', tilematrixSet: 'EPSG_3857_16' //minNativeZoom: 15, //minZoom: 13, //maxZoom: 18, //version: '1.0.0', // Die WMTS-Library schickt die attribution als Parameter weiter an den Service. Nicht toll. //attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html">Datensatz</a>' });*/

// Liefert mir Server Errors mit EPSG_3857_16 und für EPSG_25832_16 müsste ich das Koordinatensystem der Map generell ändern (was nach ein paar Versuchen auch nicht klappte). Schade, denn ein Tile Service ist viel performanter als ein WMS. /*baseMaps['Digitale Orthophotos_'] = L.tileLayer('https://www.wmts.nrw.de/geobasis/wmts_nw_dop/tiles/nw_dop/EPSG_25832_16/{z}/{y}/{x}.png', {//EPSG_3857_16 maxNativeZoom: 16, //minNativeZoom: 15, //minZoom: 13, //maxZoom: 18, //version: '1.0.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html">Datensatz</a>' });*/

var crsEPSG25832 = new L.Proj.CRS/*L.CRS.proj4js*/('EPSG:25832', '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs', new L.Transformation(0.5 / (Math.PI * L.Projection.Mercator.R_MAJOR), 0.5, -0.5 / (Math.PI * L.Projection.Mercator.R_MINOR), 0.5));

baseMaps['Digitale Orthophotos'] = L.layerGroup([ L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dop?', { layers: 'nw_dop_rgb', //crs: crsEPSG25832,//L.CRS.EPSG4326, minZoom: 7, maxZoom: 18, bounds: [ [52.57192795134163, 9.683550865862706], [50.265130303028236, 5.532200974503678] ], version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html">Datensatz</a>' }), // Add an overlay to show streets etc. L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dop_overlay?', { // TODO These layers don't work very well in a WMS because it's not meant to be displayed as tiles so labels are cut off at the tile borders or appear too many times (lots of tiles being displayed). Ideally we'd load this via WMTS. layers: 'nw_dop_overlay_Stadt-Bahn-Haltestellen,nw_dop_overlay_Bahnhoefe,nw_dop_overlay_geonamen,nw_dop_overlay_autobahn,nw_dop_overlay_autobahn_beschriftung_1,nw_dop_overlay_autobahn_beschriftung_2,nw_dop_overlay_bundesstrassen,nw_dop_overlay_bundesstrassen_beschriftung_1,nw_dop_overlay_bundesstrassen_beschriftung_2,nw_dop_overlay_landstrassen,nw_dop_overlay_landstrassen_beschriftung,nw_dop_overlay_kreisstrassen,nw_dop_overlay_kreisstrassen_beschriftung,nw_dop_overlay_ortsstrassen,nw_dop_overlay_ortsstrassen_beschriftung,nw_dop_overlay_unbefahrbare_wege,nw_dop_overlay_strassen_bau,nw_dop_overlay_bab_anschlussstellen,nw_dop_overlay_gem_namen,nw_dop_overlay_krs_namen,nw_dop_overlay_faehren', // nw_dop_overlay_hausnummern, // TODO Layer not available in coordinate systems supported natively by Leaflet. //crs: crsEPSG25832,//L.CRS.EPSG4326, minZoom: 7, maxZoom: 18, bounds: [ [52.57192795134163, 9.683550865862706], [50.265130303028236, 5.532200974503678] ], // Since this is an overlay it doesn't make much sense without transparency. transparent: true, // Transparency only works with PNGs. format: 'image/png; mode=8bit', version: '1.3.0' }), // Add layer for house numbers separately because we have to use a different coordinate system to display them and that system isn't implemented cleanly in the example I found so it would mess with the other overlay layers if I used it there too. L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dop_overlay?', { layers: 'nw_dop_overlay_hausnummern', crs: crsEPSG25832,//L.CRS.EPSG4326, // EPSG4326 is claimed to be supported by the capabilites document but it didn't work. // TODO Do I want to adjust the zoom levels or the bounds for this? Will the bounds relate to the CRS? minZoom: 7, maxZoom: 18, bounds: [ [52.57192795134163, 9.683550865862706], [50.265130303028236, 5.532200974503678] ], // Since this is an overlay it doesn't make much sense without transparency. transparent: true, // Transparency only works with PNGs. format: 'image/png; mode=8bit', version: '1.3.0' }) ]);

baseMaps['OpenStreetMap'] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' });

L.control.layers(baseMaps).addTo(map); }

document.addEventListener("DOMContentLoaded", function(event) { var mapElements = document.getElementsByClassName("ak-map"); for(var i = 0; i < mapElements.length; i++) { initMap(mapElements.item(i)); } }); })(); </script>