Widget:3D-Modell

<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>