Differences

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

--- handleiding_nieuw:sub_kengetallenbeelden [2025/04/18 11:56] – support
+++ handleiding_nieuw:sub_kengetallenbeelden [2025/04/18 12:01] (current) – support
@@ Line 135: / Line 135: @@
   <div id="zone-overlay" class="zone-overlay">
     <!-- alle zones -->
-    <!-- jouw bestaande zone-divs komen hier -->
+    <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">
@@ Line 151: / Line 169: @@
     <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 158: / Line 182: @@
   <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>
+  <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>Industrieel icoon getransformeerd tot hoogstedelijk woon-werkgebied met luxe voorzieningen.</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</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</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>Recent ontwikkeld gebied met hoogstedelijk wonen langs de Thames, gericht op menging van wonen en publieke ruimte.</td></tr>
+    </table>
+  </div>
+</div>
 <script>
@@ Line 165: / Line 249: @@
 }
-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;
   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 186: / Line 273: @@
   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 194: / Line 283: @@
     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 223: / Line 314: @@
   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 228: / Line 321: @@
   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();