Differences

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

--- handleiding_nieuw:sub_kengetallenbeelden [2025/04/18 09:56] – support
+++ handleiding_nieuw:sub_kengetallenbeelden [2025/05/06 15:21] (current) – support
@@ 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 134: / Line 145: @@
        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>
@@ Line 144: / Line 156: @@
     <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:285px; width:240px; height:150px;" onclick="setFilterAndHighlight('f1', 1.25, 1.9, 0.39, 0.65, 0.3, 1)">F1</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:130px; 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: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:85px;" onclick="setFilterAndHighlight('g2', 2.4, 3.0, 0.405, 0.65, 0.3, 1)">G2</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>
@@ Line 169: / Line 181: @@
     <input type="range" id="gsi_max" min="0" max="1" step="0.01" value="1" oninput="gsi_max_val.value = this.value; updateFilter()">
     <output id="gsi_min_val">0</output> – <output id="gsi_max_val">1</output>
-  </div>
-  <div class="range-row">
-    <label for="osr_min">OSR</label>
-    <input type="range" id="osr_min" min="0" max="4" step="0.1" value="0" oninput="osr_min_val.value = this.value; updateFilter()">
-    <input type="range" id="osr_max" min="0" max="4" step="0.1" value="4" oninput="osr_max_val.value = this.value; updateFilter()">
-    <output id="osr_min_val">0</output> – <output id="osr_max_val">4</output>
   </div>
 </div>
@@ Line 182: / 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</h2>
+  <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" />
@@ Line 199: / Line 210: @@
       <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>Industrieel icoon getransformeerd tot hoogstedelijk woon-werkgebied met luxe voorzieningen.</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>
@@ Line 206: / Line 218: @@
 <!-- NINE ELMS -->
 <div class="projectblok" data-fsi="2.4" data-gsi="0.53" data-osr="0.45" id="nine-elms">
-  <h2>Rive Gauche - Parijs</h2>
+  <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" />
@@ Line 224: / Line 240: @@
 <!-- SHOREDITCH -->
 <div class="projectblok" data-fsi="2.4" data-gsi="0.53" data-osr="0.45" id="Shoreditch">
-  <h2>Shoreditch</h2>
+  <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" />
@@ Line 237: / Line 257: @@
       <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>
+      <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>
@@ Line 249: / Line 270: @@
 }
-function setFilterAndHighlight(zoneId, fsiMin, fsiMax, gsiMin, gsiMax, osrMin, osrMax) {
+function setFilterAndHighlight(zoneId, fsiMin, fsiMax, gsiMin, gsiMax /* osrMin, osrMax */) {
   document.getElementById('fsi_min').value = fsiMin;
   document.getElementById('fsi_max').value = fsiMax;
   document.getElementById('gsi_min').value = gsiMin;
   document.getElementById('gsi_max').value = gsiMax;
-  document.getElementById('osr_min').value = osrMin;
-  document.getElementById('osr_max').value = osrMax;
   document.getElementById('fsi_min_val').textContent = fsiMin;
   document.getElementById('fsi_max_val').textContent = fsiMax;
   document.getElementById('gsi_min_val').textContent = gsiMin;
   document.getElementById('gsi_max_val').textContent = gsiMax;
-  document.getElementById('osr_min_val').textContent = osrMin;
-  document.getElementById('osr_max_val').textContent = osrMax;
   if (typeof updateFilter === 'function') updateFilter();
   document.querySelectorAll('.zone').forEach(zone => zone.classList.remove('active'));
@@ Line 273: / Line 290: @@
   const gsiMin = parseFloat(document.getElementById('gsi_min').value);
   const gsiMax = parseFloat(document.getElementById('gsi_max').value);
-  const osrMin = parseFloat(document.getElementById('osr_min').value);
-  const osrMax = parseFloat(document.getElementById('osr_max').value);
   const projectBlokken = document.querySelectorAll('.projectblok');
@@ Line 283: / Line 298: @@
     const fsi = parseFloat(blok.dataset.fsi);
     const gsi = parseFloat(blok.dataset.gsi);
-    const osr = parseFloat(blok.dataset.osr);
     const zichtbaar =
       fsi >= fsiMin && fsi <= fsiMax &&
-      gsi >= gsiMin && gsi <= gsiMax &&
+      gsi >= gsiMin && gsi <= gsiMax;
-      osr >= osrMin && osr <= osrMax;
     blok.style.display = zichtbaar ? 'block' : 'none';
@@ Line 314: / Line 327: @@
   document.getElementById('gsi_min').value = 0;
   document.getElementById('gsi_max').value = 1;
-  document.getElementById('osr_min').value = 0;
-  document.getElementById('osr_max').value = 4;
   document.getElementById('fsi_min_val').textContent = '0';
@@ Line 321: / Line 332: @@
   document.getElementById('gsi_min_val').textContent = '0';
   document.getElementById('gsi_max_val').textContent = '1';
-  document.getElementById('osr_min_val').textContent = '0';
-  document.getElementById('osr_max_val').textContent = '4';
   updateFilter();
+}
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
 }