Cookies helfen uns bei der Bereitstellung von Altes Köln. Durch die Nutzung von Altes Köln erklärst du dich damit einverstanden, dass wir Cookies speichern. Weitere Informationen

Altes Köln

Widget:Karte: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
(Karte mit besserer Ebenensteuerung (inkl. Basiskarten) und Transparenz-Slider)
Zeile 1: Zeile 1:
 
<script type="text/javascript" src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
 
<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">
 
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css">
−
<!-- TODO rawgithub service is deprecated. host these ourselves? -->
 
−
<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">
 
<style type="text/css">
 +
.ak-map-container {
 +
display: flex;
 +
}
 +
 
.ak-map {
 
.ak-map {
−
    width: 100%;
+
flex-grow: 1;
−
    height: 600px;
+
height: 600px;
 +
}
 +
 
 +
.ak-map-sidebar {
 +
box-sizing: border-box;
 +
width: 20vw;
 +
min-width: 300px;
 +
height: 600px;
 +
margin: 0 1em 0 2em;
 +
padding: 1em;
 +
border: 1px solid #ced4da;
 +
border-radius: 4px;
 +
box-shadow: 0px 3px 12px rgba(0,0,0,0.1);
 +
overflow-y: auto;
 +
 
 +
font-family: Arial, sans-serif;
 +
color: #495057;
 +
}
 +
 
 +
.ak-map-container fieldset {
 +
border: none;
 +
padding: 0;
 +
margin-bottom: 1.5em;
 +
}
 +
 
 +
.ak-map-container fieldset legend {
 +
margin-bottom: 0.75em;
 +
padding: 0;
 +
 
 +
font-weight: 600;
 +
}
 +
 
 +
.ak-map-container label,
 +
.ak-map-container input {
 +
cursor: pointer;
 +
}
 +
 
 +
.ak-map-layers {
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
.ak-map-layers li {
 +
border-left-width: 0.5em;
 +
border-left-style: solid;
 +
padding-left: 0.5em;
 +
}
 +
 
 +
.ak-map-layers li+li {
 +
padding-top: 0.5em;
 +
}
 +
 
 +
.ak-map-layer-mittelalter {
 +
border-color: #e03131;
 +
}
 +
 
 +
.ak-map-layer-franzoesisch {
 +
border-color: #3b5bdb;
 +
}
 +
 
 +
.ak-map-layer-preussisch {
 +
border-color: #212529;
 +
}
 +
 
 +
.ak-map-layer-nachkriegszeit {
 +
border-color: #adb5bd;
 +
}
 +
 
 +
 
 +
/* Opacity slider */
 +
 
 +
input[type=range].ak-map-opacity-slider {
 +
-webkit-appearance: none;
 +
width: 150px;
 +
height: 40px;
 +
background: none;
 +
}
 +
 
 +
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {
 +
width: 100%;
 +
height: 11.4px;
 +
border: 1px solid #adb5bd;
 +
border-radius: 4px;
 +
box-shadow: 0px 3px 12px rgba(0,0,0,0.5);
 +
background: linear-gradient(to right, rgb(255,255,255), #ffc078);
 +
cursor: pointer;
 +
}
 +
 
 +
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {
 +
width: 26px;
 +
height: 26px;
 +
margin-top: -8.5px;
 +
border: 1px solid #adb5bd;
 +
border-radius: 15px;
 +
box-shadow: 0px 3px 12px rgba(0,0,0,0.5);
 +
background: #ffffff;
 +
-webkit-appearance: none;
 +
cursor: pointer;
 +
}
 +
 
 +
input[type=range].ak-map-opacity-slider::-moz-range-track {
 +
width: 100%;
 +
height: 11.4px;
 +
border: 1px solid #adb5bd;
 +
border-radius: 4px;
 +
box-shadow: 0px 3px 12px rgba(0,0,0,0.5);
 +
background: linear-gradient(to right, rgb(255,255,255), #ffc078);
 +
cursor: pointer;
 
}
 
}
 +
 +
input[type=range].ak-map-opacity-slider::-moz-range-thumb {
 +
width: 26px;
 +
height: 26px;
 +
border: 1px solid #adb5bd;
 +
border-radius: 15px;
 +
box-shadow: 0px 3px 12px rgba(0,0,0,0.5);
 +
background: #ffffff;
 +
cursor: pointer;
 +
}
 +
 +
input[type=range].ak-map-opacity-slider::-ms-track {
 +
width: 100%;
 +
height: 11.4px;
 +
border: 1px solid #adb5bd;
 +
border-radius: 4px;
 +
background: linear-gradient(to right, rgb(255,255,255), #ffc078);
 +
box-sizing: border-box;
 +
color: transparent;
 +
cursor: pointer;
 +
}
 +
 +
input[type=range].ak-map-opacity-slider::-ms-thumb {
 +
width: 26px;
 +
height: 26px;
 +
margin-top: 0px;
 +
border: 1px solid #adb5bd;
 +
border-radius: 15px;
 +
box-shadow: none;
 +
background: #ffffff;
 +
cursor: pointer;
 +
}
 +
 +
input[type=range].ak-map-opacity-slider::-ms-fill-lower,
 +
input[type=range].ak-map-opacity-slider::-ms-fill-upper {
 +
background: transparent;
 +
}
 +
 
</style>
 
</style>
  
Zeile 16: Zeile 162:
 
(function () {
 
(function () {
  
−
function initMap(mapElement) {
+
L.Control.OpacitySlider = L.Control.extend({
−
if (mapElement.dataset.initialised) {
+
options: {
−
return;
+
position: "topright",
−
}
+
initialValue: 1,
−
mapElement.dataset.initialised = true;
+
className: "ak-map-opacity-slider",
 +
label: "Transparenz",
 +
opacityLayer: undefined
 +
},
 +
 
 +
onAdd: function(map) {
 +
var sliderContainerElement = L.DomUtil.create("div");
  
−
var map = L.map(mapElement).setView([50.938056, 6.956944], 14);
+
var sliderElement = L.DomUtil.create("input", this.options.className);
 +
sliderElement.setAttribute("type", "range");
 +
sliderElement.setAttribute("min", "0");
 +
sliderElement.setAttribute("max", "1");
 +
sliderElement.setAttribute("step", "0.1");
 +
sliderElement.setAttribute("value", this.options.initialValue);
 +
sliderElement.setAttribute("title", this.options.label);
 +
sliderElement.setAttribute("aria-label", this.options.label);
  
−
map.on('zoom', function(event) {
+
L.DomEvent.on(sliderElement, "input", this._setOpacity.bind(this));
−
console.log("Zoom:", map.getZoom());
+
// Necessary for IE10/11 support
−
});
+
L.DomEvent.on(sliderElement, "change", this._setOpacity.bind(this));
 +
// Prevent dragging of slider handle from moving the map.
 +
L.DomEvent.on(sliderElement, "mousedown", function(event) {
 +
map.dragging.disable();
 +
});
 +
L.DomEvent.on(sliderElement, "mouseup", function(event) {
 +
map.dragging.enable();
 +
});
  
−
var baseMaps = {};
+
this._sliderElement = sliderElement;
 +
this._opacityLayer = this.options.opacityLayer;
  
−
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', {
+
sliderContainerElement.appendChild(sliderElement);
−
attribution: '<a href="https://mapwarper.net/maps/39783">Datensatz</a>'
+
return sliderContainerElement;
−
});
+
},
  
−
baseMaps['<span title="A Plan of the City of Cologne, 1800, John Stockdale">1800 Stockdale</span>'] = L.tileLayer('https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png', {
+
_setOpacity: function() {
−
attribution: '<a href="https://mapwarper.net/maps/39780">Datensatz</a>'
+
if (this._opacityLayer) {
−
});
+
this._opacityLayer.setOpacity(this._sliderElement.value);
 +
}
 +
},
  
−
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?', {
+
setOpacityLayer: function(layer) {
−
layers: 'nw_tranchot',
+
this._opacityLayer = layer;
−
minNativeZoom: 12,
+
this._setOpacity();
−
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['<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', {
+
L.control.opacitySlider = function(opts) {
−
attribution: '<a href="https://mapwarper.net/maps/39826">Datensatz</a>'
+
return new L.Control.OpacitySlider(opts);
−
});
+
}
  
−
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?', {
+
function initMap(mapContainerElement) {
−
layers: 'nw_uraufnahme_gk',
+
if (mapContainerElement.dataset.initialised) {
−
minNativeZoom: 14,
+
return;
−
minZoom: 12,
+
}
−
maxZoom: 17,
+
mapContainerElement.dataset.initialised = true;
−
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.
+
var mapElement = mapContainerElement.getElementsByClassName("ak-map")[0];
−
/*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',
 
−
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['<span title="1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme">1891-1912 Neuaufnahme</span>'] = L.layerGroup([
+
var mapView = L.map(mapElement).setView([50.938056, 6.956944], 14);
−
// 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: '&copy; <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['<span title="Meyers Stadtplan von Köln um 1900">1900 Meyer</span>'] = L.tileLayer('https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png', {
+
mapView.on('zoom', function(event) {
−
attribution: '<a href="https://mapwarper.net/maps/39790">Datensatz</a>'
+
// For testing purposes and to figure out good min/max zoom levels for new maps.
 +
console.log("Zoom:", mapView.getZoom());
 
});
 
});
  
−
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?', {
+
// Base layers
−
layers: 'nw_tk25_1936-1945',
+
var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
−
minNativeZoom: 15,
+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
−
minZoom: 13,
+
});
−
maxZoom: 17,
+
var dopLayer = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dop?', {
 +
layers: 'nw_dop_rgb',
 +
bounds: [
 +
[52.57192795134163, 9.683550865862706],
 +
[50.265130303028236, 5.532200974503678]
 +
],
 
version: '1.3.0',
 
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>'
+
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>'
 
});
 
});
  
−
baseMaps['<span title="Deutsche Grundkarte 1:5.000 (DGK5) – historisch">-2016 Deutsche Grundkarte</span>'] = L.layerGroup([
+
var eras = {
−
// 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.
+
mittelalter: {
−
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+
"class": "ak-map-layer-mittelalter",
−
minZoom: 13,
+
tooltip: "Mittelalter / Freie Reichsstadt / Hansestadt Köln"
−
maxZoom: 18,
+
},
−
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+
franzoesisch: {
−
}),
+
"class": "ak-map-layer-franzoesisch",
−
L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dgk5?', {
+
tooltip: "Französisches Köln"
−
layers: 'nw_dgk5_grundriss',
+
},
−
minNativeZoom: 16,
+
preussisch: {
−
minZoom: 13,
+
"class": "ak-map-layer-preussisch",
−
maxZoom: 18,
+
tooltip: "Preußisches Köln"
−
transparent: true,
+
},
−
// Transparency only works with PNGs.
+
nachkriegszeit: {
−
format: 'image/png; mode=8bit',
+
"class": "ak-map-layer-nachkriegszeit",
−
version: '1.3.0',
+
tooltip: "Kriegs-/Nachkriegszeit bis heute"
−
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([
+
// Historical maps
−
L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?', {
+
var maps = [
−
layers: 'nw_histortho_1988-1994',
+
{
−
minNativeZoom: 15,
+
id: "merian",
−
minZoom: 13,
+
label: "1641 Merian",
−
maxZoom: 18,
+
tooltip: "Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian",
−
version: '1.3.0',
+
era: eras.mittelalter,
−
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>'
+
layer: L.tileLayer('https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png', {
−
}),
+
attribution: '<a href="https://mapwarper.net/maps/39783">Datensatz</a>'
−
// Add an overlay to show streets etc.
+
// TODO minZoom/maxZoom
−
// 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',
+
id: "stockdale",
−
// nw_dop_overlay_hausnummern, // TODO Layer not available in coordinate systems supported natively by Leaflet.
+
label: "1800 Stockdale",
−
minZoom: 13,
+
tooltip: "A Plan of the City of Cologne, 1800, John Stockdale",
−
maxZoom: 18,
+
era: eras.franzoesisch,
−
bounds: [
+
layer: L.tileLayer('https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png', {
−
[52.57192795134163, 9.683550865862706],
+
attribution: '<a href="https://mapwarper.net/maps/39780">Datensatz</a>'
−
[50.265130303028236, 5.532200974503678]
+
// TODO minZoom/maxZoom
−
],
+
})
−
// Since this is an overlay it doesn't make much sense without transparency.
+
},
−
transparent: true,
+
{
−
// Transparency only works with PNGs.
+
id: "tranchot",
−
format: 'image/png; mode=8bit',
+
label: "1801-1828 Tranchot/v. Müffling",
−
version: '1.3.0'
+
tooltip: "1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling",
−
})
+
era: eras.franzoesisch,
−
]);
+
layer: 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>'
 +
})
 +
},
 +
{
 +
id: "vogt",
 +
label: "1815 Vogt/Picquet",
 +
tooltip: "Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet",
 +
era: eras.franzoesisch,
 +
layer: L.tileLayer('https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png', {
 +
attribution: '<a href="https://mapwarper.net/maps/39826">Datensatz</a>'
 +
// TODO minZoom/maxZoom
 +
})
 +
},
 +
{
 +
id: "uraufnahme",
 +
label: "1836-1850 Uraufnahme",
 +
tooltip: "1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme",
 +
era: eras.preussisch,
 +
layer: 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>'
 +
})
 +
},
 +
{
 +
id: "neuaufnahme",
 +
label: "1891-1912 Neuaufnahme",
 +
tooltip: "1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme",
 +
era: eras.preussisch,
 +
layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?', {
 +
layers: 'nw_neuaufnahme',
 +
minNativeZoom: 12,
 +
minZoom: 10,
 +
maxZoom: 17,
 +
// TODO Do I want to provide a way to turn transparency off for these ones? In addition to having the opacity slider it might be nice to be able to just see the map on its own without the base layer backdrop.
 +
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>'
 +
})
 +
},
 +
{
 +
id: "meyer",
 +
label: "1900 Meyer",
 +
tooltip: "Meyers Stadtplan von Köln um 1900",
 +
era: eras.preussisch,
 +
layer: L.tileLayer('https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png', {
 +
attribution: '<a href="https://mapwarper.net/maps/39790">Datensatz</a>'
 +
// TODO minZoom/maxZoom
 +
})
 +
},
 +
{
 +
id: "tk25",
 +
label: "1936-1945 TK25",
 +
tooltip: "Topographische Karten - ältere Auflagejahre",
 +
era: eras.nachkriegszeit,
 +
layer: 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>'
 +
})
 +
},
 +
{
 +
id: "hop",
 +
label: "1988-1994 Historische Orthophotos",
 +
tooltip: "1988-1994 Historische Orthophotos",
 +
era: eras.nachkriegszeit,
 +
layer: 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>'
 +
})
 +
},
 +
{
 +
id: "dgk",
 +
label: "-2016 Deutsche Grundkarte",
 +
tooltip: "Deutsche Grundkarte 1:5.000 (DGK5) – historisch",
 +
era: eras.nachkriegszeit,
 +
layer: 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>'
 +
})
 +
}
 +
];
  
−
// Funktioniert nicht (liefert nur weiße Tiles).
+
// Keeping track of selected layers. Set initially selected ones.
−
/*baseMaps['1996-2015 Historische Orthophotos'] = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_hist_dop?', {
+
var currentMap = maps[0];
−
layers: 'nw_hist_dop_2015',
+
var currentBaseLayer = osmLayer;
−
//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.
+
// Switching between base layers
−
/*baseMaps['Digitale Orthophotos'] = L.tileLayer.wmts('https://www.wmts.nrw.de/geobasis/wmts_nw_dop', {
+
function baseMapSwitcher() {
−
layer: 'nw_dop',
+
if (this.checked) {
−
format: 'image/png',
+
currentBaseLayer.remove();
−
style: 'normal',
+
if (this.value === "osm") {
−
tilematrixSet: 'EPSG_3857_16'
+
currentBaseLayer = osmLayer;
−
//minNativeZoom: 15,
+
} else {
−
//minZoom: 13,
+
currentBaseLayer = dopLayer;
−
//maxZoom: 18,
+
}
−
//version: '1.0.0',
+
// TODO Funktioniert nicht.
−
// Die WMTS-Library schickt die attribution als Parameter weiter an den Service. Nicht toll.
+
currentBaseLayer.options.minZoom = currentMap.layer.minZoom;
−
//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>'
+
currentBaseLayer.options.maxZoom = currentMap.layer.maxZoom;
−
});*/
+
currentBaseLayer.addTo(mapView);
 +
currentBaseLayer.bringToBack();
 +
}
 +
}
 +
mapContainerElement.querySelector(".ak-base-map-selection--osm").addEventListener("change", baseMapSwitcher);
 +
mapContainerElement.querySelector(".ak-base-map-selection--dop").addEventListener("change", baseMapSwitcher);
  
−
// 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.
+
// Setting opacity
−
/*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
+
var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentMap.layer }).addTo(mapView);
−
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));
+
// Render radio buttons for historical map switching.
 +
var layersListElement = mapContainerElement.querySelector(".ak-map-layers");
 +
maps.forEach(function(map) {
 +
var listItemElement = L.DomUtil.create("li", map.era["class"]);
 +
listItemElement.setAttribute("title", map.era.tooltip);
 +
layersListElement.appendChild(listItemElement);
 +
var labelElement = L.DomUtil.create("label");
 +
labelElement.setAttribute("title", map.tooltip);
 +
listItemElement.appendChild(labelElement);
 +
var inputElement = L.DomUtil.create("input");
 +
inputElement.setAttribute("type", "radio");
 +
inputElement.setAttribute("name", "ak-map-layer-selection");
 +
inputElement.setAttribute("value", map.id);
 +
labelElement.appendChild(inputElement);
 +
labelElement.appendChild(document.createTextNode(map.label));
  
−
baseMaps['Digitale Orthophotos'] = L.layerGroup([
+
if (map === currentMap) {
−
L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dop?', {
+
inputElement.checked = true;
−
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', {
+
inputElement.addEventListener("change", function() {
−
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+
if (inputElement.checked) {
 +
currentMap.layer.remove();
 +
currentMap = map;
 +
opacitySliderControl.setOpacityLayer(currentMap.layer);
 +
currentMap.layer.addTo(mapView);
 +
// TODO check zoom range and bounds of map, adjust mapView accordingly.
 +
}
 +
});
 
});
 
});
  
−
L.control.layers(baseMaps).addTo(map);
+
// Show layers.
 +
currentBaseLayer.addTo(mapView);
 +
currentMap.layer.addTo(mapView);
 
}
 
}
  
 +
// Initialise all found maps when DOM is ready.
 
document.addEventListener("DOMContentLoaded", function(event) {
 
document.addEventListener("DOMContentLoaded", function(event) {
−
var mapElements = document.getElementsByClassName("ak-map");
+
var mapContainerElements = document.getElementsByClassName("ak-map-container");
−
for(var i = 0; i < mapElements.length; i++) {
+
for(var i = 0; i < mapContainerElements.length; i++) {
−
initMap(mapElements.item(i));
+
initMap(mapContainerElements.item(i));
 
}
 
}
 
});
 
});
Zeile 257: Zeile 477:
 
</script>
 
</script>
  
−
<div class="ak-map"></div>
+
<div class="ak-map-container">
 +
<div class="ak-map"></div>
 +
<form class="ak-map-sidebar" autocomplete="off">
 +
<fieldset>
 +
<legend>Basiskarte</legend>
 +
<label><input type="radio" class="ak-base-map-selection--osm" name="ak-base-map-selection" value="osm" checked>OpenStreetMap</label>
 +
<label><input type="radio" class="ak-base-map-selection--dop" name="ak-base-map-selection" value="dop">Digitale Orthophotos</label>
 +
</fieldset>
 +
<fieldset>
 +
<legend>Historische Karten</legend>
 +
<ul class="ak-map-layers">
 +
</ul>
 +
</fieldset>
 +
</form>
 +
</div>

Version vom 18. Mai 2019, 11:36 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">

<style type="text/css"> .ak-map-container { display: flex; }

.ak-map { flex-grow: 1; height: 600px; }

.ak-map-sidebar { box-sizing: border-box; width: 20vw; min-width: 300px; height: 600px; margin: 0 1em 0 2em; padding: 1em; border: 1px solid #ced4da; border-radius: 4px; box-shadow: 0px 3px 12px rgba(0,0,0,0.1); overflow-y: auto;

font-family: Arial, sans-serif; color: #495057; }

.ak-map-container fieldset { border: none; padding: 0; margin-bottom: 1.5em; }

.ak-map-container fieldset legend { margin-bottom: 0.75em; padding: 0;

font-weight: 600; }

.ak-map-container label, .ak-map-container input { cursor: pointer; }

.ak-map-layers { list-style: none; margin: 0; padding: 0; }

.ak-map-layers li { border-left-width: 0.5em; border-left-style: solid; padding-left: 0.5em; }

.ak-map-layers li+li { padding-top: 0.5em; }

.ak-map-layer-mittelalter { border-color: #e03131; }

.ak-map-layer-franzoesisch { border-color: #3b5bdb; }

.ak-map-layer-preussisch { border-color: #212529; }

.ak-map-layer-nachkriegszeit { border-color: #adb5bd; }


/* Opacity slider */

input[type=range].ak-map-opacity-slider { -webkit-appearance: none; width: 150px; height: 40px; background: none; }

input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track { width: 100%; height: 11.4px; border: 1px solid #adb5bd; border-radius: 4px; box-shadow: 0px 3px 12px rgba(0,0,0,0.5); background: linear-gradient(to right, rgb(255,255,255), #ffc078); cursor: pointer; }

input[type=range].ak-map-opacity-slider::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -8.5px; border: 1px solid #adb5bd; border-radius: 15px; box-shadow: 0px 3px 12px rgba(0,0,0,0.5); background: #ffffff; -webkit-appearance: none; cursor: pointer; }

input[type=range].ak-map-opacity-slider::-moz-range-track { width: 100%; height: 11.4px; border: 1px solid #adb5bd; border-radius: 4px; box-shadow: 0px 3px 12px rgba(0,0,0,0.5); background: linear-gradient(to right, rgb(255,255,255), #ffc078); cursor: pointer; }

input[type=range].ak-map-opacity-slider::-moz-range-thumb { width: 26px; height: 26px; border: 1px solid #adb5bd; border-radius: 15px; box-shadow: 0px 3px 12px rgba(0,0,0,0.5); background: #ffffff; cursor: pointer; }

input[type=range].ak-map-opacity-slider::-ms-track { width: 100%; height: 11.4px; border: 1px solid #adb5bd; border-radius: 4px; background: linear-gradient(to right, rgb(255,255,255), #ffc078); box-sizing: border-box; color: transparent; cursor: pointer; }

input[type=range].ak-map-opacity-slider::-ms-thumb { width: 26px; height: 26px; margin-top: 0px; border: 1px solid #adb5bd; border-radius: 15px; box-shadow: none; background: #ffffff; cursor: pointer; }

input[type=range].ak-map-opacity-slider::-ms-fill-lower, input[type=range].ak-map-opacity-slider::-ms-fill-upper { background: transparent; }

</style>

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

L.Control.OpacitySlider = L.Control.extend({ options: { position: "topright", initialValue: 1, className: "ak-map-opacity-slider", label: "Transparenz", opacityLayer: undefined },

onAdd: function(map) { var sliderContainerElement = L.DomUtil.create("div");

var sliderElement = L.DomUtil.create("input", this.options.className); sliderElement.setAttribute("type", "range"); sliderElement.setAttribute("min", "0"); sliderElement.setAttribute("max", "1"); sliderElement.setAttribute("step", "0.1"); sliderElement.setAttribute("value", this.options.initialValue); sliderElement.setAttribute("title", this.options.label); sliderElement.setAttribute("aria-label", this.options.label);

L.DomEvent.on(sliderElement, "input", this._setOpacity.bind(this)); // Necessary for IE10/11 support L.DomEvent.on(sliderElement, "change", this._setOpacity.bind(this)); // Prevent dragging of slider handle from moving the map. L.DomEvent.on(sliderElement, "mousedown", function(event) { map.dragging.disable(); }); L.DomEvent.on(sliderElement, "mouseup", function(event) { map.dragging.enable(); });

this._sliderElement = sliderElement; this._opacityLayer = this.options.opacityLayer;

sliderContainerElement.appendChild(sliderElement); return sliderContainerElement; },

_setOpacity: function() { if (this._opacityLayer) { this._opacityLayer.setOpacity(this._sliderElement.value); } },

setOpacityLayer: function(layer) { this._opacityLayer = layer; this._setOpacity(); } });

L.control.opacitySlider = function(opts) { return new L.Control.OpacitySlider(opts); }

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

var mapElement = mapContainerElement.getElementsByClassName("ak-map")[0];

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

mapView.on('zoom', function(event) { // For testing purposes and to figure out good min/max zoom levels for new maps. console.log("Zoom:", mapView.getZoom()); });

// Base layers var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }); var dopLayer = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dop?', { layers: 'nw_dop_rgb', 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>' });

var eras = { mittelalter: { "class": "ak-map-layer-mittelalter", tooltip: "Mittelalter / Freie Reichsstadt / Hansestadt Köln" }, franzoesisch: { "class": "ak-map-layer-franzoesisch", tooltip: "Französisches Köln" }, preussisch: { "class": "ak-map-layer-preussisch", tooltip: "Preußisches Köln" }, nachkriegszeit: { "class": "ak-map-layer-nachkriegszeit", tooltip: "Kriegs-/Nachkriegszeit bis heute" } };

// Historical maps var maps = [ { id: "merian", label: "1641 Merian", tooltip: "Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian", era: eras.mittelalter, layer: L.tileLayer('https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png', { attribution: '<a href="https://mapwarper.net/maps/39783">Datensatz</a>' // TODO minZoom/maxZoom }) }, { id: "stockdale", label: "1800 Stockdale", tooltip: "A Plan of the City of Cologne, 1800, John Stockdale", era: eras.franzoesisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png', { attribution: '<a href="https://mapwarper.net/maps/39780">Datensatz</a>' // TODO minZoom/maxZoom }) }, { id: "tranchot", label: "1801-1828 Tranchot/v. Müffling", tooltip: "1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling", era: eras.franzoesisch, layer: 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>' }) }, { id: "vogt", label: "1815 Vogt/Picquet", tooltip: "Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet", era: eras.franzoesisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png', { attribution: '<a href="https://mapwarper.net/maps/39826">Datensatz</a>' // TODO minZoom/maxZoom }) }, { id: "uraufnahme", label: "1836-1850 Uraufnahme", tooltip: "1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme", era: eras.preussisch, layer: 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>' }) }, { id: "neuaufnahme", label: "1891-1912 Neuaufnahme", tooltip: "1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme", era: eras.preussisch, layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?', { layers: 'nw_neuaufnahme', minNativeZoom: 12, minZoom: 10, maxZoom: 17, // TODO Do I want to provide a way to turn transparency off for these ones? In addition to having the opacity slider it might be nice to be able to just see the map on its own without the base layer backdrop. 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>' }) }, { id: "meyer", label: "1900 Meyer", tooltip: "Meyers Stadtplan von Köln um 1900", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png', { attribution: '<a href="https://mapwarper.net/maps/39790">Datensatz</a>' // TODO minZoom/maxZoom }) }, { id: "tk25", label: "1936-1945 TK25", tooltip: "Topographische Karten - ältere Auflagejahre", era: eras.nachkriegszeit, layer: 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>' }) }, { id: "hop", label: "1988-1994 Historische Orthophotos", tooltip: "1988-1994 Historische Orthophotos", era: eras.nachkriegszeit, layer: 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>' }) }, { id: "dgk", label: "-2016 Deutsche Grundkarte", tooltip: "Deutsche Grundkarte 1:5.000 (DGK5) – historisch", era: eras.nachkriegszeit, layer: 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>' }) } ];

// Keeping track of selected layers. Set initially selected ones. var currentMap = maps[0]; var currentBaseLayer = osmLayer;

// Switching between base layers function baseMapSwitcher() { if (this.checked) { currentBaseLayer.remove(); if (this.value === "osm") { currentBaseLayer = osmLayer; } else { currentBaseLayer = dopLayer; } // TODO Funktioniert nicht. currentBaseLayer.options.minZoom = currentMap.layer.minZoom; currentBaseLayer.options.maxZoom = currentMap.layer.maxZoom; currentBaseLayer.addTo(mapView); currentBaseLayer.bringToBack(); } } mapContainerElement.querySelector(".ak-base-map-selection--osm").addEventListener("change", baseMapSwitcher); mapContainerElement.querySelector(".ak-base-map-selection--dop").addEventListener("change", baseMapSwitcher);

// Setting opacity var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentMap.layer }).addTo(mapView);

// Render radio buttons for historical map switching. var layersListElement = mapContainerElement.querySelector(".ak-map-layers"); maps.forEach(function(map) { var listItemElement = L.DomUtil.create("li", map.era["class"]); listItemElement.setAttribute("title", map.era.tooltip); layersListElement.appendChild(listItemElement); var labelElement = L.DomUtil.create("label"); labelElement.setAttribute("title", map.tooltip); listItemElement.appendChild(labelElement); var inputElement = L.DomUtil.create("input"); inputElement.setAttribute("type", "radio"); inputElement.setAttribute("name", "ak-map-layer-selection"); inputElement.setAttribute("value", map.id); labelElement.appendChild(inputElement); labelElement.appendChild(document.createTextNode(map.label));

if (map === currentMap) { inputElement.checked = true; }

inputElement.addEventListener("change", function() { if (inputElement.checked) { currentMap.layer.remove(); currentMap = map; opacitySliderControl.setOpacityLayer(currentMap.layer); currentMap.layer.addTo(mapView); // TODO check zoom range and bounds of map, adjust mapView accordingly. } }); });

// Show layers. currentBaseLayer.addTo(mapView); currentMap.layer.addTo(mapView); }

// Initialise all found maps when DOM is ready. document.addEventListener("DOMContentLoaded", function(event) { var mapContainerElements = document.getElementsByClassName("ak-map-container"); for(var i = 0; i < mapContainerElements.length; i++) { initMap(mapContainerElements.item(i)); } }); })(); </script>

<form class="ak-map-sidebar" autocomplete="off"> <fieldset> <legend>Basiskarte</legend> <label><input type="radio" class="ak-base-map-selection--osm" name="ak-base-map-selection" value="osm" checked>OpenStreetMap</label> <label><input type="radio" class="ak-base-map-selection--dop" name="ak-base-map-selection" value="dop">Digitale Orthophotos</label> </fieldset> <fieldset> <legend>Historische Karten</legend>

</fieldset> </form>

Abgerufen von „https://altes-koeln.de/index.php?title=Widget:Karte&oldid=36“