roadsketch: higher-contrast dark basemap (Esri Dark Gray) + brighter match lines

CARTO dark_all rendered the street network as near-invisible dark-gray on
black. Swapped to Esri World Dark Gray Base: streets are clearly legible
while the theme stays dark (validated by a headless-Chrome A/B of 5 dark
options + a Gemini visual review — Esri unfiltered won on legibility-while-
staying-moody vs contrast-filtered CARTO/Esri, which read as muted daytime).

- basemap → Esri World_Dark_Gray_Base (maxNativeZoom 16, upscale beyond),
attribution updated to Esri
- map bg #0e0f13 → #26292d so tile-load / edges don't flash black against
the gray basemap
- match polylines factored to shared STYLE_SELECTED/STYLE_IDLE; idle line
brightened (#4a90d9@0.35 → #5a9fe0@0.6) so non-selected matches read on
the lighter basemap

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Hollings 2 days ago (Jul 19, 2026, 9:29 AM -0700) b2aea6ba acc3a2ef

+24 -16

2 changed files

Expand all

web

main.js

style.css

+21 -14

web/main.js

··· 15 15 touchRotate: false, 16 16 bearing: 0, 17 17 }).setView([38.8, -80.5], 7); 18 - L.tileLayer("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", { 19 - attribution: "© OpenStreetMap contributors © CARTO", 20 - maxZoom: 19, 21 - }).addTo(map); 18 + // Esri "World Dark Gray Base": a dark reference basemap whose street network 19 + // is clearly legible (CARTO dark_all rendered roads as near-invisible dark 20 + // gray on black). Raster tiles top out at native z16, so upscale beyond that 21 + // rather than 404. Tile order is {z}/{y}/{x} (Esri convention). 22 + L.tileLayer( 23 + "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}", 24 + { 25 + attribution: 26 + "Tiles © Esri — Esri, HERE, Garmin, © OpenStreetMap contributors", 27 + maxZoom: 19, 28 + maxNativeZoom: 16, 29 + } 30 + ).addTo(map); 22 31 23 32 let matchLayers = []; 24 33 let activeIdx = -1; 25 34 let lastStroke = []; // canvas-coords stroke of the current query (y-down) 35 + 36 + // selected (the focused match) vs the other candidate matches. The idle style 37 + // is bright/opaque enough to read on the dark basemap while still sitting 38 + // clearly behind the orange selection. 39 + const STYLE_SELECTED = { color: "#ffb454", weight: 5, opacity: 1 }; 40 + const STYLE_IDLE = { color: "#5a9fe0", weight: 3, opacity: 0.6 }; 26 41 27 42 // ---- draw pad -------------------------------------------------------- 28 43 let stroke = []; ··· 235 250 div.addEventListener("click", () => selectResult(i, results)); 236 251 resultsEl.appendChild(div); 237 252 238 - const line = L.polyline(r.latlngs, { 239 - color: "#4a90d9", 240 - weight: 3, 241 - opacity: 0.35, 242 - }).addTo(map); 253 + const line = L.polyline(r.latlngs, STYLE_IDLE).addTo(map); 243 254 line.on("click", () => selectResult(i, results)); 244 255 matchLayers.push(line); 245 256 }); ··· 253 264 if (j === i) el.scrollIntoView({ block: "nearest", inline: "nearest" }); 254 265 }); 255 266 matchLayers.forEach((l, j) => { 256 - l.setStyle( 257 - j === i 258 - ? { color: "#ffb454", weight: 5, opacity: 1 } 259 - : { color: "#4a90d9", weight: 3, opacity: 0.35 } 260 - ); 267 + l.setStyle(j === i ? STYLE_SELECTED : STYLE_IDLE); 261 268 if (j === i) l.bringToFront(); 262 269 }); 263 270 if (map.setBearing) map.setBearing(alignBearing(lastStroke, results[i].latlngs));

+3 -2

web/style.css

··· 79 79 80 80 footer { padding: 8px 16px; font-size: 11px; color: #4a4d58; border-top: 1px solid #2a2c34; } 81 81 82 - #map { flex: 1; background: #0e0f13; } 83 - .leaflet-container { background: #0e0f13; } 82 + /* bg matches Esri Dark Gray's base tone so tile-load / edges don't flash black */ 83 + #map { flex: 1; background: #26292d; } 84 + .leaflet-container { background: #26292d; } 84 85 85 86 /* ---- mobile: stack pad → results strip → map ---------------------- */ 86 87 @media (max-width: 720px) {

Configure Feed

Configure Feed