User Tools

Site Tools

handleiding_nieuw:sub_kengetallenbeelden

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
handleiding_nieuw:sub_kengetallenbeelden [2025/04/15 10:07] – external edit 127.0.0.1handleiding_nieuw:sub_kengetallenbeelden [2025/04/18 12:01] (current) – support
Line 31: Line 31:
     border-color: red;     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;     display: flex;
     align-items: center;     align-items: center;
-    gap: 0.5em;+    gap: 0.8em;
   }   }
-  .range-group input[type="range"] { +  .range-row label {
-    flex: 1; +
-  } +
-  .range-group output {+
     width: 40px;     width: 40px;
-    text-align: right;+    font-weight: bold; 
 +  } 
 +  .range-row input[type="range"] { 
 +    flex: 1;
   }   }
   .overzicht {   .overzicht {
Line 102: Line 120:
 </style> </style>
  
-<div class="spacematrix-wrapper">+<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>   <button onclick="toggleOverlay()">Toon/verberg zones</button>
 +</div>
 +
 +<div class="spacematrix-wrapper">
   <img id="spacematrix-img"   <img id="spacematrix-img"
        src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png"        src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png"
Line 110: Line 135:
   <div id="zone-overlay" class="zone-overlay">   <div id="zone-overlay" class="zone-overlay">
     <!-- alle zones -->     <!-- alle zones -->
-    <div class="zone" style="left:130px; top:420px; width:80px; height:50px;" onclick="setFilterAndHighlight('a1', 0.2, 0.55, 0.125, 0.15, 0.3, 1)">A1</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:210px; top:410px; width:80px; height:60px;" onclick="setFilterAndHighlight('a2', 0.2, 0.7, 0.15, 0.21, 0.3, 1)">A2</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:360px; width:50px; height:110px;" onclick="setFilterAndHighlight('a3', 0.2, 0.9, 0.21, 0.26, 0.3, 1)">A3</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:360px; top:330px; width:133px; height:100px;" onclick="setFilterAndHighlight('b', 0.55, 1.05, 0.26, 0.37, 0.3, 1)">B</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:350px; width:36px; height:70px;" onclick="setFilterAndHighlight('c1', 0.55, 0.9, 0.12, 0.15, 0.3, 1)">C1</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:220px; top:350px; width:70px; height:60px;" onclick="setFilterAndHighlight('c2', 0.7, 1.1, 0.15, 0.21, 0.3, 1)">C2</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:330px; width:80px; height:30px;" onclick="setFilterAndHighlight('d1', 0.9, 1.05, 0.21, 0.26, 0.3, 1)">D1</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:270px; top:240px; width:105px; height:90px;" onclick="setFilterAndHighlight('d2', 1.05, 1.55, 0.21, 0.29, 0.3, 1)">D2</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:380px; top:240px; width:110px; height:90px;" onclick="setFilterAndHighlight('e', 1.1, 1.9, 0.29, 0.39, 0.3, 1)">E</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:290px; width:240px; height:110px;" onclick="setFilterAndHighlight('f1', 1.25, 1.9, 0.39, 0.58, 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:170px; width:240px; height:120px;" onclick="setFilterAndHighlight('f2', 1.9, 2.4, 0.405, 0.6, 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:351px; top:40px; width:140px; height:200px;" onclick="setFilterAndHighlight('g1', 1.9, 3.0, 0.29, 0.405, 0.3, 1)">G1</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:170px; height:130px;" onclick="setFilterAndHighlight('g2', 2.4, 3.0, 0.405, 0.485, 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:430px;" onclick="setFilterAndHighlight('h1', 0.55, 2.6, 0.05, 0.12, 0.3, 1)">H1</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:380px;" onclick="setFilterAndHighlight('h2', 0.9, 2.6, 0.12, 0.15, 0.3, 1)">H2</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:80px; height:310px;" onclick="setFilterAndHighlight('h3', 1.1, 2.6, 0.15, 0.21, 0.3, 1)">H3</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:270px; top:40px; width:70px; height:210px;" onclick="setFilterAndHighlight('h4', 1.3, 2.6, 0.21, 0.29, 0.3, 1)">H4</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> </div>
Line 132: Line 157:
 <!-- FILTERS EN PROJECTEN ZET JE HIERONDER --> <!-- FILTERS EN PROJECTEN ZET JE HIERONDER -->
  
-<div class="filters"> +<div class="filters compact-filters"> 
-  <label>Filter op FSI</label> +  <div class="range-row"> 
-  <div class="range-group"> +    <label for="fsi_min">FSI</label> 
-    <output id="fsi_min_val">0</output> +    <input type="range" id="fsi_min" min="0" max="4" step="0.1" value="0" oninput="fsi_min_val.value = this.value; updateFilter()"> 
-    <input type="range" id="fsi_min" min="0" max="4" step="0.1" value="0" oninput="fsi_min_val.value = this.value"> +    <input type="range" id="fsi_max" min="0" max="4" step="0.1" value="4" oninput="fsi_max_val.value = this.value; updateFilter()"> 
-    <input type="range" id="fsi_max" min="0" max="4" step="0.1" value="4" oninput="fsi_max_val.value = this.value"> +    <output id="fsi_min_val">0</output> – <output id="fsi_max_val">4</output>
-    <output id="fsi_max_val">4</output>+
   </div>   </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>   </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>
 </div> </div>
Line 188: Line 210:
     <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_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" />     <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>
   <div class="kengetallen">   <div class="kengetallen">
Line 225: Line 267:
   if (selected) selected.classList.add('active');   if (selected) selected.classList.add('active');
 } }
 +
 +function updateFilter() {
 +  const fsiMin = parseFloat(document.getElementById('fsi_min').value);
 +  const fsiMax = parseFloat(document.getElementById('fsi_max').value);
 +  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');
 +  const lijst = document.getElementById('projectlist');
 +  lijst.innerHTML = '';
 +
 +  projectBlokken.forEach(blok => {
 +    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 &&
 +      osr >= osrMin && osr <= osrMax;
 +
 +    blok.style.display = zichtbaar ? 'block' : 'none';
 +
 +    if (zichtbaar) {
 +      const li = document.createElement('li');
 +      const link = document.createElement('a');
 +      const img = blok.querySelector('img');
 +      link.href = '#' + blok.id;
 +      link.textContent = blok.querySelector('h2').textContent;
 +      if (img) {
 +        const mini = document.createElement('img');
 +        mini.src = img.src;
 +        li.appendChild(mini);
 +      }
 +      li.appendChild(link);
 +      lijst.appendChild(li);
 +    }
 +  });
 +}
 +
 +function resetFilters() {
 +  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;
 +
 +  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> </script>
 </html> </html>
 +
handleiding_nieuw/sub_kengetallenbeelden.1744711673.txt.gz · Last modified: 2025/04/15 10:07 by 127.0.0.1