sfv-pool map: Zillow-style price pins colored by pool + keyless Esri dark tiles (CARTO now needs API key) + legend; shortlist deep-link fix (verified 953 checked off); sub-header + Pool field cleanup

28b3bb2dec87432e8a2921dca4362cb79de9a107 · 2026-08-26 09:56:17 -0700 · Steve Abrams

Files touched

M public/sfv-pool.html

Diff

commit 28b3bb2dec87432e8a2921dca4362cb79de9a107
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Aug 26 09:56:17 2026 -0700

    sfv-pool map: Zillow-style price pins colored by pool + keyless Esri dark tiles (CARTO now needs API key) + legend; shortlist deep-link fix (verified 953 checked off); sub-header + Pool field cleanup
---
 public/sfv-pool.html | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/public/sfv-pool.html b/public/sfv-pool.html
index 06803a1..5dd0eed 100644
--- a/public/sfv-pool.html
+++ b/public/sfv-pool.html
@@ -85,6 +85,14 @@
     .mpop .p { font-size:16px; font-weight:700; }
     .mpop a { color:#58a6ff; }
     .viewseg button.on[data-view="map"] { background:#1f6feb; }
+    /* Zillow/Redfin-style price pins */
+    .pricepin { display:inline-block; padding:3px 8px; border-radius:13px; font-size:12px; font-weight:700;
+      color:#fff; white-space:nowrap; box-shadow:0 1px 5px rgba(0,0,0,.55); border:1.5px solid rgba(255,255,255,.35); cursor:pointer; }
+    .pricepin.pool { background:#2f9e44; } .pricepin.nopool { background:#1971c2; } .pricepin.pending { background:#5c636a; }
+    .pricepin:hover { filter:brightness(1.12); z-index:1000; }
+    .maplegend { position:absolute; bottom:14px; left:14px; z-index:500; background:rgba(22,27,34,.92);
+      border:1px solid #2a313c; border-radius:8px; padding:8px 10px; font-size:11px; color:#c9d1d9; }
+    .maplegend b { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:middle; }
   </style>
 </head>
 <body>
@@ -277,15 +285,24 @@ function renderMap() {
   if (!window.L) return;
   if (!_map) {
     _map = L.map('map', { scrollWheelZoom:true }).setView([34.19,-118.44], 11); // SFV center
-    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
-      { attribution:'© OpenStreetMap © CARTO', maxZoom:19 }).addTo(_map);
-    _cluster = L.markerClusterGroup({ maxClusterRadius:45 }); _map.addLayer(_cluster);
+    // Esri dark-gray canvas — free, NO API KEY required (attribution only)
+    L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}',
+      { attribution:'Tiles © Esri', maxZoom:16 }).addTo(_map);
+    _cluster = L.layerGroup(); _map.addLayer(_cluster);   // no clustering — show every price pin (Zillow-style)
+    const lg = L.control({ position:'bottomleft' });
+    lg.onAdd = () => { const d = L.DomUtil.create('div','maplegend');
+      d.innerHTML = '<b style="background:#2f9e44"></b>Pool &nbsp; <b style="background:#1971c2"></b>No pool &nbsp; <b style="background:#5c636a"></b>Pending'; return d; };
+    lg.addTo(_map);
   }
   _cluster.clearLayers();
-  const color = t => t==='true' ? '#3fb950' : t==='false' ? '#58a6ff' : '#8b949e';
+  const cls = t => t==='true' ? 'pool' : t==='false' ? 'nopool' : 'pending';
+  const priceTag = n => n>=1e6 ? '$'+(n/1e6).toFixed(2).replace(/\.?0+$/,'')+'M' : '$'+Math.round(n/1000)+'K';
   const pts = [];
   currentRows().filter(r=>r.lat && r.lng).forEach(r => {
-    const m = L.circleMarker([r.lat, r.lng], { radius:7, weight:1, color:'#0e1116', fillColor:color(r._pool), fillOpacity:.92 });
+    const icon = L.divIcon({ className:'pricepin-wrap',
+      html:`<span class="pricepin ${cls(r._pool)}">${priceTag(r.price)}</span>`,
+      iconSize:null, iconAnchor:[26,12] });
+    const m = L.marker([r.lat, r.lng], { icon });
     const pp = r.ppsf ? '$'+(+r.ppsf).toLocaleString()+'/sqft' : '';
     const lot = r.lot_size ? String(r.lot_size).replace(/ square feet/i,' sf') : '';
     const img = r.photo_url ? `<img src="${r.photo_url}">` : '';

← bb5a372 Fix ?shortlist=sfv-pool (robust reload via native localStora · back to Commercialrealestate · chore: broker-extract helper + two-section pool/land report, 68140d8 →