Altes Köln

Widget:Kataster: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
(Die Seite wurde neu angelegt: „<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; padding: 2em; overflow-y: auto; font-family: Arial, sans-serif; font-size:…“)
 
Keine Bearbeitungszusammenfassung
 
(90 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<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://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">
<!-- TEST WIDGET KATASTER -->
<div style="border:3px solid red; center;">Bei einigen Karten Ladezeit abwarten, Mausrad und Schieberegler nutzen!</div>


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


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


.ak-map-sidebar { box-sizing: border-box; width: 20vw; min-width: 300px; height: 600px; padding: 2em; overflow-y: auto;
.ak-map-sidebar {
box-sizing: border-box;
width: 20vw;
min-width: 300px;
height: 600px;
padding: 2em;
overflow-y: auto;
font-family: Arial, sans-serif;
font-size: 16px;
color: #495057;
}


font-family: Arial, sans-serif; font-size: 16px; color: #495057; }
.ak-map-container fieldset {
border: none;
padding: 0;
margin-bottom: 1.5em;
}


.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;
font-size: 16px;
}


.ak-map-container fieldset legend { margin-bottom: 0.75em; padding: 0;
.ak-map-container label,
.ak-map-container input {
cursor: pointer;
}


font-weight: 600; font-size: 16px; }
.ak-map-container label {
margin-bottom: 0;
}


.ak-map-container label, .ak-map-container input { cursor: pointer; }
.ak-map-container input {
margin-left: 0;
margin-right: 0.5em;
}


.ak-map-container label { margin-bottom: 0; }
.ak-map-layers,
.ak-map-basemaps {
list-style: none;
margin: 0;
padding: 0;
}


.ak-map-container input { margin-left: 0; margin-right: 0.5em; }
.ak-map-basemaps {
display: flex;
}


.ak-map-layers, .ak-map-basemaps { list-style: none; margin: 0; padding: 0; }
.ak-map-basemaps li+li {
margin-left: 1em;
}


.ak-map-basemaps { display: flex; }
.ak-map-layers li {
display: flex;
align-items: center;
margin-bottom: 0;
border-left-width: 0.5em;
border-left-style: solid;
padding-left: 0.5em;
}


.ak-map-basemaps li+li { margin-left: 1em; }
.ak-map-layers li+li {
padding-top: 0.5em;
}


.ak-map-layers li { display: flex; align-items: center; margin-bottom: 0; border-left-width: 0.5em; border-left-style: solid; padding-left: 0.5em; }
.ak-map-layers li label+a {
display: inline-block;
width: 16px;
height: 16px;
margin-left: 1em;
/* Info icon taken from https://feathericons.com/ */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374c0fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E");
}


.ak-map-layers li+li { padding-top: 0.5em; }
.ak-map-layers li label+a:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23339af0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E");
}


.ak-map-layers li label+a { display: inline-block; width: 16px; height: 16px; margin-left: 1em; /* Info icon taken from https://feathericons.com/ */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374c0fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); }
.ak-map-layer-mittelalter {
border-color: #e03131;
}


.ak-map-layers li label+a:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23339af0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); }
.ak-map-layer-franzoesisch {
border-color: #3b5bdb;
}


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


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


.ak-map-layer-preussisch { border-color: #212529; }
.ak-map-links {
margin: 0;
padding-left: 15px;
list-style-image: none;
}


.ak-map-layer-nachkriegszeit { border-color: #adb5bd; }
.ak-map-links li + li {
padding-top: 8px;
}


.ak-map-links { margin: 0; padding-left: 15px; list-style-image: none; }


.ak-map-links li + li { padding-top: 8px; }
/* Metadata container that may be added by the wiki page to hand more information over to the map. */
 
.ak-map-metadata {
 
display: none;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */ .ak-map-metadata { display: none; }
}




/* Opacity slider */
/* 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-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: 10px; 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-runnable-track {
width: 100%;
height: 11.4px;
border: 1px solid #adb5bd;
border-radius: 10px;
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::-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: 10px; 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-track {
width: 100%;
height: 11.4px;
border: 1px solid #adb5bd;
border-radius: 10px;
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::-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: 10px; 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-track {
width: 100%;
height: 11.4px;
border: 1px solid #adb5bd;
border-radius: 10px;
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-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; }
input[type=range].ak-map-opacity-slider::-ms-fill-lower,
input[type=range].ak-map-opacity-slider::-ms-fill-upper {
background: transparent;
}


input[type=range].ak-map-opacity-slider::-ms-tooltip { display: none; }
input[type=range].ak-map-opacity-slider::-ms-tooltip {
display: none;
}


</style>
</style>


<script type="text/javascript"> (function () {
<script type="text/javascript">
 
(function () {
L.Control.OpacitySlider = L.Control.extend({ options: { position: "topright", initialValue: 0.7, 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.setOpacityLayer(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, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) { if (mapContainerElement.dataset.initialised) { return; } mapContainerElement.dataset.initialised = true;
 
var mapElement = mapContainerElement.getElementsByClassName("ak-map")[0];
 
var mapView = L.map(mapElement, { // Bounding box for Köln (<https://www.openstreetmap.org/relation/62578>). maxBounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], }).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.de/tiles/osmde/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 18, 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', minZoom: 6, 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>' });
 
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: "Nachkriegszeit bis heute" } };
 
// Historical maps var maps = [ { id: "mercator", label: "1571 Mercator", tooltip: "Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator", era: eras.mittelalter, layer: L.tileLayer('https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 18, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/40952">Georeferenzierte Datei</a>, <a href="http://www.deutschefotothek.de/documents/obj/70305086">Originaldatei © SLUB / Deutsche Fotothek</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { 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', { minZoom: 6, maxZoom: 17, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/39783">Georeferenzierte Datei</a>' }) }, { id: "reinhardt", label: "1752 Reinhardt", tooltip: "Kölner Stadtplan von 1752, Johann Valentin Reinhardt", era: eras.mittelalter, layer: L.tileLayer('https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 18, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/41691">Georeferenzierte Datei</a>' }) }, { 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', { minZoom: 6, maxZoom: 17, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/39780">Georeferenzierte Datei</a>' }) }, { 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, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], 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', { minZoom: 6, maxZoom: 18, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/39826">Georeferenzierte Datei</a>' }) }, { id: "festungsplan", label: "1815-1918 Festungsplan", tooltip: "Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 18, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/56436">Georeferenzierte Datei</a>' }) }, { 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_rw', minNativeZoom: 14, minZoom: 12, maxZoom: 17, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], 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, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], // 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', 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', { minZoom: 6, maxZoom: 17, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/39790">Georeferenzierte Datei</a>' }) }, { id: "tk25", label: "1936-1945 TK25", tooltip: "Topographische Karten - ältere Auflagejahre", era: eras.preussisch, 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, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], 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, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], 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, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], 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>' }) } ];
 
// TODO Find a way to display the attribution of the layers more clearly. "|" as a separator instead of ",".
 
var baseLayerOsmElement = mapContainerElement.querySelector(".ak-base-map-selection--osm"); var baseLayerDopElement = mapContainerElement.querySelector(".ak-base-map-selection--dop");


// Keeping track of selected layers. Set initially selected ones. var currentHistLayer = maps[0]; var currentBaseLayer = osmLayer; if (baseLayerToShow) { if (baseLayerToShow === "osm") { currentBaseLayer = osmLayer; } else if (baseLayerToShow === "dop") { currentBaseLayer = dopLayer; baseLayerDopElement.checked = true; } } if (historicalLayerToShow) { for (var i = 0; i < maps.length; i++) { if (maps[i].id === historicalLayerToShow) { currentHistLayer = maps[i]; break; } } }
L.Control.OpacitySlider = L.Control.extend({
options: {
position: "topright",
initialValue: 0.7,
className: "ak-map-opacity-slider",
label: "Transparenz",
opacityLayer: undefined
},


// Switching between base layers function baseLayerSwitcher() { if (this.checked) { currentBaseLayer.remove(); if (this.value === "osm") { currentBaseLayer = osmLayer; } else { currentBaseLayer = dopLayer; } // TODO Funktioniert nicht. currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom; currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom; currentBaseLayer.addTo(mapView); currentBaseLayer.bringToBack(); } } baseLayerOsmElement.addEventListener("change", baseLayerSwitcher); baseLayerDopElement.addEventListener("change", baseLayerSwitcher);
onAdd: function(map) {
var sliderContainerElement = L.DomUtil.create("div");


// Setting opacity var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);
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);


// 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));
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();
});


if (map === currentHistLayer) { inputElement.checked = true; }
this._sliderElement = sliderElement;
this.setOpacityLayer(this.options.opacityLayer);


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


var mapPageUrl = metadata[map.id]; if (mapPageUrl) { var pageLinkElement = L.DomUtil.create("a"); pageLinkElement.href = mapPageUrl; pageLinkElement.setAttribute("title", "Zur Kartenseite"); pageLinkElement.setAttribute("aria-label", "Zur Kartenseite"); listItemElement.appendChild(pageLinkElement); } });
_setOpacity: function() {
if (this._opacityLayer) {
this._opacityLayer.setOpacity(this._sliderElement.value);
}
},


// Show layers. currentBaseLayer.addTo(mapView); currentHistLayer.layer.addTo(mapView);
setOpacityLayer: function(layer) {
this._opacityLayer = layer;
this._setOpacity();
}
});


// Load data layer if provided. if (geoJsonDataLayerUrl) { loadJson(geoJsonDataLayerUrl, function(data) { var options = { // TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing <https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0>. // see <https://leafletjs.com/reference-1.5.0.html#geojson>. style: function(geoJsonFeature) { return { interactive: false }; } }; if (data.attributionText && data.attributionUrl) { // Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks. var attributionLinkElement = L.DomUtil.create("a"); attributionLinkElement.href = data.attributionUrl; attributionLinkElement.appendChild(document.createTextNode(data.attributionText)); options.attribution = attributionLinkElement.outerHTML; } var dataLayer = L.geoJSON(data, options); dataLayer.addTo(mapView); // Set view and zoom around shapes being shown. // TODO Might want to introduce some padding later. But consider <https://stackoverflow.com/a/55173276>. // TODO This does a really visible zoom out / movement which might be nauseating. Maybe we can load the data earlier (in parallel to waiting for DOMContentLoaded) and only render the map once it is available (with a timeout). mapView.fitBounds(dataLayer.getBounds()); }, function() { mapView.openPopup("Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁", mapView.getCenter()); }); }
L.control.opacitySlider = function(opts) {
return new L.Control.OpacitySlider(opts);
}


if (poiDataLayerUrl) { loadJson(poiDataLayerUrl, function(response) { var data = convertSmwResultToGeoJson(response); var options = { pointToLayer: function(geoJsonPoint, latlng) { var options = { riseOnHover: true }; if (geoJsonPoint.properties && geoJsonPoint.properties.title) { options.title = geoJsonPoint.properties.title; } return L.marker(latlng, options); }, onEachFeature: function(feature, layer) { if (feature.properties && (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) { var popupContent = ""; if (feature.properties.title) { if (feature.properties.url) {
function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {
if (mapContainerElement.dataset.initialised) {
return;
}
mapContainerElement.dataset.initialised = true;


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


<a href=\"" + feature.properties.url + "\">" + feature.properties.title + "</a>
var mapView = L.map(mapElement, {
";
// Bounding box for Köln (<https://www.openstreetmap.org/relation/62578>).
maxBounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
}).setView([50.938056, 6.956944], 14);


} else {
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());
});


popupContent += "
// Base layers
var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 22,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors'
});


" + feature.properties.title + "
        var dopLayer = L.tileLayer('https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png', {                   
";
minZoom: 6,
maxZoom: 22,
                    bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: 'Stadt Köln, dl-de/by-2-0 <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln">Datensatz</a>'
});


} } if (feature.properties.description) {
var eras = {
mittelalter: {
"class": "ak-map-layer-mittelalter",
tooltip: "Katasterpläne"
},
preussisch: {
"class": "ak-map-layer-preussisch",
tooltip: "Katasterpläne im Preußischen Köln"
},
nachkriegszeit: {
"class": "ak-map-layer-nachkriegszeit",
tooltip: "Nachkriegszeit bis heute"
}
};


popupContent += "
// Historical maps
var maps = [
            {
id: "1828-01",
label: "Brouillon 1",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99368/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99368">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-02",
label: "Brouillon 2",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99370/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99370">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-03",
label: "Brouillon 3",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99371/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99371">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-04",
label: "Brouillon 4",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99372/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99372">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-05",
label: "Brouillon 5",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99374/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99374">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-06",
label: "Brouillon 6",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99375/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99375">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-07",
label: "Brouillon 7",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99376/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99376">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-08",
label: "Brouillon 8",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99378/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99378">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-09",
label: "Brouillon 9",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99379/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99379">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-10",
label: "Brouillon10",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99380/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99380">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-11",
label: "Brouillon11",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99390/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99390">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-12",
label: "Brouillon12",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99394/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99394">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-13",
label: "Brouillon13",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99395/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99395">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-14",
label: "Brouillon14",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99466/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99466">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-15",
label: "Brouillon15",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99532/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99532">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-16",
label: "Brouillon16",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99533/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99533">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-17",
label: "Brouillon17",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99534/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99534">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-18",
label: "Brouillon18",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99538/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99538">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-19",
label: "Brouillon19",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99596/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99596">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-20",
label: "Brouillon20",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99595/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99595">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-21",
label: "Brouillon21",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99594/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99594">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-22",
label: "Brouillon22",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99231/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99231">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-26",
label: "Brouillon26",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50978/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50978">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-27",
label: "Brouillon27",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50985/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50985">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-28",
label: "Brouillon28",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50969/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50969">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-29",
label: "Brouillon29",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50967/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50967">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-30",
label: "Brouillon30",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50965/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50965">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-31",
label: "Brouillon31",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50807/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50807">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-32",
label: "Brouillon32",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50815/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50815">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-33",
label: "Brouillon33",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50814/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50814">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-34",
label: "Brouillon34",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99458/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99458">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-35",
label: "Brouillon35",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99459/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99459">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
            {
id: "1828-36",
label: "Brouillon36",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99461/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99461">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-37",
label: "Brouillon37",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50927/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50927">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-38",
label: "Brouillon38",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50924/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50924">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-39",
label: "Brouillon39",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50810/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50810">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-40",
label: "Brouillon40",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99417/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99417">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-41",
label: "Brouillon41",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99416/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99416">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-42",
label: "Brouillon42",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50881/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50881">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-43",
label: "Brouillon43",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50876/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50876">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-44",
label: "Brouillon44",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99415/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99415">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-45",
label: "Brouillon45",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50804/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50804">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-46",
label: "Brouillon46",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99411/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99411">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-47",
label: "Brouillon47",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99407/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99407">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-48",
label: "Brouillon48",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99267/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99267">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-49",
label: "Brouillon49",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50875/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50875">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-50",
label: "Brouillon50",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50862/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50862">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-51",
label: "Brouillon51",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99410/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99410">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1828-52",
label: "Brouillon52",
tooltip: "Katasterpläne von Brouillon aus 1828",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/50806/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/50806">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
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_rw',
minNativeZoom: 14,
minZoom: 12,
maxZoom: 17,
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
// 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.
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: "kat",
label: "Kataster 1836",
tooltip: "Katasterplan von 1836",
era: eras.preussisch,
layer: L.tileLayer('https://mapwarper.net/maps/tile/99312/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/99312">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
{
id: "1923",
label: "Stadtplan 1923",
tooltip: "Stadtplan 1923",
era: eras.nachkriegszeit,
layer: L.tileLayer('https://mapwarper.net/maps/tile/85810/{z}/{x}/{y}.png', {
minZoom: 6,
maxZoom: 20,
// TODO Restrict bounds even further.
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
attribution: '<a href="https://mapwarper.net/maps/85810">Georeferenzierter Plan aus 1923</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>'
})
},
      {
id: "hdop",
label: "Digitale Orthophotos",
tooltip: "Digitale Orthophotos",
era: eras.nachkriegszeit,
            layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dop?', {
layers: 'nw_dop_rgb',
minZoom: 6,
maxZoom: 20,
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>'
})
},
{
id: "alkis",
label: "ALKIS-Gebäuderef.",
tooltip: "Gebäudereferenzen",
era: eras.nachkriegszeit,
layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_gebaeudereferenzen?', {
layers: 'nw_gebaeudereferenzen',
minNativeZoom: 16,
minZoom: 13,
maxZoom: 20,
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
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>'
})
},
{
id: "hist_abk",
label: "-2024 Historische Amtliche Basiskarte",
tooltip: "2016-2024 Historische Amtliche Basiskarte",
era: eras.nachkriegszeit,
layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms-t_nw_hist_abk?language=ger&', {
layers: 'nw_hist_abk_col',
minNativeZoom: 15,
minZoom: 6,
maxZoom: 20,
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
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>'
})
},


" + feature.properties.description + "
{
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,
bounds: [
[50.8304494, 6.7725303],
[51.0849743, 7.1620280]
],
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>'
})
}
];


";
// TODO Find a way to display the attribution of the layers more clearly. "|" as a separator instead of ",".


} if (feature.properties.pictureUrl) {
var baseLayerOsmElement = mapContainerElement.querySelector(".ak-base-map-selection--osm");
var baseLayerDopElement = mapContainerElement.querySelector(".ak-base-map-selection--dop");
     
// Keeping track of selected layers. Set initially selected ones.
var currentHistLayer = maps[0];
var currentBaseLayer = osmLayer;
if (baseLayerToShow) {
if (baseLayerToShow === "osm") {
currentBaseLayer = osmLayer;
} else if (baseLayerToShow === "dop") {
currentBaseLayer = dopLayer;
baseLayerDopElement.checked = true;
}
}
if (historicalLayerToShow) {
for (var i = 0; i < maps.length; i++) {
if (maps[i].id === historicalLayerToShow) {
currentHistLayer = maps[i];
break;
}
}
}


popupContent += "
// Switching between base layers
function baseLayerSwitcher() {
if (this.checked) {
currentBaseLayer.remove();
if (this.value === "osm") {
currentBaseLayer = osmLayer;
} else {
currentBaseLayer = dopLayer;
}
// TODO Funktioniert nicht.
currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;
currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;
currentBaseLayer.addTo(mapView);
currentBaseLayer.bringToBack();
}
}
baseLayerOsmElement.addEventListener("change", baseLayerSwitcher);
baseLayerDopElement.addEventListener("change", baseLayerSwitcher);


<img src=\"" + feature.properties.pictureUrl + "\" />
// Setting opacity
var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.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 (feature.properties.url && !feature.properties.title) {
if (map === currentHistLayer) {
inputElement.checked = true;
}


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


<a href=\"" + feature.properties.url + "\">Seite besuchen</a>
var mapPageUrl = metadata[map.id];
if (mapPageUrl) {
var pageLinkElement = L.DomUtil.create("a");
pageLinkElement.href = mapPageUrl;
pageLinkElement.setAttribute("title", "Zur Kartenseite");
pageLinkElement.setAttribute("aria-label", "Zur Kartenseite");
listItemElement.appendChild(pageLinkElement);
}
});


";
// Show layers.
currentBaseLayer.addTo(mapView);
currentHistLayer.layer.addTo(mapView);


} layer.bindPopup(popupContent); } } }; var dataLayer = L.geoJSON(data, options); dataLayer.addTo(mapView); }, function() { mapView.openPopup("Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁", mapView.getCenter()); }); } }
// Load data layer if provided.
if (geoJsonDataLayerUrl) {
loadJson(geoJsonDataLayerUrl, function(data) {
var options = {
// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing <https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0>.
// see <https://leafletjs.com/reference-1.5.0.html#geojson>.
style: function(geoJsonFeature) {
return {
interactive: false
};
}
};
if (data.attributionText && data.attributionUrl) {
// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.
var attributionLinkElement = L.DomUtil.create("a");
attributionLinkElement.href = data.attributionUrl;
attributionLinkElement.appendChild(document.createTextNode(data.attributionText));
options.attribution = attributionLinkElement.outerHTML;
}
var dataLayer = L.geoJSON(data, options);
dataLayer.addTo(mapView);
// Set view and zoom around shapes being shown.
// TODO Might want to introduce some padding later. But consider <https://stackoverflow.com/a/55173276>.
// TODO This does a really visible zoom out / movement which might be nauseating. Maybe we can load the data earlier (in parallel to waiting for DOMContentLoaded) and only render the map once it is available (with a timeout).
mapView.fitBounds(dataLayer.getBounds());
}, function() {
mapView.openPopup("Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁", mapView.getCenter());
});
}


function convertSmwResultToGeoJson(response) { var results = response.query.results; var geoJson = { "type": "FeatureCollection", "features": [] }; geoJson.features = results.map(function(result) { // For some reason the actual semantic object is in a property in the result object, with the key being the id of the object. // Since we don't know the id in advance we have to fetch it as the first (and hopefully only) key of the object. var object = result[Object.keys(result)[0]]; // Can't handle results without coordinates, so skip this one. if (typeof object.printouts.Position === "undefined" || object.printouts.Position.length === 0) { return null; } var feature = { "type": "Feature", "geometry": { "type": "Point", "coordinates": [object.printouts.Position[0].lon, object.printouts.Position[0].lat] }, "properties": {} }; if (typeof object.printouts.Name !== "undefined" && object.printouts.Name.length) { feature.properties.title = object.printouts.Name[0]; } if (typeof object.printouts.Kurzbeschreibung !== "undefined" && object.printouts.Kurzbeschreibung.length) { feature.properties.description = object.printouts.Kurzbeschreibung[0]; } if (typeof object.printouts["Siehe auch"] !== "undefined" && object.printouts["Siehe auch"].length) { feature.properties.url = object.printouts["Siehe auch"][0]; } if (typeof object.printouts.Bild !== "undefined" && object.printouts.Bild.length) { feature.properties.pictureUrl = object.printouts.Bild[0]; } return feature; }).filter(function(e) { // Since we might have skipped some invalid results by returning null, we need to filter them out. return e != null; }); return geoJson; }
if (poiDataLayerUrl) {
loadJson(poiDataLayerUrl, function(response) {
var data = convertSmwResultToGeoJson(response);
var options = {
pointToLayer: function(geoJsonPoint, latlng) {
var options = {
riseOnHover: true
};
if (geoJsonPoint.properties && geoJsonPoint.properties.title) {
options.title = geoJsonPoint.properties.title;
}
return L.marker(latlng, options);
},
onEachFeature: function(feature, layer) {
if (feature.properties && (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {
var popupContent = "";
if (feature.properties.title) {
if (feature.properties.url) {
popupContent += "<h3><a href=\"" + feature.properties.url + "\">" + feature.properties.title + "</a></h3>";
} else {
popupContent += "<h3>" + feature.properties.title + "</h3>";
}
}
if (feature.properties.description) {
popupContent += "<p>" + feature.properties.description + "</p>";
}
if (feature.properties.pictureUrl) {
popupContent += "<p><img src=\"" + feature.properties.pictureUrl + "\" /></p>";
}
if (feature.properties.url && !feature.properties.title) {
popupContent += "<p><a href=\"" + feature.properties.url + "\">Seite besuchen</a></p>";
}
layer.bindPopup(popupContent);
}
}
};
var dataLayer = L.geoJSON(data, options);
dataLayer.addTo(mapView);
}, function() {
mapView.openPopup("Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁", mapView.getCenter());
});
}
}


function parseMetadata(metadataElements) { var metadata = {}; for (var i = 0; i < metadataElements.length; i++) { var element = metadataElements.item(i); var queryRowElements = element.querySelectorAll(".smw-format.ul-format .smw-row"); forEachElement(queryRowElements, function(row) { var anchorElement = row.querySelector(".smw-field:first-child .smw-value a"); var url = anchorElement.href; var idValueElement = row.querySelector(".smw-field:last-child .smw-value"); var id = idValueElement.textContent; metadata[id] = url; }); } return metadata; }
function convertSmwResultToGeoJson(response) {
var results = response.query.results;
var geoJson = {
"type": "FeatureCollection",
"features": []
};
geoJson.features = results.map(function(result) {
// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.
// Since we don't know the id in advance we have to fetch it as the first (and hopefully only) key of the object.
var object = result[Object.keys(result)[0]];
// Can't handle results without coordinates, so skip this one.
if (typeof object.printouts.Position === "undefined" || object.printouts.Position.length === 0) {
return null;
}
var feature = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [object.printouts.Position[0].lon, object.printouts.Position[0].lat]
},
"properties": {}
};
if (typeof object.printouts.Name !== "undefined" && object.printouts.Name.length) {
feature.properties.title = object.printouts.Name[0];
}
if (typeof object.printouts.Kurzbeschreibung !== "undefined" && object.printouts.Kurzbeschreibung.length) {
feature.properties.description = object.printouts.Kurzbeschreibung[0];
}
if (typeof object.printouts["Siehe auch"] !== "undefined" && object.printouts["Siehe auch"].length) {
feature.properties.url = object.printouts["Siehe auch"][0];
}
if (typeof object.printouts.Bild !== "undefined" && object.printouts.Bild.length) {
feature.properties.pictureUrl = object.printouts.Bild[0];
}
return feature;
}).filter(function(e) {
// Since we might have skipped some invalid results by returning null, we need to filter them out.
return e != null;
});
return geoJson;
}


function forEachElement(nodeList, callback) { if (nodeList.forEach) { nodeList.forEach(callback); } else { Array.prototype.forEach.call(nodeList, callback); } }
function parseMetadata(metadataElements) {
var metadata = {};
for (var i = 0; i < metadataElements.length; i++) {
var element = metadataElements.item(i);
var queryRowElements = element.querySelectorAll(".smw-format.ul-format .smw-row");
forEachElement(queryRowElements, function(row) {
var anchorElement = row.querySelector(".smw-field:first-child .smw-value a");
var url = anchorElement.href;
var idValueElement = row.querySelector(".smw-field:last-child .smw-value");
var id = idValueElement.textContent;
metadata[id] = url;
});
}
return metadata;
}


var getQueryParameter = (function() { var query = window.location.search.substring(1); var params = query.split("&"); params = params.map(function(param) { var pair = param.split("="); pair[0] = decodeURIComponent(pair[0]); if (pair.length > 1) { pair[1] = decodeURIComponent(pair[1]); } return pair; }); return function(parameterName) { for (var i = 0; i < params.length; i++) { if (params[i][0] === parameterName) { if (params[i].length > 1) { return params[i][1]; } return ""; } } return undefined; }; })();
function forEachElement(nodeList, callback) {
if (nodeList.forEach) {
nodeList.forEach(callback);
} else {
Array.prototype.forEach.call(nodeList, callback);
}
}


function loadJson(url, onSuccess, onFailure) { var request = new XMLHttpRequest(); request.open("GET", url, true);
var getQueryParameter = (function() {
var query = window.location.search.substring(1);
var params = query.split("&");
params = params.map(function(param) {
var pair = param.split("=");
pair[0] = decodeURIComponent(pair[0]);
if (pair.length > 1) {
pair[1] = decodeURIComponent(pair[1]);
}
return pair;
});
return function(parameterName) {
for (var i = 0; i < params.length; i++) {
if (params[i][0] === parameterName) {
if (params[i].length > 1) {
return params[i][1];
}
return "";
}
}
return undefined;
};
})();


request.onload = function() { if (request.status >= 200 && request.status < 400) { var data; try { data = JSON.parse(request.responseText); } catch(error) { callSafely(onFailure, error); return; } callSafely(onSuccess, data); } else { callSafely(onFailure); } };
function loadJson(url, onSuccess, onFailure) {
var request = new XMLHttpRequest();
request.open("GET", url, true);


request.onerror = function() { callSafely(onFailure); };
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var data;
try {
data = JSON.parse(request.responseText);
} catch(error) {
callSafely(onFailure, error);
return;
}
callSafely(onSuccess, data);
} else {
callSafely(onFailure);
}
};


request.send(); }
request.onerror = function() {
callSafely(onFailure);
};


function callSafely(callback) { if (callback) { callback.apply(null, Array.prototype.slice.call(arguments, 1)); } }
request.send();
}


function getGeoJsonDataLayerUrl() { var dataLayer = getQueryParameter("dataLayer"); if (dataLayer) { // TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title // Base names equal to "." or "..", or beginning "./" or "../", or containing "/./" or "/../", or ending "/." or "/..". // ? if (dataLayer.indexOf("GeoJson:") === 0 && dataLayer.indexOf("?") === -1 && dataLayer.indexOf("&") === -1 && dataLayer.indexOf("=") === -1 && dataLayer.indexOf("/..") === -1) { // TODO relative url? return "https://altes-koeln.de/wiki/" + dataLayer + "?action=raw&ctype=application/json"; } } return undefined; }
function callSafely(callback) {
if (callback) {
callback.apply(null, Array.prototype.slice.call(arguments, 1));
}
}


function getPoiDataLayerUrl() { var poiConcept = getQueryParameter("pois"); if (poiConcept) { // TODO Check the rest is a valid page name? if (poiConcept.indexOf("Concept:") === 0) { return "https://altes-koeln.de/api.php?action=askargs&conditions=" + poiConcept + "&printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&format=json&api_version=3"; } } return undefined; }
function getGeoJsonDataLayerUrl() {
var dataLayer = getQueryParameter("dataLayer");
if (dataLayer) {
// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title
//    Base names equal to "." or "..", or beginning "./" or "../", or containing "/./" or "/../", or ending "/." or "/..".
// ?
if (dataLayer.indexOf("GeoJson:") === 0
&& dataLayer.indexOf("?") === -1
&& dataLayer.indexOf("&") === -1
&& dataLayer.indexOf("=") === -1
&& dataLayer.indexOf("/..") === -1) {
// TODO relative url?
return "https://altes-koeln.de/wiki/" + dataLayer + "?action=raw&ctype=application/json";
}
}
return undefined;
}


// Initialise all found maps when DOM is ready. document.addEventListener("DOMContentLoaded", function(event) { var mapContainerElements = document.getElementsByClassName("ak-map-container");
function getPoiDataLayerUrl() {
var poiConcept = getQueryParameter("pois");
if (poiConcept) {
// TODO Check the rest is a valid page name?
if (poiConcept.indexOf("Concept:") === 0) {
return "https://altes-koeln.de/api.php?action=askargs&conditions=" + poiConcept + "&printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&format=json&api_version=3";
}
}
return undefined;
}


var metadataElements = document.getElementsByClassName("ak-map-metadata"); var metadata = parseMetadata(metadataElements);
// 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), metadata, getQueryParameter("baseLayer"), getQueryParameter("histLayer"), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl()); } }); })(); </script>
var metadataElements = document.getElementsByClassName("ak-map-metadata");
var metadata = parseMetadata(metadataElements);


<form class="ak-map-sidebar" autocomplete="off"> <fieldset> <legend>Basiskarte</legend>
for (var i = 0; i < mapContainerElements.length; i++) {
initMap(mapContainerElements.item(i), metadata, getQueryParameter("baseLayer"), getQueryParameter("histLayer"), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());
}
});
})();
</script>


<label><input type="radio" class="ak-base-map-selection--osm" name="ak-base-map-selection" value="osm" checked>OpenStreetMap</label>
<div class="ak-map-container">
<label><input type="radio" class="ak-base-map-selection--dop" name="ak-base-map-selection" value="dop">Digitale Orthophotos</label>
<div class="ak-map"></div>
</fieldset> <fieldset> <legend>Historische Karten</legend>
<form class="ak-map-sidebar" autocomplete="off">
</form>
<fieldset>
<legend>Basiskarte</legend>
<ul class="ak-map-basemaps">
<li><label><input type="radio" class="ak-base-map-selection--osm" name="ak-base-map-selection" value="osm" checked>OSM</label>
</li>
<li><label><input type="radio" class="ak-base-map-selection--dop" name="ak-base-map-selection" value="dop">Vogt 1815</label></li>             
</ul>
</fieldset>
<fieldset>
<legend>Historische Karten</legend>
<ul class="ak-map-layers">
</ul>
</fieldset>
</form>
</div>

Aktuelle Version vom 29. November 2025, 23:19 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">

Bei einigen Karten Ladezeit abwarten, Mausrad und Schieberegler nutzen!

<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; padding: 2em; overflow-y: auto; font-family: Arial, sans-serif; font-size: 16px; 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; font-size: 16px; }

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

.ak-map-container label { margin-bottom: 0; }

.ak-map-container input { margin-left: 0; margin-right: 0.5em; }

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

.ak-map-basemaps { display: flex; }

.ak-map-basemaps li+li { margin-left: 1em; }

.ak-map-layers li { display: flex; align-items: center; margin-bottom: 0; border-left-width: 0.5em; border-left-style: solid; padding-left: 0.5em; }

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

.ak-map-layers li label+a { display: inline-block; width: 16px; height: 16px; margin-left: 1em; /* Info icon taken from https://feathericons.com/ */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374c0fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); }

.ak-map-layers li label+a:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23339af0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); }

.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; }

.ak-map-links { margin: 0; padding-left: 15px; list-style-image: none; }

.ak-map-links li + li { padding-top: 8px; }


/* Metadata container that may be added by the wiki page to hand more information over to the map. */ .ak-map-metadata { display: none; }


/* 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: 10px; 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: 10px; 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: 10px; 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; }

input[type=range].ak-map-opacity-slider::-ms-tooltip { display: none; }

</style>

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

L.Control.OpacitySlider = L.Control.extend({ options: { position: "topright", initialValue: 0.7, 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.setOpacityLayer(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, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) { if (mapContainerElement.dataset.initialised) { return; } mapContainerElement.dataset.initialised = true;

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

var mapView = L.map(mapElement, { // Bounding box for Köln (<https://www.openstreetmap.org/relation/62578>). maxBounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], }).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.de/tiles/osmde/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 22, attribution: '© <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors' }); 

       var dopLayer = L.tileLayer('https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png', {

minZoom: 6, maxZoom: 22, 

                   bounds: [

[50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: 'Stadt Köln, dl-de/by-2-0 <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln">Datensatz</a>' });

var eras = { mittelalter: { "class": "ak-map-layer-mittelalter", tooltip: "Katasterpläne" }, preussisch: { "class": "ak-map-layer-preussisch", tooltip: "Katasterpläne im Preußischen Köln" }, nachkriegszeit: { "class": "ak-map-layer-nachkriegszeit", tooltip: "Nachkriegszeit bis heute" } };

// Historical maps var maps = [ 

           {

id: "1828-01", label: "Brouillon 1", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99368/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99368">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-02", label: "Brouillon 2", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99370/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99370">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-03", label: "Brouillon 3", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99371/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99371">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-04", label: "Brouillon 4", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99372/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99372">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-05", label: "Brouillon 5", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99374/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99374">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-06", label: "Brouillon 6", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99375/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99375">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-07", label: "Brouillon 7", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99376/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99376">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-08", label: "Brouillon 8", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99378/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99378">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-09", label: "Brouillon 9", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99379/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99379">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-10", label: "Brouillon10", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99380/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99380">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-11", label: "Brouillon11", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99390/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99390">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-12", label: "Brouillon12", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99394/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99394">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-13", label: "Brouillon13", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99395/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99395">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-14", label: "Brouillon14", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99466/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99466">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-15", label: "Brouillon15", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99532/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99532">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-16", label: "Brouillon16", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99533/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99533">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-17", label: "Brouillon17", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99534/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99534">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-18", label: "Brouillon18", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99538/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99538">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-19", label: "Brouillon19", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99596/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99596">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-20", label: "Brouillon20", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99595/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99595">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-21", label: "Brouillon21", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99594/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99594">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-22", label: "Brouillon22", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99231/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99231">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-26", label: "Brouillon26", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50978/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50978">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-27", label: "Brouillon27", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50985/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50985">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-28", label: "Brouillon28", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50969/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50969">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-29", label: "Brouillon29", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50967/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50967">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-30", label: "Brouillon30", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50965/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50965">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-31", label: "Brouillon31", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50807/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50807">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-32", label: "Brouillon32", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50815/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50815">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-33", label: "Brouillon33", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50814/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50814">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-34", label: "Brouillon34", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99458/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99458">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-35", label: "Brouillon35", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99459/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99459">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

           {

id: "1828-36", label: "Brouillon36", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99461/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99461">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-37", label: "Brouillon37", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50927/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50927">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-38", label: "Brouillon38", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50924/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50924">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-39", label: "Brouillon39", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50810/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50810">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-40", label: "Brouillon40", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99417/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99417">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-41", label: "Brouillon41", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99416/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99416">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-42", label: "Brouillon42", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50881/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50881">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-43", label: "Brouillon43", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50876/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50876">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-44", label: "Brouillon44", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99415/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99415">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-45", label: "Brouillon45", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50804/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50804">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-46", label: "Brouillon46", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99411/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99411">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-47", label: "Brouillon47", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99407/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99407">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-48", label: "Brouillon48", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99267/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99267">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-49", label: "Brouillon49", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50875/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50875">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-50", label: "Brouillon50", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50862/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50862">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-51", label: "Brouillon51", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99410/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99410">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1828-52", label: "Brouillon52", tooltip: "Katasterpläne von Brouillon aus 1828", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/50806/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/50806">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { 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_rw', minNativeZoom: 14, minZoom: 12, maxZoom: 17, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], // 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. 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: "kat", label: "Kataster 1836", tooltip: "Katasterplan von 1836", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/99312/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/99312">Georeferenzierter Plan aus 1828</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "1923", label: "Stadtplan 1923", tooltip: "Stadtplan 1923", era: eras.nachkriegszeit, layer: L.tileLayer('https://mapwarper.net/maps/tile/85810/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 20, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/85810">Georeferenzierter Plan aus 1923</a>, <a href="https://www.historischesarchivkoeln.de/">Originaldatei © HstaK / HistArchiv Stadt Köln</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, 

     {

id: "hdop", label: "Digitale Orthophotos", tooltip: "Digitale Orthophotos", era: eras.nachkriegszeit, 

           layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dop?', {

layers: 'nw_dop_rgb', minZoom: 6, maxZoom: 20, 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>' }) }, { id: "alkis", label: "ALKIS-Gebäuderef.", tooltip: "Gebäudereferenzen", era: eras.nachkriegszeit, layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_gebaeudereferenzen?', { layers: 'nw_gebaeudereferenzen', minNativeZoom: 16, minZoom: 13, maxZoom: 20, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], 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>' }) }, { id: "hist_abk", label: "-2024 Historische Amtliche Basiskarte", tooltip: "2016-2024 Historische Amtliche Basiskarte", era: eras.nachkriegszeit, layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms-t_nw_hist_abk?language=ger&', { layers: 'nw_hist_abk_col', minNativeZoom: 15, minZoom: 6, maxZoom: 20, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], 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, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], 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>' }) } ];

// TODO Find a way to display the attribution of the layers more clearly. "|" as a separator instead of ",".

var baseLayerOsmElement = mapContainerElement.querySelector(".ak-base-map-selection--osm"); var baseLayerDopElement = mapContainerElement.querySelector(".ak-base-map-selection--dop");

// Keeping track of selected layers. Set initially selected ones. var currentHistLayer = maps[0]; var currentBaseLayer = osmLayer; if (baseLayerToShow) { if (baseLayerToShow === "osm") { currentBaseLayer = osmLayer; } else if (baseLayerToShow === "dop") { currentBaseLayer = dopLayer; baseLayerDopElement.checked = true; } } if (historicalLayerToShow) { for (var i = 0; i < maps.length; i++) { if (maps[i].id === historicalLayerToShow) { currentHistLayer = maps[i]; break; } } }

// Switching between base layers function baseLayerSwitcher() { if (this.checked) { currentBaseLayer.remove(); if (this.value === "osm") { currentBaseLayer = osmLayer; } else { currentBaseLayer = dopLayer; } // TODO Funktioniert nicht. currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom; currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom; currentBaseLayer.addTo(mapView); currentBaseLayer.bringToBack(); } } baseLayerOsmElement.addEventListener("change", baseLayerSwitcher); baseLayerDopElement.addEventListener("change", baseLayerSwitcher);

// Setting opacity var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.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 === currentHistLayer) { inputElement.checked = true; }

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

var mapPageUrl = metadata[map.id]; if (mapPageUrl) { var pageLinkElement = L.DomUtil.create("a"); pageLinkElement.href = mapPageUrl; pageLinkElement.setAttribute("title", "Zur Kartenseite"); pageLinkElement.setAttribute("aria-label", "Zur Kartenseite"); listItemElement.appendChild(pageLinkElement); } });

// Show layers. currentBaseLayer.addTo(mapView); currentHistLayer.layer.addTo(mapView);

// Load data layer if provided. if (geoJsonDataLayerUrl) { loadJson(geoJsonDataLayerUrl, function(data) { var options = { // TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing <https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0>. // see <https://leafletjs.com/reference-1.5.0.html#geojson>. style: function(geoJsonFeature) { return { interactive: false }; } }; if (data.attributionText && data.attributionUrl) { // Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks. var attributionLinkElement = L.DomUtil.create("a"); attributionLinkElement.href = data.attributionUrl; attributionLinkElement.appendChild(document.createTextNode(data.attributionText)); options.attribution = attributionLinkElement.outerHTML; } var dataLayer = L.geoJSON(data, options); dataLayer.addTo(mapView); // Set view and zoom around shapes being shown. // TODO Might want to introduce some padding later. But consider <https://stackoverflow.com/a/55173276>. // TODO This does a really visible zoom out / movement which might be nauseating. Maybe we can load the data earlier (in parallel to waiting for DOMContentLoaded) and only render the map once it is available (with a timeout). mapView.fitBounds(dataLayer.getBounds()); }, function() { mapView.openPopup("Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁", mapView.getCenter()); }); }

if (poiDataLayerUrl) { loadJson(poiDataLayerUrl, function(response) { var data = convertSmwResultToGeoJson(response); var options = { pointToLayer: function(geoJsonPoint, latlng) { var options = { riseOnHover: true }; if (geoJsonPoint.properties && geoJsonPoint.properties.title) { options.title = geoJsonPoint.properties.title; } return L.marker(latlng, options); }, onEachFeature: function(feature, layer) { if (feature.properties && (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) { var popupContent = ""; if (feature.properties.title) { if (feature.properties.url) {

popupContent += "

<a href=\"" + feature.properties.url + "\">" + feature.properties.title + "</a>

";

} else {

popupContent += "

" + feature.properties.title + "

";

} } if (feature.properties.description) {

popupContent += "

" + feature.properties.description + "

";

} if (feature.properties.pictureUrl) {

popupContent += "

<img src=\"" + feature.properties.pictureUrl + "\" />

";

} if (feature.properties.url && !feature.properties.title) {

popupContent += "

<a href=\"" + feature.properties.url + "\">Seite besuchen</a>

";

} layer.bindPopup(popupContent); } } }; var dataLayer = L.geoJSON(data, options); dataLayer.addTo(mapView); }, function() { mapView.openPopup("Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁", mapView.getCenter()); }); } }

function convertSmwResultToGeoJson(response) { var results = response.query.results; var geoJson = { "type": "FeatureCollection", "features": [] }; geoJson.features = results.map(function(result) { // For some reason the actual semantic object is in a property in the result object, with the key being the id of the object. // Since we don't know the id in advance we have to fetch it as the first (and hopefully only) key of the object. var object = result[Object.keys(result)[0]]; // Can't handle results without coordinates, so skip this one. if (typeof object.printouts.Position === "undefined" || object.printouts.Position.length === 0) { return null; } var feature = { "type": "Feature", "geometry": { "type": "Point", "coordinates": [object.printouts.Position[0].lon, object.printouts.Position[0].lat] }, "properties": {} }; if (typeof object.printouts.Name !== "undefined" && object.printouts.Name.length) { feature.properties.title = object.printouts.Name[0]; } if (typeof object.printouts.Kurzbeschreibung !== "undefined" && object.printouts.Kurzbeschreibung.length) { feature.properties.description = object.printouts.Kurzbeschreibung[0]; } if (typeof object.printouts["Siehe auch"] !== "undefined" && object.printouts["Siehe auch"].length) { feature.properties.url = object.printouts["Siehe auch"][0]; } if (typeof object.printouts.Bild !== "undefined" && object.printouts.Bild.length) { feature.properties.pictureUrl = object.printouts.Bild[0]; } return feature; }).filter(function(e) { // Since we might have skipped some invalid results by returning null, we need to filter them out. return e != null; }); return geoJson; }

function parseMetadata(metadataElements) { var metadata = {}; for (var i = 0; i < metadataElements.length; i++) { var element = metadataElements.item(i); var queryRowElements = element.querySelectorAll(".smw-format.ul-format .smw-row"); forEachElement(queryRowElements, function(row) { var anchorElement = row.querySelector(".smw-field:first-child .smw-value a"); var url = anchorElement.href; var idValueElement = row.querySelector(".smw-field:last-child .smw-value"); var id = idValueElement.textContent; metadata[id] = url; }); } return metadata; }

function forEachElement(nodeList, callback) { if (nodeList.forEach) { nodeList.forEach(callback); } else { Array.prototype.forEach.call(nodeList, callback); } }

var getQueryParameter = (function() { var query = window.location.search.substring(1); var params = query.split("&"); params = params.map(function(param) { var pair = param.split("="); pair[0] = decodeURIComponent(pair[0]); if (pair.length > 1) { pair[1] = decodeURIComponent(pair[1]); } return pair; }); return function(parameterName) { for (var i = 0; i < params.length; i++) { if (params[i][0] === parameterName) { if (params[i].length > 1) { return params[i][1]; } return ""; } } return undefined; }; })();

function loadJson(url, onSuccess, onFailure) { var request = new XMLHttpRequest(); request.open("GET", url, true);

request.onload = function() { if (request.status >= 200 && request.status < 400) { var data; try { data = JSON.parse(request.responseText); } catch(error) { callSafely(onFailure, error); return; } callSafely(onSuccess, data); } else { callSafely(onFailure); } };

request.onerror = function() { callSafely(onFailure); };

request.send(); }

function callSafely(callback) { if (callback) { callback.apply(null, Array.prototype.slice.call(arguments, 1)); } }

function getGeoJsonDataLayerUrl() { var dataLayer = getQueryParameter("dataLayer"); if (dataLayer) { // TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title // Base names equal to "." or "..", or beginning "./" or "../", or containing "/./" or "/../", or ending "/." or "/..". // ? if (dataLayer.indexOf("GeoJson:") === 0 && dataLayer.indexOf("?") === -1 && dataLayer.indexOf("&") === -1 && dataLayer.indexOf("=") === -1 && dataLayer.indexOf("/..") === -1) { // TODO relative url? return "https://altes-koeln.de/wiki/" + dataLayer + "?action=raw&ctype=application/json"; } } return undefined; }

function getPoiDataLayerUrl() { var poiConcept = getQueryParameter("pois"); if (poiConcept) { // TODO Check the rest is a valid page name? if (poiConcept.indexOf("Concept:") === 0) { return "https://altes-koeln.de/api.php?action=askargs&conditions=" + poiConcept + "&printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&format=json&api_version=3"; } } return undefined; }

// Initialise all found maps when DOM is ready. document.addEventListener("DOMContentLoaded", function(event) { var mapContainerElements = document.getElementsByClassName("ak-map-container");

var metadataElements = document.getElementsByClassName("ak-map-metadata"); var metadata = parseMetadata(metadataElements);

for (var i = 0; i < mapContainerElements.length; i++) { initMap(mapContainerElements.item(i), metadata, getQueryParameter("baseLayer"), getQueryParameter("histLayer"), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl()); } }); })(); </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>OSM</label>
  • <label><input type="radio" class="ak-base-map-selection--dop" name="ak-base-map-selection" value="dop">Vogt 1815</label>

</fieldset> <fieldset> <legend>Historische Karten</legend>

</fieldset>

</form>

Abgerufen von „https://altes-koeln.de/index.php?title=Widget:Kataster&oldid=89188“
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.