Differences

This shows you the differences between two versions of the page.

--- handleiding_nieuw:sub_kengetallenbeelden [2025/04/18 12:01] – support
+++ handleiding_nieuw:sub_kengetallenbeelden [2025/05/06 15:21] (current) – support
@@ Line 1: / Line 1: @@
 <html>
-<!-- CENTRALE SPACEMATRIX BEELDENBANK - OSR verwijderd -->
+<!-- CENTRALE SPACEMATRIX BEELDENBANK -->
 <style>
   .spacematrix-wrapper {
@@ Line 118: / Line 118: @@
     border-bottom: 1px solid #ddd;
   }
+  h2 a[title="Terug naar boven"] {
+    margin-left: 10px;
+    color: #333;
+  }
+  h2 a[title="Terug naar boven"]:hover {
+    color: #000;
+    text-decoration: underline;
+}
 </style>
@@ Line 128: / Line 139: @@
 </div>
-<!-- Filters zonder OSR -->
+<div class="spacematrix-wrapper">
+  <img id="spacematrix-img"
+       src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png"
+       width="800"
+       alt="Spacematrix interactief voorbeeld" />
+  <div id="zone-overlay" class="zone-overlay">
+    <!-- alle zones -->
+    <div class="zone" style="left:130px; top:390px; width:110px; height:45px;" onclick="setFilterAndHighlight('a1', 0.2, 0.55, 0.125, 0.15, 0.3, 1)">A1</div>
+    <div class="zone" style="left:250px; top:355px; width:40px; height:80px;" onclick="setFilterAndHighlight('a2', 0.2, 0.7, 0.15, 0.21, 0.3, 1)">A2</div>
+    <div class="zone" style="left:300px; top:330px; width:50px; height:105px;" onclick="setFilterAndHighlight('a3', 0.2, 0.9, 0.21, 0.26, 0.3, 1)">A3</div>
+    <div class="zone" style="left:385px; top:305px; width:105px; height:130px;" onclick="setFilterAndHighlight('b2', 0.55, 1.05, 0.26, 0.37, 0.3, 1)">B2</div>
+    <div class="zone" style="left:180px; top:315px; width:60px; height:70px;" onclick="setFilterAndHighlight('c1', 0.55, 0.9, 0.12, 0.15, 0.3, 1)">C1</div>
+    <div class="zone" style="left:250px; top:215px; width:40px; height:135px;" onclick="setFilterAndHighlight('c2', 0.7, 1.1, 0.15, 0.21, 0.3, 1)">C2</div>
+    <div class="zone" style="left:360px; top:330px; width:20px; height:105px;" onclick="setFilterAndHighlight('b1', 0.9, 1.05, 0.21, 0.26, 0.3, 1)">B1</div>
+    <div class="zone" style="left:300px; top:215px; width:75px; height:110px;" onclick="setFilterAndHighlight('d', 1.05, 1.55, 0.21, 0.29, 0.3, 1)">D</div>
+    <div class="zone" style="left:385px; top:215px; width:105px; height:85px;" onclick="setFilterAndHighlight('e', 1.1, 1.9, 0.29, 0.39, 0.3, 1)">E</div>
+    <div class="zone" style="left:500px; top:295px; width:240px; height:140px;" onclick="setFilterAndHighlight('f1', 1.25, 1.9, 0.39, 0.65, 0.3, 1)">F1</div>
+    <div class="zone" style="left:500px; top:145px; width:240px; height:150px;" onclick="setFilterAndHighlight('f2', 1.9, 2.4, 0.405, 0.65, 0.3, 1)">F2</div>
+    <div class="zone" style="left:385px; top:40px; width:105px; height:170px;" onclick="setFilterAndHighlight('g1', 1.9, 3.0, 0.29, 0.405, 0.3, 1)">G1</div>
+    <div class="zone" style="left:500px; top:40px; width:240px; height:100px;" onclick="setFilterAndHighlight('g2', 2.4, 3.0, 0.405, 0.65, 0.3, 1)">G2</div>
+    <div class="zone" style="left:60px; top:40px; width:60px; height:395px;" onclick="setFilterAndHighlight('h1', 0.55, 2.6, 0.05, 0.12, 0.3, 1)">H1</div>
+    <div class="zone" style="left:130px; top:40px; width:40px; height:346px;" onclick="setFilterAndHighlight('h2', 0.9, 2.6, 0.12, 0.15, 0.3, 1)">H2</div>
+    <div class="zone" style="left:180px; top:40px; width:60px; height:270px;" onclick="setFilterAndHighlight('h3', 1.1, 2.6, 0.15, 0.21, 0.3, 1)">H3</div>
+    <div class="zone" style="left:250px; top:40px; width:125px; height:170px;" onclick="setFilterAndHighlight('h4', 1.3, 2.6, 0.21, 0.29, 0.3, 1)">H4</div>
+  </div>
+</div>
+<!-- FILTERS EN PROJECTEN ZET JE HIERONDER -->
 <div class="filters compact-filters">
   <div class="range-row">
@@ Line 148: / Line 188: @@
   <ul id="projectlist"></ul>
 </div>
+<!-- PROJECTEN -->
+<!-- BATTERSEA -->
+<div class="projectblok" data-fsi="3.0" data-gsi="0.61" data-osr="0.32" id="battersea">
+  <h2>
+     Battersea Power Station, Londen
+     <a href="#" onclick="scrollToTop()" title="Terug naar boven" style="float: right; font-size: 2.9em; text-    decoration: none;">⬆</a>
+  </h2>
+  <div class="projectgrid">
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_overzicht.jpg" alt="Battersea overzicht" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat1.jpg" alt="Straatbeeld Battersea 1" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat2.jpg" alt="Straatbeeld Battersea 2" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat3.jpg" alt="Straatbeeld Battersea 3" />
+  </div>
+  <div class="kengetallen">
+    <table>
+      <tr><td>FSI</td><td>3,0</td></tr>
+      <tr><td>GSI</td><td>0,61</td></tr>
+      <tr><td>Gem. aantal lagen</td><td>8–10</td></tr>
+      <tr><td>OSR</td><td>0,32</td></tr>
+      <tr><td>Bijzonderheden</td><td>Battersea Power Station (BPS) betreft de grootschalige herontwikkeling van een 17 hectare groot voormalig industrieel terrein langs de Theems. Het project (fasegewijs 2013–2020s) transformeert het gebied tot een gemengd woon-, werk- en recreatiekwartier, inclusief restauratie van de monumentale krachtcentrale. In contrast met Shoreditch is dit een masterplanned ontwikkeling op relatief groot kavel, met zowel hoge bouwvolumes als substantiële openbare ruimte.
+Gebruik en transformatie: BPS is opgezet als nieuw stedelijk kwartier met woningen, kantoren (bijv. Apple’s London Campus in de centrale hallen), Retail en recreatie in één project. De hoge FSI maakte het mogelijk om >250 winkels, honderden woningen en kantoren voor ~25.000 werkenden en bewoners te integreren op de site. De open ruimte (circa 45% van het terrein) is doelbewust geclusterd in vorm van een rivierpark, pleinen en een groot park van 2,4 hectare, om ondanks de hoge dichtheid kwaliteit van publiek domein te bieden.</td></tr>
+    </table>
+  </div>
+</div>
+<!-- NINE ELMS -->
+<div class="projectblok" data-fsi="2.4" data-gsi="0.53" data-osr="0.45" id="nine-elms">
+  <h2>
+     Rive Gauche - Parijs
+     <a href="#" onclick="scrollToTop()" title="Terug naar boven" style="float: right; font-size: 2.9em; text-    decoration: none;">⬆</a>
+  </h2>
+  <div class="projectgrid">
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:nineelms_overzicht.jpg" alt="Nine Elms overzicht" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:nineelms_straat1.jpg" alt="Straatbeeld Nine Elms 1" />
+  </div>
+  <div class="kengetallen">
+    <table>
+      <tr><td>FSI</td><td>2,4</td></tr>
+      <tr><td>GSI</td><td>0,53</td></tr>
+      <tr><td>Gem. aantal lagen</td><td>6–8</td></tr>
+      <tr><td>OSR</td><td>0,45</td></tr>
+      <tr><td>Bijzonderheden</td><td>Recent ontwikkeld gebied met hoogstedelijk wonen langs de Thames, gericht op menging van wonen en publieke ruimte.</td></tr>
+    </table>
+  </div>
+</div>
+<!-- SHOREDITCH -->
+<div class="projectblok" data-fsi="2.4" data-gsi="0.53" data-osr="0.45" id="Shoreditch">
+  <h2>
+     Shoreditch - Londen
+     <a href="#" onclick="scrollToTop()" title="Terug naar boven" style="float: right; font-size: 2.9em; text-    decoration: none;">⬆</a>
+  </h2>
+  <div class="projectgrid">
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:g1:shoreditch_overzicht.jpg" alt="Shoreditch overzicht" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:g1:shoreditch_straat1.jpg" alt="Straatbeeld Shoreditch 1" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:g1:shoreditch_straat2.jpg" alt="Straatbeeld Shoreditch 2" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:g1:shoreditch_straat3.jpg" alt="Straatbeeld Shoreditch 3" />
+  </div>
+  <div class="kengetallen">
+    <table>
+      <tr><td>FSI</td><td>2,4</td></tr>
+      <tr><td>GSI</td><td>0,53</td></tr>
+      <tr><td>Gem. aantal lagen</td><td>6–8</td></tr>
+      <tr><td>OSR</td><td>0,45</td></tr>
+      <tr><td>Bijzonderheden</td><td>Shoreditch is een historisch inner-city gebied in Londen dat de laatste decennia een transformatie heeft ondergaan van een verouderd industrie-/pakhuizen-district naar een creatief tech-hub. De bestaande bebouwing is overwegend middelhoog en fijnmazig: veel gebouwen van 3–6 verdiepingen op relatief kleine kavels, dicht op elkaar langs smalle straten. Enkele recente projecten op de rand van Shoreditch voegen hoogbouw toe (bijv. nieuwe torens van 19 tot 29 verdiepingen nabij Shoreditch High Street), maar het gebied wordt in de kern gekenmerkt door compacte blokken en beperkte open ruimte.
+Gebruik en transformatie: Shoreditch is tegenwoordig een mix van creatieve kantoren, woningbouw en horeca. Oude pakhuizen zijn herbestemd als lofts, galeries of startups. Deze functiemenging gaat samen met de dichtheid: met een FSI ~2-3 is er voldoende massa om een levendige sfeer te dragen, maar de menselijke schaal (4-6 lagen) houdt het straatbeeld interactief.</td></tr>
+    </table>
+  </div>
+</div>
 <script>
@@ Line 155: / Line 270: @@
 }
-function setFilterAndHighlight(zoneId, fsiMin, fsiMax, gsiMin, gsiMax) {
+function setFilterAndHighlight(zoneId, fsiMin, fsiMax, gsiMin, gsiMax /* osrMin, osrMax */) {
   document.getElementById('fsi_min').value = fsiMin;
   document.getElementById('fsi_max').value = fsiMax;
@@ Line 212: / Line 327: @@
   document.getElementById('gsi_min').value = 0;
   document.getElementById('gsi_max').value = 1;
   document.getElementById('fsi_min_val').textContent = '0';
   document.getElementById('fsi_max_val').textContent = '4';
   document.getElementById('gsi_min_val').textContent = '0';
   document.getElementById('gsi_max_val').textContent = '1';
   updateFilter();
+}
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
 }
@@ Line 222: / Line 343: @@
 </script>
 </html>