← back to Nationalrealestate

USRE Map: on-map active-filter indicator (count + reset) so filtered state is legible with the drawer closed (v0.9.1)

b9110d88dce96dd5afc7a74fbb8bc789455d16eb · 2026-07-26 20:27:16 -0700 · Steve

Files touched

• M package-lock.json
• M package.json
• M public/index.html

Diff

commit b9110d88dce96dd5afc7a74fbb8bc789455d16eb
Author: Steve <steve@designerwallcoverings.com>
Date:   Sun Jul 26 20:27:16 2026 -0700

    USRE Map: on-map active-filter indicator (count + reset) so filtered state is legible with the drawer closed (v0.9.1)
---
 package-lock.json |  4 ++--
 package.json      |  2 +-
 public/index.html | 35 +++++++++++++++++++++++++++--------
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f01cf3f..575680b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nationalrealestate",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nationalrealestate",
-      "version": "0.9.0",
+      "version": "0.9.1",
       "dependencies": {
         "better-sqlite3": "^13.0.1",
         "dotenv": "^16.4.5",
diff --git a/package.json b/package.json
index 973d0f8..42d4cf1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nationalrealestate",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "private": true,
   "type": "module",
   "description": "USRealEstate — national U.S. residential market explorer. Free-data v1 (Redfin Data Center, Zillow Research, Census ACS, FHFA). Internal analyst tool behind basic auth.",
diff --git a/public/index.html b/public/index.html
index 938f03c..f76060c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -59,6 +59,14 @@
   #mapfilters .mf-chip:hover b{color:var(--bg);}
   #mapfilters #mf-count{font-size:12px;color:var(--fg);margin-top:8px;font-variant-numeric:tabular-nums;}
   #mapfilters #mf-count b{color:var(--gold);}
+  /* on-map active-filter indicator (top-center; shown only when Map filters are active) */
+  #mapfbar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:1000;align-items:center;gap:12px;
+    background:rgba(17,21,29,.94);border:1px solid var(--gold);border-radius:20px;padding:6px 8px 6px 16px;
+    font-size:12px;color:var(--muted);white-space:nowrap;backdrop-filter:blur(6px);box-shadow:0 2px 12px rgba(0,0,0,.5);}
+  #mapfbar b{color:var(--gold);font-variant-numeric:tabular-nums;}
+  #mapfbar #mapfbar-reset{background:var(--gold);color:var(--bg);border:0;border-radius:14px;
+    font-size:11px;font-weight:700;padding:4px 12px;cursor:pointer;}
+  #mapfbar #mapfbar-reset:hover{filter:brightness(1.08);}
 </style>
 <link rel="stylesheet" href="/nav-drawer.css">
 </head>
@@ -77,6 +85,7 @@
   <div id="metrics"></div>
 </div>
 <div id="map"></div>
+<div id="mapfbar" style="display:none"><span id="mapfbar-txt"></span><button id="mapfbar-reset" type="button">reset</button></div>
 <div id="legend"><div class="t">Loading…</div></div>
 <div id="status">loading county data…</div>
 <div id="natstrip" style="position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:1000;
@@ -183,16 +192,28 @@ function mapChipsHTML(){
     return `<span class="mf-chip" data-k="${m.key}">${md(m.key).label}: ${txt} <b>✕</b></span>`;
   }).join('');
 }
+function resetMapFilters(){
+  METRICS.forEach(m => fRanges[m.key] = { min: null, max: null });
+  const wrap = document.getElementById('mapfilters');
+  if (wrap) wrap.querySelectorAll('input').forEach(i => i.value = '');
+  saveMapFilters(); applyFilters();
+}
 function applyFilters(){
   if (geoLayer) geoLayer.setStyle(styleFeature);
   const chips = document.getElementById('mf-chips');
   if (chips) chips.innerHTML = mapChipsHTML();
   const el = document.getElementById('mf-count');
-  if (!el) return;
-  if (!anyFilterActive() || !filtersReady){ el.textContent = ''; return; }
+  const bar = document.getElementById('mapfbar');
+  if (!anyFilterActive() || !filtersReady){
+    if (el) el.textContent = '';
+    if (bar) bar.style.display = 'none';
+    return;
+  }
   let n = 0, tot = 0;
   (geojson && geojson.features || []).forEach(f => { tot++; if (filterPass(f.id)) n++; });
-  el.innerHTML = `<b>${n.toLocaleString()}</b> of ${tot.toLocaleString()} counties match`;
+  if (el) el.innerHTML = `<b>${n.toLocaleString()}</b> of ${tot.toLocaleString()} counties match`;
+  // on-map indicator so the filtered state is legible without opening the drawer
+  if (bar){ document.getElementById('mapfbar-txt').innerHTML = `<b>${n.toLocaleString()}</b> counties match · filters on`; bar.style.display = 'flex'; }
 }
 function buildMapFilters(){
   const host = document.getElementById('navDrawerBody');
@@ -212,11 +233,9 @@ function buildMapFilters(){
     row.querySelector('.mf-min').addEventListener('input', e => { fRanges[k].min = e.target.value ? +e.target.value : null; saveMapFilters(); applyFilters(); });
     row.querySelector('.mf-max').addEventListener('input', e => { fRanges[k].max = e.target.value ? +e.target.value : null; saveMapFilters(); applyFilters(); });
   });
-  wrap.querySelector('#mf-reset').addEventListener('click', () => {
-    METRICS.forEach(m => fRanges[m.key] = { min: null, max: null });
-    wrap.querySelectorAll('input').forEach(i => i.value = '');
-    saveMapFilters(); applyFilters();
-  });
+  wrap.querySelector('#mf-reset').addEventListener('click', resetMapFilters);
+  const bar = document.getElementById('mapfbar');
+  if (bar) bar.querySelector('#mapfbar-reset').addEventListener('click', resetMapFilters);
   // active-filter chips: click ✕ to clear that metric's range
   wrap.querySelector('#mf-chips').addEventListener('click', e => {
     const chip = e.target.closest('.mf-chip'); if (!chip) return;

← bb39923 USRE Map: persist county filters to localStorage + active-fi  ·  back to Nationalrealestate  ·  USRE grid: URL-shareable filters — sync filters/search/sort c246a3b →