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

Altes Köln

Widget:3D-Modell: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
(Markierung: 2017-Quelltext-Bearbeitung)
(Highlight-Bilder für Schreinsbezirke nicht vorladen um das initiale Laden der Bilder hoffentlich zu beschleunigen)
(Markierung: 2017-Quelltext-Bearbeitung)
 
Zeile 151: Zeile 151:
  
 
<script>
 
<script>
 +
 +
var sbHighlightImageSources = {
 +
'ak-3dmodel__sb-martin': '../alteskoeln/3dmodel/SB_01_St_Martin.jpg',
 +
'ak-3dmodel__sb-brigiden': '../alteskoeln/3dmodel/SB_02_St_Brigiden.jpg',
 +
'ak-3dmodel__sb-unterlan': '../alteskoeln/3dmodel/SB_03_Unterlan.jpg',
 +
'ak-3dmodel__sb-alban': '../alteskoeln/3dmodel/SB_04_St_Alban.jpg',
 +
'ak-3dmodel__sb-laurenz': '../alteskoeln/3dmodel/SB_05_St_Laurenz.jpg',
 +
'ak-3dmodel__sb-peter': '../alteskoeln/3dmodel/SB_06_St_Peter.jpg',
 +
'ak-3dmodel__sb-kolumba': '../alteskoeln/3dmodel/SB_07_St_Columba.jpg',
 +
'ak-3dmodel__sb-aposteln': '../alteskoeln/3dmodel/SB_08_St_Aposteln.jpg',
 +
'ak-3dmodel__sb-niederich': '../alteskoeln/3dmodel/SB_09_Niederich.jpg',
 +
'ak-3dmodel__sb-airsbach': '../alteskoeln/3dmodel/SB_10_Airsbach.jpg',
 +
'ak-3dmodel__sb-christoph': '../alteskoeln/3dmodel/SB_11_St_Christoph.jpg',
 +
'ak-3dmodel__sb-mauritius': '../alteskoeln/3dmodel/SB_12_St_Mauritius.jpg',
 +
'ak-3dmodel__sb-severin': '../alteskoeln/3dmodel/SB_13_St_Severin.jpg',
 +
'ak-3dmodel__sb-gereon': '../alteskoeln/3dmodel/SB_14_St_Gereon.jpg',
 +
'ak-3dmodel__sb-eigelstein': '../alteskoeln/3dmodel/SB_15_Eigelstein.jpg',
 +
'ak-3dmodel__sb-hacht': '../alteskoeln/3dmodel/SB_16_Hacht.jpg'
 +
};
 +
 
document.addEventListener('DOMContentLoaded', function(event) {
 
document.addEventListener('DOMContentLoaded', function(event) {
 
var widgets = document.getElementsByClassName('ak-3dmodel__widget');
 
var widgets = document.getElementsByClassName('ak-3dmodel__widget');
Zeile 160: Zeile 180:
 
function initWidget(widget) {
 
function initWidget(widget) {
 
var imageMap = widget.getElementsByClassName('ak-3dmodel__imagemap')[0];
 
var imageMap = widget.getElementsByClassName('ak-3dmodel__imagemap')[0];
 +
var view = widget.getElementsByClassName('ak-3dmodel__view')[0];
 +
 
var areas = imageMap.children;
 
var areas = imageMap.children;
 
for (var i = 0; i < areas.length; i++) {
 
for (var i = 0; i < areas.length; i++) {
addAreaEventListeners(areas[i]);
+
addAreaEventListeners(areas[i], view);
 
}
 
}
  
var view = widget.getElementsByClassName('ak-3dmodel__view')[0];
 
 
var poiList = widget.getElementsByClassName('ak-3dmodel__poi-list-sb')[0];
 
var poiList = widget.getElementsByClassName('ak-3dmodel__poi-list-sb')[0];
 
var sbLinks = poiList.querySelectorAll('ol li a');
 
var sbLinks = poiList.querySelectorAll('ol li a');
Zeile 173: Zeile 194:
 
}
 
}
  
function addAreaEventListeners(area) {
+
function getOrCreateSBHighlightImage(id, view) {
 +
var highlightImage = document.getElementById(id);
 +
if (!highlightImage) {
 +
highlightImage = document.createElement('img');
 +
highlightImage.id = id;
 +
highlightImage.src = sbHighlightImageSources[id];
 +
highlightImage.classList.add('ak-3dmodel__sb');
 +
highlightImage.alt = '';
 +
view.appendChild(highlightImage);
 +
}
 +
return highlightImage;
 +
}
 +
 
 +
function addAreaEventListeners(area, view) {
 
// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.
 
// TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile.
 
area.addEventListener('mouseenter', function() {
 
area.addEventListener('mouseenter', function() {
 
if (area.dataset.highlightImage) {
 
if (area.dataset.highlightImage) {
var highlightImage = document.getElementById(area.dataset.highlightImage);
+
var highlightImage = getOrCreateSBHighlightImage(area.dataset.highlightImage, view);
 
highlightImage.classList.add('ak-3dmodel__sb_active');
 
highlightImage.classList.add('ak-3dmodel__sb_active');
  
Zeile 189: Zeile 223:
 
area.addEventListener('mouseleave', function() {
 
area.addEventListener('mouseleave', function() {
 
if (area.dataset.highlightImage) {
 
if (area.dataset.highlightImage) {
var highlightImage = document.getElementById(area.dataset.highlightImage);
+
var highlightImage = getOrCreateSBHighlightImage(area.dataset.highlightImage, view);
 
highlightImage.classList.remove('ak-3dmodel__sb_active');
 
highlightImage.classList.remove('ak-3dmodel__sb_active');
  
Zeile 204: Zeile 238:
 
sbLink.addEventListener('mouseenter', function() {
 
sbLink.addEventListener('mouseenter', function() {
 
if (sbLink.dataset.highlightImage) {
 
if (sbLink.dataset.highlightImage) {
var highlightImage = document.getElementById(sbLink.dataset.highlightImage);
+
var highlightImage = getOrCreateSBHighlightImage(sbLink.dataset.highlightImage, view);
 
highlightImage.classList.add('ak-3dmodel__sb_active');
 
highlightImage.classList.add('ak-3dmodel__sb_active');
 
view.classList.add('ak-3dmodel__view_highlighted');
 
view.classList.add('ak-3dmodel__view_highlighted');
Zeile 211: Zeile 245:
 
sbLink.addEventListener('mouseleave', function() {
 
sbLink.addEventListener('mouseleave', function() {
 
if (sbLink.dataset.highlightImage) {
 
if (sbLink.dataset.highlightImage) {
var highlightImage = document.getElementById(sbLink.dataset.highlightImage);
+
var highlightImage = getOrCreateSBHighlightImage(sbLink.dataset.highlightImage, view);
 
highlightImage.classList.remove('ak-3dmodel__sb_active');
 
highlightImage.classList.remove('ak-3dmodel__sb_active');
 
view.classList.remove('ak-3dmodel__view_highlighted');
 
view.classList.remove('ak-3dmodel__view_highlighted');
Zeile 223: Zeile 257:
 
<div class="ak-3dmodel__view">
 
<div class="ak-3dmodel__view">
 
<!-- TODO Attribution
 
<!-- TODO Attribution
Köln-Stadtmodell von Theo Giesen (1922-1990) - Sammlung Kormann im KuMuMü - Kulturmuseum Mülheim an der Ruhr - Fotografien: Bernd Pirschtat -->
+
Köln-Stadtmodell von Theo Giesen (1922-1990) - Sammlung Korman im KuMuMü - Kulturmuseum Mülheim an der Ruhr - Fotografien: Bernd Pirschtat -->
 
<img src="../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg" class="ak-3dmodel__fullview" usemap="#ak-3dmodel__imagemap" width="2000" height="1707" alt="Plastisches Stadtmodell von Köln um 1571" />
 
<img src="../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg" class="ak-3dmodel__fullview" usemap="#ak-3dmodel__imagemap" width="2000" height="1707" alt="Plastisches Stadtmodell von Köln um 1571" />
 
<img src="../alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg" class="ak-3dmodel__fowview" alt="" width="2000" height="1707" />
 
<img src="../alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg" class="ak-3dmodel__fowview" alt="" width="2000" height="1707" />
 
<img src="../alteskoeln/3dmodel/SB_01_St_Martin.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-martin" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_02_St_Brigiden.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-brigiden" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_03_Unterlan.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-unterlan" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_04_St_Alban.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-alban" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_05_St_Laurenz.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-laurenz" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_06_St_Peter.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-peter" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_07_St_Columba.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-kolumba" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_08_St_Aposteln.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-aposteln" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_09_Niederich.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-niederich" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_10_Airsbach.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-airsbach" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_11_St_Christoph.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-christoph" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_12_St_Mauritius.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-mauritius" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_13_St_Severin.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-severin" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_14_St_Gereon.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-gereon" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_15_Eigelstein.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-eigelstein" alt="" />
 
<img src="../alteskoeln/3dmodel/SB_16_Hacht.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-hacht" alt="" />
 
  
 
<map name="ak-3dmodel__imagemap" class="ak-3dmodel__imagemap">
 
<map name="ak-3dmodel__imagemap" class="ak-3dmodel__imagemap">

Aktuelle Version vom 17. Januar 2021, 11:29 Uhr

<style type="text/css"> body { margin: 0; padding: 0; }

.ak-3dmodel__widget { position: relative; height: calc(100vh - 56px); overflow:hidden; }

.ak-3dmodel__background-blur { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background-image: url(../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(10px); opacity: 0.7; }

.ak-3dmodel__view { position: relative; height: 100%; width: calc((100vh - 56px) * 1.171646162858817); margin-left: auto; margin-right: auto; }

.ak-3dmodel__fullview { position: relative; z-index: 1; width: auto; height: 100%; opacity: 1; transition: opacity .2s; }

.ak-3dmodel__view:hover .ak-3dmodel__fullview, .ak-3dmodel__view.ak-3dmodel__view_highlighted .ak-3dmodel__fullview { opacity: 0; }

/* TODO Can we do this with a CSS colour overlay instead to avoid loading this data? But it probably wouldn't match the colour of the highlight images. Maybe we can do that purely with canvas/SVG and very precise outlines? */ .ak-3dmodel__fowview { position: absolute; top: 0; left: 0; width: auto; height: 100%; }

.ak-3dmodel__sb { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .2s; /* 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? */ width: auto; height: 100%; }

.ak-3dmodel__sb.ak-3dmodel__sb_active { opacity: 1; }

.ak-3dmodel__sidebar { position: absolute; right: 2em; bottom: 2em; z-index: 11; width: calc((100vh - 56px) * 1.171646162858817 / 4); font-family: Arial, sans-serif; font-size: 16px; color: #495057; }

.ak-3dmodel__sidebar a { color: #495057; text-decoration: none; }

.ak-3dmodel__poi-list h3 { margin: 0; padding: 0.5em 1em; background-color: rgba(73, 80, 87, .85); color: #fefefe; font-weight: bold; font-size: 16px; line-height: normal; }

.ak-3dmodel__poi-list h3:hover { background-color: rgb(73, 80, 87); }

.ak-3dmodel__poi-list ol { list-style-type: none; margin: 0; padding: 0; overflow-y: auto; height: calc(50vh - 56px); }

.ak-3dmodel__poi-list ol li { margin: 0; }

.ak-3dmodel__poi-list ol li + li { border-top: 1px solid #ccc; }

.ak-3dmodel__poi-list ol a { display: block; padding: 0.5em 1em; background-color: hsla(0,0%,99.6%,.85); transition: background-color .2s; }

.ak-3dmodel__poi-list ol a:hover, .ak-3dmodel__poi-list ol a.ak-3dmodel__poi-list-link_active { background-color: #fefefe; }

.ak-3model__info-link { position: absolute; right: 2em; top: 2em; z-index: 11; display: inline-block; width: 2.5em; height: 2.5em; color: #495057; /* Info icon taken from https://feathericons.com/ and adjusted. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); background-color: hsla(0,0%,99.6%,.85); border-radius: 50%; }

.ak-3model__info-link:hover { background-color: #fefefe; } </style>

<script>

var sbHighlightImageSources = { 'ak-3dmodel__sb-martin': '../alteskoeln/3dmodel/SB_01_St_Martin.jpg', 'ak-3dmodel__sb-brigiden': '../alteskoeln/3dmodel/SB_02_St_Brigiden.jpg', 'ak-3dmodel__sb-unterlan': '../alteskoeln/3dmodel/SB_03_Unterlan.jpg', 'ak-3dmodel__sb-alban': '../alteskoeln/3dmodel/SB_04_St_Alban.jpg', 'ak-3dmodel__sb-laurenz': '../alteskoeln/3dmodel/SB_05_St_Laurenz.jpg', 'ak-3dmodel__sb-peter': '../alteskoeln/3dmodel/SB_06_St_Peter.jpg', 'ak-3dmodel__sb-kolumba': '../alteskoeln/3dmodel/SB_07_St_Columba.jpg', 'ak-3dmodel__sb-aposteln': '../alteskoeln/3dmodel/SB_08_St_Aposteln.jpg', 'ak-3dmodel__sb-niederich': '../alteskoeln/3dmodel/SB_09_Niederich.jpg', 'ak-3dmodel__sb-airsbach': '../alteskoeln/3dmodel/SB_10_Airsbach.jpg', 'ak-3dmodel__sb-christoph': '../alteskoeln/3dmodel/SB_11_St_Christoph.jpg', 'ak-3dmodel__sb-mauritius': '../alteskoeln/3dmodel/SB_12_St_Mauritius.jpg', 'ak-3dmodel__sb-severin': '../alteskoeln/3dmodel/SB_13_St_Severin.jpg', 'ak-3dmodel__sb-gereon': '../alteskoeln/3dmodel/SB_14_St_Gereon.jpg', 'ak-3dmodel__sb-eigelstein': '../alteskoeln/3dmodel/SB_15_Eigelstein.jpg', 'ak-3dmodel__sb-hacht': '../alteskoeln/3dmodel/SB_16_Hacht.jpg' };

document.addEventListener('DOMContentLoaded', function(event) { var widgets = document.getElementsByClassName('ak-3dmodel__widget'); for (var i = 0; i < widgets.length; i++) { initWidget(widgets[i]); } });

function initWidget(widget) { var imageMap = widget.getElementsByClassName('ak-3dmodel__imagemap')[0]; var view = widget.getElementsByClassName('ak-3dmodel__view')[0];

var areas = imageMap.children; for (var i = 0; i < areas.length; i++) { addAreaEventListeners(areas[i], view); }

var poiList = widget.getElementsByClassName('ak-3dmodel__poi-list-sb')[0]; var sbLinks = poiList.querySelectorAll('ol li a'); for (i = 0; i < sbLinks.length; i++) { addSBLinksEventListeners(sbLinks[i], view); } }

function getOrCreateSBHighlightImage(id, view) { var highlightImage = document.getElementById(id); if (!highlightImage) { highlightImage = document.createElement('img'); highlightImage.id = id; highlightImage.src = sbHighlightImageSources[id]; highlightImage.classList.add('ak-3dmodel__sb'); highlightImage.alt = ; view.appendChild(highlightImage); } return highlightImage; }

function addAreaEventListeners(area, view) { // TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile. area.addEventListener('mouseenter', function() { if (area.dataset.highlightImage) { var highlightImage = getOrCreateSBHighlightImage(area.dataset.highlightImage, view); highlightImage.classList.add('ak-3dmodel__sb_active');

var sbLink = document.querySelector('.ak-3dmodel__poi-list-sb a[data-highlight-image="' + area.dataset.highlightImage + '"]'); if (sbLink) { sbLink.classList.add('ak-3dmodel__poi-list-link_active'); sbLink.scrollIntoView(); } } }); area.addEventListener('mouseleave', function() { if (area.dataset.highlightImage) { var highlightImage = getOrCreateSBHighlightImage(area.dataset.highlightImage, view); highlightImage.classList.remove('ak-3dmodel__sb_active');

var sbLink = document.querySelector('.ak-3dmodel__poi-list-sb a[data-highlight-image="' + area.dataset.highlightImage + '"]'); if (sbLink) { sbLink.classList.remove('ak-3dmodel__poi-list-link_active'); } } }); }

function addSBLinksEventListeners(sbLink, view) { // TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile. sbLink.addEventListener('mouseenter', function() { if (sbLink.dataset.highlightImage) { var highlightImage = getOrCreateSBHighlightImage(sbLink.dataset.highlightImage, view); highlightImage.classList.add('ak-3dmodel__sb_active'); view.classList.add('ak-3dmodel__view_highlighted'); } }); sbLink.addEventListener('mouseleave', function() { if (sbLink.dataset.highlightImage) { var highlightImage = getOrCreateSBHighlightImage(sbLink.dataset.highlightImage, view); highlightImage.classList.remove('ak-3dmodel__sb_active'); view.classList.remove('ak-3dmodel__view_highlighted'); } }); } </script>

<img src="../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg" class="ak-3dmodel__fullview" usemap="#ak-3dmodel__imagemap" width="2000" height="1707" alt="Plastisches Stadtmodell von Köln um 1571" /> <img src="../alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg" class="ak-3dmodel__fowview" alt="" width="2000" height="1707" />

<map name="ak-3dmodel__imagemap" class="ak-3dmodel__imagemap"> <area alt="S. Martin" title="S. Martin" href="/wiki/Schreinsbezirk_I_S._Martin" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-martin"> <area alt="S. Brigiden" title="S. Brigiden" href="/wiki/Schreinsbezirk_II_S._Brigiden" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-brigiden"> <area alt="Unterlan" title="Unterlan" href="/wiki/Schreinsbezirk_III_Unterlan" coords="1084,792,1116,770,1103,762,1082,765,1066,767" shape="poly" data-highlight-image="ak-3dmodel__sb-unterlan"> <area alt="S. Alban" title="S. Alban" href="/wiki/Schreinsbezirk_IV_S._Alban" coords="904,831,920,811,934,816,1034,744,1006,709,980,659,962,656,941,673,881,710,845,740,814,760,833,788" shape="poly" data-highlight-image="ak-3dmodel__sb-alban"> <area alt="S. Laurenz" title="S. Laurenz" href="/wiki/Schreinsbezirk_V_S._Laurenz" coords="1038,739,1119,702,1142,702,1181,673,1149,638,1128,622,1116,594,1123,585,1109,562,1052,603,1026,615,978,647" shape="poly" data-highlight-image="ak-3dmodel__sb-laurenz"> <area alt="S. Peter" title="S. Peter" href="/wiki/Schreinsbezirk_VI_S._Peter" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-peter"> <area alt="S. Kolumba" title="S. Kolumba" href="/wiki/Schreinsbezirk_VII_S._Kolumba" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-kolumba"> <area alt="S. Apostel" title="S. Apostel" href="/wiki/Schreinsbezirk_VIII_S._Apostel" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-aposteln"> <area alt="Niederich" title="Niederich" href="/wiki/Schreinsbezirk_IX_Niederich" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-niederich"> <area alt="Airsbach" title="Airsbach" href="/wiki/Schreinsbezirk_X_Airsbach" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-airsbach"> <area alt="S. Gereon" title="S. Gereon" href="/wiki/Schreinsbezirk_XIV_S._Gereon" coords="920,90,948,72,999,106,1008,110,1010,122,999,134,989,127,962,145,946,110" shape="poly" data-highlight-image="ak-3dmodel__sb-gereon"> <area alt="S. Christoph" title="S. Christoph" href="/wiki/Schreinsbezirk_XI_S._Christoph" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-christoph"> <area alt="S. Mauritius - Weyerstraße" title="S. Mauritius - Weyerstraße" href="/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-mauritius"> <area alt="S. Severin" title="S. Severin" href="/wiki/Schreinsbezirk_XIII_S._Severin" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-severin"> <area alt="Eigelstein" title="Eigelstein" href="/wiki/Schreinsbezirk_XV_Eigelstein" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-eigelstein"> <area alt="Hacht" title="Hacht" href="/wiki/Schreinsbezirk_XVI_Hacht" coords="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" shape="poly" data-highlight-image="ak-3dmodel__sb-hacht"> </map>

Schreinsbezirke

  1. <a href="/wiki/Schreinsbezirk_I_S._Martin" data-highlight-image="ak-3dmodel__sb-martin">I S. Martin</a>
  2. <a href="/wiki/Schreinsbezirk_II_S._Brigiden" data-highlight-image="ak-3dmodel__sb-brigiden">II S. Brigiden</a>
  3. <a href="/wiki/Schreinsbezirk_III_Unterlan" data-highlight-image="ak-3dmodel__sb-unterlan">III Unterlan</a>
  4. <a href="/wiki/Schreinsbezirk_IV_S._Alban" data-highlight-image="ak-3dmodel__sb-alban">IV S. Alban</a>
  5. <a href="/wiki/Schreinsbezirk_V_S._Laurenz" data-highlight-image="ak-3dmodel__sb-laurenz">V S. Laurenz</a>
  6. <a href="/wiki/Schreinsbezirk_VI_S._Peter" data-highlight-image="ak-3dmodel__sb-peter">VI S. Peter</a>
  7. <a href="/wiki/Schreinsbezirk_VII_S._Kolumba" data-highlight-image="ak-3dmodel__sb-kolumba">VII S. Kolumba</a>
  8. <a href="/wiki/Schreinsbezirk_VIII_S._Apostel" data-highlight-image="ak-3dmodel__sb-aposteln">VIII S. Apostel</a>
  9. <a href="/wiki/Schreinsbezirk_IX_Niederich" data-highlight-image="ak-3dmodel__sb-niederich">IX Niederich</a>
  10. <a href="/wiki/Schreinsbezirk_X_Airsbach" data-highlight-image="ak-3dmodel__sb-airsbach">X Airsbach</a>
  11. <a href="/wiki/Schreinsbezirk_XI_S._Christoph" data-highlight-image="ak-3dmodel__sb-christoph">XI S. Christoph</a>
  12. <a href="/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe" data-highlight-image="ak-3dmodel__sb-mauritius">XII S. Mauritius - Weyerstraße</a>
  13. <a href="/wiki/Schreinsbezirk_XIII_S._Severin" data-highlight-image="ak-3dmodel__sb-severin">XIII S. Severin</a>
  14. <a href="/wiki/Schreinsbezirk_XIV_S._Gereon" data-highlight-image="ak-3dmodel__sb-gereon">XIV S. Gereon</a>
  15. <a href="/wiki/Schreinsbezirk_XV_Eigelstein" data-highlight-image="ak-3dmodel__sb-eigelstein">XV Eigelstein</a>
  16. <a href="/wiki/Schreinsbezirk_XVI_Hacht" data-highlight-image="ak-3dmodel__sb-hacht">XVI Hacht</a>

<a href="/wiki/Stadtmodell/Info_zum_Stadtmodell" class="ak-3model__info-link" aria-label="Über das Stadtmodell" title="Über das Stadtmodell"></a>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script type="text/javascript" src="../alteskoeln/jquery.rwdImageMaps.min.js"></script> <script> $(document).ready(function() { $('img[usemap]').rwdImageMaps(); }); </script>