Map page: Top Markets strip (top-8 ranked, clickable to detail) + Brokers nav link

dd7b00236e14524ceba07f0cefca4f7a0d5f7bce · 2026-07-21 15:01:42 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit dd7b00236e14524ceba07f0cefca4f7a0d5f7bce
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jul 21 15:01:42 2026 -0700

    Map page: Top Markets strip (top-8 ranked, clickable to detail) + Brokers nav link
---
 public/index.html | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/public/index.html b/public/index.html
index b7a6ba2..cd64303 100644
--- a/public/index.html
+++ b/public/index.html
@@ -46,6 +46,7 @@
   <nav>
     <a href="/" class="active">Map</a>
     <a href="/markets.html">Markets</a>
+    <a href="/brokers.html">Brokers</a>
     <a href="/watchlist.html">Watchlist</a>
     <a href="/admin.html">Admin</a>
   </nav>
@@ -54,6 +55,12 @@
 <div id="map"></div>
 <div id="legend"><div class="t">Loading…</div></div>
 <div id="status">loading county data…</div>
+<div id="topmkts" style="position:fixed;right:14px;top:64px;z-index:1000;background:rgba(17,21,29,.94);
+  border:1px solid var(--line);border-radius:10px;padding:10px 12px;max-width:250px;display:none;">
+  <div style="font-size:12px;color:var(--gold);font-weight:700;margin-bottom:6px;">Top Markets
+    <a href="/markets.html" style="float:right;color:var(--muted);font-weight:400;font-size:11px;text-decoration:none;">all →</a></div>
+  <div id="topmkts-list"></div>
+</div>
 
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
         integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
@@ -160,6 +167,22 @@ function onEachFeature(f, layer){
   layer.on('click', () => { location.href = `/market.html?key=county:${f.id}`; });
 }
 
+async function loadTopMarkets(){
+  try {
+    const d = await fetch('/api/markets?type=county').then(r => r.json());
+    const top = (d.rows || []).filter(r => r.rank).sort((a, b) => a.rank - b.rank).slice(0, 8);
+    if (!top.length) return;
+    document.getElementById('topmkts-list').innerHTML = top.map(r => `
+      <a href="/market.html?key=${r.key}" style="display:flex;gap:8px;align-items:baseline;
+        text-decoration:none;color:var(--fg);font-size:12px;padding:2px 0;">
+        <span style="color:var(--muted);font-variant-numeric:tabular-nums;width:16px;">${r.rank}</span>
+        <span style="flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${r.name}, ${r.state}</span>
+        <span style="color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;">${r.opportunity_score.toFixed(1)}</span>
+      </a>`).join('');
+    document.getElementById('topmkts').style.display = 'block';
+  } catch {}
+}
+
 (async function init(){
   renderButtons();
   const [geo] = await Promise.all([
@@ -168,6 +191,7 @@ function onEachFeature(f, layer){
   ]);
   geojson = geo;
   geoLayer = L.geoJSON(geo, { style: styleFeature, onEachFeature }).addTo(map);
+  loadTopMarkets();
 })();
 </script>
 </body>

← bf3451d auto-save: 2026-07-21T14:38:01 (1 files) — src/enrich/firm_w · back to Nationalrealestate · Compare Markets page: up to 4 markets side-by-side (best-val 502de06 →