<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="de">
	<id>https://www.altes-koeln.de/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Simon</id>
	<title>Altes Köln - Benutzerbeiträge [de]</title>
	<link rel="self" type="application/atom+xml" href="https://www.altes-koeln.de/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Simon"/>
	<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/wiki/Spezial:Beitr%C3%A4ge/Simon"/>
	<updated>2026-04-04T13:41:33Z</updated>
	<subtitle>Benutzerbeiträge</subtitle>
	<generator>MediaWiki 1.43.6</generator>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=69790</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=69790"/>
		<updated>2024-01-07T14:08:44Z</updated>

		<summary type="html">&lt;p&gt;Simon: Links von Zeiträume Köln nochmal angepasst&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding-left: 15px;&lt;br /&gt;
	list-style-image: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links li + li {&lt;br /&gt;
	padding-top: 8px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Zeiträume Köln&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-links&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=af439c30276b45159de0503c0f09a1ab&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Römische Befestigung, mittelalterliche Stadtmauer, Umwallungen, Bastionen, Festungsringe, Kasernen, Hochbunker&amp;quot;&amp;gt;Verteidigen &amp;amp; Schützen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=52cfb2e6bb7a422b8d6ca7dc8127f518&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Klöster, Kirchen, Synagogen, Krankenhäuser, Friedhöfe&amp;quot;&amp;gt;Beten &amp;amp; Heilen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=02b93995ff994fd3b230fa398a6ff354&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Höfe, Mühlen&amp;quot;&amp;gt;Ackern &amp;amp; Mahlen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=74dc24a4814e442792b1c62eb60fbc90&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Fabriken, Gewerbe, Verwaltung, Bahnhöfe, Häfen, Flughäfen, Wasser Gas Strom, Brauereien, Ziegeleien&amp;quot;&amp;gt;Arbeiten &amp;amp; Transportieren&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=3629a694ba67454eaf204c58054b48e6&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Wohnen, Schulen, Freizeit, Theater, Kinos, Museen&amp;quot;&amp;gt;Leben &amp;amp; Lernen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://hermsdoerfer.familyds.com/Cologne/Entwicklung.html&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Siedlungs- und Gebietsentwicklung&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=69789</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=69789"/>
		<updated>2024-01-07T14:01:09Z</updated>

		<summary type="html">&lt;p&gt;Simon: Links zu Zeiträume Köln aktualisiert&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding-left: 15px;&lt;br /&gt;
	list-style-image: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links li + li {&lt;br /&gt;
	padding-top: 8px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Zeiträume Köln&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-links&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=af439c30276b45159de0503c0f09a1ab&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Römische Befestigung, mittelalterliche Stadtmauer, Umwallungen, Bastionen, Festungsringe, Kasernen, Hochbunker&amp;quot;&amp;gt;Verteidigen &amp;amp; Schützen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=52cfb2e6bb7a422b8d6ca7dc8127f518&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Klöster, Kirchen, Synagogen, Krankenhäuser, Friedhöfe&amp;quot;&amp;gt;Beten &amp;amp; Heilen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=02b93995ff994fd3b230fa398a6ff354&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Höfe, Mühlen&amp;quot;&amp;gt;Ackern &amp;amp; Mahlen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=74dc24a4814e442792b1c62eb60fbc90&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Fabriken, Gewerbe, Verwaltung, Bahnhöfe, Häfen, Flughäfen, Wasser Gas Strom, Brauereien, Ziegeleien&amp;quot;&amp;gt;Arbeiten &amp;amp; Transportieren&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=3629a694ba67454eaf204c58054b48e6&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Wohnen, Schulen, Freizeit, Theater, Kinos, Museen&amp;quot;&amp;gt;Leben &amp;amp; Lernen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://opjoeck.maps.arcgis.com/apps/webappviewer/index.html?id=e313d152e6654d3da37c60e2bc9f0f1b&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Römerstadt, Rheinvorstadt 950, Stadterweiterung 1106, Stadtmauer 1180, Franzosen 1798, Preussen 1883, Erweiterung 1888, Kalk 1910, Mülheim 1914, Worringen 1922, Gebietsreform 1975&amp;quot;&amp;gt;Gebietsentwicklung&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=27139</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=27139"/>
		<updated>2021-06-03T20:40:01Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding-left: 15px;&lt;br /&gt;
	list-style-image: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links li + li {&lt;br /&gt;
	padding-top: 8px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Zeiträume Köln&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-links&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=eacf1358599b4f039867c7b23635e46e&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Römische Befestigung, mittelalterliche Stadtmauer, Umwallungen, Bastionen, Festungsringe, Kasernen, Hochbunker&amp;quot;&amp;gt;Verteidigen &amp;amp; Schützen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=d64bc09cba764797934cbfba27fbfe89&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Klöster, Kirchen, Synagogen, Krankenhäuser, Friedhöfe&amp;quot;&amp;gt;Beten &amp;amp; Heilen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=227f2e15f71d43388297bd8bff227133&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Höfe, Mühlen&amp;quot;&amp;gt;Ackern &amp;amp; Mahlen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=0dc84b12a12d45358c6c75ca6d1db199&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Fabriken, Gewerbe, Verwaltung, Bahnhöfe, Häfen, Flughäfen, Wasser Gas Strom, Brauereien, Ziegeleien&amp;quot;&amp;gt;Arbeiten &amp;amp; Transportieren&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=2bd54734dc9c464097e05f88f7e220df&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Wohnen, Schulen, Freizeit, Theater, Kinos, Museen&amp;quot;&amp;gt;Leben &amp;amp; Lernen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=c9ac114bf0a84d349323503fd702a433&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot; title=&amp;quot;Römerstadt, Rheinvorstadt 950, Stadterweiterung 1106, Stadtmauer 1180, Franzosen 1798, Preussen 1883, Erweiterung 1888, Kalk 1910, Mülheim 1914, Worringen 1922, Gebietsreform 1975&amp;quot;&amp;gt;Gebietsentwicklung&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=27138</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=27138"/>
		<updated>2021-06-03T20:20:49Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding-left: 15px;&lt;br /&gt;
	list-style-image: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links li + li {&lt;br /&gt;
	padding-top: 8px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Zeiträume Köln - Was War Wo&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-links&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=eacf1358599b4f039867c7b23635e46e&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Verteidigen &amp;amp; Schützen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=d64bc09cba764797934cbfba27fbfe89&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Beten &amp;amp; Heilen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=227f2e15f71d43388297bd8bff227133&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Ackern &amp;amp; Mahlen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=0dc84b12a12d45358c6c75ca6d1db199&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Arbeiten &amp;amp; Transportieren&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=2bd54734dc9c464097e05f88f7e220df&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Leben &amp;amp; Lernen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=51911d13884c4a268a06346f197601b2&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Alle fünf Themen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=27137</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=27137"/>
		<updated>2021-06-03T20:16:44Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding-left: 15px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links li + li {&lt;br /&gt;
	padding-top: 8px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Zeiträume Köln - Was War Wo&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-links&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=eacf1358599b4f039867c7b23635e46e&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Verteidigen &amp;amp; Schützen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=d64bc09cba764797934cbfba27fbfe89&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Beten &amp;amp; Heilen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=227f2e15f71d43388297bd8bff227133&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Ackern &amp;amp; Mahlen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=0dc84b12a12d45358c6c75ca6d1db199&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Arbeiten &amp;amp; Transportieren&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=2bd54734dc9c464097e05f88f7e220df&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Leben &amp;amp; Lernen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://cologne.maps.arcgis.com/apps/webappviewer/index.html?id=51911d13884c4a268a06346f197601b2&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Alle fünf Themen&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=27136</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=27136"/>
		<updated>2021-06-03T20:01:00Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	list-style-type: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Weitere Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-links&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://hermsdoerfer.familyds.com/Cologne/index.html&amp;quot; target=&amp;quot;_blank&amp;quot; rel=&amp;quot;noopener noreferrer&amp;quot;&amp;gt;Zeiträume Köln - Was War Wo&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=27135</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=27135"/>
		<updated>2021-06-03T19:46:14Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-links {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	list-style-type: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Weitere Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-links&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;https://hermsdoerfer.familyds.com/Cologne/index.html&amp;quot;&amp;gt;Zeiträume Köln - Was War Wo&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=K%C3%B6lner_Kirchen_und_Kl%C3%B6ster_interaktiv&amp;diff=25424</id>
		<title>Kölner Kirchen und Klöster interaktiv</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=K%C3%B6lner_Kirchen_und_Kl%C3%B6ster_interaktiv&amp;diff=25424"/>
		<updated>2021-05-16T11:17:05Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;iframe width=&amp;quot;1110&amp;quot; key=&amp;quot;umap&amp;quot; path=&amp;quot;https://umap.openstreetmap.fr/de/map/kolner-kirchen-und-kloster-im-18-jahrhundert_611396&amp;quot; /&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=K%C3%B6lner_Kirchen_und_Kl%C3%B6ster_interaktiv&amp;diff=25422</id>
		<title>Kölner Kirchen und Klöster interaktiv</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=K%C3%B6lner_Kirchen_und_Kl%C3%B6ster_interaktiv&amp;diff=25422"/>
		<updated>2021-05-16T10:51:52Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;iframe key=&amp;quot;umap&amp;quot; path=&amp;quot;https://umap.openstreetmap.fr/de/map/kolner-kirchen-und-kloster-im-18-jahrhundert_611396&amp;quot; /&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=K%C3%B6lner_Kirchen_und_Kl%C3%B6ster_interaktiv&amp;diff=25421</id>
		<title>Kölner Kirchen und Klöster interaktiv</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=K%C3%B6lner_Kirchen_und_Kl%C3%B6ster_interaktiv&amp;diff=25421"/>
		<updated>2021-05-16T10:49:28Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;iframe key=&amp;quot;umap&amp;quot; path=&amp;quot;https://umap.openstreetmap.fr/de/map/kolner-kirchen-und-kloster-im-18-jahrhundert_611396#14/50.9370/6.9521&amp;quot; /&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24160</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24160"/>
		<updated>2021-04-25T10:16:48Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24159</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24159"/>
		<updated>2021-04-25T10:15:22Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(feature.properties.popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position|Kurzbeschreibung|Siehe%20auch|Bild&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24158</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24158"/>
		<updated>2021-04-25T10:12:59Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(feature.properties.popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
debugger;&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24157</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24157"/>
		<updated>2021-04-25T10:11:47Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(feature.properties.popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24156</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24156"/>
		<updated>2021-04-25T10:10:45Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title;&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(feature.properties.popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts.[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24155</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24155"/>
		<updated>2021-04-25T10:09:13Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, geoJsonDataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (geoJsonDataLayerUrl) {&lt;br /&gt;
			loadJson(geoJsonDataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						var options = {&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						};&lt;br /&gt;
						if (geoJsonPoint.properties &amp;amp;&amp;amp; geoJsonPoint.properties.title) {&lt;br /&gt;
							options.title = geoJsonPoint.properties.title,&lt;br /&gt;
						}&lt;br /&gt;
						return L.marker(latlng, options);&lt;br /&gt;
					},&lt;br /&gt;
					onEachFeature: function(feature, layer) {&lt;br /&gt;
						if (feature.properties &amp;amp;&amp;amp; (feature.properties.description || feature.properties.url || feature.properties.pictureUrl)) {&lt;br /&gt;
							var popupContent = &amp;quot;&amp;quot;;&lt;br /&gt;
							if (feature.properties.title) {&lt;br /&gt;
								if (feature.properties.url) {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								} else {&lt;br /&gt;
									popupContent += &amp;quot;&amp;lt;h3&amp;gt;&amp;quot; + feature.properties.title + &amp;quot;&amp;lt;/h3&amp;gt;&amp;quot;;&lt;br /&gt;
								}&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.description) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;quot; + feature.properties.description + &amp;quot;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.pictureUrl) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;img src=\&amp;quot;&amp;quot; + feature.properties.pictureUrl + &amp;quot;\&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							if (feature.properties.url &amp;amp;&amp;amp; !feature.properties.title) {&lt;br /&gt;
								popupContent += &amp;quot;&amp;lt;p&amp;gt;&amp;lt;a href=\&amp;quot;&amp;quot; + feature.properties.url + &amp;quot;\&amp;quot;&amp;gt;Seite besuchen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&amp;quot;;&lt;br /&gt;
							}&lt;br /&gt;
							layer.bindPopup(feature.properties.popupContent);&lt;br /&gt;
						}&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(function(result) {&lt;br /&gt;
			// For some reason the actual semantic object is in a property in the result object, with the key being the id of the object.&lt;br /&gt;
			// Since we don&#039;t know the id in advance we have to fetch it as the first (and hopefully only) key of the object.&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			// Can&#039;t handle results without coordinates, so skip this one.&lt;br /&gt;
			if (typeof object.printouts.Position === &amp;quot;undefined&amp;quot; || object.printouts.Position.length === 0) {&lt;br /&gt;
				return null;&lt;br /&gt;
			}&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {}&lt;br /&gt;
			};&lt;br /&gt;
			if (typeof object.printouts.Name !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Name.length) {&lt;br /&gt;
				feature.properties.title = object.printouts.Name[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Kurzbeschreibung !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Kurzbeschreibung.length) {&lt;br /&gt;
				feature.properties.description = object.printouts.Kurzbeschreibung[0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.[&amp;quot;Siehe auch&amp;quot;] !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.[&amp;quot;Siehe auch&amp;quot;].length) {&lt;br /&gt;
				feature.properties.url = object.printouts.[&amp;quot;Siehe auch&amp;quot;][0];&lt;br /&gt;
			}&lt;br /&gt;
			if (typeof object.printouts.Bild !== &amp;quot;undefined&amp;quot; &amp;amp;&amp;amp; object.printouts.Bild.length) {&lt;br /&gt;
				feature.properties.pictureUrl = object.printouts.Bild[0];&lt;br /&gt;
			}&lt;br /&gt;
			return feature;&lt;br /&gt;
		}).filter(function(e) {&lt;br /&gt;
			// Since we might have skipped some invalid results by returning null, we need to filter them out.&lt;br /&gt;
			return e != null;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getGeoJsonDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getGeoJsonDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Festungsplan_1815-1918&amp;diff=24154</id>
		<title>Festungsplan 1815-1918</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Festungsplan_1815-1918&amp;diff=24154"/>
		<updated>2021-04-25T10:08:31Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[Datei:Köln-Festungsplan-1815-1918.jpg|thump|left|700px]]&lt;br /&gt;
Eine Gesamtübersicht der preußischen Festungsanlagen im Zeitraum 1815 bis 1918.&lt;br /&gt;
Dieser Plan ist uns freundlicherweise vom Verlag &#039;&#039;emons&#039;&#039; zur Verfügung gestellt worden. Urheber ist Udo Beha, spätere Bearbeitungen stammen von Patrick Sonne.&lt;br /&gt;
&lt;br /&gt;
{{#set:Karten-Id=festungsplan}}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;span class=&amp;quot;plainlinks&amp;quot;&amp;gt;[{{fullurl:Kartensammlung|histLayer=festungsplan}} Georeferenzierte Karte in der Kartensammlung ansehen.]&amp;lt;/span&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#subobject:&lt;br /&gt;
|Name=Test 1&lt;br /&gt;
|Position=50.900142, 6.957302&lt;br /&gt;
|Kurzbeschreibung=Erbaut 1833: Nutzung durch &#039;&#039;&#039;Pionier-Bataillon Nr. 7 („Westfälisches“)&#039;&#039;&#039;&lt;br /&gt;
|@category=POI&lt;br /&gt;
}}&lt;br /&gt;
&lt;br /&gt;
{{#subobject:&lt;br /&gt;
|Name=Test 2&lt;br /&gt;
|Position=50.90006, 6.956541&lt;br /&gt;
|Siehe auch=[[Kasernen im preußischen Köln#St.-Agatha-Kaserne]]&lt;br /&gt;
|@category=POI&lt;br /&gt;
}}&lt;br /&gt;
&lt;br /&gt;
{{#subobject:&lt;br /&gt;
|Name=Test 3&lt;br /&gt;
|Position=50.900162, 6.957557&lt;br /&gt;
|Bild=https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/K%C3%B6ln%2C_Weidenbachkaserne%2C_Fassade%2C_1862.tif/lossy-page1-320px-K%C3%B6ln%2C_Weidenbachkaserne%2C_Fassade%2C_1862.tif.jpg&lt;br /&gt;
|@category=POI&lt;br /&gt;
}}&lt;br /&gt;
&lt;br /&gt;
[[Kategorie:Karte]]&lt;br /&gt;
[[Kategorie:Preußische Verwaltung]]&lt;br /&gt;
[[Kategorie:Militär]]&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Attribut:Siehe_auch&amp;diff=24153</id>
		<title>Attribut:Siehe auch</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Attribut:Siehe_auch&amp;diff=24153"/>
		<updated>2021-04-25T10:03:52Z</updated>

		<summary type="html">&lt;p&gt;Simon: Die Seite wurde neu angelegt: „Attributbeschreibung::Ein Verweis auf Seite, auf der man mehr über das Objekt erfahren kann.@de    Datentyp::URL“&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[Attributbeschreibung::Ein Verweis auf Seite, auf der man mehr über das Objekt erfahren kann.@de]]&lt;br /&gt;
&lt;br /&gt;
[[Datentyp::URL]]&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Attribut:Bild&amp;diff=24152</id>
		<title>Attribut:Bild</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Attribut:Bild&amp;diff=24152"/>
		<updated>2021-04-25T09:59:56Z</updated>

		<summary type="html">&lt;p&gt;Simon: Die Seite wurde neu angelegt: „Attributbeschreibung::Ein Verweis auf eine Bilddatei, die das Objekt darstellt.@de    Datentyp::URL“&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[Attributbeschreibung::Ein Verweis auf eine Bilddatei, die das Objekt darstellt.@de]]&lt;br /&gt;
&lt;br /&gt;
[[Datentyp::URL]]&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Attribut:Kurzbeschreibung&amp;diff=24151</id>
		<title>Attribut:Kurzbeschreibung</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Attribut:Kurzbeschreibung&amp;diff=24151"/>
		<updated>2021-04-25T09:56:10Z</updated>

		<summary type="html">&lt;p&gt;Simon: Die Seite wurde neu angelegt: „Attributbeschreibung::Eine kurze textuelle Beschreibung des Objekts, ein Anreißertext@de    Datentyp::Text“&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[Attributbeschreibung::Eine kurze textuelle Beschreibung des Objekts, ein Anreißertext@de]]&lt;br /&gt;
&lt;br /&gt;
[[Datentyp::Text]]&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Kasernen_im_preu%C3%9Fischen_K%C3%B6ln&amp;diff=24150</id>
		<title>Kasernen im preußischen Köln</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Kasernen_im_preu%C3%9Fischen_K%C3%B6ln&amp;diff=24150"/>
		<updated>2021-04-25T09:04:47Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Während der Preußenzeit wurde die Stadt Köln mit enormen Anstrengungen als mächtige Festungsstadt ausgebaut und aufgerüstet (Siehe hierzu auch [[Truppen in Köln in der Preußenzeit (1814-1914)]] ). So zählt man z. B. 22 Kasernen, von denen heutzutage nur wenige Bruchstücke erhalten sind.&amp;lt;ref&amp;gt;Sie hierzu: https://de.wikipedia.org/wiki/Festungsring_K%C3%B6ln&amp;lt;/ref&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Eine Auflistung dieser Kasernen findet sich im Buch &amp;quot;Festungsstadt Köln&amp;quot; von Henriette Meynen, Emons-Verlag; erschienen als Schriftenreihe 1 Fortis Colonia.&lt;br /&gt;
&lt;br /&gt;
==== St.-Agatha-Kaserne ====&lt;br /&gt;
[[An St. Agatha]]; 1819: erste Nutzung als preußische Kaserne; 1864 Abbruch; heute: keine Spuren sichtbar, auf dem Gelände: Gebäudeteil des Kaufhofs.&lt;br /&gt;
&lt;br /&gt;
==== Altenbergerhof-Kaserne ====&lt;br /&gt;
[[Johannisstraße]] gegenüber der Altenberger Straße; 1818-1861: Nutzung als preußische Kaserne; 1861ff: Erweiterungsbauten und Nutzung als Proviantamt, ausgenommen die Jahre 1866 und 1870/71: Unterkunft von Kriegsgefangenen; heute: ursprünglicher Kasernenbau nicht mehr sichtbar, jedoch der Ergänzungsbau einer Kriegsbäckerei in der Johannisstraße (Proviantamt).&lt;br /&gt;
&lt;br /&gt;
==== Barbara-Kaserne ====&lt;br /&gt;
[[Amsterdamer Straße]] 132/Barbarastraße; 1893-1895: erbaut, Nutzung durch &#039;&#039;&#039;Bergisches Feldartillerieregiment Nr. 59&#039;&#039;&#039;, ab 1899 durch &#039;&#039;&#039;Feldartillerieregiment Nr. 23&#039;&#039;&#039;; 1918-1926: Kaserne der britischen Besatzung; 1926ff: Polizei und Notunterkünfte; im Zuge der Militarisierung der 1930er Jahre: Kaserne; Zweiter Weltkrieg: Teilzerstörung, nach dem Krieg völliger Abbruch; 1984 auf dem Gelände: Bundesversorgungsamt; heute: keine Spuren mehr sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Benediktiner-Kaserne ====&lt;br /&gt;
[[Urbanstraße]] 1; 1816: erste Nutzung als preußische Kaserne und Artilleriewerkstatt; 1878/79: Aufstockung um ein Geschoss; 1926ff: Provinzialmuseum; 1932: Schnütgenmuseum; Zweiter Weltkrieg; Teilzerstörung; heute: Altenwohnheim im wiederaufgebauten Gebäude.&lt;br /&gt;
&lt;br /&gt;
==== Defensions-Kaserne ====&lt;br /&gt;
Rheingarten/[[Am Bollwerk]]; 1841-1843: erbaut und Nutzung als Hauptsteueramt; 1898: Abbruch; heute: Grundriss im Rheingarten mit Steinsetzungen nachgebildet.&lt;br /&gt;
&lt;br /&gt;
==== Dominikaner-Kaserne ====&lt;br /&gt;
[[An den Dominikanern]] 6-8; Franzosenzeit: Umnutzung des Dominikanerklosters zur Kaserne; ab 1817: preußische Kaserne; 1889: Abbruch für den Neubau des Hauptpostamtes, nach dessen Abbruch um 2000 auf dem Gelände: Seniorenresidenz (Residenz am Dom) erbaut; heute: keine Spuren sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Fischer-Kaserne ====&lt;br /&gt;
[[Barbarastraße]] 3-9; 1899-1901: erbaut, Nutzung durch &#039;&#039;&#039;III. Feldartillerieregiment Nr. 23 / Bergisches Feldartillerieregiment Nr. 59&#039;&#039;&#039;; 1918-1926: Kaserne der britischen Besatzung; 1926: Notunterkünfte und Lagerräume des Wohlfahrtsamtes; im Zuge der Militarisierung der 1930er Jahre: Kaserne; Zweiter Weltkrieg: Teilzerstörung; 1945: Notunterkünfte; ab 1960er Jahre: Gewerbehof Barbarastraße, heute erhalten: Mehrzahl der Gebäude.&lt;br /&gt;
&lt;br /&gt;
==== Franziskaner-Kaserne ====&lt;br /&gt;
[[Richmodstraße]]/An der alten Post; 1818: erste Nutzung als preußische Kaserne; 1909: Abbruch, heute auf dem Gelände: Einkaufszentrum Olivandenhof und Karstadt, keine Spuren sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Fußartillerie-Kaserne ====&lt;br /&gt;
[[Bonner Straße]] 500; 1910/11: erbaut; 1918-1926: Kaserne der britischen Besatzung; 1926: Polizei und Planung von Kleinwohnungen; 1927ff: Teile umgebaut für die Firma Leybold Vakuum GmbH; im Zuge der Militisierung der 1930er Jahre: Kaserne; Zweiter Weltkrieg: Teilzerstörung; 1945: Notunterkünfte; nach 1945: Wiederaufbau für Firma Leybold und Polizei.&lt;br /&gt;
&lt;br /&gt;
==== Hacketäuer-Kaserne ====&lt;br /&gt;
Von-Sparr-Straße/[[Hacketäuerstraße]]/Tiefentalstraße/Clevischer Ring; 1894-1897: erbaut, Nutzung durch &#039;&#039;&#039;3. Westfälisches Infanterieregiment Nr. 16&#039;&#039;&#039;; 1918-1926: Kaserne der britischen Besatzung; 1926: Notunterkünfte, Landespolizei; 1936-1945: Kaserne; 1945: Notunterkünfte; 1966ff: Abbruch und Errichtung von Wohnbauten sowie soziale Einrichtungen der Stadt; heute auf dem Gelände: Wohnblöcke und keine Spuren sichtbar, erhalten nur Gebäude der in der Tiefentalstraße 1913 errichteten Nebenkaserne.&lt;br /&gt;
* [https://museenkoeln.de/ns-dokumentationszentrum/default.aspx?s=2505&amp;amp;sfrom=1228&amp;amp;id=359&amp;amp;stt=K%C3%B6ln-M%C3%BClheim&amp;amp;fbclid=IwAR3ko3BUwRF2QCIKRlHFex3HQVSGrWRj3QuGXzV_SmCnEUE-Vz5JEl7YNgw NS-Dokumentationszentrum Köln]&lt;br /&gt;
&lt;br /&gt;
==== Infanterie-Kaserne auf der Mülheimer Heide in Riehl ====&lt;br /&gt;
[[Boltensternstraße]]; 1909-1912: erbaut; 1918-1926: britische Besatzung; 1926: Umnutzung als Teil der Riehler Heimstätten; heute: Teil der Riehler Heimstätten mit etwas verändertem Baubestand.&lt;br /&gt;
* [https://www.kuladig.de/Objektansicht/KLD-296849?fbclid=IwAR0_5pOKYAbf3r7IjyKboiz6k8aq9syQ_fYvp3Ei1uV4f-mSgjuwbrZb7Mk KuLaDig]&lt;br /&gt;
&lt;br /&gt;
==== Kavallerie-Kaserne Deutz ====&lt;br /&gt;
[[Urbanstraße]] 26; 1819-1823: erbaut, Nutzung durch &#039;&#039;&#039;Kürassierregiment Graf Geßler (Rhein.) Nr. 8&#039;&#039;&#039;; 1928: als Museumsbau Teil der Pressa-Ausstellung; 1936: Haus der Rheinischen Heimat (=Historisches Museum der Stadt Köln); Zweiter Weltkrieg: Teilzerstörung; 1957-1959 auf dem Gelände: Landeshaus (Gebäude des Landschaftsverbandes Rheinland); heute: keine Spuren sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Kronprinzen-Kaserne Kalk ====&lt;br /&gt;
[[Eythstraße]] 70-72; 1893-1895: erbaut, Nutzung durch &#039;&#039;&#039;5. Westfälisches Infanterieregiment Nr. 53&#039;&#039;&#039;; 1918-1926: Notunterkünfte, Polizeistation, Wohlfahrtseinrichtungen, im Zuge der Militarisierung der 1930er Jahre: Kaserne; Zweiter Weltkrieg: Teilzerstörung; Nachkriegszeit: Umbau der verbliebenen Reste zu sozialen Einrichtungen der Stadt Köln; heute erhalten: südöstliche Kasernenbauten.&lt;br /&gt;
&lt;br /&gt;
==== Luftschiffer-Kaserne ====&lt;br /&gt;
[[Parsevalstraße]] (früher Frohnhofstraße 190); 1912-1914: erbaut; 1918-1926: Kaserne der britischen Besatzung; 1926ff: Notunterkünfte; 1969: Abbruch und Errichtung einer Wohnsiedlung auf dem Gelände; heute: keine Spuren sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Machabäer-Kaserne ====&lt;br /&gt;
[[Machabäerstraße]]/Domstraße; 1816/17: erste Nutzung als preußische Kaserne; 1928/29: Neubau des Westflügels; 1844: Neubau des Ostflügels; 1886: Erweiterungsbauten; 1910: Abbruch; heute: typische Straßenrandbebauung auf dem Gelände, unter anderem evangelische Kreuzkirche, keine Spuren sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Martins-Kaserne ====&lt;br /&gt;
[[An Groß St. Martin|An Groß St.Martin]]; 1815: erste Nutzung als preußische Kaserne; um 1835: Abbruch und kurz darauf Anlage einer Wohnstraße auf dem Gelände; heute: keine Spuren sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Neumarkt-Kaserne ====&lt;br /&gt;
[[Neumarkt]] (Nordseite); 1819: erste Nutzung als preußische, danach mehrere Umbauten, Nutzung durch &#039;&#039;&#039;10. Rheinisches Infanterieregiment Nr. 161&#039;&#039;&#039;; 1861/62 und 1880/81: Erweiterungsbauten; 1911-1920: Abbruch; heute: auf dem Gelände: Warenhäuser (Neumarkt Galerie und Schwerthof), keine Spuren sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Pionier-Kasernen Riehl ====&lt;br /&gt;
[[Boltensternstraße]]/An der Schanz; 1907/08: erbaut, Nutzung durch &#039;&#039;&#039;Pionier-Bataillon Nr. 24&#039;&#039;&#039;; 1918-1926: Kaserne der britischen Besatzung; 1926: Teile von der Polizei genutzt, übrige Teile bis 1932 für die Riehler Heimstätten hergerichtet; heute: Teil der Riehler Heimstätten mit etwas verändertem Baubestand.&lt;br /&gt;
&lt;br /&gt;
==== Kasernen an der Slabystraße ====&lt;br /&gt;
[[Hertha-Kraus-Straße]]; 1913/14: erbaut; 1918-1926: Kaserne der britischen Besatzung; 1926: Umnutzung als Teil der Riehler Heimstätten; heute: Teil der Riehler Heimstätten mit etwas verändertem Baubestand.&lt;br /&gt;
&lt;br /&gt;
==== Ulrich-Kaserne ====&lt;br /&gt;
[[Ulrichgasse]] 1-3/Kartäuserwall; 1875-1877: erbaut, Nutzung durch &#039;&#039;&#039;III. Bataillon 5. Westfälisches Infanterieregiment Nr. 53&#039;&#039;&#039;; 1918-1926: Kaserne der britischen Besatzung; 1927: Umbau zur Gewerbeschule; Zweiter Weltkrieg: zerstört; 1949-1956 auf dem Gelände: Berufsschule und Berufskolleg; heute: keine Spuren mehr sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Weidenbach-Kaserne ====&lt;br /&gt;
[[Datei:Köln, Weidenbachkaserne, Fassade, 1862.tif|mini|Weidenbachkaserne 1862]]&lt;br /&gt;
[[Am Weidenbach]]/Friedrichstraße; 1815: erste Nutzung als preußische Kaserne, Nutzung durch &#039;&#039;&#039;III. Bataillon 5. Westfälisches Infanterieregiment Nr. 53&#039;&#039;&#039;; 1861/62 und 1883-1894: Erweiterungsbauten; 1912-1918: Nutzung durch 10. Rheinisches Infanterieregiment Nr. 161; 1918-1920: Kaserne der britischen Besatzung; 1920ff: Polizei; Zweiter Weltkrieg: zerstört; 1952/53 auf dem Gelände errichtet: Bauten des Finanzamtes (Finanzämter Köln-Mitte und Köln-Süd); heute: keine Spuren sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Zugweg-Kaserne  ====&lt;br /&gt;
[[Zugweg]]/Wormser Straße; 1886-1889: erbaut; 1886-1897: Erweiterungsbau; 1918-1926: Kaserne der britischen Besatzung; 1926: Polizei; Zweiter Weltkrieg: zerstört; heute auf dem Gelände: Schulzentrum, keine Spuren sichtbar.&lt;br /&gt;
&lt;br /&gt;
==== Kasematten Deutz ====&lt;br /&gt;
Erbaut 1833: Nutzung durch &#039;&#039;&#039;Pionier-Bataillon Nr. 7 („Westfälisches“)&#039;&#039;&#039;&lt;br /&gt;
&lt;br /&gt;
==== Schießplatz Wahn ====&lt;br /&gt;
Erbaut 1870: Nutzung durch &#039;&#039;&#039;7. königlich-preußische Artilleriebrigade&#039;&#039;&#039; (Die 7. königlich-preußische Artilleriebrigade wurde ab 1817 zunächst in Privatquartieren, ab 1865 teilweise in Zelten, ab 1870 in festen Bauten auf Schießplatz Wahn untergebracht.).&lt;br /&gt;
&lt;br /&gt;
[[Kategorie:Preußische Verwaltung]]&lt;br /&gt;
[[Kategorie:Nachkriegszeit]]&lt;br /&gt;
[[Kategorie:Organisation]]&lt;br /&gt;
&amp;lt;references /&amp;gt;&lt;br /&gt;
[[Kategorie:Militär]]&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24149</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24149"/>
		<updated>2021-04-24T20:25:04Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, dataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (dataLayerUrl) {&lt;br /&gt;
			loadJson(dataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					},&lt;br /&gt;
					pointToLayer: function(geoJsonPoint, latlng) {&lt;br /&gt;
						return L.marker(latlng, {&lt;br /&gt;
							title: geoJsonPoint.properties.title,&lt;br /&gt;
							riseOnHover: true&lt;br /&gt;
						});&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(result =&amp;gt; {&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {&lt;br /&gt;
					&amp;quot;title&amp;quot;: object.printouts.Name[0]&lt;br /&gt;
				}&lt;br /&gt;
			};&lt;br /&gt;
			return feature;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24147</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24147"/>
		<updated>2021-04-24T20:07:10Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, dataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (dataLayerUrl) {&lt;br /&gt;
			loadJson(dataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(result =&amp;gt; {&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lon, object.printouts.Position[0].lat]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {&lt;br /&gt;
					&amp;quot;title&amp;quot;: object.printouts.Name[0]&lt;br /&gt;
				}&lt;br /&gt;
			};&lt;br /&gt;
			return feature;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24146</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24146"/>
		<updated>2021-04-24T19:59:25Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, dataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (dataLayerUrl) {&lt;br /&gt;
			loadJson(dataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
debugger;&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(result =&amp;gt; {&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lat, object.printouts.Position[0].lon]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {&lt;br /&gt;
					&amp;quot;title&amp;quot;: object.printouts.Name[0]&lt;br /&gt;
				}&lt;br /&gt;
			};&lt;br /&gt;
			return feature;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24144</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24144"/>
		<updated>2021-04-24T19:57:58Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, dataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (dataLayerUrl) {&lt;br /&gt;
			loadJson(dataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(result =&amp;gt; {&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lat, object.printouts.Position[0].lon]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {&lt;br /&gt;
					&amp;quot;title&amp;quot;: object.printouts.Name[0]&lt;br /&gt;
				}&lt;br /&gt;
			};&lt;br /&gt;
			return feature;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24141</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24141"/>
		<updated>2021-04-24T19:55:23Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, dataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (dataLayerUrl) {&lt;br /&gt;
			loadJson(dataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
debugger;&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(result =&amp;gt; {&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lat, object.printouts.Position[0].lon]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {&lt;br /&gt;
					&amp;quot;title&amp;quot;: object.printouts.Name&lt;br /&gt;
				}&lt;br /&gt;
			};&lt;br /&gt;
			return feature;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24140</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24140"/>
		<updated>2021-04-24T19:54:11Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, dataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (dataLayerUrl) {&lt;br /&gt;
			loadJson(dataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(result =&amp;gt; {&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lat, object.printouts.Position[0].lon]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {&lt;br /&gt;
					&amp;quot;title&amp;quot;: object.printouts.Name&lt;br /&gt;
				}&lt;br /&gt;
			};&lt;br /&gt;
			return feature;&lt;br /&gt;
		});&lt;br /&gt;
		return geoJson;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24139</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24139"/>
		<updated>2021-04-24T19:52:43Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, dataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (dataLayerUrl) {&lt;br /&gt;
			loadJson(dataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
debugger;&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(result =&amp;gt; {&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lat, object.printouts.Position[0].lon]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {&lt;br /&gt;
					&amp;quot;title&amp;quot;: object.printouts.Name&lt;br /&gt;
				}&lt;br /&gt;
			};&lt;br /&gt;
			return feature;&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24124</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24124"/>
		<updated>2021-04-24T19:44:16Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, dataLayerUrl, poiDataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (dataLayerUrl) {&lt;br /&gt;
			loadJson(dataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		if (poiDataLayerUrl) {&lt;br /&gt;
			loadJson(poiDataLayerUrl, function(response) {&lt;br /&gt;
				var data = convertSmwResultToGeoJson(response);&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die anzuzeigenden Daten konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function convertSmwResultToGeoJson(response) {&lt;br /&gt;
		var results = response.query.results;&lt;br /&gt;
		var geoJson = {&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;FeatureCollection&amp;quot;,&lt;br /&gt;
			&amp;quot;features&amp;quot;: []&lt;br /&gt;
		};&lt;br /&gt;
		geoJson.features = results.map(result =&amp;gt; {&lt;br /&gt;
			var object = result[Object.keys(result)[0]];&lt;br /&gt;
			var feature = {&lt;br /&gt;
				&amp;quot;type&amp;quot;: &amp;quot;Feature&amp;quot;,&lt;br /&gt;
				&amp;quot;geometry&amp;quot;: {&lt;br /&gt;
					&amp;quot;type&amp;quot;: &amp;quot;Point&amp;quot;,&lt;br /&gt;
					&amp;quot;coordinates&amp;quot;: [object.printouts.Position[0].lat, object.printouts.Position[0].lon]&lt;br /&gt;
				},&lt;br /&gt;
				&amp;quot;properties&amp;quot;: {&lt;br /&gt;
					&amp;quot;title&amp;quot;: object.printouts.Name&lt;br /&gt;
				}&lt;br /&gt;
			};&lt;br /&gt;
			return feature;&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	function getPoiDataLayerUrl() {&lt;br /&gt;
		var poiConcept = getQueryParameter(&amp;quot;pois&amp;quot;);&lt;br /&gt;
		if (poiConcept) {&lt;br /&gt;
			// TODO Check the rest is a valid page name?&lt;br /&gt;
			if (poiConcept.indexOf(&amp;quot;Concept:&amp;quot;) === 0) {&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/api.php?action=askargs&amp;amp;conditions=&amp;quot; + poiConcept + &amp;quot;&amp;amp;printouts=Name|Position&amp;amp;format=json&amp;amp;api_version=3&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getDataLayerUrl(), getPoiDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Konzept:FestungsplanPOIs&amp;diff=24123</id>
		<title>Konzept:FestungsplanPOIs</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Konzept:FestungsplanPOIs&amp;diff=24123"/>
		<updated>2021-04-24T16:30:37Z</updated>

		<summary type="html">&lt;p&gt;Simon: Die Seite wurde neu angelegt: „{{#concept:   -Has subobject::Festungsplan 1815-1918   Category:POI    |Points of Interest für den Festungsplan 1815-1918  }}“&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;{{#concept:&lt;br /&gt;
 [[-Has subobject::Festungsplan 1815-1918]]&lt;br /&gt;
 [[Category:POI]] &lt;br /&gt;
 |Points of Interest für den Festungsplan 1815-1918&lt;br /&gt;
}}&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Festungsplan_1815-1918&amp;diff=24122</id>
		<title>Festungsplan 1815-1918</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Festungsplan_1815-1918&amp;diff=24122"/>
		<updated>2021-04-24T16:23:33Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[Datei:Köln-Festungsplan-1815-1918.jpg|thump|left|700px]]&lt;br /&gt;
Eine Gesamtübersicht der preußischen Festungsanlagen im Zeitraum 1815 bis 1918.&lt;br /&gt;
Dieser Plan ist uns freundlicherweise vom Verlag &#039;&#039;emons&#039;&#039; zur Verfügung gestellt worden. Urheber ist Udo Beha, spätere Bearbeitungen stammen von Patrick Sonne.&lt;br /&gt;
&lt;br /&gt;
{{#set:Karten-Id=festungsplan}}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;span class=&amp;quot;plainlinks&amp;quot;&amp;gt;[{{fullurl:Kartensammlung|histLayer=festungsplan}} Georeferenzierte Karte in der Kartensammlung ansehen.]&amp;lt;/span&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#subobject:&lt;br /&gt;
|Name=Test 1&lt;br /&gt;
|Position=50.900142, 6.957302&lt;br /&gt;
|@category=POI&lt;br /&gt;
}}&lt;br /&gt;
&lt;br /&gt;
{{#subobject:&lt;br /&gt;
|Name=Test 2&lt;br /&gt;
|Position=50.90006, 6.956541&lt;br /&gt;
|@category=POI&lt;br /&gt;
}}&lt;br /&gt;
&lt;br /&gt;
{{#subobject:&lt;br /&gt;
|Name=Test 3&lt;br /&gt;
|Position=50.900162, 6.957557&lt;br /&gt;
|@category=POI&lt;br /&gt;
}}&lt;br /&gt;
&lt;br /&gt;
[[Kategorie:Karte]]&lt;br /&gt;
[[Kategorie:Preußische Verwaltung]]&lt;br /&gt;
[[Kategorie:Militär]]&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Festungsplan_1815-1918&amp;diff=24121</id>
		<title>Festungsplan 1815-1918</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Festungsplan_1815-1918&amp;diff=24121"/>
		<updated>2021-04-24T16:15:54Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[Datei:Köln-Festungsplan-1815-1918.jpg|thump|left|700px]]&lt;br /&gt;
Eine Gesamtübersicht der preußischen Festungsanlagen im Zeitraum 1815 bis 1918.&lt;br /&gt;
Dieser Plan ist uns freundlicherweise vom Verlag &#039;&#039;emons&#039;&#039; zur Verfügung gestellt worden. Urheber ist Udo Beha, spätere Bearbeitungen stammen von Patrick Sonne.&lt;br /&gt;
&lt;br /&gt;
{{#set:Karten-Id=festungsplan}}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;span class=&amp;quot;plainlinks&amp;quot;&amp;gt;[{{fullurl:Kartensammlung|histLayer=festungsplan}} Georeferenzierte Karte in der Kartensammlung ansehen.]&amp;lt;/span&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#subobject:&lt;br /&gt;
|Name=Test 1&lt;br /&gt;
|Position=50.900142, 6.957302&lt;br /&gt;
|@category:POI&lt;br /&gt;
}}&lt;br /&gt;
&lt;br /&gt;
{{#subobject:&lt;br /&gt;
|Name=Test 2&lt;br /&gt;
|Position=50.90006, 6.956541&lt;br /&gt;
|@category:POI&lt;br /&gt;
}}&lt;br /&gt;
&lt;br /&gt;
{{#subobject:&lt;br /&gt;
|Name=Test 3&lt;br /&gt;
|Position=50.900162, 6.957557&lt;br /&gt;
|@category:POI&lt;br /&gt;
}}&lt;br /&gt;
&lt;br /&gt;
[[Kategorie:Karte]]&lt;br /&gt;
[[Kategorie:Preußische Verwaltung]]&lt;br /&gt;
[[Kategorie:Militär]]&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Festungsplan_1815-1918&amp;diff=24065</id>
		<title>Festungsplan 1815-1918</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Festungsplan_1815-1918&amp;diff=24065"/>
		<updated>2021-04-20T18:35:31Z</updated>

		<summary type="html">&lt;p&gt;Simon: Kategorien, Verlinkung zur Kartensammlung, semantische Daten, Beschreibung erweitert&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[Datei:Köln-Festungsplan-1815-1918.jpg|thump|left|700px]]&lt;br /&gt;
Eine Gesamtübersicht der preußischen Festungsanlagen im Zeitraum 1815 bis 1918.&lt;br /&gt;
Dieser Plan ist uns freundlicherweise vom Verlag Bachem zur Verfügung gestellt worden. Urheber ist Udo Beha, spätere Bearbeitungen stammen von Patrick Sonne.&lt;br /&gt;
&lt;br /&gt;
{{#set:Karten-Id=festungsplan}}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;span class=&amp;quot;plainlinks&amp;quot;&amp;gt;[{{fullurl:Kartensammlung|histLayer=festungsplan}} Georeferenzierte Karte in der Kartensammlung ansehen.]&amp;lt;/span&amp;gt;&lt;br /&gt;
&lt;br /&gt;
[[Kategorie:Karte]]&lt;br /&gt;
[[Kategorie:Preußische Verwaltung]]&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24061</id>
		<title>Widget:Karte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:Karte&amp;diff=24061"/>
		<updated>2021-04-20T18:00:27Z</updated>

		<summary type="html">&lt;p&gt;Simon: Festungsplan hinzugefügt&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
.ak-map-container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-sidebar {&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	width: 20vw;&lt;br /&gt;
	min-width: 300px;&lt;br /&gt;
	height: 600px;&lt;br /&gt;
	padding: 2em;&lt;br /&gt;
	overflow-y: auto;&lt;br /&gt;
&lt;br /&gt;
	font-family: Arial, sans-serif;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
	color: #495057;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset {&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin-bottom: 1.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container fieldset legend {&lt;br /&gt;
	margin-bottom: 0.75em;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
&lt;br /&gt;
	font-weight: 600;&lt;br /&gt;
	font-size: 16px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label,&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container label {&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-container input {&lt;br /&gt;
	margin-left: 0;&lt;br /&gt;
	margin-right: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers,&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-basemaps li+li {&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
	margin-bottom: 0;&lt;br /&gt;
	border-left-width: 0.5em;&lt;br /&gt;
	border-left-style: solid;&lt;br /&gt;
	padding-left: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li+li {&lt;br /&gt;
	padding-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 1em;&lt;br /&gt;
	/* Info icon taken from https://feathericons.com/ */&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layers li label+a:hover {&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23339af0&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-mittelalter {&lt;br /&gt;
	border-color: #e03131;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-franzoesisch {&lt;br /&gt;
	border-color: #3b5bdb;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-preussisch {&lt;br /&gt;
	border-color: #212529;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-map-layer-nachkriegszeit {&lt;br /&gt;
	border-color: #adb5bd;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Metadata container that may be added by the wiki page to hand more information over to the map. */&lt;br /&gt;
.ak-map-metadata {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Opacity slider */&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider {&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	width: 150px;&lt;br /&gt;
	height: 40px;&lt;br /&gt;
	background: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: -8.5px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	-webkit-appearance: none;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-moz-range-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.5);&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-track {&lt;br /&gt;
	width: 100%;&lt;br /&gt;
	height: 11.4px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 10px;&lt;br /&gt;
	background: linear-gradient(to right, rgb(255,255,255), #ffc078);&lt;br /&gt;
	box-sizing: border-box;&lt;br /&gt;
	color: transparent;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-thumb {&lt;br /&gt;
	width: 26px;&lt;br /&gt;
	height: 26px;&lt;br /&gt;
	margin-top: 0px;&lt;br /&gt;
	border: 1px solid #adb5bd;&lt;br /&gt;
	border-radius: 15px;&lt;br /&gt;
	box-shadow: none;&lt;br /&gt;
	background: #ffffff;&lt;br /&gt;
	cursor: pointer;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-lower,&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-fill-upper {&lt;br /&gt;
	background: transparent;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
input[type=range].ak-map-opacity-slider::-ms-tooltip {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
(function () {&lt;br /&gt;
&lt;br /&gt;
	L.Control.OpacitySlider = L.Control.extend({&lt;br /&gt;
		options: {&lt;br /&gt;
			position: &amp;quot;topright&amp;quot;,&lt;br /&gt;
			initialValue: 0.7,&lt;br /&gt;
			className: &amp;quot;ak-map-opacity-slider&amp;quot;,&lt;br /&gt;
			label: &amp;quot;Transparenz&amp;quot;,&lt;br /&gt;
			opacityLayer: undefined&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		onAdd: function(map) {&lt;br /&gt;
			var sliderContainerElement = L.DomUtil.create(&amp;quot;div&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
			var sliderElement = L.DomUtil.create(&amp;quot;input&amp;quot;, this.options.className);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;range&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;min&amp;quot;, &amp;quot;0&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;max&amp;quot;, &amp;quot;1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;step&amp;quot;, &amp;quot;0.1&amp;quot;);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;value&amp;quot;, this.options.initialValue);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;title&amp;quot;, this.options.label);&lt;br /&gt;
			sliderElement.setAttribute(&amp;quot;aria-label&amp;quot;, this.options.label);&lt;br /&gt;
&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;input&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Necessary for IE10/11 support&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;change&amp;quot;, this._setOpacity.bind(this));&lt;br /&gt;
			// Prevent dragging of slider handle from moving the map.&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mousedown&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.disable();&lt;br /&gt;
			});&lt;br /&gt;
			L.DomEvent.on(sliderElement, &amp;quot;mouseup&amp;quot;, function(event) {&lt;br /&gt;
				map.dragging.enable();&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			this._sliderElement = sliderElement;&lt;br /&gt;
			this.setOpacityLayer(this.options.opacityLayer);&lt;br /&gt;
&lt;br /&gt;
			sliderContainerElement.appendChild(sliderElement);&lt;br /&gt;
			return sliderContainerElement;&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		_setOpacity: function() {&lt;br /&gt;
			if (this._opacityLayer) {&lt;br /&gt;
				this._opacityLayer.setOpacity(this._sliderElement.value);&lt;br /&gt;
			}&lt;br /&gt;
		},&lt;br /&gt;
&lt;br /&gt;
		setOpacityLayer: function(layer) {&lt;br /&gt;
			this._opacityLayer = layer;&lt;br /&gt;
			this._setOpacity();&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	L.control.opacitySlider = function(opts) {&lt;br /&gt;
		return new L.Control.OpacitySlider(opts);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow, dataLayerUrl) {&lt;br /&gt;
		if (mapContainerElement.dataset.initialised) {&lt;br /&gt;
			return;&lt;br /&gt;
		}&lt;br /&gt;
		mapContainerElement.dataset.initialised = true;&lt;br /&gt;
&lt;br /&gt;
		var mapElement = mapContainerElement.getElementsByClassName(&amp;quot;ak-map&amp;quot;)[0];&lt;br /&gt;
&lt;br /&gt;
		var mapView = L.map(mapElement, {&lt;br /&gt;
			// Bounding box for Köln (&amp;lt;https://www.openstreetmap.org/relation/62578&amp;gt;).&lt;br /&gt;
			maxBounds: [&lt;br /&gt;
				[50.8304494, 6.7725303],&lt;br /&gt;
				[51.0849743, 7.1620280]&lt;br /&gt;
			],&lt;br /&gt;
		}).setView([50.938056, 6.956944], 14);&lt;br /&gt;
&lt;br /&gt;
		mapView.on(&#039;zoom&#039;, function(event) {&lt;br /&gt;
			// For testing purposes and to figure out good min/max zoom levels for new maps.&lt;br /&gt;
			console.log(&amp;quot;Zoom:&amp;quot;, mapView.getZoom());&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Base layers&lt;br /&gt;
		var osmLayer = L.tileLayer(&#039;https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			attribution: &#039;&amp;amp;copy; &amp;lt;a href=&amp;quot;https://www.openstreetmap.org/copyright&amp;quot;&amp;gt;OpenStreetMap&amp;lt;/a&amp;gt; contributors&#039;&lt;br /&gt;
		});&lt;br /&gt;
		var dopLayer = L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dop?&#039;, {&lt;br /&gt;
			layers: &#039;nw_dop_rgb&#039;,&lt;br /&gt;
			minZoom: 6,&lt;br /&gt;
			maxZoom: 18,&lt;br /&gt;
			bounds: [&lt;br /&gt;
				[52.57192795134163, 9.683550865862706],&lt;br /&gt;
				[50.265130303028236, 5.532200974503678]&lt;br /&gt;
			],&lt;br /&gt;
			version: &#039;1.3.0&#039;,&lt;br /&gt;
			attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		var eras = {&lt;br /&gt;
			mittelalter: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-mittelalter&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mittelalter / Freie Reichsstadt / Hansestadt Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			franzoesisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-franzoesisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Französisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			preussisch: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-preussisch&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Preußisches Köln&amp;quot;&lt;br /&gt;
			},&lt;br /&gt;
			nachkriegszeit: {&lt;br /&gt;
				&amp;quot;class&amp;quot;: &amp;quot;ak-map-layer-nachkriegszeit&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Nachkriegszeit bis heute&amp;quot;&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		// Historical maps&lt;br /&gt;
		var maps = [&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;mercator&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1571 Mercator&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/40952&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.deutschefotothek.de/documents/obj/70305086&amp;quot;&amp;gt;Originaldatei © SLUB / Deutsche Fotothek&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;https://creativecommons.org/licenses/by-sa/4.0/&amp;quot;&amp;gt;cc-by-sa&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;merian&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1641 Merian&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39783&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;reinhardt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1752 Reinhardt&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Kölner Stadtplan von 1752, Johann Valentin Reinhardt&amp;quot;,&lt;br /&gt;
				era: eras.mittelalter,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/41691&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;stockdale&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1800 Stockdale&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;A Plan of the City of Cologne, 1800, John Stockdale&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39780&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tranchot&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1801-1828 Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tranchot?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tranchot&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 16,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;vogt&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815 Vogt/Picquet&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet&amp;quot;,&lt;br /&gt;
				era: eras.franzoesisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39826&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;festungsplan&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1815-1918 Festungsplan&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Standorte von militärischen Bauwerken und Anlagen in den Jahren 1815-1918&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/56436/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/56436&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;uraufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1836-1850 Uraufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_uraufnahme_rw&#039;,&lt;br /&gt;
					minNativeZoom: 14,&lt;br /&gt;
					minZoom: 12,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;neuaufnahme&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1891-1912 Neuaufnahme&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?&#039;, {&lt;br /&gt;
					layers: &#039;nw_neuaufnahme&#039;,&lt;br /&gt;
					minNativeZoom: 12,&lt;br /&gt;
					minZoom: 10,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					// 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.&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;meyer&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1900 Meyer&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Meyers Stadtplan von Köln um 1900&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer(&#039;https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png&#039;, {&lt;br /&gt;
					minZoom: 6,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					// TODO Restrict bounds even further.&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					attribution: &#039;&amp;lt;a href=&amp;quot;https://mapwarper.net/maps/39790&amp;quot;&amp;gt;Georeferenzierte Datei&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;tk25&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1936-1945 TK25&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Topographische Karten - ältere Auflagejahre&amp;quot;,&lt;br /&gt;
				era: eras.preussisch,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?&#039;, {&lt;br /&gt;
					layers: &#039;nw_tk25_1936-1945&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 17,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;hop&amp;quot;,&lt;br /&gt;
				label: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;1988-1994 Historische Orthophotos&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?&#039;, {&lt;br /&gt;
					layers: &#039;nw_histortho_1988-1994&#039;,&lt;br /&gt;
					minNativeZoom: 15,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			},&lt;br /&gt;
			{&lt;br /&gt;
				id: &amp;quot;dgk&amp;quot;,&lt;br /&gt;
				label: &amp;quot;-2016 Deutsche Grundkarte&amp;quot;,&lt;br /&gt;
				tooltip: &amp;quot;Deutsche Grundkarte 1:5.000 (DGK5) – historisch&amp;quot;,&lt;br /&gt;
				era: eras.nachkriegszeit,&lt;br /&gt;
				layer: L.tileLayer.wms(&#039;https://www.wms.nrw.de/geobasis/wms_nw_dgk5?&#039;, {&lt;br /&gt;
					layers: &#039;nw_dgk5_grundriss&#039;,&lt;br /&gt;
					minNativeZoom: 16,&lt;br /&gt;
					minZoom: 13,&lt;br /&gt;
					maxZoom: 18,&lt;br /&gt;
					bounds: [&lt;br /&gt;
						[50.8304494, 6.7725303],&lt;br /&gt;
						[51.0849743, 7.1620280]&lt;br /&gt;
					],&lt;br /&gt;
					transparent: true,&lt;br /&gt;
					// Transparency only works with PNGs.&lt;br /&gt;
					format: &#039;image/png; mode=8bit&#039;,&lt;br /&gt;
					version: &#039;1.3.0&#039;,&lt;br /&gt;
					attribution: &#039;Land NRW (2019), dl-de/by-2-0 (&amp;lt;a href=&amp;quot;https://www.govdata.de/dl-de/by-2-0&amp;quot;&amp;gt;www.govdata.de/dl-de/by-2-0&amp;lt;/a&amp;gt;), &amp;lt;a href=&amp;quot;https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html&amp;quot;&amp;gt;Datensatz&amp;lt;/a&amp;gt;&#039;&lt;br /&gt;
				})&lt;br /&gt;
			}&lt;br /&gt;
		];&lt;br /&gt;
&lt;br /&gt;
		// TODO Find a way to display the attribution of the layers more clearly. &amp;quot;|&amp;quot; as a separator instead of &amp;quot;,&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
		var baseLayerOsmElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--osm&amp;quot;);&lt;br /&gt;
		var baseLayerDopElement = mapContainerElement.querySelector(&amp;quot;.ak-base-map-selection--dop&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		// Keeping track of selected layers. Set initially selected ones.&lt;br /&gt;
		var currentHistLayer = maps[0];&lt;br /&gt;
		var currentBaseLayer = osmLayer;&lt;br /&gt;
		if (baseLayerToShow) {&lt;br /&gt;
			if (baseLayerToShow === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = osmLayer;&lt;br /&gt;
			} else if (baseLayerToShow === &amp;quot;dop&amp;quot;) {&lt;br /&gt;
				currentBaseLayer = dopLayer;&lt;br /&gt;
				baseLayerDopElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		if (historicalLayerToShow) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; maps.length; i++) {&lt;br /&gt;
				if (maps[i].id === historicalLayerToShow) {&lt;br /&gt;
					currentHistLayer = maps[i];&lt;br /&gt;
					break;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		// Switching between base layers&lt;br /&gt;
		function baseLayerSwitcher() {&lt;br /&gt;
			if (this.checked) {&lt;br /&gt;
				currentBaseLayer.remove();&lt;br /&gt;
				if (this.value === &amp;quot;osm&amp;quot;) {&lt;br /&gt;
					currentBaseLayer = osmLayer;&lt;br /&gt;
				} else {&lt;br /&gt;
					currentBaseLayer = dopLayer;&lt;br /&gt;
				}&lt;br /&gt;
				// TODO Funktioniert nicht.&lt;br /&gt;
				currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom;&lt;br /&gt;
				currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom;&lt;br /&gt;
				currentBaseLayer.addTo(mapView);&lt;br /&gt;
				currentBaseLayer.bringToBack();&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		baseLayerOsmElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
		baseLayerDopElement.addEventListener(&amp;quot;change&amp;quot;, baseLayerSwitcher);&lt;br /&gt;
&lt;br /&gt;
		// Setting opacity&lt;br /&gt;
		var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Render radio buttons for historical map switching.&lt;br /&gt;
		var layersListElement = mapContainerElement.querySelector(&amp;quot;.ak-map-layers&amp;quot;);&lt;br /&gt;
		maps.forEach(function(map) {&lt;br /&gt;
			var listItemElement = L.DomUtil.create(&amp;quot;li&amp;quot;, map.era[&amp;quot;class&amp;quot;]);&lt;br /&gt;
			listItemElement.setAttribute(&amp;quot;title&amp;quot;, map.era.tooltip);&lt;br /&gt;
			layersListElement.appendChild(listItemElement);&lt;br /&gt;
			var labelElement = L.DomUtil.create(&amp;quot;label&amp;quot;);&lt;br /&gt;
			labelElement.setAttribute(&amp;quot;title&amp;quot;, map.tooltip);&lt;br /&gt;
			listItemElement.appendChild(labelElement);&lt;br /&gt;
			var inputElement = L.DomUtil.create(&amp;quot;input&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;type&amp;quot;, &amp;quot;radio&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;name&amp;quot;, &amp;quot;ak-map-layer-selection&amp;quot;);&lt;br /&gt;
			inputElement.setAttribute(&amp;quot;value&amp;quot;, map.id);&lt;br /&gt;
			labelElement.appendChild(inputElement);&lt;br /&gt;
			labelElement.appendChild(document.createTextNode(map.label));&lt;br /&gt;
&lt;br /&gt;
			if (map === currentHistLayer) {&lt;br /&gt;
				inputElement.checked = true;&lt;br /&gt;
			}&lt;br /&gt;
&lt;br /&gt;
			inputElement.addEventListener(&amp;quot;change&amp;quot;, function() {&lt;br /&gt;
				if (inputElement.checked) {&lt;br /&gt;
					currentHistLayer.layer.remove();&lt;br /&gt;
					currentHistLayer = map;&lt;br /&gt;
					opacitySliderControl.setOpacityLayer(currentHistLayer.layer);&lt;br /&gt;
					currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
					// TODO check zoom range and bounds of map, adjust mapView accordingly.&lt;br /&gt;
				}&lt;br /&gt;
			});&lt;br /&gt;
&lt;br /&gt;
			var mapPageUrl = metadata[map.id];&lt;br /&gt;
			if (mapPageUrl) {&lt;br /&gt;
				var pageLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
				pageLinkElement.href = mapPageUrl;&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;title&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				pageLinkElement.setAttribute(&amp;quot;aria-label&amp;quot;, &amp;quot;Zur Kartenseite&amp;quot;);&lt;br /&gt;
				listItemElement.appendChild(pageLinkElement);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
&lt;br /&gt;
		// Show layers.&lt;br /&gt;
		currentBaseLayer.addTo(mapView);&lt;br /&gt;
		currentHistLayer.layer.addTo(mapView);&lt;br /&gt;
&lt;br /&gt;
		// Load data layer if provided.&lt;br /&gt;
		if (dataLayerUrl) {&lt;br /&gt;
			loadJson(dataLayerUrl, function(data) {&lt;br /&gt;
				var options = {&lt;br /&gt;
					// TODO add tooltips/markers/styles etc. from data using onEachFeature/style function options, implementing &amp;lt;https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0&amp;gt;.&lt;br /&gt;
					// see &amp;lt;https://leafletjs.com/reference-1.5.0.html#geojson&amp;gt;.&lt;br /&gt;
					style: function(geoJsonFeature) {&lt;br /&gt;
						return {&lt;br /&gt;
							interactive: false&lt;br /&gt;
						};&lt;br /&gt;
					}&lt;br /&gt;
				};&lt;br /&gt;
				if (data.attributionText &amp;amp;&amp;amp; data.attributionUrl) {&lt;br /&gt;
					// Create as DOM node and then convert back to text to escape attribution content and prevent XSS attacks.&lt;br /&gt;
					var attributionLinkElement = L.DomUtil.create(&amp;quot;a&amp;quot;);&lt;br /&gt;
					attributionLinkElement.href = data.attributionUrl;&lt;br /&gt;
					attributionLinkElement.appendChild(document.createTextNode(data.attributionText));&lt;br /&gt;
					options.attribution = attributionLinkElement.outerHTML;&lt;br /&gt;
				}&lt;br /&gt;
				var dataLayer = L.geoJSON(data, options);&lt;br /&gt;
				dataLayer.addTo(mapView);&lt;br /&gt;
				// Set view and zoom around shapes being shown.&lt;br /&gt;
				// TODO Might want to introduce some padding later. But consider &amp;lt;https://stackoverflow.com/a/55173276&amp;gt;.&lt;br /&gt;
				// 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).&lt;br /&gt;
				mapView.fitBounds(dataLayer.getBounds());&lt;br /&gt;
			}, function() {&lt;br /&gt;
				mapView.openPopup(&amp;quot;Die Daten für das anzuzeigende Objekt konnten leider nicht geladen werden. 🙁&amp;quot;, mapView.getCenter());&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function parseMetadata(metadataElements) {&lt;br /&gt;
		var metadata = {};&lt;br /&gt;
		for (var i = 0; i &amp;lt; metadataElements.length; i++) {&lt;br /&gt;
			var element = metadataElements.item(i);&lt;br /&gt;
			var queryRowElements = element.querySelectorAll(&amp;quot;.smw-format.ul-format .smw-row&amp;quot;);&lt;br /&gt;
			forEachElement(queryRowElements, function(row) {&lt;br /&gt;
				var anchorElement = row.querySelector(&amp;quot;.smw-field:first-child .smw-value a&amp;quot;);&lt;br /&gt;
				var url = anchorElement.href;&lt;br /&gt;
				var idValueElement = row.querySelector(&amp;quot;.smw-field:last-child .smw-value&amp;quot;);&lt;br /&gt;
				var id = idValueElement.textContent;&lt;br /&gt;
				metadata[id] = url;&lt;br /&gt;
			});&lt;br /&gt;
		}&lt;br /&gt;
		return metadata;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function forEachElement(nodeList, callback) {&lt;br /&gt;
		if (nodeList.forEach) {&lt;br /&gt;
			nodeList.forEach(callback);&lt;br /&gt;
		} else {&lt;br /&gt;
			Array.prototype.forEach.call(nodeList, callback);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	var getQueryParameter = (function() {&lt;br /&gt;
		var query = window.location.search.substring(1);&lt;br /&gt;
		var params = query.split(&amp;quot;&amp;amp;&amp;quot;);&lt;br /&gt;
		params = params.map(function(param) {&lt;br /&gt;
			var pair = param.split(&amp;quot;=&amp;quot;);&lt;br /&gt;
			pair[0] = decodeURIComponent(pair[0]);&lt;br /&gt;
			if (pair.length &amp;gt; 1) {&lt;br /&gt;
				pair[1] = decodeURIComponent(pair[1]);&lt;br /&gt;
			}&lt;br /&gt;
			return pair;&lt;br /&gt;
		});&lt;br /&gt;
		return function(parameterName) {&lt;br /&gt;
			for (var i = 0; i &amp;lt; params.length; i++) {&lt;br /&gt;
				if (params[i][0] === parameterName) {&lt;br /&gt;
					if (params[i].length &amp;gt; 1) {&lt;br /&gt;
						return params[i][1];&lt;br /&gt;
					}&lt;br /&gt;
					return &amp;quot;&amp;quot;;&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
			return undefined;&lt;br /&gt;
		};&lt;br /&gt;
	})();&lt;br /&gt;
&lt;br /&gt;
	function loadJson(url, onSuccess, onFailure) {&lt;br /&gt;
		var request = new XMLHttpRequest();&lt;br /&gt;
		request.open(&amp;quot;GET&amp;quot;, url, true);&lt;br /&gt;
&lt;br /&gt;
		request.onload = function() {&lt;br /&gt;
			if (request.status &amp;gt;= 200 &amp;amp;&amp;amp; request.status &amp;lt; 400) {&lt;br /&gt;
				var data;&lt;br /&gt;
				try {&lt;br /&gt;
					data = JSON.parse(request.responseText);&lt;br /&gt;
				} catch(error) {&lt;br /&gt;
					callSafely(onFailure, error);&lt;br /&gt;
					return;&lt;br /&gt;
				}&lt;br /&gt;
				callSafely(onSuccess, data);&lt;br /&gt;
			} else {&lt;br /&gt;
				callSafely(onFailure);&lt;br /&gt;
			}&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.onerror = function() {&lt;br /&gt;
			callSafely(onFailure);&lt;br /&gt;
		};&lt;br /&gt;
&lt;br /&gt;
		request.send();&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function callSafely(callback) {&lt;br /&gt;
		if (callback) {&lt;br /&gt;
			callback.apply(null, Array.prototype.slice.call(arguments, 1));&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getDataLayerUrl() {&lt;br /&gt;
		var dataLayer = getQueryParameter(&amp;quot;dataLayer&amp;quot;);&lt;br /&gt;
		if (dataLayer) {&lt;br /&gt;
			// TODO also check for https://www.mediawiki.org/wiki/Manual:Page_title&lt;br /&gt;
			//    Base names equal to &amp;quot;.&amp;quot; or &amp;quot;..&amp;quot;, or beginning &amp;quot;./&amp;quot; or &amp;quot;../&amp;quot;, or containing &amp;quot;/./&amp;quot; or &amp;quot;/../&amp;quot;, or ending &amp;quot;/.&amp;quot; or &amp;quot;/..&amp;quot;.&lt;br /&gt;
			// ?&lt;br /&gt;
			if (dataLayer.indexOf(&amp;quot;GeoJson:&amp;quot;) === 0&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;?&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;&amp;amp;&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;=&amp;quot;) === -1&lt;br /&gt;
					&amp;amp;&amp;amp; dataLayer.indexOf(&amp;quot;/..&amp;quot;) === -1) {&lt;br /&gt;
				// TODO relative url?&lt;br /&gt;
				return &amp;quot;https://altes-koeln.de/wiki/&amp;quot; + dataLayer + &amp;quot;?action=raw&amp;amp;ctype=application/json&amp;quot;;&lt;br /&gt;
			}&lt;br /&gt;
		}&lt;br /&gt;
		return undefined;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	// Initialise all found maps when DOM is ready.&lt;br /&gt;
	document.addEventListener(&amp;quot;DOMContentLoaded&amp;quot;, function(event) {&lt;br /&gt;
		var mapContainerElements = document.getElementsByClassName(&amp;quot;ak-map-container&amp;quot;);&lt;br /&gt;
&lt;br /&gt;
		var metadataElements = document.getElementsByClassName(&amp;quot;ak-map-metadata&amp;quot;);&lt;br /&gt;
		var metadata = parseMetadata(metadataElements);&lt;br /&gt;
&lt;br /&gt;
		for (var i = 0; i &amp;lt; mapContainerElements.length; i++) {&lt;br /&gt;
			initMap(mapContainerElements.item(i), metadata, getQueryParameter(&amp;quot;baseLayer&amp;quot;), getQueryParameter(&amp;quot;histLayer&amp;quot;), getDataLayerUrl());&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
})();&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-map-container&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-map&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;form class=&amp;quot;ak-map-sidebar&amp;quot; autocomplete=&amp;quot;off&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Basiskarte&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-basemaps&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--osm&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;osm&amp;quot; checked&amp;gt;OpenStreetMap&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;li&amp;gt;&amp;lt;label&amp;gt;&amp;lt;input type=&amp;quot;radio&amp;quot; class=&amp;quot;ak-base-map-selection--dop&amp;quot; name=&amp;quot;ak-base-map-selection&amp;quot; value=&amp;quot;dop&amp;quot;&amp;gt;Digitale Orthophotos&amp;lt;/label&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
		&amp;lt;fieldset&amp;gt;&lt;br /&gt;
			&amp;lt;legend&amp;gt;Historische Karten&amp;lt;/legend&amp;gt;&lt;br /&gt;
			&amp;lt;ul class=&amp;quot;ak-map-layers&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;/ul&amp;gt;&lt;br /&gt;
		&amp;lt;/fieldset&amp;gt;&lt;br /&gt;
	&amp;lt;/form&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19484</id>
		<title>Widget:3D-Modell</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19484"/>
		<updated>2021-01-17T10:29:44Z</updated>

		<summary type="html">&lt;p&gt;Simon: Highlight-Bilder für Schreinsbezirke nicht vorladen um das initiale Laden der Bilder hoffentlich zu beschleunigen&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
	body {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__widget {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: calc(100vh - 56px);&lt;br /&gt;
		overflow:hidden;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__background-blur {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		width: 100%;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		z-index: 0;&lt;br /&gt;
		background-image: url(../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg);&lt;br /&gt;
		background-position: center;&lt;br /&gt;
		background-repeat: no-repeat;&lt;br /&gt;
		background-size: cover;&lt;br /&gt;
		filter: blur(10px);&lt;br /&gt;
		opacity: 0.7;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		width: calc((100vh - 56px) * 1.171646162858817);&lt;br /&gt;
		margin-left: auto;&lt;br /&gt;
		margin-right: auto;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__fullview {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		z-index: 1;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view:hover .ak-3dmodel__fullview,&lt;br /&gt;
	.ak-3dmodel__view.ak-3dmodel__view_highlighted .ak-3dmodel__fullview {&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	/* TODO Can we do this with a CSS colour overlay instead to avoid loading this data? But it probably wouldn&#039;t match the colour of the highlight images. Maybe we can do that purely with canvas/SVG and very precise outlines? */&lt;br /&gt;
	.ak-3dmodel__fowview {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
		/* TODO Use cutouts from the images and position them relative to the full image to reduce amount of data to be loaded. How to scale and position them to the responsive image? */&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb.ak-3dmodel__sb_active {&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		bottom: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		width: calc((100vh - 56px) * 1.171646162858817 / 4);&lt;br /&gt;
		font-family: Arial, sans-serif;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar a {&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		text-decoration: none;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3 {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: rgba(73, 80, 87, .85);&lt;br /&gt;
		color: #fefefe;&lt;br /&gt;
		font-weight: bold;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		line-height: normal;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3:hover {&lt;br /&gt;
		background-color: rgb(73, 80, 87);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol {&lt;br /&gt;
		list-style-type: none;&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
		overflow-y: auto;&lt;br /&gt;
		height: calc(50vh - 56px);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li + li {&lt;br /&gt;
		border-top: 1px solid #ccc;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a {&lt;br /&gt;
		display: block;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		transition: background-color .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a:hover,&lt;br /&gt;
	.ak-3dmodel__poi-list ol a.ak-3dmodel__poi-list-link_active {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		top: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		display: inline-block;&lt;br /&gt;
		width: 2.5em;&lt;br /&gt;
		height: 2.5em;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		/* Info icon taken from https://feathericons.com/ and adjusted. */&lt;br /&gt;
		background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;currentColor&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		border-radius: 50%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link:hover {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
	var sbHighlightImageSources = {&lt;br /&gt;
		&#039;ak-3dmodel__sb-martin&#039;: &#039;../alteskoeln/3dmodel/SB_01_St_Martin.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-brigiden&#039;: &#039;../alteskoeln/3dmodel/SB_02_St_Brigiden.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-unterlan&#039;: &#039;../alteskoeln/3dmodel/SB_03_Unterlan.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-alban&#039;: &#039;../alteskoeln/3dmodel/SB_04_St_Alban.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-laurenz&#039;: &#039;../alteskoeln/3dmodel/SB_05_St_Laurenz.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-peter&#039;: &#039;../alteskoeln/3dmodel/SB_06_St_Peter.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-kolumba&#039;: &#039;../alteskoeln/3dmodel/SB_07_St_Columba.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-aposteln&#039;: &#039;../alteskoeln/3dmodel/SB_08_St_Aposteln.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-niederich&#039;: &#039;../alteskoeln/3dmodel/SB_09_Niederich.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-airsbach&#039;: &#039;../alteskoeln/3dmodel/SB_10_Airsbach.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-christoph&#039;: &#039;../alteskoeln/3dmodel/SB_11_St_Christoph.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-mauritius&#039;: &#039;../alteskoeln/3dmodel/SB_12_St_Mauritius.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-severin&#039;: &#039;../alteskoeln/3dmodel/SB_13_St_Severin.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-gereon&#039;: &#039;../alteskoeln/3dmodel/SB_14_St_Gereon.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-eigelstein&#039;: &#039;../alteskoeln/3dmodel/SB_15_Eigelstein.jpg&#039;,&lt;br /&gt;
		&#039;ak-3dmodel__sb-hacht&#039;: &#039;../alteskoeln/3dmodel/SB_16_Hacht.jpg&#039;&lt;br /&gt;
	};&lt;br /&gt;
&lt;br /&gt;
	document.addEventListener(&#039;DOMContentLoaded&#039;, function(event) {&lt;br /&gt;
		var widgets = document.getElementsByClassName(&#039;ak-3dmodel__widget&#039;);&lt;br /&gt;
		for (var i = 0; i &amp;lt; widgets.length; i++) {&lt;br /&gt;
			initWidget(widgets[i]);&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	function initWidget(widget) {&lt;br /&gt;
		var imageMap = widget.getElementsByClassName(&#039;ak-3dmodel__imagemap&#039;)[0];&lt;br /&gt;
		var view = widget.getElementsByClassName(&#039;ak-3dmodel__view&#039;)[0];&lt;br /&gt;
&lt;br /&gt;
		var areas = imageMap.children;&lt;br /&gt;
		for (var i = 0; i &amp;lt; areas.length; i++) {&lt;br /&gt;
			addAreaEventListeners(areas[i], view);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		var poiList = widget.getElementsByClassName(&#039;ak-3dmodel__poi-list-sb&#039;)[0];&lt;br /&gt;
		var sbLinks = poiList.querySelectorAll(&#039;ol li a&#039;);&lt;br /&gt;
		for (i = 0; i &amp;lt; sbLinks.length; i++) {&lt;br /&gt;
			addSBLinksEventListeners(sbLinks[i], view);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function getOrCreateSBHighlightImage(id, view) {&lt;br /&gt;
		var highlightImage = document.getElementById(id);&lt;br /&gt;
		if (!highlightImage) {&lt;br /&gt;
			highlightImage = document.createElement(&#039;img&#039;);&lt;br /&gt;
			highlightImage.id = id;&lt;br /&gt;
			highlightImage.src = sbHighlightImageSources[id];&lt;br /&gt;
			highlightImage.classList.add(&#039;ak-3dmodel__sb&#039;);&lt;br /&gt;
			highlightImage.alt = &#039;&#039;;&lt;br /&gt;
			view.appendChild(highlightImage);&lt;br /&gt;
		}&lt;br /&gt;
		return highlightImage;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addAreaEventListeners(area, view) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		area.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = getOrCreateSBHighlightImage(area.dataset.highlightImage, view);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.add(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
					sbLink.scrollIntoView();&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		area.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = getOrCreateSBHighlightImage(area.dataset.highlightImage, view);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.remove(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addSBLinksEventListeners(sbLink, view) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = getOrCreateSBHighlightImage(sbLink.dataset.highlightImage, view);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.add(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = getOrCreateSBHighlightImage(sbLink.dataset.highlightImage, view);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.remove(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-3dmodel__widget&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__background-blur&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__view&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;!-- TODO Attribution&lt;br /&gt;
		Köln-Stadtmodell von Theo Giesen (1922-1990) - Sammlung Korman im KuMuMü - Kulturmuseum Mülheim an der Ruhr - Fotografien: Bernd Pirschtat --&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fullview&amp;quot; usemap=&amp;quot;#ak-3dmodel__imagemap&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; alt=&amp;quot;Plastisches Stadtmodell von Köln um 1571&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fowview&amp;quot; alt=&amp;quot;&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;map name=&amp;quot;ak-3dmodel__imagemap&amp;quot; class=&amp;quot;ak-3dmodel__imagemap&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Martin&amp;quot; title=&amp;quot;S. Martin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; coords=&amp;quot;711,846,727,832,757,854,764,875,780,871,798,894,824,910,845,944,865,937,890,963,920,974,913,991,937,1034,980,1020,990,1023,1001,1013,1093,958,1123,938,1123,928,1176,882,1169,871,1114,816,1056,774,1038,749,913,831,897,838,881,818,851,809,807,763,789,760,697,838&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Brigiden&amp;quot; title=&amp;quot;S. Brigiden&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; coords=&amp;quot;1055,757,1075,765,1114,771,1087,788,1184,877,1227,838,1275,799,1262,788,1280,780,1275,769,1375,700,1361,686,1307,705,1255,735,1206,696,1181,684,1149,707,1134,716,1121,700,1111,716,1052,742&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Unterlan&amp;quot; title=&amp;quot;Unterlan&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; coords=&amp;quot;1084,792,1116,770,1103,762,1082,765,1066,767&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Alban&amp;quot; title=&amp;quot;S. Alban&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; coords=&amp;quot;904,831,920,811,934,816,1034,744,1006,709,980,659,962,656,941,673,881,710,845,740,814,760,833,788&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Laurenz&amp;quot; title=&amp;quot;S. Laurenz&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; coords=&amp;quot;1038,739,1119,702,1142,702,1181,673,1149,638,1128,622,1116,594,1123,585,1109,562,1052,603,1026,615,978,647&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Peter&amp;quot; title=&amp;quot;S. Peter&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; coords=&amp;quot;695,839,812,746,909,694,872,668,838,650,824,663,799,654,766,601,718,511,688,486,655,507,639,521,625,534,602,539,564,576,534,599,513,620,489,622,464,611,416,620,386,633,351,643,324,645,338,657,367,702,414,744,448,758,503,786&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Kolumba&amp;quot; title=&amp;quot;S. Kolumba&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; coords=&amp;quot;655,346,716,401,725,420,743,429,754,442,692,472,708,500,723,509,782,622,801,646,822,652,842,652,860,664,874,661,914,687,1031,609,1110,553,1110,539,1174,491,1128,449,1070,403,1010,343,902,267,881,244,826,233,775,263,734,260,708,279,693,277,674,295,640,311,637,323,607,344,619,364&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Apostel&amp;quot; title=&amp;quot;S. Apostel&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; coords=&amp;quot;331,634,466,608,499,620,557,578,595,537,609,546,637,525,670,495,688,479,745,438,655,348,623,376,602,348,681,286,670,263,589,198,547,157,547,143,542,134,466,164,437,177,368,235,393,270,444,320,462,345,497,389,494,401,510,410&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Niederich&amp;quot; title=&amp;quot;Niederich&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; coords=&amp;quot;1405,675,1547,611,1639,572,1738,560,1720,493,1702,496,1692,447,1667,401,1607,336,1584,283,1561,268,1534,270,1511,258,1404,222,1381,224,1303,240,1269,249,1241,252,1208,252,1149,251,1140,267,1102,277,1087,274,1068,297,1019,321,1027,339,1015,344,1075,394,1082,383,1087,404,1125,440,1169,482,1190,498,1202,484,1331,599,1338,627,1388,666&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Airsbach&amp;quot; title=&amp;quot;Airsbach&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; coords=&amp;quot;636,1292,642,1283,656,1286,654,1271,767,1170,781,1150,845,1096,859,1094,886,1073,919,1050,926,1028,912,1005,875,967,857,947,847,954,801,907,771,885,758,875,727,861,668,829,617,823,589,809,564,811,525,793,456,767,483,786,454,786,433,800,424,829,419,875,416,914,416,961,428,998,433,1048,446,1073&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Gereon&amp;quot; title=&amp;quot;S. Gereon&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; coords=&amp;quot;920,90,948,72,999,106,1008,110,1010,122,999,134,989,127,962,145,946,110&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt; &amp;lt;!-- Has to be before S. Christoph to overlay it. --&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Christoph&amp;quot; title=&amp;quot;S. Christoph&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; coords=&amp;quot;543,133,632,92,681,72,739,51,796,44,851,37,909,37,974,30,1027,35,1080,46,1133,57,1211,74,1305,97,1436,129,1420,180,1414,217,1381,210,1338,221,1294,233,1257,242,1218,253,1140,249,1140,263,1100,277,1087,276,1075,288,1019,316,1008,322,1017,334,1008,341,971,313,920,274,897,258,856,230,838,228,819,226,777,258,759,258,741,256,713,276,701,269,690,277,663,256,617,223,591,198,577,193,549,147&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; title=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; coords=&amp;quot;430,1021,418,933,418,874,428,818,435,797,449,788,442,765,388,724,336,661,320,648,319,629,347,629,363,592,423,502,458,456,504,406,488,394,488,376,456,339,448,325,396,283,379,281,370,263,370,247,359,240,320,283,271,344,232,392,179,466,167,461,158,480,165,493,133,542,119,579,103,613,86,657,84,691,77,791,75,924,117,935,245,929,305,926,330,929,333,952,358,958,361,977,377,982,377,1007&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Severin&amp;quot; title=&amp;quot;S. Severin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; coords=&amp;quot;436,1686,471,1665,480,1650,513,1631,480,1635,487,1610,471,1610,510,1527,542,1445,572,1384,640,1285,527,1175,510,1140,497,1113,473,1092,455,1085,448,1069,430,1030,377,1004,374,979,358,977,358,958,333,954,331,931,291,926,102,935,75,926,66,1380,93,1415,434,1633,439,1645,421,1663&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Eigelstein&amp;quot; title=&amp;quot;Eigelstein&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; coords=&amp;quot;1930,558,1936,544,1971,532,1967,514,1921,528,1916,511,1904,514,1886,459,1849,399,1812,346,1777,300,1750,267,1722,230,1716,209,1665,191,1617,175,1556,156,1446,133,1418,219,1490,247,1573,272,1593,293,1616,345,1644,380,1670,398,1695,447,1701,463,1706,489,1723,488,1732,518,1743,560,1755,567,1764,558,1902,541&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Hacht&amp;quot; title=&amp;quot;Hacht&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; coords=&amp;quot;1245,725,1209,689,1199,693,1140,636,1132,587,1112,557,1178,497,1190,502,1199,491,1273,544,1319,585,1335,622,1372,663,1391,677,1393,663,1404,682,1400,691,1386,698,1374,677,1287,703&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;/map&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;div class=&amp;quot;ak-3dmodel__sidebar&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;ak-3dmodel__poi-list ak-3dmodel__poi-list-sb&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;h3&amp;gt;Schreinsbezirke&amp;lt;/h3&amp;gt;&lt;br /&gt;
				&amp;lt;ol&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;I S. Martin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;II S. Brigiden&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;III Unterlan&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;IV S. Alban&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;V S. Laurenz&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;VI S. Peter&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;VII S. Kolumba&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;VIII S. Apostel&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;IX Niederich&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;X Airsbach&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;XI S. Christoph&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;XII S. Mauritius - Weyerstraße&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;XIII S. Severin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt;XIV S. Gereon&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;XV Eigelstein&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;XVI Hacht&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;/ol&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;a href=&amp;quot;/wiki/Stadtmodell/Info_zum_Stadtmodell&amp;quot; class=&amp;quot;ak-3model__info-link&amp;quot; aria-label=&amp;quot;Über das Stadtmodell&amp;quot; title=&amp;quot;Über das Stadtmodell&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;!-- Make image map responsive. --&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;https://code.jquery.com/jquery-3.5.1.min.js&amp;quot; integrity=&amp;quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;../alteskoeln/jquery.rwdImageMaps.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	$(document).ready(function() {&lt;br /&gt;
		$(&#039;img[usemap]&#039;).rwdImageMaps();&lt;br /&gt;
	});&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Stadtmodell/Info_zum_Stadtmodell&amp;diff=19483</id>
		<title>Stadtmodell/Info zum Stadtmodell</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Stadtmodell/Info_zum_Stadtmodell&amp;diff=19483"/>
		<updated>2021-01-17T09:43:42Z</updated>

		<summary type="html">&lt;p&gt;Simon: Mercatorplan verlinkt&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;[[Datei:Koeln 3D-Stadtmodell von Theo Giesen (1922-1990) KuMuMü Auszug Kölner Dom.jpg|thumb|400px|Stadtmodell Köln, Auszug Kölner Dom]]Der Erbauer des plastischen Stadtmodells war &#039;&#039;&#039;Theo Giesen&#039;&#039;&#039; (*1922, +1990), ein Konzertmeister des WDR-Sinfonieorchesters in Köln.&lt;br /&gt;
&lt;br /&gt;
In seiner Freizeit beschäftigte er sich mit der Geschichte Kölns. Besonders angetan war er offensichtlich von der [[Mercatorplan|perspektivischen Darstellung des mittelalterlichen Kölns durch Arnold Mercator aus dem Jahre 1571]].&lt;br /&gt;
&lt;br /&gt;
In vielen Stunden Vorbereitungszeit mit Dutzenden Skizzen, Gebäudevergleichen, Größenvergleichen entstand so in jahrelanger Arbeit ein vollplastisches Stadtmodell auf einer Platte von 2m mal 2m. Das gesamte Modell, modelliert aus Holz und Pappe, kommt durch seine liebevolle Bemalung erst zur Geltung. So erahnt man nicht nur die tatsächlichen räumlichen Lebensverhältnisse, sondern erkennt auch die vielen landwirtschaftlichen Nutzflächen, sowie die Garten-, Gemüse- und Weinbau-Flächen, die sich noch innerhalb der Stadtmauern Kölns befinden.&lt;br /&gt;
Gut zu erkennen auch die Stadtbefestigungsanlagen sowie die Vielzahl an Kirchbauten, Kapellen und Klosteranlagen.&lt;br /&gt;
&lt;br /&gt;
Dieses Modell gelangte im Jahre 2012 über eine Stiftung an das [https://kulturpalais.de/index.php/croissant-de-cologne/ Kulturmuseum Mülheim an der Ruhr]. Dort wurde es durch Fotografen digital erfasst und aufbereitet.&lt;br /&gt;
Es ist im Museum  an der Ruhrstraße 3 ausgestellt und kann dort besichtigt werden.&lt;br /&gt;
&lt;br /&gt;
Am 30. Dezember 2020 wurden Bilddateien im Rahmen einer Kooperationsvereinbarung dem Projekt „Altes Köln“ zur Nutzung zur Verfügung gestellt.&lt;br /&gt;
&lt;br /&gt;
Im Projekt Altes Köln soll es Grundlage werden für eine kombinierte Visualisierung verschiedener Themenschwerpunkte.&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Orte&amp;diff=19419</id>
		<title>Orte</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Orte&amp;diff=19419"/>
		<updated>2021-01-10T14:17:45Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Im Jahr 2020 stehen fast 8700 Objekte (Kirchen, historische Gebäude und Parks) unter Denkmalschutz.&lt;br /&gt;
Im Jahr 2018 gab es in der Stadt 2611 Speiserestaurants und 978 getränkegeprägte Gastronomiebetriebe.&lt;br /&gt;
&lt;br /&gt;
Solche Daten und vieles mehr stellt die Stadt Köln zur Verfügung: [https://www.offenedaten-koeln.de/ Offene Daten Köln] &lt;br /&gt;
Aus dieser Datenbank erhalten wir unseren Datenbestand aller öffentlichen Kölner Straßen mit ihren statistischen Angaben wie Länge, Zugehörigkeit zum Stadtbezirk und zum Stadtteil.&lt;br /&gt;
&lt;br /&gt;
* [[Köln|Stadt Köln]]&lt;br /&gt;
* [[:Kategorie:Stadtbezirk|Stadtbezirke]]&lt;br /&gt;
* [[:Kategorie:Stadtteil|Stadtteile]]&lt;br /&gt;
* [[:Kategorie:Veedel|Veedel]]&lt;br /&gt;
* [[:Kategorie:Schreinsbezirk|Schreinsbezirke]]&lt;br /&gt;
* [[:Kategorie:Verkehrsfläche|Straßen und Plätze]]&lt;br /&gt;
* [[:Kategorie:Parkanlage|Parkanlagen]]&lt;br /&gt;
* [[:Kategorie:Bauwerk|Bauwerke]]&lt;br /&gt;
* [[:Kategorie:Adresse|Adresse]]&lt;br /&gt;
* [[Kirchen und Klöster|Kirchen]]&lt;br /&gt;
* [[Friedhöfe in Köln|Friedhöfe]]&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=MediaWiki:Common.css&amp;diff=19376</id>
		<title>MediaWiki:Common.css</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=MediaWiki:Common.css&amp;diff=19376"/>
		<updated>2021-01-09T15:54:34Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */&lt;br /&gt;
&lt;br /&gt;
/* Seitenkopf */&lt;br /&gt;
&lt;br /&gt;
.ak-page-header {&lt;br /&gt;
	background-image: url(/images/b/b0/Colonia.png);&lt;br /&gt;
	background-repeat: no-repeat;&lt;br /&gt;
	background-size: cover;&lt;br /&gt;
	background-position-y: 33%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__content {&lt;br /&gt;
	/*background-image: linear-gradient(to right, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);*/&lt;br /&gt;
	/*margin-left: 0;*/&lt;br /&gt;
    background-color: rgba(255,255,255,0.65);&lt;br /&gt;
    min-height: 135px;&lt;br /&gt;
    /*margin-right: 0;*/&lt;br /&gt;
display: flex;&lt;br /&gt;
align-items: center;&lt;br /&gt;
justify-content: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__logo-col {&lt;br /&gt;
	padding-left: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#p-logo img {&lt;br /&gt;
	height: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__headline-col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__headline {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	font-family: &#039;UnifrakturMaguntia&#039;, cursive;&lt;br /&gt;
	font-size: 5rem;&lt;br /&gt;
	line-height: 1;&lt;br /&gt;
    /*line-height: 135px;*/&lt;br /&gt;
    padding-top: 10px;&lt;br /&gt;
/*    margin-bottom: -10px;*/&lt;br /&gt;
    /*text-align: center;*/&lt;br /&gt;
    color: #5e2028;&lt;br /&gt;
/*    flex-grow: 1;*/&lt;br /&gt;
margin-left: 50px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Links in der Hauptnavigation oben sollten nicht umbrechen. */&lt;br /&gt;
#mw-navigation .nav-link {&lt;br /&gt;
	white-space: nowrap;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Padding von Seiteninhalt entfernen, es bekommt schon von Bootstrap Padding. So können wir es mit anderen Bootstrap-Containern alignen. */&lt;br /&gt;
.mw-body {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Powered By Logos verstecken */&lt;br /&gt;
#footer-poweredbyico {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Sicherstellen, dass die Visual Editor Toolbar nicht unter dem fixen Seitenheader hängt */&lt;br /&gt;
.ve-init-mw-desktopArticleTarget-toolbar-open &amp;gt; .oo-ui-toolbar-bar {&lt;br /&gt;
	margin-top: 56px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Links im Fließtext und in Tooltips unterstreichen */&lt;br /&gt;
.content a,&lt;br /&gt;
.content a[href].new,&lt;br /&gt;
.content a[href].external,&lt;br /&gt;
.ak-tooltip a,&lt;br /&gt;
.ak-tooltip a[href].new,&lt;br /&gt;
.ak-tooltip a[href].external {&lt;br /&gt;
	text-decoration-color: lightgray;&lt;br /&gt;
	text-decoration-line: underline;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Externe Links mit Icon markieren */&lt;br /&gt;
.mw-parser-output .external,&lt;br /&gt;
.ak-tooltip .external {&lt;br /&gt;
	background-position: center right;&lt;br /&gt;
	background-repeat: no-repeat;&lt;br /&gt;
	background-size: 12px;&lt;br /&gt;
	background-image: linear-gradient(transparent,transparent),url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 576 512&#039;%3E%3Cpath fill=&#039;%231a76c7&#039; d=&#039;M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z&#039;%3E%3C/path%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
	padding-right: 15px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Hauptseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Überschrift auf Hauptseite verstecken */&lt;br /&gt;
&lt;br /&gt;
body.page-Hauptseite.action-view h1.firstHeading,&lt;br /&gt;
body.page-Hauptseite.action-submit h1.firstHeading {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
body.page-Hauptseite .contentHeader {&lt;br /&gt;
	margin-top: 2.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Bild auf Startseite auf Seitenbreite beschränken, aber Seitenverhältnis erhalten. */&lt;br /&gt;
.ak-max-width {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Kartensammlungsseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Seite bekommt volle Breite */&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Flexbox den ganzen Weg runter bis zur Karte anwenden, damit die Karte die volle Seitenhöhe ausfüllen kann. */&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung #content,&lt;br /&gt;
.page-Kartensammlung #bodyContent,&lt;br /&gt;
.page-Kartensammlung #mw-content-text,&lt;br /&gt;
.page-Kartensammlung #mw-content-text .mw-parser-output {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map,&lt;br /&gt;
.page-Kartensammlung .ak-map-sidebar {&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kartensammlung kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-page-header {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .contentHeader {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung div.mb-2 {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung #content {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .mw-parser-output &amp;gt; p {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Stadtmodellseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Seite bekommt volle Breite */&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Flexbox den ganzen Weg runter bis zum Stadtmodell anwenden, damit das Stadtmodell die volle Seitenhöhe ausfüllen kann. */&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell #content,&lt;br /&gt;
.page-Stadtmodell #bodyContent,&lt;br /&gt;
.page-Stadtmodell #mw-content-text,&lt;br /&gt;
.page-Stadtmodell #mw-content-text .mw-parser-output {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
.page-Stadtmodell .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-map,&lt;br /&gt;
.page-Stadtmodell .ak-map-sidebar {&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
*/&lt;br /&gt;
&lt;br /&gt;
/* Stadtmodell kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-page-header {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .contentHeader {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell div.mb-2 {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell #content {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .mw-parser-output &amp;gt; p {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Navigation liegt über verschwommenem Hintergrundbild. */&lt;br /&gt;
.page-Stadtmodell #mw-navigation {&lt;br /&gt;
	z-index: 20;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Design- und Layout-Elemente */&lt;br /&gt;
&lt;br /&gt;
.ak-layout {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout &amp;gt; * {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-box {&lt;br /&gt;
	/*outline: 5px solid darkgray;*/&lt;br /&gt;
	margin-top: 1rem;&lt;br /&gt;
	margin-bottom: 2rem;&lt;br /&gt;
	/*border: 5px solid white;&lt;br /&gt;
	background: gray;*/&lt;br /&gt;
	/*border: 1px solid #ced4da;*/&lt;br /&gt;
	border-radius: 4px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.1);&lt;br /&gt;
	padding: 1rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout &amp;gt; .ak-box + .ak-box {&lt;br /&gt;
	margin-left: 2rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout + .ak-box {&lt;br /&gt;
	margin-top: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-box h2 {&lt;br /&gt;
	margin: 0 0 1rem 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	text-align: center;&lt;br /&gt;
	font-size: 1.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list ul {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	justify-content: center;&lt;br /&gt;
	margin: 0 0 1rem 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	font-weight: bold;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list li + li {	&lt;br /&gt;
	margin-left: 0.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list li + li::before {&lt;br /&gt;
	content: &amp;quot;\0000B7&amp;quot;;&lt;br /&gt;
	margin-right: 0.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Aufklappbare Boxen, adaptiert von https://alligator.io/css/collapsible/ */&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap {&lt;br /&gt;
  margin-bottom: 1.2rem 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap input.ak-toggle[type=&#039;checkbox&#039;] {&lt;br /&gt;
  display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-lbl-toggle {&lt;br /&gt;
  display: block;&lt;br /&gt;
  font-size: 1.5rem;&lt;br /&gt;
  cursor: pointer;&lt;br /&gt;
  transition: all 0.25s ease-out;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-lbl-toggle::before {&lt;br /&gt;
  content: &#039; &#039;;&lt;br /&gt;
  display: inline-block;&lt;br /&gt;
&lt;br /&gt;
  border-top: 5px solid transparent;&lt;br /&gt;
  border-bottom: 5px solid transparent;&lt;br /&gt;
  border-left: 5px solid currentColor;&lt;br /&gt;
  vertical-align: middle;&lt;br /&gt;
  margin-right: .7rem;&lt;br /&gt;
  transform: translateY(-2px);&lt;br /&gt;
&lt;br /&gt;
  transition: transform .2s ease-out;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle::before {&lt;br /&gt;
  transform: rotate(90deg) translateX(-3px);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-collapsible-content {&lt;br /&gt;
  height: 0;&lt;br /&gt;
  overflow: hidden;&lt;br /&gt;
  background-color: #f8f9fa;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle + .ak-collapsible-content {&lt;br /&gt;
  height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-collapsible-content .ak-collapsible-content-inner {&lt;br /&gt;
  padding: .5rem 1rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Infoboxen */&lt;br /&gt;
&lt;br /&gt;
.ak-infobox {&lt;br /&gt;
	float:right;&lt;br /&gt;
	margin-left: 2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street {&lt;br /&gt;
	max-width: 400px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format li {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format li + li {&lt;br /&gt;
	margin-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-source-date {&lt;br /&gt;
	font-size: 0.8em;&lt;br /&gt;
	color: #868e96;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Adressenliste */&lt;br /&gt;
&lt;br /&gt;
.ak-address-list dl {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-address-list dt,&lt;br /&gt;
.ak-address-list dd {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Tooltips */&lt;br /&gt;
&lt;br /&gt;
.ak-text-with-tooltip::after {&lt;br /&gt;
	content: &#039;&#039;;&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 0.5em;&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
	vertical-align: middle;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-tooltip-text {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-tooltip {&lt;br /&gt;
	min-width: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Zeitleisten */&lt;br /&gt;
&lt;br /&gt;
/* Datentabelle verstecken */&lt;br /&gt;
.ak-timeline-datatable {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=MediaWiki:Common.css&amp;diff=19375</id>
		<title>MediaWiki:Common.css</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=MediaWiki:Common.css&amp;diff=19375"/>
		<updated>2021-01-09T15:53:43Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */&lt;br /&gt;
&lt;br /&gt;
/* Seitenkopf */&lt;br /&gt;
&lt;br /&gt;
.ak-page-header {&lt;br /&gt;
	background-image: url(/images/b/b0/Colonia.png);&lt;br /&gt;
	background-repeat: no-repeat;&lt;br /&gt;
	background-size: cover;&lt;br /&gt;
	background-position-y: 33%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__content {&lt;br /&gt;
	/*background-image: linear-gradient(to right, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);*/&lt;br /&gt;
	/*margin-left: 0;*/&lt;br /&gt;
    background-color: rgba(255,255,255,0.65);&lt;br /&gt;
    min-height: 135px;&lt;br /&gt;
    /*margin-right: 0;*/&lt;br /&gt;
display: flex;&lt;br /&gt;
align-items: center;&lt;br /&gt;
justify-content: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__logo-col {&lt;br /&gt;
	padding-left: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#p-logo img {&lt;br /&gt;
	height: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__headline-col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__headline {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	font-family: &#039;UnifrakturMaguntia&#039;, cursive;&lt;br /&gt;
	font-size: 5rem;&lt;br /&gt;
	line-height: 1;&lt;br /&gt;
    /*line-height: 135px;*/&lt;br /&gt;
    padding-top: 10px;&lt;br /&gt;
/*    margin-bottom: -10px;*/&lt;br /&gt;
    /*text-align: center;*/&lt;br /&gt;
    color: #5e2028;&lt;br /&gt;
/*    flex-grow: 1;*/&lt;br /&gt;
margin-left: 50px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Links in der Hauptnavigation oben sollten nicht umbrechen. */&lt;br /&gt;
#mw-navigation .nav-link,&lt;br /&gt;
#mw-navigation .navbar-tool-link {&lt;br /&gt;
	white-space: nowrap;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Padding von Seiteninhalt entfernen, es bekommt schon von Bootstrap Padding. So können wir es mit anderen Bootstrap-Containern alignen. */&lt;br /&gt;
.mw-body {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Powered By Logos verstecken */&lt;br /&gt;
#footer-poweredbyico {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Sicherstellen, dass die Visual Editor Toolbar nicht unter dem fixen Seitenheader hängt */&lt;br /&gt;
.ve-init-mw-desktopArticleTarget-toolbar-open &amp;gt; .oo-ui-toolbar-bar {&lt;br /&gt;
	margin-top: 56px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Links im Fließtext und in Tooltips unterstreichen */&lt;br /&gt;
.content a,&lt;br /&gt;
.content a[href].new,&lt;br /&gt;
.content a[href].external,&lt;br /&gt;
.ak-tooltip a,&lt;br /&gt;
.ak-tooltip a[href].new,&lt;br /&gt;
.ak-tooltip a[href].external {&lt;br /&gt;
	text-decoration-color: lightgray;&lt;br /&gt;
	text-decoration-line: underline;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Externe Links mit Icon markieren */&lt;br /&gt;
.mw-parser-output .external,&lt;br /&gt;
.ak-tooltip .external {&lt;br /&gt;
	background-position: center right;&lt;br /&gt;
	background-repeat: no-repeat;&lt;br /&gt;
	background-size: 12px;&lt;br /&gt;
	background-image: linear-gradient(transparent,transparent),url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 576 512&#039;%3E%3Cpath fill=&#039;%231a76c7&#039; d=&#039;M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z&#039;%3E%3C/path%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
	padding-right: 15px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Hauptseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Überschrift auf Hauptseite verstecken */&lt;br /&gt;
&lt;br /&gt;
body.page-Hauptseite.action-view h1.firstHeading,&lt;br /&gt;
body.page-Hauptseite.action-submit h1.firstHeading {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
body.page-Hauptseite .contentHeader {&lt;br /&gt;
	margin-top: 2.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Bild auf Startseite auf Seitenbreite beschränken, aber Seitenverhältnis erhalten. */&lt;br /&gt;
.ak-max-width {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Kartensammlungsseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Seite bekommt volle Breite */&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Flexbox den ganzen Weg runter bis zur Karte anwenden, damit die Karte die volle Seitenhöhe ausfüllen kann. */&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung #content,&lt;br /&gt;
.page-Kartensammlung #bodyContent,&lt;br /&gt;
.page-Kartensammlung #mw-content-text,&lt;br /&gt;
.page-Kartensammlung #mw-content-text .mw-parser-output {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map,&lt;br /&gt;
.page-Kartensammlung .ak-map-sidebar {&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kartensammlung kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-page-header {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .contentHeader {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung div.mb-2 {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung #content {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .mw-parser-output &amp;gt; p {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Stadtmodellseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Seite bekommt volle Breite */&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Flexbox den ganzen Weg runter bis zum Stadtmodell anwenden, damit das Stadtmodell die volle Seitenhöhe ausfüllen kann. */&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell #content,&lt;br /&gt;
.page-Stadtmodell #bodyContent,&lt;br /&gt;
.page-Stadtmodell #mw-content-text,&lt;br /&gt;
.page-Stadtmodell #mw-content-text .mw-parser-output {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
.page-Stadtmodell .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-map,&lt;br /&gt;
.page-Stadtmodell .ak-map-sidebar {&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
*/&lt;br /&gt;
&lt;br /&gt;
/* Stadtmodell kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-page-header {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .contentHeader {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell div.mb-2 {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell #content {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .mw-parser-output &amp;gt; p {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Navigation liegt über verschwommenem Hintergrundbild. */&lt;br /&gt;
.page-Stadtmodell #mw-navigation {&lt;br /&gt;
	z-index: 20;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Design- und Layout-Elemente */&lt;br /&gt;
&lt;br /&gt;
.ak-layout {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout &amp;gt; * {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-box {&lt;br /&gt;
	/*outline: 5px solid darkgray;*/&lt;br /&gt;
	margin-top: 1rem;&lt;br /&gt;
	margin-bottom: 2rem;&lt;br /&gt;
	/*border: 5px solid white;&lt;br /&gt;
	background: gray;*/&lt;br /&gt;
	/*border: 1px solid #ced4da;*/&lt;br /&gt;
	border-radius: 4px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.1);&lt;br /&gt;
	padding: 1rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout &amp;gt; .ak-box + .ak-box {&lt;br /&gt;
	margin-left: 2rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout + .ak-box {&lt;br /&gt;
	margin-top: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-box h2 {&lt;br /&gt;
	margin: 0 0 1rem 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	text-align: center;&lt;br /&gt;
	font-size: 1.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list ul {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	justify-content: center;&lt;br /&gt;
	margin: 0 0 1rem 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	font-weight: bold;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list li + li {	&lt;br /&gt;
	margin-left: 0.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list li + li::before {&lt;br /&gt;
	content: &amp;quot;\0000B7&amp;quot;;&lt;br /&gt;
	margin-right: 0.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Aufklappbare Boxen, adaptiert von https://alligator.io/css/collapsible/ */&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap {&lt;br /&gt;
  margin-bottom: 1.2rem 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap input.ak-toggle[type=&#039;checkbox&#039;] {&lt;br /&gt;
  display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-lbl-toggle {&lt;br /&gt;
  display: block;&lt;br /&gt;
  font-size: 1.5rem;&lt;br /&gt;
  cursor: pointer;&lt;br /&gt;
  transition: all 0.25s ease-out;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-lbl-toggle::before {&lt;br /&gt;
  content: &#039; &#039;;&lt;br /&gt;
  display: inline-block;&lt;br /&gt;
&lt;br /&gt;
  border-top: 5px solid transparent;&lt;br /&gt;
  border-bottom: 5px solid transparent;&lt;br /&gt;
  border-left: 5px solid currentColor;&lt;br /&gt;
  vertical-align: middle;&lt;br /&gt;
  margin-right: .7rem;&lt;br /&gt;
  transform: translateY(-2px);&lt;br /&gt;
&lt;br /&gt;
  transition: transform .2s ease-out;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle::before {&lt;br /&gt;
  transform: rotate(90deg) translateX(-3px);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-collapsible-content {&lt;br /&gt;
  height: 0;&lt;br /&gt;
  overflow: hidden;&lt;br /&gt;
  background-color: #f8f9fa;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle + .ak-collapsible-content {&lt;br /&gt;
  height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-collapsible-content .ak-collapsible-content-inner {&lt;br /&gt;
  padding: .5rem 1rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Infoboxen */&lt;br /&gt;
&lt;br /&gt;
.ak-infobox {&lt;br /&gt;
	float:right;&lt;br /&gt;
	margin-left: 2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street {&lt;br /&gt;
	max-width: 400px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format li {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format li + li {&lt;br /&gt;
	margin-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-source-date {&lt;br /&gt;
	font-size: 0.8em;&lt;br /&gt;
	color: #868e96;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Adressenliste */&lt;br /&gt;
&lt;br /&gt;
.ak-address-list dl {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-address-list dt,&lt;br /&gt;
.ak-address-list dd {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Tooltips */&lt;br /&gt;
&lt;br /&gt;
.ak-text-with-tooltip::after {&lt;br /&gt;
	content: &#039;&#039;;&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 0.5em;&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
	vertical-align: middle;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-tooltip-text {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-tooltip {&lt;br /&gt;
	min-width: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Zeitleisten */&lt;br /&gt;
&lt;br /&gt;
/* Datentabelle verstecken */&lt;br /&gt;
.ak-timeline-datatable {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=MediaWiki:Common.css&amp;diff=19374</id>
		<title>MediaWiki:Common.css</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=MediaWiki:Common.css&amp;diff=19374"/>
		<updated>2021-01-09T15:52:02Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */&lt;br /&gt;
&lt;br /&gt;
/* Seitenkopf */&lt;br /&gt;
&lt;br /&gt;
.ak-page-header {&lt;br /&gt;
	background-image: url(/images/b/b0/Colonia.png);&lt;br /&gt;
	background-repeat: no-repeat;&lt;br /&gt;
	background-size: cover;&lt;br /&gt;
	background-position-y: 33%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__content {&lt;br /&gt;
	/*background-image: linear-gradient(to right, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);*/&lt;br /&gt;
	/*margin-left: 0;*/&lt;br /&gt;
    background-color: rgba(255,255,255,0.65);&lt;br /&gt;
    min-height: 135px;&lt;br /&gt;
    /*margin-right: 0;*/&lt;br /&gt;
display: flex;&lt;br /&gt;
align-items: center;&lt;br /&gt;
justify-content: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__logo-col {&lt;br /&gt;
	padding-left: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#p-logo img {&lt;br /&gt;
	height: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__headline-col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__headline {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	font-family: &#039;UnifrakturMaguntia&#039;, cursive;&lt;br /&gt;
	font-size: 5rem;&lt;br /&gt;
	line-height: 1;&lt;br /&gt;
    /*line-height: 135px;*/&lt;br /&gt;
    padding-top: 10px;&lt;br /&gt;
/*    margin-bottom: -10px;*/&lt;br /&gt;
    /*text-align: center;*/&lt;br /&gt;
    color: #5e2028;&lt;br /&gt;
/*    flex-grow: 1;*/&lt;br /&gt;
margin-left: 50px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Links in der Hauptnavigation oben sollten nicht umbrechen. */&lt;br /&gt;
#mw-navigation .nav-link {&lt;br /&gt;
	white-space: nowrap;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Padding von Seiteninhalt entfernen, es bekommt schon von Bootstrap Padding. So können wir es mit anderen Bootstrap-Containern alignen. */&lt;br /&gt;
.mw-body {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Powered By Logos verstecken */&lt;br /&gt;
#footer-poweredbyico {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Sicherstellen, dass die Visual Editor Toolbar nicht unter dem fixen Seitenheader hängt */&lt;br /&gt;
.ve-init-mw-desktopArticleTarget-toolbar-open &amp;gt; .oo-ui-toolbar-bar {&lt;br /&gt;
	margin-top: 56px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Links im Fließtext und in Tooltips unterstreichen */&lt;br /&gt;
.content a,&lt;br /&gt;
.content a[href].new,&lt;br /&gt;
.content a[href].external,&lt;br /&gt;
.ak-tooltip a,&lt;br /&gt;
.ak-tooltip a[href].new,&lt;br /&gt;
.ak-tooltip a[href].external {&lt;br /&gt;
	text-decoration-color: lightgray;&lt;br /&gt;
	text-decoration-line: underline;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Externe Links mit Icon markieren */&lt;br /&gt;
.mw-parser-output .external,&lt;br /&gt;
.ak-tooltip .external {&lt;br /&gt;
	background-position: center right;&lt;br /&gt;
	background-repeat: no-repeat;&lt;br /&gt;
	background-size: 12px;&lt;br /&gt;
	background-image: linear-gradient(transparent,transparent),url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 576 512&#039;%3E%3Cpath fill=&#039;%231a76c7&#039; d=&#039;M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z&#039;%3E%3C/path%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
	padding-right: 15px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Hauptseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Überschrift auf Hauptseite verstecken */&lt;br /&gt;
&lt;br /&gt;
body.page-Hauptseite.action-view h1.firstHeading,&lt;br /&gt;
body.page-Hauptseite.action-submit h1.firstHeading {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
body.page-Hauptseite .contentHeader {&lt;br /&gt;
	margin-top: 2.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Bild auf Startseite auf Seitenbreite beschränken, aber Seitenverhältnis erhalten. */&lt;br /&gt;
.ak-max-width {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Kartensammlungsseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Seite bekommt volle Breite */&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Flexbox den ganzen Weg runter bis zur Karte anwenden, damit die Karte die volle Seitenhöhe ausfüllen kann. */&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung #content,&lt;br /&gt;
.page-Kartensammlung #bodyContent,&lt;br /&gt;
.page-Kartensammlung #mw-content-text,&lt;br /&gt;
.page-Kartensammlung #mw-content-text .mw-parser-output {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map,&lt;br /&gt;
.page-Kartensammlung .ak-map-sidebar {&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kartensammlung kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-page-header {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .contentHeader {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung div.mb-2 {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung #content {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .mw-parser-output &amp;gt; p {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Stadtmodellseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Seite bekommt volle Breite */&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Flexbox den ganzen Weg runter bis zum Stadtmodell anwenden, damit das Stadtmodell die volle Seitenhöhe ausfüllen kann. */&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell #content,&lt;br /&gt;
.page-Stadtmodell #bodyContent,&lt;br /&gt;
.page-Stadtmodell #mw-content-text,&lt;br /&gt;
.page-Stadtmodell #mw-content-text .mw-parser-output {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
.page-Stadtmodell .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-map,&lt;br /&gt;
.page-Stadtmodell .ak-map-sidebar {&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
*/&lt;br /&gt;
&lt;br /&gt;
/* Stadtmodell kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-page-header {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .contentHeader {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell div.mb-2 {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell #content {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .mw-parser-output &amp;gt; p {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Navigation liegt über verschwommenem Hintergrundbild. */&lt;br /&gt;
.page-Stadtmodell #mw-navigation {&lt;br /&gt;
	z-index: 20;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Design- und Layout-Elemente */&lt;br /&gt;
&lt;br /&gt;
.ak-layout {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout &amp;gt; * {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-box {&lt;br /&gt;
	/*outline: 5px solid darkgray;*/&lt;br /&gt;
	margin-top: 1rem;&lt;br /&gt;
	margin-bottom: 2rem;&lt;br /&gt;
	/*border: 5px solid white;&lt;br /&gt;
	background: gray;*/&lt;br /&gt;
	/*border: 1px solid #ced4da;*/&lt;br /&gt;
	border-radius: 4px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.1);&lt;br /&gt;
	padding: 1rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout &amp;gt; .ak-box + .ak-box {&lt;br /&gt;
	margin-left: 2rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout + .ak-box {&lt;br /&gt;
	margin-top: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-box h2 {&lt;br /&gt;
	margin: 0 0 1rem 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	text-align: center;&lt;br /&gt;
	font-size: 1.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list ul {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	justify-content: center;&lt;br /&gt;
	margin: 0 0 1rem 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	font-weight: bold;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list li + li {	&lt;br /&gt;
	margin-left: 0.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list li + li::before {&lt;br /&gt;
	content: &amp;quot;\0000B7&amp;quot;;&lt;br /&gt;
	margin-right: 0.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Aufklappbare Boxen, adaptiert von https://alligator.io/css/collapsible/ */&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap {&lt;br /&gt;
  margin-bottom: 1.2rem 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap input.ak-toggle[type=&#039;checkbox&#039;] {&lt;br /&gt;
  display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-lbl-toggle {&lt;br /&gt;
  display: block;&lt;br /&gt;
  font-size: 1.5rem;&lt;br /&gt;
  cursor: pointer;&lt;br /&gt;
  transition: all 0.25s ease-out;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-lbl-toggle::before {&lt;br /&gt;
  content: &#039; &#039;;&lt;br /&gt;
  display: inline-block;&lt;br /&gt;
&lt;br /&gt;
  border-top: 5px solid transparent;&lt;br /&gt;
  border-bottom: 5px solid transparent;&lt;br /&gt;
  border-left: 5px solid currentColor;&lt;br /&gt;
  vertical-align: middle;&lt;br /&gt;
  margin-right: .7rem;&lt;br /&gt;
  transform: translateY(-2px);&lt;br /&gt;
&lt;br /&gt;
  transition: transform .2s ease-out;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle::before {&lt;br /&gt;
  transform: rotate(90deg) translateX(-3px);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-collapsible-content {&lt;br /&gt;
  height: 0;&lt;br /&gt;
  overflow: hidden;&lt;br /&gt;
  background-color: #f8f9fa;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle + .ak-collapsible-content {&lt;br /&gt;
  height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-collapsible-content .ak-collapsible-content-inner {&lt;br /&gt;
  padding: .5rem 1rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Infoboxen */&lt;br /&gt;
&lt;br /&gt;
.ak-infobox {&lt;br /&gt;
	float:right;&lt;br /&gt;
	margin-left: 2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street {&lt;br /&gt;
	max-width: 400px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format li {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format li + li {&lt;br /&gt;
	margin-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-source-date {&lt;br /&gt;
	font-size: 0.8em;&lt;br /&gt;
	color: #868e96;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Adressenliste */&lt;br /&gt;
&lt;br /&gt;
.ak-address-list dl {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-address-list dt,&lt;br /&gt;
.ak-address-list dd {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Tooltips */&lt;br /&gt;
&lt;br /&gt;
.ak-text-with-tooltip::after {&lt;br /&gt;
	content: &#039;&#039;;&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 0.5em;&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
	vertical-align: middle;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-tooltip-text {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-tooltip {&lt;br /&gt;
	min-width: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Zeitleisten */&lt;br /&gt;
&lt;br /&gt;
/* Datentabelle verstecken */&lt;br /&gt;
.ak-timeline-datatable {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19373</id>
		<title>Widget:3D-Modell</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19373"/>
		<updated>2021-01-09T15:23:19Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
	body {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__widget {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: calc(100vh - 56px);&lt;br /&gt;
		overflow:hidden;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__background-blur {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		width: 100%;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		z-index: 0;&lt;br /&gt;
		background-image: url(../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg);&lt;br /&gt;
		background-position: center;&lt;br /&gt;
		background-repeat: no-repeat;&lt;br /&gt;
		background-size: cover;&lt;br /&gt;
		filter: blur(10px);&lt;br /&gt;
		opacity: 0.7;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		width: calc((100vh - 56px) * 1.171646162858817);&lt;br /&gt;
		margin-left: auto;&lt;br /&gt;
		margin-right: auto;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__fullview {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		z-index: 1;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view:hover .ak-3dmodel__fullview,&lt;br /&gt;
	.ak-3dmodel__view.ak-3dmodel__view_highlighted .ak-3dmodel__fullview {&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	/* TODO Can we do this with a CSS colour overlay instead to avoid loading this data? But it probably wouldn&#039;t match the colour of the highlight images. Maybe we can do that purely with canvas/SVG and very precise outlines? */&lt;br /&gt;
	.ak-3dmodel__fowview {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
		/* TODO Use cutouts from the images and position them relative to the full image to reduce amount of data to be loaded. How to scale and position them to the responsive image? */&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb.ak-3dmodel__sb_active {&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		bottom: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		width: calc((100vh - 56px) * 1.171646162858817 / 4);&lt;br /&gt;
		font-family: Arial, sans-serif;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar a {&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		text-decoration: none;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3 {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: rgba(73, 80, 87, .85);&lt;br /&gt;
		color: #fefefe;&lt;br /&gt;
		font-weight: bold;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		line-height: normal;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3:hover {&lt;br /&gt;
		background-color: rgb(73, 80, 87);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol {&lt;br /&gt;
		list-style-type: none;&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
		overflow-y: auto;&lt;br /&gt;
		height: calc(50vh - 56px);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li + li {&lt;br /&gt;
		border-top: 1px solid #ccc;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a {&lt;br /&gt;
		display: block;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		transition: background-color .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a:hover,&lt;br /&gt;
	.ak-3dmodel__poi-list ol a.ak-3dmodel__poi-list-link_active {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		top: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		display: inline-block;&lt;br /&gt;
		width: 2.5em;&lt;br /&gt;
		height: 2.5em;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		/* Info icon taken from https://feathericons.com/ and adjusted. */&lt;br /&gt;
		background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;currentColor&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		border-radius: 50%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link:hover {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	document.addEventListener(&#039;DOMContentLoaded&#039;, function(event) {&lt;br /&gt;
		var widgets = document.getElementsByClassName(&#039;ak-3dmodel__widget&#039;);&lt;br /&gt;
		for (var i = 0; i &amp;lt; widgets.length; i++) {&lt;br /&gt;
			initWidget(widgets[i]);&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	function initWidget(widget) {&lt;br /&gt;
		var imageMap = widget.getElementsByClassName(&#039;ak-3dmodel__imagemap&#039;)[0];&lt;br /&gt;
		var areas = imageMap.children;&lt;br /&gt;
		for (var i = 0; i &amp;lt; areas.length; i++) {&lt;br /&gt;
			addAreaEventListeners(areas[i]);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		var view = widget.getElementsByClassName(&#039;ak-3dmodel__view&#039;)[0];&lt;br /&gt;
		var poiList = widget.getElementsByClassName(&#039;ak-3dmodel__poi-list-sb&#039;)[0];&lt;br /&gt;
		var sbLinks = poiList.querySelectorAll(&#039;ol li a&#039;);&lt;br /&gt;
		for (i = 0; i &amp;lt; sbLinks.length; i++) {&lt;br /&gt;
			addSBLinksEventListeners(sbLinks[i], view);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addAreaEventListeners(area) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		area.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.add(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
					sbLink.scrollIntoView();&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		area.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.remove(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addSBLinksEventListeners(sbLink, view) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.add(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.remove(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-3dmodel__widget&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__background-blur&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__view&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;!-- TODO Attribution&lt;br /&gt;
		Köln-Stadtmodell von Theo Giesen (1922-1990) - Sammlung Kormann im KuMuMü - Kulturmuseum Mülheim an der Ruhr - Fotografien: Bernd Pirschtat --&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fullview&amp;quot; usemap=&amp;quot;#ak-3dmodel__imagemap&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; alt=&amp;quot;Plastisches Stadtmodell von Köln um 1571&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fowview&amp;quot; alt=&amp;quot;&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_01_St_Martin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-martin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_02_St_Brigiden.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_03_Unterlan.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_04_St_Alban.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-alban&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_05_St_Laurenz.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_06_St_Peter.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-peter&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_07_St_Columba.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_08_St_Aposteln.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_09_Niederich.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-niederich&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_10_Airsbach.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_11_St_Christoph.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-christoph&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_12_St_Mauritius.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_13_St_Severin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-severin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_14_St_Gereon.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-gereon&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_15_Eigelstein.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_16_Hacht.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-hacht&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;map name=&amp;quot;ak-3dmodel__imagemap&amp;quot; class=&amp;quot;ak-3dmodel__imagemap&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Martin&amp;quot; title=&amp;quot;S. Martin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; coords=&amp;quot;711,846,727,832,757,854,764,875,780,871,798,894,824,910,845,944,865,937,890,963,920,974,913,991,937,1034,980,1020,990,1023,1001,1013,1093,958,1123,938,1123,928,1176,882,1169,871,1114,816,1056,774,1038,749,913,831,897,838,881,818,851,809,807,763,789,760,697,838&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Brigiden&amp;quot; title=&amp;quot;S. Brigiden&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; coords=&amp;quot;1055,757,1075,765,1114,771,1087,788,1184,877,1227,838,1275,799,1262,788,1280,780,1275,769,1375,700,1361,686,1307,705,1255,735,1206,696,1181,684,1149,707,1134,716,1121,700,1111,716,1052,742&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Unterlan&amp;quot; title=&amp;quot;Unterlan&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; coords=&amp;quot;1084,792,1116,770,1103,762,1082,765,1066,767&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Alban&amp;quot; title=&amp;quot;S. Alban&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; coords=&amp;quot;904,831,920,811,934,816,1034,744,1006,709,980,659,962,656,941,673,881,710,845,740,814,760,833,788&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Laurenz&amp;quot; title=&amp;quot;S. Laurenz&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; coords=&amp;quot;1038,739,1119,702,1142,702,1181,673,1149,638,1128,622,1116,594,1123,585,1109,562,1052,603,1026,615,978,647&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Peter&amp;quot; title=&amp;quot;S. Peter&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; coords=&amp;quot;695,839,812,746,909,694,872,668,838,650,824,663,799,654,766,601,718,511,688,486,655,507,639,521,625,534,602,539,564,576,534,599,513,620,489,622,464,611,416,620,386,633,351,643,324,645,338,657,367,702,414,744,448,758,503,786&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Kolumba&amp;quot; title=&amp;quot;S. Kolumba&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; coords=&amp;quot;655,346,716,401,725,420,743,429,754,442,692,472,708,500,723,509,782,622,801,646,822,652,842,652,860,664,874,661,914,687,1031,609,1110,553,1110,539,1174,491,1128,449,1070,403,1010,343,902,267,881,244,826,233,775,263,734,260,708,279,693,277,674,295,640,311,637,323,607,344,619,364&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Apostel&amp;quot; title=&amp;quot;S. Apostel&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; coords=&amp;quot;331,634,466,608,499,620,557,578,595,537,609,546,637,525,670,495,688,479,745,438,655,348,623,376,602,348,681,286,670,263,589,198,547,157,547,143,542,134,466,164,437,177,368,235,393,270,444,320,462,345,497,389,494,401,510,410&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Niederich&amp;quot; title=&amp;quot;Niederich&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; coords=&amp;quot;1405,675,1547,611,1639,572,1738,560,1720,493,1702,496,1692,447,1667,401,1607,336,1584,283,1561,268,1534,270,1511,258,1404,222,1381,224,1303,240,1269,249,1241,252,1208,252,1149,251,1140,267,1102,277,1087,274,1068,297,1019,321,1027,339,1015,344,1075,394,1082,383,1087,404,1125,440,1169,482,1190,498,1202,484,1331,599,1338,627,1388,666&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Airsbach&amp;quot; title=&amp;quot;Airsbach&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; coords=&amp;quot;636,1292,642,1283,656,1286,654,1271,767,1170,781,1150,845,1096,859,1094,886,1073,919,1050,926,1028,912,1005,875,967,857,947,847,954,801,907,771,885,758,875,727,861,668,829,617,823,589,809,564,811,525,793,456,767,483,786,454,786,433,800,424,829,419,875,416,914,416,961,428,998,433,1048,446,1073&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Gereon&amp;quot; title=&amp;quot;S. Gereon&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; coords=&amp;quot;920,90,948,72,999,106,1008,110,1010,122,999,134,989,127,962,145,946,110&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt; &amp;lt;!-- Has to be before S. Christoph to overlay it. --&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Christoph&amp;quot; title=&amp;quot;S. Christoph&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; coords=&amp;quot;543,133,632,92,681,72,739,51,796,44,851,37,909,37,974,30,1027,35,1080,46,1133,57,1211,74,1305,97,1436,129,1420,180,1414,217,1381,210,1338,221,1294,233,1257,242,1218,253,1140,249,1140,263,1100,277,1087,276,1075,288,1019,316,1008,322,1017,334,1008,341,971,313,920,274,897,258,856,230,838,228,819,226,777,258,759,258,741,256,713,276,701,269,690,277,663,256,617,223,591,198,577,193,549,147&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; title=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; coords=&amp;quot;430,1021,418,933,418,874,428,818,435,797,449,788,442,765,388,724,336,661,320,648,319,629,347,629,363,592,423,502,458,456,504,406,488,394,488,376,456,339,448,325,396,283,379,281,370,263,370,247,359,240,320,283,271,344,232,392,179,466,167,461,158,480,165,493,133,542,119,579,103,613,86,657,84,691,77,791,75,924,117,935,245,929,305,926,330,929,333,952,358,958,361,977,377,982,377,1007&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Severin&amp;quot; title=&amp;quot;S. Severin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; coords=&amp;quot;436,1686,471,1665,480,1650,513,1631,480,1635,487,1610,471,1610,510,1527,542,1445,572,1384,640,1285,527,1175,510,1140,497,1113,473,1092,455,1085,448,1069,430,1030,377,1004,374,979,358,977,358,958,333,954,331,931,291,926,102,935,75,926,66,1380,93,1415,434,1633,439,1645,421,1663&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Eigelstein&amp;quot; title=&amp;quot;Eigelstein&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; coords=&amp;quot;1930,558,1936,544,1971,532,1967,514,1921,528,1916,511,1904,514,1886,459,1849,399,1812,346,1777,300,1750,267,1722,230,1716,209,1665,191,1617,175,1556,156,1446,133,1418,219,1490,247,1573,272,1593,293,1616,345,1644,380,1670,398,1695,447,1701,463,1706,489,1723,488,1732,518,1743,560,1755,567,1764,558,1902,541&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Hacht&amp;quot; title=&amp;quot;Hacht&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; coords=&amp;quot;1245,725,1209,689,1199,693,1140,636,1132,587,1112,557,1178,497,1190,502,1199,491,1273,544,1319,585,1335,622,1372,663,1391,677,1393,663,1404,682,1400,691,1386,698,1374,677,1287,703&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;/map&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;div class=&amp;quot;ak-3dmodel__sidebar&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;ak-3dmodel__poi-list ak-3dmodel__poi-list-sb&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;h3&amp;gt;Schreinsbezirke&amp;lt;/h3&amp;gt;&lt;br /&gt;
				&amp;lt;ol&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;I S. Martin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;II S. Brigiden&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;III Unterlan&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;IV S. Alban&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;V S. Laurenz&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;VI S. Peter&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;VII S. Kolumba&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;VIII S. Apostel&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;IX Niederich&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;X Airsbach&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;XI S. Christoph&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;XII S. Mauritius - Weyerstraße&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;XIII S. Severin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt;XIV S. Gereon&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;XV Eigelstein&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;XVI Hacht&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;/ol&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;a href=&amp;quot;/wiki/Stadtmodell/Info_zum_Stadtmodell&amp;quot; class=&amp;quot;ak-3model__info-link&amp;quot; aria-label=&amp;quot;Über das Stadtmodell&amp;quot; title=&amp;quot;Über das Stadtmodell&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;!-- Make image map responsive. --&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;https://code.jquery.com/jquery-3.5.1.min.js&amp;quot; integrity=&amp;quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;../alteskoeln/jquery.rwdImageMaps.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	$(document).ready(function() {&lt;br /&gt;
		$(&#039;img[usemap]&#039;).rwdImageMaps();&lt;br /&gt;
	});&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19372</id>
		<title>Widget:3D-Modell</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19372"/>
		<updated>2021-01-09T14:54:08Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
	body {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__widget {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: calc(100vh - 56px);&lt;br /&gt;
		overflow:hidden;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__background-blur {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		width: 100%;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		z-index: 0;&lt;br /&gt;
		background-image: url(../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg);&lt;br /&gt;
		background-position: center;&lt;br /&gt;
		background-repeat: no-repeat;&lt;br /&gt;
		background-size: cover;&lt;br /&gt;
		filter: blur(10px);&lt;br /&gt;
		opacity: 0.7;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		width: calc((100vh - 56px) * 1.171646162858817);&lt;br /&gt;
		margin-left: auto;&lt;br /&gt;
		margin-right: auto;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__fullview {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		z-index: 1;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view:hover .ak-3dmodel__fullview,&lt;br /&gt;
	.ak-3dmodel__view.ak-3dmodel__view_highlighted .ak-3dmodel__fullview {&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	/* TODO Can we do this with a CSS colour overlay instead to avoid loading this data? But it probably wouldn&#039;t match the colour of the highlight images. Maybe we can do that purely with canvas/SVG and very precise outlines? */&lt;br /&gt;
	.ak-3dmodel__fowview {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
		/* TODO Use cutouts from the images and position them relative to the full image to reduce amount of data to be loaded. How to scale and position them to the responsive image? */&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb.ak-3dmodel__sb_active {&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		bottom: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		width: calc((100vh - 56px) * 1.171646162858817 / 4);&lt;br /&gt;
		font-family: Arial, sans-serif;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar a {&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		text-decoration: none;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3 {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: rgba(73, 80, 87, .85);&lt;br /&gt;
		color: #fefefe;&lt;br /&gt;
		font-weight: bold;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		line-height: normal;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3:hover {&lt;br /&gt;
		background-color: rgb(73, 80, 87);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol {&lt;br /&gt;
		list-style-type: none;&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
		overflow-y: auto;&lt;br /&gt;
		height: calc(50vh - 56px);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li + li {&lt;br /&gt;
		border-top: 1px solid #ccc;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a {&lt;br /&gt;
		display: block;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		transition: background-color .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a:hover,&lt;br /&gt;
	.ak-3dmodel__poi-list ol a.ak-3dmodel__poi-list-link_active {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		top: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		display: inline-block;&lt;br /&gt;
		width: 2.5em;&lt;br /&gt;
		height: 2.5em;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		/* Info icon taken from https://feathericons.com/ and adjusted. */&lt;br /&gt;
		background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;currentColor&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		border-radius: 50%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link:hover {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	document.addEventListener(&#039;DOMContentLoaded&#039;, function(event) {&lt;br /&gt;
		var widgets = document.getElementsByClassName(&#039;ak-3dmodel__widget&#039;);&lt;br /&gt;
		for (var i = 0; i &amp;lt; widgets.length; i++) {&lt;br /&gt;
			initWidget(widgets[i]);&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	function initWidget(widget) {&lt;br /&gt;
		var imageMap = widget.getElementsByClassName(&#039;ak-3dmodel__imagemap&#039;)[0];&lt;br /&gt;
		var areas = imageMap.children;&lt;br /&gt;
		for (var i = 0; i &amp;lt; areas.length; i++) {&lt;br /&gt;
			addAreaEventListeners(areas[i]);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		var view = widget.getElementsByClassName(&#039;ak-3dmodel__view&#039;)[0];&lt;br /&gt;
		var poiList = widget.getElementsByClassName(&#039;ak-3dmodel__poi-list-sb&#039;)[0];&lt;br /&gt;
		var sbLinks = poiList.querySelectorAll(&#039;ol li a&#039;);&lt;br /&gt;
		for (i = 0; i &amp;lt; sbLinks.length; i++) {&lt;br /&gt;
			addSBLinksEventListeners(sbLinks[i], view);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addAreaEventListeners(area) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		area.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.add(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		area.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.remove(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addSBLinksEventListeners(sbLink, view) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.add(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.remove(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-3dmodel__widget&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__background-blur&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__view&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;!-- TODO Attribution&lt;br /&gt;
		Köln-Stadtmodell von Theo Giesen (1922-1990) - Sammlung Kormann im KuMuMü - Kulturmuseum Mülheim an der Ruhr - Fotografien: Bernd Pirschtat --&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fullview&amp;quot; usemap=&amp;quot;#ak-3dmodel__imagemap&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; alt=&amp;quot;Plastisches Stadtmodell von Köln um 1571&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fowview&amp;quot; alt=&amp;quot;&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_01_St_Martin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-martin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_02_St_Brigiden.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_03_Unterlan.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_04_St_Alban.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-alban&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_05_St_Laurenz.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_06_St_Peter.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-peter&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_07_St_Columba.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_08_St_Aposteln.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_09_Niederich.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-niederich&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_10_Airsbach.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_11_St_Christoph.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-christoph&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_12_St_Mauritius.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_13_St_Severin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-severin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_14_St_Gereon.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-gereon&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_15_Eigelstein.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_16_Hacht.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-hacht&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;map name=&amp;quot;ak-3dmodel__imagemap&amp;quot; class=&amp;quot;ak-3dmodel__imagemap&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Martin&amp;quot; title=&amp;quot;S. Martin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; coords=&amp;quot;711,846,727,832,757,854,764,875,780,871,798,894,824,910,845,944,865,937,890,963,920,974,913,991,937,1034,980,1020,990,1023,1001,1013,1093,958,1123,938,1123,928,1176,882,1169,871,1114,816,1056,774,1038,749,913,831,897,838,881,818,851,809,807,763,789,760,697,838&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Brigiden&amp;quot; title=&amp;quot;S. Brigiden&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; coords=&amp;quot;1055,757,1075,765,1114,771,1087,788,1184,877,1227,838,1275,799,1262,788,1280,780,1275,769,1375,700,1361,686,1307,705,1255,735,1206,696,1181,684,1149,707,1134,716,1121,700,1111,716,1052,742&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Unterlan&amp;quot; title=&amp;quot;Unterlan&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; coords=&amp;quot;1084,792,1116,770,1103,762,1082,765,1066,767&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Alban&amp;quot; title=&amp;quot;S. Alban&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; coords=&amp;quot;904,831,920,811,934,816,1034,744,1006,709,980,659,962,656,941,673,881,710,845,740,814,760,833,788&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Laurenz&amp;quot; title=&amp;quot;S. Laurenz&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; coords=&amp;quot;1038,739,1119,702,1142,702,1181,673,1149,638,1128,622,1116,594,1123,585,1109,562,1052,603,1026,615,978,647&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Peter&amp;quot; title=&amp;quot;S. Peter&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; coords=&amp;quot;695,839,812,746,909,694,872,668,838,650,824,663,799,654,766,601,718,511,688,486,655,507,639,521,625,534,602,539,564,576,534,599,513,620,489,622,464,611,416,620,386,633,351,643,324,645,338,657,367,702,414,744,448,758,503,786&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Kolumba&amp;quot; title=&amp;quot;S. Kolumba&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; coords=&amp;quot;655,346,716,401,725,420,743,429,754,442,692,472,708,500,723,509,782,622,801,646,822,652,842,652,860,664,874,661,914,687,1031,609,1110,553,1110,539,1174,491,1128,449,1070,403,1010,343,902,267,881,244,826,233,775,263,734,260,708,279,693,277,674,295,640,311,637,323,607,344,619,364&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Apostel&amp;quot; title=&amp;quot;S. Apostel&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; coords=&amp;quot;331,634,466,608,499,620,557,578,595,537,609,546,637,525,670,495,688,479,745,438,655,348,623,376,602,348,681,286,670,263,589,198,547,157,547,143,542,134,466,164,437,177,368,235,393,270,444,320,462,345,497,389,494,401,510,410&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Niederich&amp;quot; title=&amp;quot;Niederich&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; coords=&amp;quot;1405,675,1547,611,1639,572,1738,560,1720,493,1702,496,1692,447,1667,401,1607,336,1584,283,1561,268,1534,270,1511,258,1404,222,1381,224,1303,240,1269,249,1241,252,1208,252,1149,251,1140,267,1102,277,1087,274,1068,297,1019,321,1027,339,1015,344,1075,394,1082,383,1087,404,1125,440,1169,482,1190,498,1202,484,1331,599,1338,627,1388,666&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Airsbach&amp;quot; title=&amp;quot;Airsbach&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; coords=&amp;quot;636,1292,642,1283,656,1286,654,1271,767,1170,781,1150,845,1096,859,1094,886,1073,919,1050,926,1028,912,1005,875,967,857,947,847,954,801,907,771,885,758,875,727,861,668,829,617,823,589,809,564,811,525,793,456,767,483,786,454,786,433,800,424,829,419,875,416,914,416,961,428,998,433,1048,446,1073&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Gereon&amp;quot; title=&amp;quot;S. Gereon&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; coords=&amp;quot;920,90,948,72,999,106,1008,110,1010,122,999,134,989,127,962,145,946,110&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt; &amp;lt;!-- Has to be before S. Christoph to overlay it. --&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Christoph&amp;quot; title=&amp;quot;S. Christoph&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; coords=&amp;quot;543,133,632,92,681,72,739,51,796,44,851,37,909,37,974,30,1027,35,1080,46,1133,57,1211,74,1305,97,1436,129,1420,180,1414,217,1381,210,1338,221,1294,233,1257,242,1218,253,1140,249,1140,263,1100,277,1087,276,1075,288,1019,316,1008,322,1017,334,1008,341,971,313,920,274,897,258,856,230,838,228,819,226,777,258,759,258,741,256,713,276,701,269,690,277,663,256,617,223,591,198,577,193,549,147&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; title=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; coords=&amp;quot;430,1021,418,933,418,874,428,818,435,797,449,788,442,765,388,724,336,661,320,648,319,629,347,629,363,592,423,502,458,456,504,406,488,394,488,376,456,339,448,325,396,283,379,281,370,263,370,247,359,240,320,283,271,344,232,392,179,466,167,461,158,480,165,493,133,542,119,579,103,613,86,657,84,691,77,791,75,924,117,935,245,929,305,926,330,929,333,952,358,958,361,977,377,982,377,1007&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Severin&amp;quot; title=&amp;quot;S. Severin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; coords=&amp;quot;436,1686,471,1665,480,1650,513,1631,480,1635,487,1610,471,1610,510,1527,542,1445,572,1384,640,1285,527,1175,510,1140,497,1113,473,1092,455,1085,448,1069,430,1030,377,1004,374,979,358,977,358,958,333,954,331,931,291,926,102,935,75,926,66,1380,93,1415,434,1633,439,1645,421,1663&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Eigelstein&amp;quot; title=&amp;quot;Eigelstein&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; coords=&amp;quot;1930,558,1936,544,1971,532,1967,514,1921,528,1916,511,1904,514,1886,459,1849,399,1812,346,1777,300,1750,267,1722,230,1716,209,1665,191,1617,175,1556,156,1446,133,1418,219,1490,247,1573,272,1593,293,1616,345,1644,380,1670,398,1695,447,1701,463,1706,489,1723,488,1732,518,1743,560,1755,567,1764,558,1902,541&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Hacht&amp;quot; title=&amp;quot;Hacht&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; coords=&amp;quot;1245,725,1209,689,1199,693,1140,636,1132,587,1112,557,1178,497,1190,502,1199,491,1273,544,1319,585,1335,622,1372,663,1391,677,1393,663,1404,682,1400,691,1386,698,1374,677,1287,703&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;/map&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;div class=&amp;quot;ak-3dmodel__sidebar&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;ak-3dmodel__poi-list ak-3dmodel__poi-list-sb&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;h3&amp;gt;Schreinsbezirke&amp;lt;/h3&amp;gt;&lt;br /&gt;
				&amp;lt;ol&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;I S. Martin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;II S. Brigiden&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;III Unterlan&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;IV S. Alban&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;V S. Laurenz&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;VI S. Peter&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;VII S. Kolumba&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;VIII S. Apostel&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;IX Niederich&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;X Airsbach&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;XI S. Christoph&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;XII S. Mauritius - Weyerstraße&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;XIII S. Severin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt;XIV S. Gereon&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;XV Eigelstein&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;XVI Hacht&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;/ol&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;a href=&amp;quot;/wiki/Stadtmodell/Info_zum_Stadtmodell&amp;quot; class=&amp;quot;ak-3model__info-link&amp;quot; aria-label=&amp;quot;Über das Stadtmodell&amp;quot; title=&amp;quot;Über das Stadtmodell&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;!-- Make image map responsive. --&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;https://code.jquery.com/jquery-3.5.1.min.js&amp;quot; integrity=&amp;quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;../alteskoeln/jquery.rwdImageMaps.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	$(document).ready(function() {&lt;br /&gt;
		$(&#039;img[usemap]&#039;).rwdImageMaps();&lt;br /&gt;
	});&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19371</id>
		<title>Widget:3D-Modell</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19371"/>
		<updated>2021-01-09T14:45:53Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
	body {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__widget {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: calc(100vh - 56px);&lt;br /&gt;
		overflow:hidden;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__background-blur {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		width: 100%;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		z-index: 0;&lt;br /&gt;
		background-image: url(../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg);&lt;br /&gt;
		background-position: center;&lt;br /&gt;
		background-repeat: no-repeat;&lt;br /&gt;
		background-size: cover;&lt;br /&gt;
		filter: blur(10px);&lt;br /&gt;
		opacity: 0.7;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		width: calc((100vh - 56px) * 1.171646162858817);&lt;br /&gt;
		margin-left: auto;&lt;br /&gt;
		margin-right: auto;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__fullview {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		z-index: 1;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view:hover .ak-3dmodel__fullview,&lt;br /&gt;
	.ak-3dmodel__view.ak-3dmodel__view_highlighted .ak-3dmodel__fullview {&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	/* TODO Can we do this with a CSS colour overlay instead to avoid loading this data? But it probably wouldn&#039;t match the colour of the highlight images. Maybe we can do that purely with canvas/SVG and very precise outlines? */&lt;br /&gt;
	.ak-3dmodel__fowview {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
		/* TODO Use cutouts from the images and position them relative to the full image to reduce amount of data to be loaded. How to scale and position them to the responsive image? */&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb.ak-3dmodel__sb_active {&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		bottom: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		width: calc((100vh - 56px) * 1.171646162858817 / 5);&lt;br /&gt;
		font-family: Arial, sans-serif;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar a {&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		text-decoration: none;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3 {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: rgba(73, 80, 87, .85);&lt;br /&gt;
		color: #fefefe;&lt;br /&gt;
		font-weight: bold;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		line-height: normal;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3:hover {&lt;br /&gt;
		background-color: rgb(73, 80, 87);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol {&lt;br /&gt;
		list-style-type: none;&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
		overflow-y: auto;&lt;br /&gt;
		height: calc(50vh - 56px);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li + li {&lt;br /&gt;
		border-top: 1px solid #ccc;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a {&lt;br /&gt;
		display: block;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		transition: background-color .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a:hover,&lt;br /&gt;
	.ak-3dmodel__poi-list ol a.ak-3dmodel__poi-list-link_active {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		top: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		display: inline-block;&lt;br /&gt;
		width: 2.5em;&lt;br /&gt;
		height: 2.5em;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		/* Info icon taken from https://feathericons.com/ and adjusted. */&lt;br /&gt;
		background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;currentColor&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		border-radius: 50%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link:hover {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	document.addEventListener(&#039;DOMContentLoaded&#039;, function(event) {&lt;br /&gt;
		var widgets = document.getElementsByClassName(&#039;ak-3dmodel__widget&#039;);&lt;br /&gt;
		for (var i = 0; i &amp;lt; widgets.length; i++) {&lt;br /&gt;
			initWidget(widgets[i]);&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	function initWidget(widget) {&lt;br /&gt;
		var imageMap = widget.getElementsByClassName(&#039;ak-3dmodel__imagemap&#039;)[0];&lt;br /&gt;
		var areas = imageMap.children;&lt;br /&gt;
		for (var i = 0; i &amp;lt; areas.length; i++) {&lt;br /&gt;
			addAreaEventListeners(areas[i]);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		var view = widget.getElementsByClassName(&#039;ak-3dmodel__view&#039;)[0];&lt;br /&gt;
		var poiList = widget.getElementsByClassName(&#039;ak-3dmodel__poi-list-sb&#039;)[0];&lt;br /&gt;
		var sbLinks = poiList.querySelectorAll(&#039;ol li a&#039;);&lt;br /&gt;
		for (i = 0; i &amp;lt; sbLinks.length; i++) {&lt;br /&gt;
			addSBLinksEventListeners(sbLinks[i], view);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addAreaEventListeners(area) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		area.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.add(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		area.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.remove(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addSBLinksEventListeners(sbLink, view) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.add(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.remove(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-3dmodel__widget&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__background-blur&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__view&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;!-- TODO Attribution&lt;br /&gt;
		Köln-Stadtmodell von Theo Giesen (1922-1990) - Sammlung Kormann im KuMuMü - Kulturmuseum Mülheim an der Ruhr - Fotografien: Bernd Pirschtat --&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fullview&amp;quot; usemap=&amp;quot;#ak-3dmodel__imagemap&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; alt=&amp;quot;Plastisches Stadtmodell von Köln um 1571&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fowview&amp;quot; alt=&amp;quot;&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_01_St_Martin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-martin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_02_St_Brigiden.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_03_Unterlan.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_04_St_Alban.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-alban&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_05_St_Laurenz.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_06_St_Peter.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-peter&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_07_St_Columba.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_08_St_Aposteln.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_09_Niederich.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-niederich&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_10_Airsbach.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_11_St_Christoph.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-christoph&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_12_St_Mauritius.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_13_St_Severin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-severin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_14_St_Gereon.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-gereon&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_15_Eigelstein.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_16_Hacht.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-hacht&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;map name=&amp;quot;ak-3dmodel__imagemap&amp;quot; class=&amp;quot;ak-3dmodel__imagemap&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Martin&amp;quot; title=&amp;quot;S. Martin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; coords=&amp;quot;711,846,727,832,757,854,764,875,780,871,798,894,824,910,845,944,865,937,890,963,920,974,913,991,937,1034,980,1020,990,1023,1001,1013,1093,958,1123,938,1123,928,1176,882,1169,871,1114,816,1056,774,1038,749,913,831,897,838,881,818,851,809,807,763,789,760,697,838&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Brigiden&amp;quot; title=&amp;quot;S. Brigiden&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; coords=&amp;quot;1055,757,1075,765,1114,771,1087,788,1184,877,1227,838,1275,799,1262,788,1280,780,1275,769,1375,700,1361,686,1307,705,1255,735,1206,696,1181,684,1149,707,1134,716,1121,700,1111,716,1052,742&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Unterlan&amp;quot; title=&amp;quot;Unterlan&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; coords=&amp;quot;1084,792,1116,770,1103,762,1082,765,1066,767&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Alban&amp;quot; title=&amp;quot;S. Alban&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; coords=&amp;quot;904,831,920,811,934,816,1034,744,1006,709,980,659,962,656,941,673,881,710,845,740,814,760,833,788&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Laurenz&amp;quot; title=&amp;quot;S. Laurenz&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; coords=&amp;quot;1038,739,1119,702,1142,702,1181,673,1149,638,1128,622,1116,594,1123,585,1109,562,1052,603,1026,615,978,647&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Peter&amp;quot; title=&amp;quot;S. Peter&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; coords=&amp;quot;695,839,812,746,909,694,872,668,838,650,824,663,799,654,766,601,718,511,688,486,655,507,639,521,625,534,602,539,564,576,534,599,513,620,489,622,464,611,416,620,386,633,351,643,324,645,338,657,367,702,414,744,448,758,503,786&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Kolumba&amp;quot; title=&amp;quot;S. Kolumba&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; coords=&amp;quot;655,346,716,401,725,420,743,429,754,442,692,472,708,500,723,509,782,622,801,646,822,652,842,652,860,664,874,661,914,687,1031,609,1110,553,1110,539,1174,491,1128,449,1070,403,1010,343,902,267,881,244,826,233,775,263,734,260,708,279,693,277,674,295,640,311,637,323,607,344,619,364&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Apostel&amp;quot; title=&amp;quot;S. Apostel&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; coords=&amp;quot;331,634,466,608,499,620,557,578,595,537,609,546,637,525,670,495,688,479,745,438,655,348,623,376,602,348,681,286,670,263,589,198,547,157,547,143,542,134,466,164,437,177,368,235,393,270,444,320,462,345,497,389,494,401,510,410&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Niederich&amp;quot; title=&amp;quot;Niederich&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; coords=&amp;quot;1405,675,1547,611,1639,572,1738,560,1720,493,1702,496,1692,447,1667,401,1607,336,1584,283,1561,268,1534,270,1511,258,1404,222,1381,224,1303,240,1269,249,1241,252,1208,252,1149,251,1140,267,1102,277,1087,274,1068,297,1019,321,1027,339,1015,344,1075,394,1082,383,1087,404,1125,440,1169,482,1190,498,1202,484,1331,599,1338,627,1388,666&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Airsbach&amp;quot; title=&amp;quot;Airsbach&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; coords=&amp;quot;636,1292,642,1283,656,1286,654,1271,767,1170,781,1150,845,1096,859,1094,886,1073,919,1050,926,1028,912,1005,875,967,857,947,847,954,801,907,771,885,758,875,727,861,668,829,617,823,589,809,564,811,525,793,456,767,483,786,454,786,433,800,424,829,419,875,416,914,416,961,428,998,433,1048,446,1073&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Gereon&amp;quot; title=&amp;quot;S. Gereon&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; coords=&amp;quot;920,90,948,72,999,106,1008,110,1010,122,999,134,989,127,962,145,946,110&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt; &amp;lt;!-- Has to be before S. Christoph to overlay it. --&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Christoph&amp;quot; title=&amp;quot;S. Christoph&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; coords=&amp;quot;543,133,632,92,681,72,739,51,796,44,851,37,909,37,974,30,1027,35,1080,46,1133,57,1211,74,1305,97,1436,129,1420,180,1414,217,1381,210,1338,221,1294,233,1257,242,1218,253,1140,249,1140,263,1100,277,1087,276,1075,288,1019,316,1008,322,1017,334,1008,341,971,313,920,274,897,258,856,230,838,228,819,226,777,258,759,258,741,256,713,276,701,269,690,277,663,256,617,223,591,198,577,193,549,147&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; title=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; coords=&amp;quot;430,1021,418,933,418,874,428,818,435,797,449,788,442,765,388,724,336,661,320,648,319,629,347,629,363,592,423,502,458,456,504,406,488,394,488,376,456,339,448,325,396,283,379,281,370,263,370,247,359,240,320,283,271,344,232,392,179,466,167,461,158,480,165,493,133,542,119,579,103,613,86,657,84,691,77,791,75,924,117,935,245,929,305,926,330,929,333,952,358,958,361,977,377,982,377,1007&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Severin&amp;quot; title=&amp;quot;S. Severin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; coords=&amp;quot;436,1686,471,1665,480,1650,513,1631,480,1635,487,1610,471,1610,510,1527,542,1445,572,1384,640,1285,527,1175,510,1140,497,1113,473,1092,455,1085,448,1069,430,1030,377,1004,374,979,358,977,358,958,333,954,331,931,291,926,102,935,75,926,66,1380,93,1415,434,1633,439,1645,421,1663&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Eigelstein&amp;quot; title=&amp;quot;Eigelstein&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; coords=&amp;quot;1930,558,1936,544,1971,532,1967,514,1921,528,1916,511,1904,514,1886,459,1849,399,1812,346,1777,300,1750,267,1722,230,1716,209,1665,191,1617,175,1556,156,1446,133,1418,219,1490,247,1573,272,1593,293,1616,345,1644,380,1670,398,1695,447,1701,463,1706,489,1723,488,1732,518,1743,560,1755,567,1764,558,1902,541&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Hacht&amp;quot; title=&amp;quot;Hacht&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; coords=&amp;quot;1245,725,1209,689,1199,693,1140,636,1132,587,1112,557,1178,497,1190,502,1199,491,1273,544,1319,585,1335,622,1372,663,1391,677,1393,663,1404,682,1400,691,1386,698,1374,677,1287,703&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;/map&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;div class=&amp;quot;ak-3dmodel__sidebar&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;ak-3dmodel__poi-list ak-3dmodel__poi-list-sb&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;h3&amp;gt;Schreinsbezirke&amp;lt;/h3&amp;gt;&lt;br /&gt;
				&amp;lt;ol&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;I S. Martin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;II S. Brigiden&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;III Unterlan&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;IV S. Alban&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;V S. Laurenz&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;VI S. Peter&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;VII S. Kolumba&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;VIII S. Apostel&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;IX Niederich&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;X Airsbach&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;XI S. Christoph&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;XII S. Mauritius - Weyerstraße&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;XIII S. Severin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt;XIV S. Gereon&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;XV Eigelstein&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;XVI Hacht&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;/ol&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;a href=&amp;quot;/wiki/Stadtmodell/Info_zum_Stadtmodell&amp;quot; class=&amp;quot;ak-3model__info-link&amp;quot; aria-label=&amp;quot;Über das Stadtmodell&amp;quot; title=&amp;quot;Über das Stadtmodell&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;!-- Make image map responsive. --&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;https://code.jquery.com/jquery-3.5.1.min.js&amp;quot; integrity=&amp;quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;../alteskoeln/jquery.rwdImageMaps.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	$(document).ready(function() {&lt;br /&gt;
		$(&#039;img[usemap]&#039;).rwdImageMaps();&lt;br /&gt;
	});&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19369</id>
		<title>Widget:3D-Modell</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19369"/>
		<updated>2021-01-09T14:07:53Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
	body {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__widget {&lt;br /&gt;
		height: 100vh;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__background-blur {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		width: 100%;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		z-index: 0;&lt;br /&gt;
		background-image: url(../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg);&lt;br /&gt;
		background-position: center;&lt;br /&gt;
		background-repeat: no-repeat;&lt;br /&gt;
		background-size: cover;&lt;br /&gt;
		filter: blur(10px);&lt;br /&gt;
		opacity: 0.7;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		width: calc(100vh * 1.171646162858817);&lt;br /&gt;
		margin-left: auto;&lt;br /&gt;
		margin-right: auto;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__fullview {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		z-index: 1;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view:hover .ak-3dmodel__fullview,&lt;br /&gt;
	.ak-3dmodel__view.ak-3dmodel__view_highlighted .ak-3dmodel__fullview {&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	/* TODO Can we do this with a CSS colour overlay instead to avoid loading this data? But it probably wouldn&#039;t match the colour of the highlight images. Maybe we can do that purely with canvas/SVG and very precise outlines? */&lt;br /&gt;
	.ak-3dmodel__fowview {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
		/* TODO Use cutouts from the images and position them relative to the full image to reduce amount of data to be loaded. How to scale and position them to the responsive image? */&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb.ak-3dmodel__sb_active {&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		bottom: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		font-family: Arial, sans-serif;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar a {&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		text-decoration: none;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3 {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: rgba(73, 80, 87, .85);&lt;br /&gt;
		color: #fefefe;&lt;br /&gt;
		font-weight: bold;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		line-height: normal;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3:hover {&lt;br /&gt;
		background-color: rgb(73, 80, 87);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol {&lt;br /&gt;
		list-style-type: none;&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
		overflow-y: auto;&lt;br /&gt;
		height: 52vh;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li + li {&lt;br /&gt;
		border-top: 1px solid #ccc;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a {&lt;br /&gt;
		display: block;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		transition: background-color .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a:hover,&lt;br /&gt;
	.ak-3dmodel__poi-list ol a.ak-3dmodel__poi-list-link_active {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		top: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		display: inline-block;&lt;br /&gt;
		width: 2.5em;&lt;br /&gt;
		height: 2.5em;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		/* Info icon taken from https://feathericons.com/ and adjusted. */&lt;br /&gt;
		background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;currentColor&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		border-radius: 50%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link:hover {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	document.addEventListener(&#039;DOMContentLoaded&#039;, function(event) {&lt;br /&gt;
		var widgets = document.getElementsByClassName(&#039;ak-3dmodel__widget&#039;);&lt;br /&gt;
		for (var i = 0; i &amp;lt; widgets.length; i++) {&lt;br /&gt;
			initWidget(widgets[i]);&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	function initWidget(widget) {&lt;br /&gt;
		var imageMap = widget.getElementsByClassName(&#039;ak-3dmodel__imagemap&#039;)[0];&lt;br /&gt;
		var areas = imageMap.children;&lt;br /&gt;
		for (var i = 0; i &amp;lt; areas.length; i++) {&lt;br /&gt;
			addAreaEventListeners(areas[i]);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		var view = widget.getElementsByClassName(&#039;ak-3dmodel__view&#039;)[0];&lt;br /&gt;
		var poiList = widget.getElementsByClassName(&#039;ak-3dmodel__poi-list-sb&#039;)[0];&lt;br /&gt;
		var sbLinks = poiList.querySelectorAll(&#039;ol li a&#039;);&lt;br /&gt;
		for (i = 0; i &amp;lt; sbLinks.length; i++) {&lt;br /&gt;
			addSBLinksEventListeners(sbLinks[i], view);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addAreaEventListeners(area) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		area.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.add(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		area.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.remove(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addSBLinksEventListeners(sbLink, view) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.add(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.remove(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-3dmodel__widget&amp;quot; style=&amp;quot;overflow:hidden&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__background-blur&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__view&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;!-- TODO Attribution&lt;br /&gt;
		Köln-Stadtmodell von Theo Giesen (1922-1990) - Sammlung Kormann im KuMuMü - Kulturmuseum Mülheim an der Ruhr - Fotografien: Bernd Pirschtat --&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fullview&amp;quot; usemap=&amp;quot;#ak-3dmodel__imagemap&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; alt=&amp;quot;Plastisches Stadtmodell von Köln um 1571&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fowview&amp;quot; alt=&amp;quot;&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_01_St_Martin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-martin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_02_St_Brigiden.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_03_Unterlan.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_04_St_Alban.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-alban&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_05_St_Laurenz.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_06_St_Peter.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-peter&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_07_St_Columba.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_08_St_Aposteln.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_09_Niederich.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-niederich&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_10_Airsbach.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_11_St_Christoph.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-christoph&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_12_St_Mauritius.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_13_St_Severin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-severin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_14_St_Gereon.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-gereon&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_15_Eigelstein.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_16_Hacht.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-hacht&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;map name=&amp;quot;ak-3dmodel__imagemap&amp;quot; class=&amp;quot;ak-3dmodel__imagemap&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Martin&amp;quot; title=&amp;quot;S. Martin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; coords=&amp;quot;711,846,727,832,757,854,764,875,780,871,798,894,824,910,845,944,865,937,890,963,920,974,913,991,937,1034,980,1020,990,1023,1001,1013,1093,958,1123,938,1123,928,1176,882,1169,871,1114,816,1056,774,1038,749,913,831,897,838,881,818,851,809,807,763,789,760,697,838&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Brigiden&amp;quot; title=&amp;quot;S. Brigiden&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; coords=&amp;quot;1055,757,1075,765,1114,771,1087,788,1184,877,1227,838,1275,799,1262,788,1280,780,1275,769,1375,700,1361,686,1307,705,1255,735,1206,696,1181,684,1149,707,1134,716,1121,700,1111,716,1052,742&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Unterlan&amp;quot; title=&amp;quot;Unterlan&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; coords=&amp;quot;1084,792,1116,770,1103,762,1082,765,1066,767&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Alban&amp;quot; title=&amp;quot;S. Alban&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; coords=&amp;quot;904,831,920,811,934,816,1034,744,1006,709,980,659,962,656,941,673,881,710,845,740,814,760,833,788&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Laurenz&amp;quot; title=&amp;quot;S. Laurenz&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; coords=&amp;quot;1038,739,1119,702,1142,702,1181,673,1149,638,1128,622,1116,594,1123,585,1109,562,1052,603,1026,615,978,647&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Peter&amp;quot; title=&amp;quot;S. Peter&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; coords=&amp;quot;695,839,812,746,909,694,872,668,838,650,824,663,799,654,766,601,718,511,688,486,655,507,639,521,625,534,602,539,564,576,534,599,513,620,489,622,464,611,416,620,386,633,351,643,324,645,338,657,367,702,414,744,448,758,503,786&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Kolumba&amp;quot; title=&amp;quot;S. Kolumba&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; coords=&amp;quot;655,346,716,401,725,420,743,429,754,442,692,472,708,500,723,509,782,622,801,646,822,652,842,652,860,664,874,661,914,687,1031,609,1110,553,1110,539,1174,491,1128,449,1070,403,1010,343,902,267,881,244,826,233,775,263,734,260,708,279,693,277,674,295,640,311,637,323,607,344,619,364&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Apostel&amp;quot; title=&amp;quot;S. Apostel&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; coords=&amp;quot;331,634,466,608,499,620,557,578,595,537,609,546,637,525,670,495,688,479,745,438,655,348,623,376,602,348,681,286,670,263,589,198,547,157,547,143,542,134,466,164,437,177,368,235,393,270,444,320,462,345,497,389,494,401,510,410&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Niederich&amp;quot; title=&amp;quot;Niederich&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; coords=&amp;quot;1405,675,1547,611,1639,572,1738,560,1720,493,1702,496,1692,447,1667,401,1607,336,1584,283,1561,268,1534,270,1511,258,1404,222,1381,224,1303,240,1269,249,1241,252,1208,252,1149,251,1140,267,1102,277,1087,274,1068,297,1019,321,1027,339,1015,344,1075,394,1082,383,1087,404,1125,440,1169,482,1190,498,1202,484,1331,599,1338,627,1388,666&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Airsbach&amp;quot; title=&amp;quot;Airsbach&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; coords=&amp;quot;636,1292,642,1283,656,1286,654,1271,767,1170,781,1150,845,1096,859,1094,886,1073,919,1050,926,1028,912,1005,875,967,857,947,847,954,801,907,771,885,758,875,727,861,668,829,617,823,589,809,564,811,525,793,456,767,483,786,454,786,433,800,424,829,419,875,416,914,416,961,428,998,433,1048,446,1073&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Gereon&amp;quot; title=&amp;quot;S. Gereon&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; coords=&amp;quot;920,90,948,72,999,106,1008,110,1010,122,999,134,989,127,962,145,946,110&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt; &amp;lt;!-- Has to be before S. Christoph to overlay it. --&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Christoph&amp;quot; title=&amp;quot;S. Christoph&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; coords=&amp;quot;543,133,632,92,681,72,739,51,796,44,851,37,909,37,974,30,1027,35,1080,46,1133,57,1211,74,1305,97,1436,129,1420,180,1414,217,1381,210,1338,221,1294,233,1257,242,1218,253,1140,249,1140,263,1100,277,1087,276,1075,288,1019,316,1008,322,1017,334,1008,341,971,313,920,274,897,258,856,230,838,228,819,226,777,258,759,258,741,256,713,276,701,269,690,277,663,256,617,223,591,198,577,193,549,147&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; title=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; coords=&amp;quot;430,1021,418,933,418,874,428,818,435,797,449,788,442,765,388,724,336,661,320,648,319,629,347,629,363,592,423,502,458,456,504,406,488,394,488,376,456,339,448,325,396,283,379,281,370,263,370,247,359,240,320,283,271,344,232,392,179,466,167,461,158,480,165,493,133,542,119,579,103,613,86,657,84,691,77,791,75,924,117,935,245,929,305,926,330,929,333,952,358,958,361,977,377,982,377,1007&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Severin&amp;quot; title=&amp;quot;S. Severin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; coords=&amp;quot;436,1686,471,1665,480,1650,513,1631,480,1635,487,1610,471,1610,510,1527,542,1445,572,1384,640,1285,527,1175,510,1140,497,1113,473,1092,455,1085,448,1069,430,1030,377,1004,374,979,358,977,358,958,333,954,331,931,291,926,102,935,75,926,66,1380,93,1415,434,1633,439,1645,421,1663&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Eigelstein&amp;quot; title=&amp;quot;Eigelstein&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; coords=&amp;quot;1930,558,1936,544,1971,532,1967,514,1921,528,1916,511,1904,514,1886,459,1849,399,1812,346,1777,300,1750,267,1722,230,1716,209,1665,191,1617,175,1556,156,1446,133,1418,219,1490,247,1573,272,1593,293,1616,345,1644,380,1670,398,1695,447,1701,463,1706,489,1723,488,1732,518,1743,560,1755,567,1764,558,1902,541&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Hacht&amp;quot; title=&amp;quot;Hacht&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; coords=&amp;quot;1245,725,1209,689,1199,693,1140,636,1132,587,1112,557,1178,497,1190,502,1199,491,1273,544,1319,585,1335,622,1372,663,1391,677,1393,663,1404,682,1400,691,1386,698,1374,677,1287,703&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;/map&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;div class=&amp;quot;ak-3dmodel__sidebar&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;ak-3dmodel__poi-list ak-3dmodel__poi-list-sb&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;h3&amp;gt;Schreinsbezirke&amp;lt;/h3&amp;gt;&lt;br /&gt;
				&amp;lt;ol&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;I S. Martin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;II S. Brigiden&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;III Unterlan&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;IV S. Alban&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;V S. Laurenz&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;VI S. Peter&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;VII S. Kolumba&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;VIII S. Apostel&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;IX Niederich&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;X Airsbach&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;XI S. Christoph&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;XII S. Mauritius - Weyerstraße&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;XIII S. Severin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt;XIV S. Gereon&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;XV Eigelstein&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;XVI Hacht&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;/ol&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;a href=&amp;quot;/wiki/Stadtmodell/Info_zum_Stadtmodell&amp;quot; class=&amp;quot;ak-3model__info-link&amp;quot; aria-label=&amp;quot;Über das Stadtmodell&amp;quot; title=&amp;quot;Über das Stadtmodell&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;!-- Make image map responsive. --&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;https://code.jquery.com/jquery-3.5.1.min.js&amp;quot; integrity=&amp;quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;../alteskoeln/jquery.rwdImageMaps.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	$(document).ready(function() {&lt;br /&gt;
		$(&#039;img[usemap]&#039;).rwdImageMaps();&lt;br /&gt;
	});&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19368</id>
		<title>Widget:3D-Modell</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19368"/>
		<updated>2021-01-09T14:07:20Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
	body {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__widget {&lt;br /&gt;
		height: 100vh;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__background-blur {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		width: 100%;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		z-index: 0;&lt;br /&gt;
		background-image: url(../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg);&lt;br /&gt;
		background-position: center;&lt;br /&gt;
		background-repeat: no-repeat;&lt;br /&gt;
		background-size: cover;&lt;br /&gt;
		filter: blur(10px);&lt;br /&gt;
		opacity: 0.7;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		width: calc(100vh * 1.171646162858817);&lt;br /&gt;
		margin-left: auto;&lt;br /&gt;
		margin-right: auto;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__fullview {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		z-index: 1;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view:hover .ak-3dmodel__fullview,&lt;br /&gt;
	.ak-3dmodel__view.ak-3dmodel__view_highlighted .ak-3dmodel__fullview {&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	/* TODO Can we do this with a CSS colour overlay instead to avoid loading this data? But it probably wouldn&#039;t match the colour of the highlight images. Maybe we can do that purely with canvas/SVG and very precise outlines? */&lt;br /&gt;
	.ak-3dmodel__fowview {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
		/* TODO Use cutouts from the images and position them relative to the full image to reduce amount of data to be loaded. How to scale and position them to the responsive image? */&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb.ak-3dmodel__sb_active {&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		bottom: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		font-family: Arial, sans-serif;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar a {&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		text-decoration: none;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3 {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: rgba(73, 80, 87, .85);&lt;br /&gt;
		color: #fefefe;&lt;br /&gt;
		font-weight: bold;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		line-height: normal;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3:hover {&lt;br /&gt;
		background-color: rgb(73, 80, 87);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol {&lt;br /&gt;
		list-style-type: none;&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
		overflow-y: auto;&lt;br /&gt;
		height: 52vh;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li + li {&lt;br /&gt;
		border-top: 1px solid #ccc;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a {&lt;br /&gt;
		display: block;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		transition: background-color .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a:hover,&lt;br /&gt;
	.ak-3dmodel__poi-list ol a.ak-3dmodel__poi-list-link_active {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		top: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		display: inline-block;&lt;br /&gt;
		width: 2.5em;&lt;br /&gt;
		height: 2.5em;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		/* Info icon taken from https://feathericons.com/ and adjusted. */&lt;br /&gt;
		background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;currentColor&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		border-radius: 50%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3model__info-link:hover {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	document.addEventListener(&#039;DOMContentLoaded&#039;, function(event) {&lt;br /&gt;
		var widgets = document.getElementsByClassName(&#039;ak-3dmodel__widget&#039;);&lt;br /&gt;
		for (var i = 0; i &amp;lt; widgets.length; i++) {&lt;br /&gt;
			initWidget(widgets[i]);&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	function initWidget(widget) {&lt;br /&gt;
		var imageMap = widget.getElementsByClassName(&#039;ak-3dmodel__imagemap&#039;)[0];&lt;br /&gt;
		var areas = imageMap.children;&lt;br /&gt;
		for (var i = 0; i &amp;lt; areas.length; i++) {&lt;br /&gt;
			addAreaEventListeners(areas[i]);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		var view = widget.getElementsByClassName(&#039;ak-3dmodel__view&#039;)[0];&lt;br /&gt;
		var poiList = widget.getElementsByClassName(&#039;ak-3dmodel__poi-list-sb&#039;)[0];&lt;br /&gt;
		var sbLinks = poiList.querySelectorAll(&#039;ol li a&#039;);&lt;br /&gt;
		for (i = 0; i &amp;lt; sbLinks.length; i++) {&lt;br /&gt;
			addSBLinksEventListeners(sbLinks[i], view);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addAreaEventListeners(area) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		area.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.add(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		area.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.remove(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addSBLinksEventListeners(sbLink, view) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.add(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.remove(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-3dmodel__widget&amp;quot; style=&amp;quot;overflow:hidden&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__background-blur&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__view&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;!-- TODO Attribution&lt;br /&gt;
		Köln-Stadtmodell von Theo Giesen (1922-1990) - Sammlung Kormann im KuMuMü - Kulturmuseum Mülheim an der Ruhr - Fotografien: Bernd Pirschtat --&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fullview&amp;quot; usemap=&amp;quot;#ak-3dmodel__imagemap&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; alt=&amp;quot;Plastisches Stadtmodell von Köln um 1571&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fowview&amp;quot; alt=&amp;quot;&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_01_St_Martin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-martin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_02_St_Brigiden.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_03_Unterlan.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_04_St_Alban.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-alban&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_05_St_Laurenz.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_06_St_Peter.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-peter&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_07_St_Columba.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_08_St_Aposteln.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_09_Niederich.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-niederich&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_10_Airsbach.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_11_St_Christoph.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-christoph&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_12_St_Mauritius.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_13_St_Severin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-severin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_14_St_Gereon.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-gereon&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_15_Eigelstein.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;../alteskoeln/3dmodel/SB_16_Hacht.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-hacht&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;map name=&amp;quot;ak-3dmodel__imagemap&amp;quot; class=&amp;quot;ak-3dmodel__imagemap&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Martin&amp;quot; title=&amp;quot;S. Martin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; coords=&amp;quot;711,846,727,832,757,854,764,875,780,871,798,894,824,910,845,944,865,937,890,963,920,974,913,991,937,1034,980,1020,990,1023,1001,1013,1093,958,1123,938,1123,928,1176,882,1169,871,1114,816,1056,774,1038,749,913,831,897,838,881,818,851,809,807,763,789,760,697,838&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Brigiden&amp;quot; title=&amp;quot;S. Brigiden&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; coords=&amp;quot;1055,757,1075,765,1114,771,1087,788,1184,877,1227,838,1275,799,1262,788,1280,780,1275,769,1375,700,1361,686,1307,705,1255,735,1206,696,1181,684,1149,707,1134,716,1121,700,1111,716,1052,742&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Unterlan&amp;quot; title=&amp;quot;Unterlan&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; coords=&amp;quot;1084,792,1116,770,1103,762,1082,765,1066,767&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Alban&amp;quot; title=&amp;quot;S. Alban&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; coords=&amp;quot;904,831,920,811,934,816,1034,744,1006,709,980,659,962,656,941,673,881,710,845,740,814,760,833,788&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Laurenz&amp;quot; title=&amp;quot;S. Laurenz&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; coords=&amp;quot;1038,739,1119,702,1142,702,1181,673,1149,638,1128,622,1116,594,1123,585,1109,562,1052,603,1026,615,978,647&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Peter&amp;quot; title=&amp;quot;S. Peter&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; coords=&amp;quot;695,839,812,746,909,694,872,668,838,650,824,663,799,654,766,601,718,511,688,486,655,507,639,521,625,534,602,539,564,576,534,599,513,620,489,622,464,611,416,620,386,633,351,643,324,645,338,657,367,702,414,744,448,758,503,786&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Kolumba&amp;quot; title=&amp;quot;S. Kolumba&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; coords=&amp;quot;655,346,716,401,725,420,743,429,754,442,692,472,708,500,723,509,782,622,801,646,822,652,842,652,860,664,874,661,914,687,1031,609,1110,553,1110,539,1174,491,1128,449,1070,403,1010,343,902,267,881,244,826,233,775,263,734,260,708,279,693,277,674,295,640,311,637,323,607,344,619,364&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Apostel&amp;quot; title=&amp;quot;S. Apostel&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; coords=&amp;quot;331,634,466,608,499,620,557,578,595,537,609,546,637,525,670,495,688,479,745,438,655,348,623,376,602,348,681,286,670,263,589,198,547,157,547,143,542,134,466,164,437,177,368,235,393,270,444,320,462,345,497,389,494,401,510,410&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Niederich&amp;quot; title=&amp;quot;Niederich&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; coords=&amp;quot;1405,675,1547,611,1639,572,1738,560,1720,493,1702,496,1692,447,1667,401,1607,336,1584,283,1561,268,1534,270,1511,258,1404,222,1381,224,1303,240,1269,249,1241,252,1208,252,1149,251,1140,267,1102,277,1087,274,1068,297,1019,321,1027,339,1015,344,1075,394,1082,383,1087,404,1125,440,1169,482,1190,498,1202,484,1331,599,1338,627,1388,666&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Airsbach&amp;quot; title=&amp;quot;Airsbach&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; coords=&amp;quot;636,1292,642,1283,656,1286,654,1271,767,1170,781,1150,845,1096,859,1094,886,1073,919,1050,926,1028,912,1005,875,967,857,947,847,954,801,907,771,885,758,875,727,861,668,829,617,823,589,809,564,811,525,793,456,767,483,786,454,786,433,800,424,829,419,875,416,914,416,961,428,998,433,1048,446,1073&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Gereon&amp;quot; title=&amp;quot;S. Gereon&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; coords=&amp;quot;920,90,948,72,999,106,1008,110,1010,122,999,134,989,127,962,145,946,110&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt; &amp;lt;!-- Has to be before S. Christoph to overlay it. --&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Christoph&amp;quot; title=&amp;quot;S. Christoph&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; coords=&amp;quot;543,133,632,92,681,72,739,51,796,44,851,37,909,37,974,30,1027,35,1080,46,1133,57,1211,74,1305,97,1436,129,1420,180,1414,217,1381,210,1338,221,1294,233,1257,242,1218,253,1140,249,1140,263,1100,277,1087,276,1075,288,1019,316,1008,322,1017,334,1008,341,971,313,920,274,897,258,856,230,838,228,819,226,777,258,759,258,741,256,713,276,701,269,690,277,663,256,617,223,591,198,577,193,549,147&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; title=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; coords=&amp;quot;430,1021,418,933,418,874,428,818,435,797,449,788,442,765,388,724,336,661,320,648,319,629,347,629,363,592,423,502,458,456,504,406,488,394,488,376,456,339,448,325,396,283,379,281,370,263,370,247,359,240,320,283,271,344,232,392,179,466,167,461,158,480,165,493,133,542,119,579,103,613,86,657,84,691,77,791,75,924,117,935,245,929,305,926,330,929,333,952,358,958,361,977,377,982,377,1007&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Severin&amp;quot; title=&amp;quot;S. Severin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; coords=&amp;quot;436,1686,471,1665,480,1650,513,1631,480,1635,487,1610,471,1610,510,1527,542,1445,572,1384,640,1285,527,1175,510,1140,497,1113,473,1092,455,1085,448,1069,430,1030,377,1004,374,979,358,977,358,958,333,954,331,931,291,926,102,935,75,926,66,1380,93,1415,434,1633,439,1645,421,1663&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Eigelstein&amp;quot; title=&amp;quot;Eigelstein&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; coords=&amp;quot;1930,558,1936,544,1971,532,1967,514,1921,528,1916,511,1904,514,1886,459,1849,399,1812,346,1777,300,1750,267,1722,230,1716,209,1665,191,1617,175,1556,156,1446,133,1418,219,1490,247,1573,272,1593,293,1616,345,1644,380,1670,398,1695,447,1701,463,1706,489,1723,488,1732,518,1743,560,1755,567,1764,558,1902,541&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Hacht&amp;quot; title=&amp;quot;Hacht&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; coords=&amp;quot;1245,725,1209,689,1199,693,1140,636,1132,587,1112,557,1178,497,1190,502,1199,491,1273,544,1319,585,1335,622,1372,663,1391,677,1393,663,1404,682,1400,691,1386,698,1374,677,1287,703&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;/map&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;div class=&amp;quot;ak-3dmodel__sidebar&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;ak-3dmodel__poi-list ak-3dmodel__poi-list-sb&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;h3&amp;gt;Schreinsbezirke&amp;lt;/h3&amp;gt;&lt;br /&gt;
				&amp;lt;ol&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;I S. Martin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;II S. Brigiden&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;III Unterlan&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;IV S. Alban&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;V S. Laurenz&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;VI S. Peter&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;VII S. Kolumba&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;VIII S. Apostel&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;IX Niederich&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;X Airsbach&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;XI S. Christoph&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;XII S. Mauritius - Weyerstraße&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;XIII S. Severin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt;XIV S. Gereon&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;XV Eigelstein&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;XVI Hacht&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;/ol&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;a href=&amp;quot;/wiki/Stadtmodell/Info_zum_Stadtmodell&amp;quot; class=&amp;quot;ak-3model__info-link&amp;quot; aria-label=&amp;quot;Über das Stadtmodell&amp;quot; title=&amp;quot;Über das Stadtmodell&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;!-- Make image map responsive. --&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;https://code.jquery.com/jquery-3.5.1.min.js&amp;quot; integrity=&amp;quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;../alteskoeln/jquery.rwdImageMaps.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	$(document).ready(function() {&lt;br /&gt;
		$(&#039;img[usemap]&#039;).rwdImageMaps();&lt;br /&gt;
	});&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=MediaWiki:Common.css&amp;diff=19367</id>
		<title>MediaWiki:Common.css</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=MediaWiki:Common.css&amp;diff=19367"/>
		<updated>2021-01-09T13:23:52Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */&lt;br /&gt;
&lt;br /&gt;
/* Seitenkopf */&lt;br /&gt;
&lt;br /&gt;
.ak-page-header {&lt;br /&gt;
	background-image: url(/images/b/b0/Colonia.png);&lt;br /&gt;
	background-repeat: no-repeat;&lt;br /&gt;
	background-size: cover;&lt;br /&gt;
	background-position-y: 33%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__content {&lt;br /&gt;
	/*background-image: linear-gradient(to right, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);*/&lt;br /&gt;
	/*margin-left: 0;*/&lt;br /&gt;
    background-color: rgba(255,255,255,0.65);&lt;br /&gt;
    min-height: 135px;&lt;br /&gt;
    /*margin-right: 0;*/&lt;br /&gt;
display: flex;&lt;br /&gt;
align-items: center;&lt;br /&gt;
justify-content: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__logo-col {&lt;br /&gt;
	padding-left: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#p-logo img {&lt;br /&gt;
	height: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__headline-col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__headline {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	font-family: &#039;UnifrakturMaguntia&#039;, cursive;&lt;br /&gt;
	font-size: 5rem;&lt;br /&gt;
	line-height: 1;&lt;br /&gt;
    /*line-height: 135px;*/&lt;br /&gt;
    padding-top: 10px;&lt;br /&gt;
/*    margin-bottom: -10px;*/&lt;br /&gt;
    /*text-align: center;*/&lt;br /&gt;
    color: #5e2028;&lt;br /&gt;
/*    flex-grow: 1;*/&lt;br /&gt;
margin-left: 50px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Padding von Seiteninhalt entfernen, es bekommt schon von Bootstrap Padding. So können wir es mit anderen Bootstrap-Containern alignen. */&lt;br /&gt;
.mw-body {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Powered By Logos verstecken */&lt;br /&gt;
#footer-poweredbyico {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Sicherstellen, dass die Visual Editor Toolbar nicht unter dem fixen Seitenheader hängt */&lt;br /&gt;
.ve-init-mw-desktopArticleTarget-toolbar-open &amp;gt; .oo-ui-toolbar-bar {&lt;br /&gt;
	margin-top: 56px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Links im Fließtext und in Tooltips unterstreichen */&lt;br /&gt;
.content a,&lt;br /&gt;
.content a[href].new,&lt;br /&gt;
.content a[href].external,&lt;br /&gt;
.ak-tooltip a,&lt;br /&gt;
.ak-tooltip a[href].new,&lt;br /&gt;
.ak-tooltip a[href].external {&lt;br /&gt;
	text-decoration-color: lightgray;&lt;br /&gt;
	text-decoration-line: underline;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Externe Links mit Icon markieren */&lt;br /&gt;
.mw-parser-output .external,&lt;br /&gt;
.ak-tooltip .external {&lt;br /&gt;
	background-position: center right;&lt;br /&gt;
	background-repeat: no-repeat;&lt;br /&gt;
	background-size: 12px;&lt;br /&gt;
	background-image: linear-gradient(transparent,transparent),url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 576 512&#039;%3E%3Cpath fill=&#039;%231a76c7&#039; d=&#039;M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z&#039;%3E%3C/path%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
	padding-right: 15px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Hauptseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Überschrift auf Hauptseite verstecken */&lt;br /&gt;
&lt;br /&gt;
body.page-Hauptseite.action-view h1.firstHeading,&lt;br /&gt;
body.page-Hauptseite.action-submit h1.firstHeading {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
body.page-Hauptseite .contentHeader {&lt;br /&gt;
	margin-top: 2.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Bild auf Startseite auf Seitenbreite beschränken, aber Seitenverhältnis erhalten. */&lt;br /&gt;
.ak-max-width {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Kartensammlungsseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Seite bekommt volle Breite */&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Flexbox den ganzen Weg runter bis zur Karte anwenden, damit die Karte die volle Seitenhöhe ausfüllen kann. */&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung #content,&lt;br /&gt;
.page-Kartensammlung #bodyContent,&lt;br /&gt;
.page-Kartensammlung #mw-content-text,&lt;br /&gt;
.page-Kartensammlung #mw-content-text .mw-parser-output {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map,&lt;br /&gt;
.page-Kartensammlung .ak-map-sidebar {&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kartensammlung kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-page-header {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .contentHeader {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung div.mb-2 {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung #content {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .mw-parser-output &amp;gt; p {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Stadtmodellseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Seite bekommt volle Breite */&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Flexbox den ganzen Weg runter bis zum Stadtmodell anwenden, damit das Stadtmodell die volle Seitenhöhe ausfüllen kann. */&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell #content,&lt;br /&gt;
.page-Stadtmodell #bodyContent,&lt;br /&gt;
.page-Stadtmodell #mw-content-text,&lt;br /&gt;
.page-Stadtmodell #mw-content-text .mw-parser-output {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
.page-Stadtmodell .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-map,&lt;br /&gt;
.page-Stadtmodell .ak-map-sidebar {&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
*/&lt;br /&gt;
&lt;br /&gt;
/* Stadtmodell kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-page-header {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .contentHeader {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell div.mb-2 {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell #content {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .mw-parser-output &amp;gt; p {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Navigation liegt über verschwommenem Hintergrundbild. */&lt;br /&gt;
.page-Stadtmodell #mw-navigation {&lt;br /&gt;
	z-index: 20;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Design- und Layout-Elemente */&lt;br /&gt;
&lt;br /&gt;
.ak-layout {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout &amp;gt; * {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-box {&lt;br /&gt;
	/*outline: 5px solid darkgray;*/&lt;br /&gt;
	margin-top: 1rem;&lt;br /&gt;
	margin-bottom: 2rem;&lt;br /&gt;
	/*border: 5px solid white;&lt;br /&gt;
	background: gray;*/&lt;br /&gt;
	/*border: 1px solid #ced4da;*/&lt;br /&gt;
	border-radius: 4px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.1);&lt;br /&gt;
	padding: 1rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout &amp;gt; .ak-box + .ak-box {&lt;br /&gt;
	margin-left: 2rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout + .ak-box {&lt;br /&gt;
	margin-top: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-box h2 {&lt;br /&gt;
	margin: 0 0 1rem 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	text-align: center;&lt;br /&gt;
	font-size: 1.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list ul {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	justify-content: center;&lt;br /&gt;
	margin: 0 0 1rem 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	font-weight: bold;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list li + li {	&lt;br /&gt;
	margin-left: 0.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list li + li::before {&lt;br /&gt;
	content: &amp;quot;\0000B7&amp;quot;;&lt;br /&gt;
	margin-right: 0.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Aufklappbare Boxen, adaptiert von https://alligator.io/css/collapsible/ */&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap {&lt;br /&gt;
  margin-bottom: 1.2rem 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap input.ak-toggle[type=&#039;checkbox&#039;] {&lt;br /&gt;
  display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-lbl-toggle {&lt;br /&gt;
  display: block;&lt;br /&gt;
  font-size: 1.5rem;&lt;br /&gt;
  cursor: pointer;&lt;br /&gt;
  transition: all 0.25s ease-out;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-lbl-toggle::before {&lt;br /&gt;
  content: &#039; &#039;;&lt;br /&gt;
  display: inline-block;&lt;br /&gt;
&lt;br /&gt;
  border-top: 5px solid transparent;&lt;br /&gt;
  border-bottom: 5px solid transparent;&lt;br /&gt;
  border-left: 5px solid currentColor;&lt;br /&gt;
  vertical-align: middle;&lt;br /&gt;
  margin-right: .7rem;&lt;br /&gt;
  transform: translateY(-2px);&lt;br /&gt;
&lt;br /&gt;
  transition: transform .2s ease-out;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle::before {&lt;br /&gt;
  transform: rotate(90deg) translateX(-3px);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-collapsible-content {&lt;br /&gt;
  height: 0;&lt;br /&gt;
  overflow: hidden;&lt;br /&gt;
  background-color: #f8f9fa;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle + .ak-collapsible-content {&lt;br /&gt;
  height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-collapsible-content .ak-collapsible-content-inner {&lt;br /&gt;
  padding: .5rem 1rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Infoboxen */&lt;br /&gt;
&lt;br /&gt;
.ak-infobox {&lt;br /&gt;
	float:right;&lt;br /&gt;
	margin-left: 2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street {&lt;br /&gt;
	max-width: 400px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format li {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format li + li {&lt;br /&gt;
	margin-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-source-date {&lt;br /&gt;
	font-size: 0.8em;&lt;br /&gt;
	color: #868e96;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Adressenliste */&lt;br /&gt;
&lt;br /&gt;
.ak-address-list dl {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-address-list dt,&lt;br /&gt;
.ak-address-list dd {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Tooltips */&lt;br /&gt;
&lt;br /&gt;
.ak-text-with-tooltip::after {&lt;br /&gt;
	content: &#039;&#039;;&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 0.5em;&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
	vertical-align: middle;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-tooltip-text {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-tooltip {&lt;br /&gt;
	min-width: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Zeitleisten */&lt;br /&gt;
&lt;br /&gt;
/* Datentabelle verstecken */&lt;br /&gt;
.ak-timeline-datatable {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Hauptseite&amp;diff=19366</id>
		<title>Hauptseite</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Hauptseite&amp;diff=19366"/>
		<updated>2021-01-09T13:22:03Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;__NOTOC__&lt;br /&gt;
[[Datei:Colonia.png|800px|right|class=ak-max-width]]&lt;br /&gt;
{{DISPLAYTITLE:Altes Köln}}&lt;br /&gt;
&lt;br /&gt;
Eintauchen in die Geschichte ist für viele ein spannendes Tun - Eintauchen in die Geschichte [[Köln]]s soll zum Erlebnis werden.&amp;lt;br /&amp;gt;&lt;br /&gt;
In einer Zeitmaschine (&amp;quot;Time Machine&amp;quot;) wollen wir aus den vergangenen Jahrhunderten in die Neuzeit reisen.&amp;lt;br&amp;gt;&lt;br /&gt;
Ein &#039;&#039;&#039;Familienforscher&#039;&#039;&#039; sucht dabei zunächst nach den dazu relevanten Datenquellen der Region Köln, die wir hier zusammenstellen wollen. Ein Hauptaugenmerk liegt aber im Aufzeigen der damaligen sozialen und kulturell relevanten Lebensverhältnisse der Kölner Bürger. Erst durch Inhalte aus Lebens- und Zeitgeschichte beginnen auch genealogische Daten zu leben. &lt;br /&gt;
&lt;br /&gt;
Wir werden dazu aber nicht bis in die römische Stadtgründungszeit zurückgehen, sondern beginnen im Mittelalter, wo es dann auch erste genealogische Quellen zu erforschen gilt.&amp;lt;br /&amp;gt;&lt;br /&gt;
Dazu kategorisieren wir unsere Daten und Quellen in folgende Zeitabschnitte:&lt;br /&gt;
&lt;br /&gt;
*[[Mittelalter bis Frühe Neuzeit|Epoche I: 1300 - 1794  = Mittelalter - frühe Neuzeit]]&amp;lt;br /&amp;gt;&lt;br /&gt;
*[[Französische Verwaltung|Epoche II: 1794 - 1815   = Französische Zeit]]&amp;lt;br /&amp;gt;&lt;br /&gt;
*[[Preußische Verwaltung|Epoche III: 1815 - 1945  = Preußische Zeit]]&amp;lt;br /&amp;gt;&lt;br /&gt;
*[[Nachkriegszeit|Epoche IV: 1945 - heute  = Nachkriegszeit]]&amp;lt;br /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Die Zeitmaschine bauen wir aus folgenden Modulen auf:&lt;br /&gt;
&lt;br /&gt;
===Stadtpläne===&lt;br /&gt;
Ausgehend von Kölner [[Kartensammlung|Karten]] sollen verschiedene Zeitepochen und Stadtentwicklungsstufen aufgezeigt werden. &amp;lt;br /&amp;gt; &lt;br /&gt;
&lt;br /&gt;
===Straßen===&lt;br /&gt;
In den Stadtplänen sind die städtischen Verbindungswege zu erkennen, mit Handelsstraßen ist die Stadt mit ihrer Umgebung angebunden. &amp;lt;br /&amp;gt;&lt;br /&gt;
Hierbei sollen die [[:Kategorie:Verkehrsfläche|Straßen]] nach ihrer Lage und nach Namen in den Epochen aufgelistet und gegenüber gestellt werden.&amp;lt;br /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
===Häuser und zentrale Gebäude===&lt;br /&gt;
Nach Quellenmöglichkeiten sollen die in den Straßen einzuordnenden Häuser und Gebäude, wie z.B. Kirchen, Schulen, Amtsgebäuden uvm. mit Hausnummern verortet werden.&lt;br /&gt;
&lt;br /&gt;
===Einwohner und Bürger===&lt;br /&gt;
Viele [[:Kategorie:Quelle|genealogische Daten]] zu Kölner Bürgern liegen in Form von [[Schreinsbücher|Schreinsbüchern]], [[Kirchenbuchverzeichnis|Kirchenbüchern]], Standesamtsurkunden, [[Kölner Adressbücher|Adressbüchern]] und anderen Quellen vor.&amp;lt;br /&amp;gt;&lt;br /&gt;
Auch mit bereits verstorbenen [[:Kategorie:Person|Einwohnern]] beginnt die Kölner Geschichte zu leben und durch viele Geschichtchen aus dem Alltag und Umfeld bunt und lebendig zu werden.&lt;br /&gt;
&lt;br /&gt;
In unserem Partnerprojekt auf http://koelnerbuerger.de/ werden wir die Einwohner Kölns in einer offenen genealogischen Datenbank erfassen und allgemein zugängig machen,&lt;br /&gt;
&lt;br /&gt;
==Das Projektteam==&lt;br /&gt;
[[Datei:CompGenG-Logo02.png|150px|left]] [[Datei:WGfF-Logo.jpg|200px|right]]&lt;br /&gt;
Die Idee entstand unter einigen Familienforschern, die sich in Köln monatlich zum Familienforscherstammtisch in Köln-Holweide treffen (2. Mittwoch, Restaurant Zagreb, 18:00Uhr). Die daraus entstehenden Ideen und Mitarbeitsmöglichkeiten werden sich hier auf den Seiten wiederfinden.&amp;lt;br /&amp;gt;&lt;br /&gt;
Die Mitglieder sind überwiegend Mitglieder in den Vereinen für Familienforschung &amp;lt;br /&amp;gt;&lt;br /&gt;
&amp;lt;center&amp;gt;[https://www.compgen.de/ CompGen e.V.] und [http://www.wgff.de/ WGfF e.V.]&amp;lt;/center&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==Time Machine Cologne==&lt;br /&gt;
[[Datei:TM-logo-RGB_p.png|200px|left]] [[Datei:TM_key-visual-1.jpg|200px|right]]&lt;br /&gt;
Wir freuen uns, dass wir nun auch als Partner im europaweiten Projekt Time Machine aufgenommen wurden.&lt;br /&gt;
Ziel dieses Projektes ist es, die Europäische Geschichte mit den &amp;quot;Big Datas&amp;quot; der Vergangenheit zu erschließen und allen zugänglich zu machen.&lt;br /&gt;
&amp;lt;center&amp;gt;[https://www.timemachine.eu/ltm-projects/altes-koln/ Time Machine Organization]&amp;lt;/center&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== [https://www.timemachine.eu/ltm-projects/altes-koln/ Mitmachen] ===&lt;br /&gt;
Wer interessiert daran ist, die Time Machine Köln weiter mit zu entwickeln, sollte sich melden. Um diese Wikiseiten  auszubauen und zu ergänzen, ist eine (kostenfreie) Benutzerkennung erforderlich. Eine Mail an info@altes-koeln.de genügt. Auf der Seite [[Hier gibt&#039;s noch was zu tun]], sind immer einige Ideen von/für Mitstreiter aufgelistet.&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=MediaWiki:Common.css&amp;diff=19333</id>
		<title>MediaWiki:Common.css</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=MediaWiki:Common.css&amp;diff=19333"/>
		<updated>2021-01-02T22:41:12Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */&lt;br /&gt;
&lt;br /&gt;
/* Seitenkopf */&lt;br /&gt;
&lt;br /&gt;
.ak-page-header {&lt;br /&gt;
	background-image: url(/images/b/b0/Colonia.png);&lt;br /&gt;
	background-repeat: no-repeat;&lt;br /&gt;
	background-size: cover;&lt;br /&gt;
	background-position-y: 33%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__content {&lt;br /&gt;
	/*background-image: linear-gradient(to right, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);*/&lt;br /&gt;
	/*margin-left: 0;*/&lt;br /&gt;
    background-color: rgba(255,255,255,0.65);&lt;br /&gt;
    min-height: 135px;&lt;br /&gt;
    /*margin-right: 0;*/&lt;br /&gt;
display: flex;&lt;br /&gt;
align-items: center;&lt;br /&gt;
justify-content: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__logo-col {&lt;br /&gt;
	padding-left: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
#p-logo img {&lt;br /&gt;
	height: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__headline-col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	align-items: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-page-header__headline {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	border: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	font-family: &#039;UnifrakturMaguntia&#039;, cursive;&lt;br /&gt;
	font-size: 5rem;&lt;br /&gt;
	line-height: 1;&lt;br /&gt;
    /*line-height: 135px;*/&lt;br /&gt;
    padding-top: 10px;&lt;br /&gt;
/*    margin-bottom: -10px;*/&lt;br /&gt;
    /*text-align: center;*/&lt;br /&gt;
    color: #5e2028;&lt;br /&gt;
/*    flex-grow: 1;*/&lt;br /&gt;
margin-left: 50px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Padding von Seiteninhalt entfernen, es bekommt schon von Bootstrap Padding. So können wir es mit anderen Bootstrap-Containern alignen. */&lt;br /&gt;
.mw-body {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Powered By Logos verstecken */&lt;br /&gt;
#footer-poweredbyico {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Sicherstellen, dass die Visual Editor Toolbar nicht unter dem fixen Seitenheader hängt */&lt;br /&gt;
.ve-init-mw-desktopArticleTarget-toolbar-open &amp;gt; .oo-ui-toolbar-bar {&lt;br /&gt;
	margin-top: 56px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Links im Fließtext und in Tooltips unterstreichen */&lt;br /&gt;
.content a,&lt;br /&gt;
.content a[href].new,&lt;br /&gt;
.content a[href].external,&lt;br /&gt;
.ak-tooltip a,&lt;br /&gt;
.ak-tooltip a[href].new,&lt;br /&gt;
.ak-tooltip a[href].external {&lt;br /&gt;
	text-decoration-color: lightgray;&lt;br /&gt;
	text-decoration-line: underline;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Externe Links mit Icon markieren */&lt;br /&gt;
.mw-parser-output .external,&lt;br /&gt;
.ak-tooltip .external {&lt;br /&gt;
	background-position: center right;&lt;br /&gt;
	background-repeat: no-repeat;&lt;br /&gt;
	background-size: 12px;&lt;br /&gt;
	background-image: linear-gradient(transparent,transparent),url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 576 512&#039;%3E%3Cpath fill=&#039;%231a76c7&#039; d=&#039;M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z&#039;%3E%3C/path%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
	padding-right: 15px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Hauptseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Überschrift auf Hauptseite verstecken */&lt;br /&gt;
&lt;br /&gt;
body.page-Hauptseite.action-view h1.firstHeading,&lt;br /&gt;
body.page-Hauptseite.action-submit h1.firstHeading {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
body.page-Hauptseite .contentHeader {&lt;br /&gt;
	margin-top: 2.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Kartensammlungsseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Seite bekommt volle Breite */&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Flexbox den ganzen Weg runter bis zur Karte anwenden, damit die Karte die volle Seitenhöhe ausfüllen kann. */&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung #content,&lt;br /&gt;
.page-Kartensammlung #bodyContent,&lt;br /&gt;
.page-Kartensammlung #mw-content-text,&lt;br /&gt;
.page-Kartensammlung #mw-content-text .mw-parser-output {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-map,&lt;br /&gt;
.page-Kartensammlung .ak-map-sidebar {&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kartensammlung kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-page-header {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .contentHeader {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung div.mb-2 {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung #content {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Kartensammlung .mw-parser-output &amp;gt; p {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/*--- Stadtmodellseite ---*/&lt;br /&gt;
&lt;br /&gt;
/* Seite bekommt volle Breite */&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container {&lt;br /&gt;
	max-width: 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Flexbox den ganzen Weg runter bis zum Stadtmodell anwenden, damit das Stadtmodell die volle Seitenhöhe ausfüllen kann. */&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell #content,&lt;br /&gt;
.page-Stadtmodell #bodyContent,&lt;br /&gt;
.page-Stadtmodell #mw-content-text,&lt;br /&gt;
.page-Stadtmodell #mw-content-text .mw-parser-output {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	flex-direction: column;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/*&lt;br /&gt;
.page-Stadtmodell .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-map-container {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
	align-items: stretch;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-map,&lt;br /&gt;
.page-Stadtmodell .ak-map-sidebar {&lt;br /&gt;
	height: auto;&lt;br /&gt;
}&lt;br /&gt;
*/&lt;br /&gt;
&lt;br /&gt;
/* Stadtmodell kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-page-header {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .contentHeader {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell div.mb-2 {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .ak-main-grid.container &amp;gt; .row:nth-child(2) &amp;gt; .col {&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell #content {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.page-Stadtmodell .mw-parser-output &amp;gt; p {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Navigation liegt über verschwommenem Hintergrundbild. */&lt;br /&gt;
.page-Stadtmodell #mw-navigation {&lt;br /&gt;
	z-index: 20;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Design- und Layout-Elemente */&lt;br /&gt;
&lt;br /&gt;
.ak-layout {&lt;br /&gt;
	display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout &amp;gt; * {&lt;br /&gt;
	flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-box {&lt;br /&gt;
	/*outline: 5px solid darkgray;*/&lt;br /&gt;
	margin-top: 1rem;&lt;br /&gt;
	margin-bottom: 2rem;&lt;br /&gt;
	/*border: 5px solid white;&lt;br /&gt;
	background: gray;*/&lt;br /&gt;
	/*border: 1px solid #ced4da;*/&lt;br /&gt;
	border-radius: 4px;&lt;br /&gt;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.1);&lt;br /&gt;
	padding: 1rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout &amp;gt; .ak-box + .ak-box {&lt;br /&gt;
	margin-left: 2rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-layout + .ak-box {&lt;br /&gt;
	margin-top: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-box h2 {&lt;br /&gt;
	margin: 0 0 1rem 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	text-align: center;&lt;br /&gt;
	font-size: 1.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list ul {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	display: flex;&lt;br /&gt;
	justify-content: center;&lt;br /&gt;
	margin: 0 0 1rem 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	font-weight: bold;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list li + li {	&lt;br /&gt;
	margin-left: 0.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-link-list li + li::before {&lt;br /&gt;
	content: &amp;quot;\0000B7&amp;quot;;&lt;br /&gt;
	margin-right: 0.5rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Aufklappbare Boxen, adaptiert von https://alligator.io/css/collapsible/ */&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap {&lt;br /&gt;
  margin-bottom: 1.2rem 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap input.ak-toggle[type=&#039;checkbox&#039;] {&lt;br /&gt;
  display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-lbl-toggle {&lt;br /&gt;
  display: block;&lt;br /&gt;
  font-size: 1.5rem;&lt;br /&gt;
  cursor: pointer;&lt;br /&gt;
  transition: all 0.25s ease-out;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-lbl-toggle::before {&lt;br /&gt;
  content: &#039; &#039;;&lt;br /&gt;
  display: inline-block;&lt;br /&gt;
&lt;br /&gt;
  border-top: 5px solid transparent;&lt;br /&gt;
  border-bottom: 5px solid transparent;&lt;br /&gt;
  border-left: 5px solid currentColor;&lt;br /&gt;
  vertical-align: middle;&lt;br /&gt;
  margin-right: .7rem;&lt;br /&gt;
  transform: translateY(-2px);&lt;br /&gt;
&lt;br /&gt;
  transition: transform .2s ease-out;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle::before {&lt;br /&gt;
  transform: rotate(90deg) translateX(-3px);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-collapsible-content {&lt;br /&gt;
  height: 0;&lt;br /&gt;
  overflow: hidden;&lt;br /&gt;
  background-color: #f8f9fa;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle + .ak-collapsible-content {&lt;br /&gt;
  height: auto;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-collapsible-wrap .ak-collapsible-content .ak-collapsible-content-inner {&lt;br /&gt;
  padding: .5rem 1rem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Infoboxen */&lt;br /&gt;
&lt;br /&gt;
.ak-infobox {&lt;br /&gt;
	float:right;&lt;br /&gt;
	margin-left: 2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street {&lt;br /&gt;
	max-width: 400px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format {&lt;br /&gt;
	list-style: none;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format li {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-infobox-street ul.smw-format.ul-format li + li {&lt;br /&gt;
	margin-top: 0.5em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-source-date {&lt;br /&gt;
	font-size: 0.8em;&lt;br /&gt;
	color: #868e96;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Adressenliste */&lt;br /&gt;
&lt;br /&gt;
.ak-address-list dl {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-address-list dt,&lt;br /&gt;
.ak-address-list dd {&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	margin: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Tooltips */&lt;br /&gt;
&lt;br /&gt;
.ak-text-with-tooltip::after {&lt;br /&gt;
	content: &#039;&#039;;&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
	width: 16px;&lt;br /&gt;
	height: 16px;&lt;br /&gt;
	margin-left: 0.5em;&lt;br /&gt;
	background-image: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%2374c0fc&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;12&#039; cy=&#039;12&#039; r=&#039;10&#039;%3E%3C/circle%3E%3Cline x1=&#039;12&#039; y1=&#039;16&#039; x2=&#039;12&#039; y2=&#039;12&#039;%3E%3C/line%3E%3Cline x1=&#039;12&#039; y1=&#039;8&#039; x2=&#039;12&#039; y2=&#039;8&#039;%3E%3C/line%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
	vertical-align: middle;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-tooltip-text {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ak-tooltip {&lt;br /&gt;
	min-width: 100px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
/* Zeitleisten */&lt;br /&gt;
&lt;br /&gt;
/* Datentabelle verstecken */&lt;br /&gt;
.ak-timeline-datatable {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19332</id>
		<title>Widget:3D-Modell</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19332"/>
		<updated>2021-01-02T22:36:48Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
	body {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__widget {&lt;br /&gt;
		height: 100vh;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__background-blur {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		width: 100%;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		z-index: 0;&lt;br /&gt;
		background-image: url(/alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg);&lt;br /&gt;
		background-position: center;&lt;br /&gt;
		background-repeat: no-repeat;&lt;br /&gt;
		background-size: cover;&lt;br /&gt;
		filter: blur(10px);&lt;br /&gt;
		opacity: 0.7;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		width: calc(100vh * 1.171646162858817);&lt;br /&gt;
		margin-left: auto;&lt;br /&gt;
		margin-right: auto;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__fullview {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		z-index: 1;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view:hover .ak-3dmodel__fullview,&lt;br /&gt;
	.ak-3dmodel__view.ak-3dmodel__view_highlighted .ak-3dmodel__fullview {&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	/* TODO Can we do this with a CSS colour overlay instead to avoid loading this data? But it probably wouldn&#039;t match the colour of the highlight images. Maybe we can do that purely with canvas/SVG and very precise outlines? */&lt;br /&gt;
	.ak-3dmodel__fowview {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
		/* TODO Use cutouts from the images and position them relative to the full image to reduce amount of data to be loaded. How to scale and position them to the responsive image? */&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb.ak-3dmodel__sb_active {&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		bottom: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		font-family: Arial, sans-serif;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar a {&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		text-decoration: none;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3 {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: rgba(73, 80, 87, .85);&lt;br /&gt;
		color: #fefefe;&lt;br /&gt;
		font-weight: bold;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		line-height: normal;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3:hover {&lt;br /&gt;
		background-color: rgb(73, 80, 87);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol {&lt;br /&gt;
		list-style-type: none;&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
		overflow-y: auto;&lt;br /&gt;
		height: 52vh;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li + li {&lt;br /&gt;
		border-top: 1px solid #ccc;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a {&lt;br /&gt;
		display: block;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		transition: background-color .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a:hover,&lt;br /&gt;
	.ak-3dmodel__poi-list ol a.ak-3dmodel__poi-list-link_active {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	document.addEventListener(&#039;DOMContentLoaded&#039;, function(event) {&lt;br /&gt;
		var widgets = document.getElementsByClassName(&#039;ak-3dmodel__widget&#039;);&lt;br /&gt;
		for (var i = 0; i &amp;lt; widgets.length; i++) {&lt;br /&gt;
			initWidget(widgets[i]);&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	function initWidget(widget) {&lt;br /&gt;
		var imageMap = widget.getElementsByClassName(&#039;ak-3dmodel__imagemap&#039;)[0];&lt;br /&gt;
		var areas = imageMap.children;&lt;br /&gt;
		for (var i = 0; i &amp;lt; areas.length; i++) {&lt;br /&gt;
			addAreaEventListeners(areas[i]);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		var view = widget.getElementsByClassName(&#039;ak-3dmodel__view&#039;)[0];&lt;br /&gt;
		var poiList = widget.getElementsByClassName(&#039;ak-3dmodel__poi-list-sb&#039;)[0];&lt;br /&gt;
		var sbLinks = poiList.querySelectorAll(&#039;ol li a&#039;);&lt;br /&gt;
		for (i = 0; i &amp;lt; sbLinks.length; i++) {&lt;br /&gt;
			addSBLinksEventListeners(sbLinks[i], view);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addAreaEventListeners(area) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		area.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.add(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		area.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.remove(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addSBLinksEventListeners(sbLink, view) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.add(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.remove(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-3dmodel__widget&amp;quot; style=&amp;quot;overflow:hidden&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__background-blur&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__view&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;!-- TODO Attribution --&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fullview&amp;quot; usemap=&amp;quot;#ak-3dmodel__imagemap&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; alt=&amp;quot;Plastisches Stadtmodell von Köln um 1571&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fowview&amp;quot; alt=&amp;quot;&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_01_St_Martin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-martin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_02_St_Brigiden.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_03_Unterlan.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_04_St_Alban.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-alban&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_05_St_Laurenz.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_06_St_Peter.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-peter&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_07_St_Columba.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_08_St_Aposteln.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_09_Niederich.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-niederich&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_10_Airsbach.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_11_St_Christoph.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-christoph&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_12_St_Mauritius.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_13_St_Severin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-severin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_14_St_Gereon.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-gereon&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_15_Eigelstein.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_16_Hacht.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-hacht&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;map name=&amp;quot;ak-3dmodel__imagemap&amp;quot; class=&amp;quot;ak-3dmodel__imagemap&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Martin&amp;quot; title=&amp;quot;S. Martin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; coords=&amp;quot;711,846,727,832,757,854,764,875,780,871,798,894,824,910,845,944,865,937,890,963,920,974,913,991,937,1034,980,1020,990,1023,1001,1013,1093,958,1123,938,1123,928,1176,882,1169,871,1114,816,1056,774,1038,749,913,831,897,838,881,818,851,809,807,763,789,760,697,838&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Brigiden&amp;quot; title=&amp;quot;S. Brigiden&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; coords=&amp;quot;1055,757,1075,765,1114,771,1087,788,1184,877,1227,838,1275,799,1262,788,1280,780,1275,769,1375,700,1361,686,1307,705,1255,735,1206,696,1181,684,1149,707,1134,716,1121,700,1111,716,1052,742&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Unterlan&amp;quot; title=&amp;quot;Unterlan&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; coords=&amp;quot;1084,792,1116,770,1103,762,1082,765,1066,767&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Alban&amp;quot; title=&amp;quot;S. Alban&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; coords=&amp;quot;904,831,920,811,934,816,1034,744,1006,709,980,659,962,656,941,673,881,710,845,740,814,760,833,788&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Laurenz&amp;quot; title=&amp;quot;S. Laurenz&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; coords=&amp;quot;1038,739,1119,702,1142,702,1181,673,1149,638,1128,622,1116,594,1123,585,1109,562,1052,603,1026,615,978,647&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Peter&amp;quot; title=&amp;quot;S. Peter&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; coords=&amp;quot;695,839,812,746,909,694,872,668,838,650,824,663,799,654,766,601,718,511,688,486,655,507,639,521,625,534,602,539,564,576,534,599,513,620,489,622,464,611,416,620,386,633,351,643,324,645,338,657,367,702,414,744,448,758,503,786&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Kolumba&amp;quot; title=&amp;quot;S. Kolumba&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; coords=&amp;quot;655,346,716,401,725,420,743,429,754,442,692,472,708,500,723,509,782,622,801,646,822,652,842,652,860,664,874,661,914,687,1031,609,1110,553,1110,539,1174,491,1128,449,1070,403,1010,343,902,267,881,244,826,233,775,263,734,260,708,279,693,277,674,295,640,311,637,323,607,344,619,364&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Apostel&amp;quot; title=&amp;quot;S. Apostel&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; coords=&amp;quot;331,634,466,608,499,620,557,578,595,537,609,546,637,525,670,495,688,479,745,438,655,348,623,376,602,348,681,286,670,263,589,198,547,157,547,143,542,134,466,164,437,177,368,235,393,270,444,320,462,345,497,389,494,401,510,410&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Niederich&amp;quot; title=&amp;quot;Niederich&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; coords=&amp;quot;1405,675,1547,611,1639,572,1738,560,1720,493,1702,496,1692,447,1667,401,1607,336,1584,283,1561,268,1534,270,1511,258,1404,222,1381,224,1303,240,1269,249,1241,252,1208,252,1149,251,1140,267,1102,277,1087,274,1068,297,1019,321,1027,339,1015,344,1075,394,1082,383,1087,404,1125,440,1169,482,1190,498,1202,484,1331,599,1338,627,1388,666&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Airsbach&amp;quot; title=&amp;quot;Airsbach&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; coords=&amp;quot;636,1292,642,1283,656,1286,654,1271,767,1170,781,1150,845,1096,859,1094,886,1073,919,1050,926,1028,912,1005,875,967,857,947,847,954,801,907,771,885,758,875,727,861,668,829,617,823,589,809,564,811,525,793,456,767,483,786,454,786,433,800,424,829,419,875,416,914,416,961,428,998,433,1048,446,1073&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Gereon&amp;quot; title=&amp;quot;S. Gereon&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; coords=&amp;quot;920,90,948,72,999,106,1008,110,1010,122,999,134,989,127,962,145,946,110&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt; &amp;lt;!-- Has to be before S. Christoph to overlay it. --&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Christoph&amp;quot; title=&amp;quot;S. Christoph&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; coords=&amp;quot;543,133,632,92,681,72,739,51,796,44,851,37,909,37,974,30,1027,35,1080,46,1133,57,1211,74,1305,97,1436,129,1420,180,1414,217,1381,210,1338,221,1294,233,1257,242,1218,253,1140,249,1140,263,1100,277,1087,276,1075,288,1019,316,1008,322,1017,334,1008,341,971,313,920,274,897,258,856,230,838,228,819,226,777,258,759,258,741,256,713,276,701,269,690,277,663,256,617,223,591,198,577,193,549,147&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; title=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; coords=&amp;quot;430,1021,418,933,418,874,428,818,435,797,449,788,442,765,388,724,336,661,320,648,319,629,347,629,363,592,423,502,458,456,504,406,488,394,488,376,456,339,448,325,396,283,379,281,370,263,370,247,359,240,320,283,271,344,232,392,179,466,167,461,158,480,165,493,133,542,119,579,103,613,86,657,84,691,77,791,75,924,117,935,245,929,305,926,330,929,333,952,358,958,361,977,377,982,377,1007&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Severin&amp;quot; title=&amp;quot;S. Severin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; coords=&amp;quot;436,1686,471,1665,480,1650,513,1631,480,1635,487,1610,471,1610,510,1527,542,1445,572,1384,640,1285,527,1175,510,1140,497,1113,473,1092,455,1085,448,1069,430,1030,377,1004,374,979,358,977,358,958,333,954,331,931,291,926,102,935,75,926,66,1380,93,1415,434,1633,439,1645,421,1663&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Eigelstein&amp;quot; title=&amp;quot;Eigelstein&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; coords=&amp;quot;1930,558,1936,544,1971,532,1967,514,1921,528,1916,511,1904,514,1886,459,1849,399,1812,346,1777,300,1750,267,1722,230,1716,209,1665,191,1617,175,1556,156,1446,133,1418,219,1490,247,1573,272,1593,293,1616,345,1644,380,1670,398,1695,447,1701,463,1706,489,1723,488,1732,518,1743,560,1755,567,1764,558,1902,541&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Hacht&amp;quot; title=&amp;quot;Hacht&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; coords=&amp;quot;1245,725,1209,689,1199,693,1140,636,1132,587,1112,557,1178,497,1190,502,1199,491,1273,544,1319,585,1335,622,1372,663,1391,677,1393,663,1404,682,1400,691,1386,698,1374,677,1287,703&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;/map&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;ak-3dmodel__sidebar&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;ak-3dmodel__poi-list ak-3dmodel__poi-list-sb&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;h3&amp;gt;Schreinsbezirke&amp;lt;/h3&amp;gt;&lt;br /&gt;
				&amp;lt;ol&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;I S. Martin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;II S. Brigiden&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;III Unterlan&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;IV S. Alban&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;V S. Laurenz&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;VI S. Peter&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;VII S. Kolumba&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;VIII S. Apostel&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;IX Niederich&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;X Airsbach&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;XI S. Christoph&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;XII S. Mauritius - Weyerstraße&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;XIII S. Severin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt;XIV S. Gereon&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;XV Eigelstein&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;XVI Hacht&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;/ol&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;!-- Make image map responsive. --&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;https://code.jquery.com/jquery-3.5.1.min.js&amp;quot; integrity=&amp;quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;/alteskoeln/jquery.rwdImageMaps.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	$(document).ready(function() {&lt;br /&gt;
		$(&#039;img[usemap]&#039;).rwdImageMaps();&lt;br /&gt;
	});&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
	<entry>
		<id>https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19331</id>
		<title>Widget:3D-Modell</title>
		<link rel="alternate" type="text/html" href="https://www.altes-koeln.de/index.php?title=Widget:3D-Modell&amp;diff=19331"/>
		<updated>2021-01-02T22:26:33Z</updated>

		<summary type="html">&lt;p&gt;Simon: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&lt;br /&gt;
	body {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__widget {&lt;br /&gt;
		height: 100vh;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__background-blur {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		width: 100%;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		z-index: 0;&lt;br /&gt;
		background-image: url(/alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg);&lt;br /&gt;
		background-position: center;&lt;br /&gt;
		background-repeat: no-repeat;&lt;br /&gt;
		background-size: cover;&lt;br /&gt;
		filter: blur(10px);&lt;br /&gt;
		opacity: 0.7;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		width: calc(100vh * 1.171646162858817);&lt;br /&gt;
		margin-left: auto;&lt;br /&gt;
		margin-right: auto;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__fullview {&lt;br /&gt;
		position: relative;&lt;br /&gt;
		z-index: 1;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__view:hover .ak-3dmodel__fullview,&lt;br /&gt;
	.ak-3dmodel__view.ak-3dmodel__view_highlighted .ak-3dmodel__fullview {&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	/* TODO Can we do this with a CSS colour overlay instead to avoid loading this data? But it probably wouldn&#039;t match the colour of the highlight images. Maybe we can do that purely with canvas/SVG and very precise outlines? */&lt;br /&gt;
	.ak-3dmodel__fowview {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		left: 0;&lt;br /&gt;
		top: 0;&lt;br /&gt;
		opacity: 0;&lt;br /&gt;
		transition: opacity .2s;&lt;br /&gt;
		/* TODO Use cutouts from the images and position them relative to the full image to reduce amount of data to be loaded. How to scale and position them to the responsive image? */&lt;br /&gt;
		width: auto;&lt;br /&gt;
		height: 100%;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sb.ak-3dmodel__sb_active {&lt;br /&gt;
		opacity: 1;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar {&lt;br /&gt;
		position: absolute;&lt;br /&gt;
		right: 2em;&lt;br /&gt;
		bottom: 2em;&lt;br /&gt;
		z-index: 11;&lt;br /&gt;
		font-family: Arial, sans-serif;&lt;br /&gt;
		font-size: 16px;&lt;br /&gt;
		color: #495057;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__sidebar a {&lt;br /&gt;
		color: #495057;&lt;br /&gt;
		text-decoration: none;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3 {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: rgba(73, 80, 87, .85);&lt;br /&gt;
		color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list h3:hover {&lt;br /&gt;
		background-color: rgb(73, 80, 87);&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol {&lt;br /&gt;
		list-style-type: none;&lt;br /&gt;
		margin: 0;&lt;br /&gt;
		padding: 0;&lt;br /&gt;
		overflow-y: auto;&lt;br /&gt;
		height: 52vh;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li {&lt;br /&gt;
		margin: 0;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol li + li {&lt;br /&gt;
		border-top: 1px solid #ccc;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a {&lt;br /&gt;
		display: block;&lt;br /&gt;
		padding: 0.5em 1em;&lt;br /&gt;
		background-color: hsla(0,0%,99.6%,.85);&lt;br /&gt;
		transition: background-color .2s;&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	.ak-3dmodel__poi-list ol a:hover,&lt;br /&gt;
	.ak-3dmodel__poi-list ol a.ak-3dmodel__poi-list-link_active {&lt;br /&gt;
		background-color: #fefefe;&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/style&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	document.addEventListener(&#039;DOMContentLoaded&#039;, function(event) {&lt;br /&gt;
		var widgets = document.getElementsByClassName(&#039;ak-3dmodel__widget&#039;);&lt;br /&gt;
		for (var i = 0; i &amp;lt; widgets.length; i++) {&lt;br /&gt;
			initWidget(widgets[i]);&lt;br /&gt;
		}&lt;br /&gt;
	});&lt;br /&gt;
&lt;br /&gt;
	function initWidget(widget) {&lt;br /&gt;
		var imageMap = widget.getElementsByClassName(&#039;ak-3dmodel__imagemap&#039;)[0];&lt;br /&gt;
		var areas = imageMap.children;&lt;br /&gt;
		for (var i = 0; i &amp;lt; areas.length; i++) {&lt;br /&gt;
			addAreaEventListeners(areas[i]);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		var view = widget.getElementsByClassName(&#039;ak-3dmodel__view&#039;)[0];&lt;br /&gt;
		var poiList = widget.getElementsByClassName(&#039;ak-3dmodel__poi-list-sb&#039;)[0];&lt;br /&gt;
		var sbLinks = poiList.querySelectorAll(&#039;ol li a&#039;);&lt;br /&gt;
		for (i = 0; i &amp;lt; sbLinks.length; i++) {&lt;br /&gt;
			addSBLinksEventListeners(sbLinks[i], view);&lt;br /&gt;
		}&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addAreaEventListeners(area) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		area.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.add(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		area.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (area.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(area.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
&lt;br /&gt;
				var sbLink = document.querySelector(&#039;.ak-3dmodel__poi-list-sb a[data-highlight-image=&amp;quot;&#039; + area.dataset.highlightImage + &#039;&amp;quot;]&#039;);&lt;br /&gt;
				if (sbLink) {&lt;br /&gt;
					sbLink.classList.remove(&#039;ak-3dmodel__poi-list-link_active&#039;);&lt;br /&gt;
				}&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&lt;br /&gt;
	function addSBLinksEventListeners(sbLink, view) {&lt;br /&gt;
		// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseenter&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.add(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.add(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
		sbLink.addEventListener(&#039;mouseleave&#039;, function() {&lt;br /&gt;
			if (sbLink.dataset.highlightImage) {&lt;br /&gt;
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);&lt;br /&gt;
				highlightImage.classList.remove(&#039;ak-3dmodel__sb_active&#039;);&lt;br /&gt;
				view.classList.remove(&#039;ak-3dmodel__view_highlighted&#039;);&lt;br /&gt;
			}&lt;br /&gt;
		});&lt;br /&gt;
	}&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;ak-3dmodel__widget&amp;quot; style=&amp;quot;overflow:hidden&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__background-blur&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;ak-3dmodel__view&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;!-- TODO Attribution --&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fullview&amp;quot; usemap=&amp;quot;#ak-3dmodel__imagemap&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; alt=&amp;quot;Plastisches Stadtmodell von Köln um 1571&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg&amp;quot; class=&amp;quot;ak-3dmodel__fowview&amp;quot; alt=&amp;quot;&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1707&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_01_St_Martin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-martin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_02_St_Brigiden.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_03_Unterlan.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_04_St_Alban.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-alban&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_05_St_Laurenz.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_06_St_Peter.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-peter&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_07_St_Columba.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_08_St_Aposteln.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_09_Niederich.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-niederich&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_10_Airsbach.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_11_St_Christoph.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-christoph&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_12_St_Mauritius.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_13_St_Severin.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-severin&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_14_St_Gereon.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-gereon&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_15_Eigelstein.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;lt;img src=&amp;quot;/alteskoeln/3dmodel/SB_16_Hacht.jpg&amp;quot; class=&amp;quot;ak-3dmodel__sb&amp;quot; id=&amp;quot;ak-3dmodel__sb-hacht&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
		&amp;lt;map name=&amp;quot;ak-3dmodel__imagemap&amp;quot; class=&amp;quot;ak-3dmodel__imagemap&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Martin&amp;quot; title=&amp;quot;S. Martin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; coords=&amp;quot;711,846,727,832,757,854,764,875,780,871,798,894,824,910,845,944,865,937,890,963,920,974,913,991,937,1034,980,1020,990,1023,1001,1013,1093,958,1123,938,1123,928,1176,882,1169,871,1114,816,1056,774,1038,749,913,831,897,838,881,818,851,809,807,763,789,760,697,838&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Brigiden&amp;quot; title=&amp;quot;S. Brigiden&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; coords=&amp;quot;1055,757,1075,765,1114,771,1087,788,1184,877,1227,838,1275,799,1262,788,1280,780,1275,769,1375,700,1361,686,1307,705,1255,735,1206,696,1181,684,1149,707,1134,716,1121,700,1111,716,1052,742&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Unterlan&amp;quot; title=&amp;quot;Unterlan&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; coords=&amp;quot;1084,792,1116,770,1103,762,1082,765,1066,767&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Alban&amp;quot; title=&amp;quot;S. Alban&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; coords=&amp;quot;904,831,920,811,934,816,1034,744,1006,709,980,659,962,656,941,673,881,710,845,740,814,760,833,788&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Laurenz&amp;quot; title=&amp;quot;S. Laurenz&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; coords=&amp;quot;1038,739,1119,702,1142,702,1181,673,1149,638,1128,622,1116,594,1123,585,1109,562,1052,603,1026,615,978,647&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Peter&amp;quot; title=&amp;quot;S. Peter&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; coords=&amp;quot;695,839,812,746,909,694,872,668,838,650,824,663,799,654,766,601,718,511,688,486,655,507,639,521,625,534,602,539,564,576,534,599,513,620,489,622,464,611,416,620,386,633,351,643,324,645,338,657,367,702,414,744,448,758,503,786&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Kolumba&amp;quot; title=&amp;quot;S. Kolumba&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; coords=&amp;quot;655,346,716,401,725,420,743,429,754,442,692,472,708,500,723,509,782,622,801,646,822,652,842,652,860,664,874,661,914,687,1031,609,1110,553,1110,539,1174,491,1128,449,1070,403,1010,343,902,267,881,244,826,233,775,263,734,260,708,279,693,277,674,295,640,311,637,323,607,344,619,364&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Apostel&amp;quot; title=&amp;quot;S. Apostel&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; coords=&amp;quot;331,634,466,608,499,620,557,578,595,537,609,546,637,525,670,495,688,479,745,438,655,348,623,376,602,348,681,286,670,263,589,198,547,157,547,143,542,134,466,164,437,177,368,235,393,270,444,320,462,345,497,389,494,401,510,410&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Niederich&amp;quot; title=&amp;quot;Niederich&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; coords=&amp;quot;1405,675,1547,611,1639,572,1738,560,1720,493,1702,496,1692,447,1667,401,1607,336,1584,283,1561,268,1534,270,1511,258,1404,222,1381,224,1303,240,1269,249,1241,252,1208,252,1149,251,1140,267,1102,277,1087,274,1068,297,1019,321,1027,339,1015,344,1075,394,1082,383,1087,404,1125,440,1169,482,1190,498,1202,484,1331,599,1338,627,1388,666&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Airsbach&amp;quot; title=&amp;quot;Airsbach&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; coords=&amp;quot;636,1292,642,1283,656,1286,654,1271,767,1170,781,1150,845,1096,859,1094,886,1073,919,1050,926,1028,912,1005,875,967,857,947,847,954,801,907,771,885,758,875,727,861,668,829,617,823,589,809,564,811,525,793,456,767,483,786,454,786,433,800,424,829,419,875,416,914,416,961,428,998,433,1048,446,1073&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Gereon&amp;quot; title=&amp;quot;S. Gereon&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; coords=&amp;quot;920,90,948,72,999,106,1008,110,1010,122,999,134,989,127,962,145,946,110&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt; &amp;lt;!-- Has to be before S. Christoph to overlay it. --&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Christoph&amp;quot; title=&amp;quot;S. Christoph&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; coords=&amp;quot;543,133,632,92,681,72,739,51,796,44,851,37,909,37,974,30,1027,35,1080,46,1133,57,1211,74,1305,97,1436,129,1420,180,1414,217,1381,210,1338,221,1294,233,1257,242,1218,253,1140,249,1140,263,1100,277,1087,276,1075,288,1019,316,1008,322,1017,334,1008,341,971,313,920,274,897,258,856,230,838,228,819,226,777,258,759,258,741,256,713,276,701,269,690,277,663,256,617,223,591,198,577,193,549,147&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; title=&amp;quot;S. Mauritius - Weyerstraße&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; coords=&amp;quot;430,1021,418,933,418,874,428,818,435,797,449,788,442,765,388,724,336,661,320,648,319,629,347,629,363,592,423,502,458,456,504,406,488,394,488,376,456,339,448,325,396,283,379,281,370,263,370,247,359,240,320,283,271,344,232,392,179,466,167,461,158,480,165,493,133,542,119,579,103,613,86,657,84,691,77,791,75,924,117,935,245,929,305,926,330,929,333,952,358,958,361,977,377,982,377,1007&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;S. Severin&amp;quot; title=&amp;quot;S. Severin&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; coords=&amp;quot;436,1686,471,1665,480,1650,513,1631,480,1635,487,1610,471,1610,510,1527,542,1445,572,1384,640,1285,527,1175,510,1140,497,1113,473,1092,455,1085,448,1069,430,1030,377,1004,374,979,358,977,358,958,333,954,331,931,291,926,102,935,75,926,66,1380,93,1415,434,1633,439,1645,421,1663&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Eigelstein&amp;quot; title=&amp;quot;Eigelstein&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; coords=&amp;quot;1930,558,1936,544,1971,532,1967,514,1921,528,1916,511,1904,514,1886,459,1849,399,1812,346,1777,300,1750,267,1722,230,1716,209,1665,191,1617,175,1556,156,1446,133,1418,219,1490,247,1573,272,1593,293,1616,345,1644,380,1670,398,1695,447,1701,463,1706,489,1723,488,1732,518,1743,560,1755,567,1764,558,1902,541&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;area alt=&amp;quot;Hacht&amp;quot; title=&amp;quot;Hacht&amp;quot; href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; coords=&amp;quot;1245,725,1209,689,1199,693,1140,636,1132,587,1112,557,1178,497,1190,502,1199,491,1273,544,1319,585,1335,622,1372,663,1391,677,1393,663,1404,682,1400,691,1386,698,1374,677,1287,703&amp;quot; shape=&amp;quot;poly&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;/map&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;ak-3dmodel__sidebar&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;ak-3dmodel__poi-list ak-3dmodel__poi-list-sb&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;h3&amp;gt;Schreinsbezirke&amp;lt;/h3&amp;gt;&lt;br /&gt;
				&amp;lt;ol&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_I_S._Martin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-martin&amp;quot;&amp;gt;I S. Martin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_II_S._Brigiden&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-brigiden&amp;quot;&amp;gt;II S. Brigiden&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_III_Unterlan&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-unterlan&amp;quot;&amp;gt;III Unterlan&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IV_S._Alban&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-alban&amp;quot;&amp;gt;IV S. Alban&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_V_S._Laurenz&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-laurenz&amp;quot;&amp;gt;V S. Laurenz&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VI_S._Peter&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-peter&amp;quot;&amp;gt;VI S. Peter&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VII_S._Kolumba&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-kolumba&amp;quot;&amp;gt;VII S. Kolumba&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_VIII_S._Apostel&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-aposteln&amp;quot;&amp;gt;VIII S. Apostel&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_IX_Niederich&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-niederich&amp;quot;&amp;gt;IX Niederich&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_X_Airsbach&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-airsbach&amp;quot;&amp;gt;X Airsbach&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XI_S._Christoph&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-christoph&amp;quot;&amp;gt;XI S. Christoph&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-mauritius&amp;quot;&amp;gt;XII S. Mauritius - Weyerstraße&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIII_S._Severin&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-severin&amp;quot;&amp;gt;XIII S. Severin&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XIV_S._Gereon&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-gereon&amp;quot;&amp;gt;XIV S. Gereon&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XV_Eigelstein&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-eigelstein&amp;quot;&amp;gt;XV Eigelstein&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
					&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/wiki/Schreinsbezirk_XVI_Hacht&amp;quot; data-highlight-image=&amp;quot;ak-3dmodel__sb-hacht&amp;quot;&amp;gt;XVI Hacht&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;
				&amp;lt;/ol&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;!-- Make image map responsive. --&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;https://code.jquery.com/jquery-3.5.1.min.js&amp;quot; integrity=&amp;quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;/alteskoeln/jquery.rwdImageMaps.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	$(document).ready(function() {&lt;br /&gt;
		$(&#039;img[usemap]&#039;).rwdImageMaps();&lt;br /&gt;
	});&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;/div&gt;</summary>
		<author><name>Simon</name></author>
	</entry>
</feed>