Widget:Karte

   width: 100%;
   height: 600px;

} </style>

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['1641 Merian'] = L.tileLayer('https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png', { attribution: '<a href="https://mapwarper.net/maps/39783">Datensatz</a>' });

baseMaps['1800 Stockdale'] = L.tileLayer('https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png', { attribution: '<a href="https://mapwarper.net/maps/39780">Datensatz</a>' });

baseMaps['1801-1828 Tranchot/v. Müffling'] = 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['1815 Vogt/Picquet'] = L.tileLayer('https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png', { attribution: '<a href="https://mapwarper.net/maps/39826">Datensatz</a>' });

baseMaps['1836-1850 Uraufnahme'] = 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['1881-1883 Lippe'] = 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['1891-1912 Neuaufnahme'] = 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['1900 Meyer'] = L.tileLayer('https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png', { attribution: '<a href="https://mapwarper.net/maps/39790">Datensatz</a>' });

baseMaps['1936-1945 TK25'] = 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['-2016 Deutsche Grundkarte'] = 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['1988-1994 Historische Orthophotos'] = 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['1996-2015 Historische Orthophotos'] = 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>

Altes Köln

Widget:Karte