Widget:Karte: Unterschied zwischen den Versionen
Simon (Diskussion | Beiträge) (Meyer-Karte hinzugefügt) |
Simon (Diskussion | Beiträge) (außerdem für bessere Übersicht Jahreszahlen in Ebenenwähler vorgestellt) |
||
| Zeile 30: | Zeile 30: | ||
var baseMaps = {}; | var baseMaps = {}; | ||
| − | baseMaps['<span title="Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian">Merian | + | baseMaps['<span title="Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian">1641 Merian</span>'] = L.tileLayer('https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png', { |
attribution: '<a href="https://mapwarper.net/maps/39783">Datensatz</a>' | attribution: '<a href="https://mapwarper.net/maps/39783">Datensatz</a>' | ||
}); | }); | ||
| Zeile 38: | Zeile 38: | ||
}); | }); | ||
| − | baseMaps['<span title="1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling"> | + | baseMaps['<span title="1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling">1801-1828 Tranchot/v. Müffling</span>'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_tranchot?', { |
layers: 'nw_tranchot', | layers: 'nw_tranchot', | ||
minNativeZoom: 12, | minNativeZoom: 12, | ||
| Zeile 47: | Zeile 47: | ||
}).addTo(map); | }).addTo(map); | ||
| − | baseMaps['<span title="1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme"> | + | baseMaps['<span title="Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet">1815 Vogt/Picquet</span>'] = L.tileLayer('https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png', { |
| + | attribution: '<a href="https://mapwarper.net/maps/39826">Datensatz</a>' | ||
| + | }); | ||
| + | |||
| + | baseMaps['<span title="1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme">1836-1850 Uraufnahme</span>'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?', { | ||
layers: 'nw_uraufnahme_gk', | layers: 'nw_uraufnahme_gk', | ||
minNativeZoom: 14, | minNativeZoom: 14, | ||
| Zeile 57: | Zeile 61: | ||
// Nur für die Gegend um Detmold vorhanden. | // Nur für die Gegend um Detmold vorhanden. | ||
| − | /*baseMaps['<span title="1881 - 1883: Karten des Fürstenthums Lippe 1:25.000"> | + | /*baseMaps['<span title="1881 - 1883: Karten des Fürstenthums Lippe 1:25.000">1881-1883 Lippe</span>'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_lippe?', { |
layers: 'nw_lippe', | layers: 'nw_lippe', | ||
minZoom: 12, | minZoom: 12, | ||
| Zeile 64: | Zeile 68: | ||
});*/ | });*/ | ||
| − | baseMaps['<span title="1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme"> | + | baseMaps['<span title="1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme">1891-1912 Neuaufnahme</span>'] = L.layerGroup([ |
// Since this map works well with transparency, we can put OSM below it as a base layer. | // 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', { | L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | ||
| Zeile 93: | Zeile 97: | ||
}); | }); | ||
| − | baseMaps['<span title="Topographische Karten - ältere Auflagejahre"> | + | baseMaps['<span title="Topographische Karten - ältere Auflagejahre">1936-1945 TK25</span>'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?', { |
layers: 'nw_tk25_1936-1945', | layers: 'nw_tk25_1936-1945', | ||
minNativeZoom: 15, | minNativeZoom: 15, | ||
| Zeile 102: | Zeile 106: | ||
}); | }); | ||
| − | baseMaps['<span title="Deutsche Grundkarte 1:5.000 (DGK5) – historisch">Deutsche Grundkarte | + | baseMaps['<span title="Deutsche Grundkarte 1:5.000 (DGK5) – historisch">-2016 Deutsche Grundkarte</span>'] = 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. | // 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', { | L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | ||
| Zeile 122: | Zeile 126: | ||
]); | ]); | ||
| − | baseMaps[' | + | baseMaps['1988-1994 Historische Orthophotos'] = L.layerGroup([ |
L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?', { | L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?', { | ||
layers: 'nw_histortho_1988-1994', | layers: 'nw_histortho_1988-1994', | ||
| Zeile 152: | Zeile 156: | ||
// Funktioniert nicht (liefert nur weiße Tiles). | // Funktioniert nicht (liefert nur weiße Tiles). | ||
| − | /*baseMaps[' | + | /*baseMaps['1996-2015 Historische Orthophotos'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_hist_dop?', { |
layers: 'nw_hist_dop_2015', | layers: 'nw_hist_dop_2015', | ||
//minNativeZoom: 15, | //minNativeZoom: 15, | ||
Version vom 7. Mai 2019, 20:20 Uhr
<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 {
width: 100%; height: 600px;
} </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['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['Stockdale 1800'] = 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['Meyer 1900'] = 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>