Map marker clustering (leaflet.markercluster) — handles the full ~3k geocoded points smoothly; fallback to plain markers

0669d4ceb08d87355d9dff7395ab760952ff4d98 · 2026-07-20 13:59:21 -0700 · Steve

Files touched

M public/index.html

Diff

commit 0669d4ceb08d87355d9dff7395ab760952ff4d98
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Jul 20 13:59:21 2026 -0700

    Map marker clustering (leaflet.markercluster) — handles the full ~3k geocoded points smoothly; fallback to plain markers
---
 public/index.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 01fad3d..0e391de 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Sublease Marketplace · agentabrams</title>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
+<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
+<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
 <style>
   :root{--ink:#14181d;--mut:#6b7480;--line:#e7e9ee;--bg:#fbfbfc;--accent:#1a5f3c;--gold:#b08a3e;--sale:#2b6cb0;--cols:4}
   *{box-sizing:border-box}
@@ -104,6 +106,7 @@
 <footer><div class="wrap">CRUnifiedDB · gated access · listings aggregated from public broker/marketplace pages + partner data. Prices, cap rates & terms are broker-stated — verify in diligence.</div></footer>
 
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
 <script>
 const $=s=>document.querySelector(s), fmtSF=n=>n?Number(n).toLocaleString()+' SF':'—';
 const RENDER_CAP=300; let ALL=[], SPON=[], subOnly=false;
@@ -181,15 +184,17 @@ function cardHTML(l){
 function renderMap(points){
   const map=L.map('map').setView([34.05,-118.32],10);
   L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',{attribution:'© OpenStreetMap © CARTO',maxZoom:19}).addTo(map);
-  const pts=points.filter(p=>p.lat&&p.lng).slice(0,1600);
+  const pts=points.filter(p=>p.lat&&p.lng);
   $('#mapNote').textContent=`${pts.length.toLocaleString()} mapped`;
-  const g=L.featureGroup();
+  const cluster=(typeof L.markerClusterGroup==='function')?L.markerClusterGroup({chunkedLoading:true,maxClusterRadius:45}):L.featureGroup();
+  const bounds=[];
   pts.forEach(p=>{
     const sub=p.listing_kind==='sublease';
+    bounds.push([p.lat,p.lng]);
     L.circleMarker([p.lat,p.lng],{radius:sub?7:5,color:sub?'#1a5f3c':'#2b6cb0',fillColor:sub?'#1a5f3c':'#2b6cb0',fillOpacity:.7,weight:1})
-      .bindPopup(`<b>${p.title||'Listing'}</b><br>${[p.address,p.city].filter(Boolean).join(', ')}<br>${p.sponsor_name||'Market'} · ${p.listing_kind}${p.cap_rate?' · '+p.cap_rate+'% cap':''}<br><a href="${p.source_url}" target="_blank" rel="noopener">View →</a>`).addTo(g);
+      .bindPopup(`<b>${p.title||'Listing'}</b><br>${[p.address,p.city].filter(Boolean).join(', ')}<br>${p.sponsor_name||'Market'} · ${p.listing_kind}${p.cap_rate?' · '+p.cap_rate+'% cap':''}<br><a href="${p.source_url}" target="_blank" rel="noopener">View →</a>`).addTo(cluster);
   });
-  g.addTo(map); if(pts.length) map.fitBounds(g.getBounds().pad(.15));
+  map.addLayer(cluster); if(bounds.length) map.fitBounds(bounds,{padding:[40,40]});
 }
 async function loadBrokers(qs){
   const d=await fetch('/api/brokers?limit=48&q='+encodeURIComponent(qs)).then(r=>r.json());

← df5c9ac Individual broker profile pages (/brokers/:id + /api/brokers · back to Sublease Agentabrams · auto-save: 2026-07-20T14:02:31 (1 files) — tmp-shot-local.js 1d15a50 →