Altes Köln

Widget:3D-Modell: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
(Highlight-Bilder für Schreinsbezirke nicht vorladen um das initiale Laden der Bilder hoffentlich zu beschleunigen)
Markierung: 2017-Quelltext-Bearbeitung
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 6: Zeile 6:


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


Zeile 27: Zeile 29:
position: relative;
position: relative;
height: 100%;
height: 100%;
width: calc(100vh * 1.171646162858817);
width: calc((100vh - 56px) * 1.171646162858817);
margin-left: auto;
margin-left: auto;
margin-right: auto;
margin-right: auto;
Zeile 75: Zeile 77:
bottom: 2em;
bottom: 2em;
z-index: 11;
z-index: 11;
width: calc((100vh - 56px) * 1.171646162858817 / 4);
font-family: Arial, sans-serif;
font-family: Arial, sans-serif;
font-size: 16px;
font-size: 16px;
Zeile 104: Zeile 107:
padding: 0;
padding: 0;
overflow-y: auto;
overflow-y: auto;
height: 52vh;
height: calc(50vh - 56px);
}
}


Zeile 148: 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 157: 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 170: 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 180: Zeile 217:
if (sbLink) {
if (sbLink) {
sbLink.classList.add('ak-3dmodel__poi-list-link_active');
sbLink.classList.add('ak-3dmodel__poi-list-link_active');
sbLink.scrollIntoView();
}
}
}
}
Zeile 185: 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 200: 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 207: 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 215: Zeile 253:
</script>
</script>


<div class="ak-3dmodel__widget" style="overflow:hidden">
<div class="ak-3dmodel__widget">
<div class="ak-3dmodel__background-blur"></div>
<div class="ak-3dmodel__background-blur"></div>
<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, 10: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>

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