Differences

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

--- handleiding_nieuw:sub_kengetallenbeelden [2025/04/15 09:24] – support
+++ handleiding_nieuw:sub_kengetallenbeelden [2025/04/18 12:01] (current) – support
@@ Line 1: / Line 1: @@
 <html>
-  <!-- CENTRALE SPACEMATRIX BEELDENBANK -->
+<!-- CENTRALE SPACEMATRIX BEELDENBANK -->
 <style>
   .spacematrix-wrapper {
@@ Line 15: / Line 15: @@
     width: 800px;
     height: auto;
-    pointer-events: none;
+    pointer-events: auto;
   }
   .zone {
@@ Line 25: / Line 25: @@
     padding: 1px 3px;
     transition: background-color 0.3s ease;
+    cursor: pointer;
   }
   .zone.active {
@@ Line 30: / Line 31: @@
     border-color: red;
   }
-  .filters label {
+  .filter-buttons {
-    margin-top: 1em;
+    display: flex;
-    display: block;
+    gap: 1em;
-    font-weight: bold;
+    margin-bottom: 1em;
   }
-  .range-group {
+  .filter-buttons button {
+    padding: 0.4em 1em;
+    font-size: 0.95em;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #eee;
+    cursor: pointer;
+  }
+  .filter-buttons button:hover {
+    background-color: #ddd;
+  }
+  .compact-filters {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8em;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .range-row {
     display: flex;
     align-items: center;
-    gap: 0.5em;
+    gap: 0.8em;
   }
-  .range-group input[type="range"] {
+  .range-row label {
-    flex: 1;
-  }
-  .range-group output {
     width: 40px;
-    text-align: right;
+    font-weight: bold;
+  }
+  .range-row input[type="range"] {
+    flex: 1;
   }
   .overzicht {
@@ Line 100: / Line 119: @@
   }
 </style>
+<h2 style="margin-top: 2em; font-size: 1.4em; border-bottom: 2px solid #ccc; padding-bottom: 0.2em;">
+  Beeldenbank Stedelijke Dichtheden
+</h2>
+<div class="filter-buttons">
+  <button onclick="resetFilters()">Reset filters</button>
+  <button onclick="toggleOverlay()">Toon/verberg zones</button>
+</div>
 <div class="spacematrix-wrapper">
@@ Line 106: / Line 133: @@
        width="800"
        alt="Spacematrix interactief voorbeeld" />
-  $1
+  <div id="zone-overlay" class="zone-overlay">
-    <div class="zone" style="left:60px; top:40px; width:60px; height:430px;" onclick="setFilterAndHighlight('h1', 0.55, 2.6, 0.05, 0.12, 0.1, 0.4)">H1</div>
+    <!-- alle zones -->
-    <div class="zone" style="left:130px; top:40px; width:40px; height:380px;" onclick="setFilterAndHighlight('h2', 0.9, 2.6, 0.12, 0.15, 0.1, 0.4)">H2</div>
+    <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:180px; top:40px; width:80px; height:310px;" onclick="setFilterAndHighlight('h3', 1.1, 2.6, 0.15, 0.21, 0.1, 0.4)">H3</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:270px; top:40px; width:70px; height:210px;" onclick="setFilterAndHighlight('h4', 1.3, 2.6, 0.21, 0.29, 0.1, 0.4)">H4</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:180px; top:350px; width:36px; height:70px;" onclick="setFilterAndHighlight('c1', 0.55, 0.9, 0.12, 0.15, 0.1, 0.4)">C1</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:220px; top:350px; width:70px; height:60px;" onclick="setFilterAndHighlight('c2', 0.7, 1.1, 0.15, 0.21, 0.1, 0.4)">C2</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:270px; top:330px; width:80px; height:30px;" onclick="setFilterAndHighlight('d1', 0.9, 1.05, 0.21, 0.26, 0.1, 0.4)">D1</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:270px; top:240px; width:105px; height:90px;" onclick="setFilterAndHighlight('d2', 1.05, 1.55, 0.21, 0.29, 0.1, 0.4)">D2</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:380px; top:240px; width:110px; height:90px;" onclick="setFilterAndHighlight('e', 1.1, 1.9, 0.29, 0.39, 0.1, 0.4)">E</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:351px; top:40px; width:140px; height:200px;" onclick="setFilterAndHighlight('g1', 1.9, 3.0, 0.29, 0.405, 0.1, 0.4)">G1</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:130px; top:420px; width:80px; height:50px;" onclick="setFilterAndHighlight('a1', 0.2, 0.55, 0.125, 0.15, 0.1, 0.3)">A1</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:210px; top:410px; width:80px; height:60px;" onclick="setFilterAndHighlight('a2', 0.2, 0.7, 0.15, 0.21, 0.2, 0.4)">A2</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:300px; top:360px; width:50px; height:110px;" onclick="setFilterAndHighlight('a3', 0.2, 0.9, 0.21, 0.26, 0.2, 0.5)">A3</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:360px; top:330px; width:133px; height:100px;" onclick="setFilterAndHighlight('b', 0.55, 1.05, 0.26, 0.37, 0.2, 0.4)">B</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:500px; top:290px; width:240px; height:110px;" onclick="setFilterAndHighlight('f1', 1.25, 1.9, 0.39, 0.58, 0.1, 0.4)">F1</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:500px; top:170px; width:240px; height:120px;" onclick="setFilterAndHighlight('f2', 1.9, 2.4, 0.405, 0.6, 0.1, 0.4)">F2</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:500px; top:40px; width:170px; height:130px;" onclick="setFilterAndHighlight('g2', 2.4, 3.0, 0.405, 0.485, 0.1, 0.4)">G2</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>
-<div class="filters">
+<!-- FILTERS EN PROJECTEN ZET JE HIERONDER -->
-  <label>Filter op FSI</label>
-  <div class="range-group">
+<div class="filters compact-filters">
-    <output id="fsi_min_val">0</output>
+  <div class="range-row">
-    <input type="range" id="fsi_min" min="0" max="4" step="0.1" value="0" oninput="fsi_min_val.value = this.value">
+    <label for="fsi_min">FSI</label>
-    <input type="range" id="fsi_max" min="0" max="4" step="0.1" value="4" oninput="fsi_max_val.value = this.value">
+    <input type="range" id="fsi_min" min="0" max="4" step="0.1" value="0" oninput="fsi_min_val.value = this.value; updateFilter()">
-    <output id="fsi_max_val">4</output>
+    <input type="range" id="fsi_max" min="0" max="4" step="0.1" value="4" oninput="fsi_max_val.value = this.value; updateFilter()">
+    <output id="fsi_min_val">0</output> – <output id="fsi_max_val">4</output>
   </div>
-  <label>Filter op GSI</label>
+  <div class="range-row">
-  <div class="range-group">
+    <label for="gsi_min">GSI</label>
-    <output id="gsi_min_val">0</output>
+    <input type="range" id="gsi_min" min="0" max="1" step="0.01" value="0" oninput="gsi_min_val.value = this.value; updateFilter()">
-    <input type="range" id="gsi_min" min="0" max="1" step="0.01" value="0" oninput="gsi_min_val.value = this.value">
+    <input type="range" id="gsi_max" min="0" max="1" step="0.01" value="1" oninput="gsi_max_val.value = this.value; updateFilter()">
-    <input type="range" id="gsi_max" min="0" max="1" step="0.01" value="1" oninput="gsi_max_val.value = this.value">
+    <output id="gsi_min_val">0</output> – <output id="gsi_max_val">1</output>
-    <output id="gsi_max_val">1</output>
   </div>
-  <label>Filter op OSR</label>
+  <div class="range-row">
-  <div class="range-group">
+    <label for="osr_min">OSR</label>
-    <output id="osr_min_val">0</output>
+    <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_min" min="0" max="4" step="0.1" value="0" oninput="osr_min_val.value = this.value">
+    <input type="range" id="osr_max" min="0" max="4" step="0.1" value="4" oninput="osr_max_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">
+    <output id="osr_min_val">0</output> – <output id="osr_max_val">4</output>
-    <output id="osr_max_val">4</output>
   </div>
 </div>
@@ Line 194: / Line 221: @@
   </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>
+function toggleOverlay() {
+  const overlay = document.getElementById('zone-overlay');
+  overlay.style.display = overlay.style.display === 'none' ? 'block' : 'none';
+}
 function setFilterAndHighlight(zoneId, fsiMin, fsiMax, gsiMin, gsiMax, osrMin, osrMax) {
   document.getElementById('fsi_min').value = fsiMin;
@@ Line 215: / Line 267: @@
   if (selected) selected.classList.add('active');
 }
 function updateFilter() {
   const fsiMin = parseFloat(document.getElementById('fsi_min').value);
@@ Line 222: / Line 275: @@
   const osrMin = parseFloat(document.getElementById('osr_min').value);
   const osrMax = parseFloat(document.getElementById('osr_max').value);
+  const projectBlokken = document.querySelectorAll('.projectblok');
   const lijst = document.getElementById('projectlist');
   lijst.innerHTML = '';
-  document.querySelectorAll('.projectblok').forEach(block => {
-    const fsi = parseFloat(block.dataset.fsi);
+  projectBlokken.forEach(blok => {
-    const gsi = parseFloat(block.dataset.gsi);
+    const fsi = parseFloat(blok.dataset.fsi);
-    const osr = parseFloat(block.dataset.osr);
+    const gsi = parseFloat(blok.dataset.gsi);
-    const visible = fsi >= fsiMin && fsi <= fsiMax && gsi >= gsiMin && gsi <= gsiMax && osr >= osrMin && osr <= osrMax;
+    const osr = parseFloat(blok.dataset.osr);
-    block.style.display = visible ? 'block' : 'none';
-    if (visible) {
+    const zichtbaar =
-      const naam = block.querySelector('h2').textContent;
+      fsi >= fsiMin && fsi <= fsiMax &&
-      const id = block.id;
+      gsi >= gsiMin && gsi <= gsiMax &&
-      const overzicht = block.querySelector('img')?.src || '';
+      osr >= osrMin && osr <= osrMax;
+    blok.style.display = zichtbaar ? 'block' : 'none';
+    if (zichtbaar) {
       const li = document.createElement('li');
-      const a = document.createElement('a');
+      const link = document.createElement('a');
-      a.href = '#' + id;
+      const img = blok.querySelector('img');
-      a.textContent = naam;
+      link.href = '#' + blok.id;
-      const img = document.createElement('img');
+      link.textContent = blok.querySelector('h2').textContent;
-      img.src = overzicht;
+      if (img) {
-      li.appendChild(img);
+        const mini = document.createElement('img');
-      li.appendChild(a);
+        mini.src = img.src;
+        li.appendChild(mini);
+      }
+      li.appendChild(link);
       lijst.appendChild(li);
     }
@@ Line 247: / Line 309: @@
 }
-['fsi_min', 'fsi_max', 'gsi_min', 'gsi_max', 'osr_min', 'osr_max'].forEach(id => {
+function resetFilters() {
-  document.getElementById(id).addEventListener('input', updateFilter);
+  document.getElementById('fsi_min').value = 0;
-});
+  document.getElementById('fsi_max').value = 4;
+  document.getElementById('gsi_min').value = 0;
+  document.getElementById('gsi_max').value = 1;
+  document.getElementById('osr_min').value = 0;
+  document.getElementById('osr_max').value = 4;
-updateFilter();
+  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';
+  document.getElementById('osr_min_val').textContent = '0';
+  document.getElementById('osr_max_val').textContent = '4';
+  updateFilter();
+}
+document.addEventListener("DOMContentLoaded", updateFilter);
 </script>
 </html>