From acaacd492e90e4bb91d880e0eebae14fac0af1a8 Mon Sep 17 00:00:00 2001 From: Emi Griffith Date: Sat, 11 Jul 2026 01:19:52 -0700 Subject: [PATCH] Picker map: bigger roads/labels, more color (Voyager, upscaled + saturated) Follow-up to the picker restyle: use the colorful CARTO "Voyager" basemap in both themes (the monochrome dark-matter tiles read as "no color"), render tiles one zoom lower at 512px (tileSize 512 + zoomOffset -1, @2x for crispness) so roads and city labels are noticeably larger, and add a saturate/contrast filter on the tile pane to push the colors further. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01B3Q2EkHHnTUX2BfhV5q1Zc --- static/mappicker.js | 17 ++++++++--------- static/style.css | 2 ++ 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/static/mappicker.js b/static/mappicker.js index 0cab3e5..78ff00b 100644 --- a/static/mappicker.js +++ b/static/mappicker.js @@ -118,15 +118,14 @@ if (!map) { map = L.map(mapEl, { worldCopyJump: true, zoomControl: true }).setView([44.5, -95], 4); - // Themed CARTO basemap (no key needed) instead of the plain gray OSM raster: - // sleek "dark matter" tiles under the app's dark theme, colorful "voyager" - // tiles under the light theme, so the picker matches whichever is active. - const dark = matchMedia("(prefers-color-scheme: dark)").matches; - const tiles = dark - ? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png" - : "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"; - L.tileLayer(tiles, { - subdomains: "abcd", maxZoom: 20, detectRetina: true, + // Colorful CARTO "Voyager" basemap (no key needed) instead of the plain gray + // OSM raster — used in both themes for its richer road/land/water colors. + // Requesting tiles one zoom level lower and rendering them at 512px + // (tileSize 512 + zoomOffset -1) makes roads and city labels noticeably + // larger; @2x keeps them crisp while enlarged. A saturation boost (style.css) + // pushes the colors further. + L.tileLayer("https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png", { + subdomains: "abcd", maxZoom: 20, tileSize: 512, zoomOffset: -1, attribution: '© OpenStreetMap © CARTO', }).addTo(map); // Branded accent teardrop pin (the same glyph the Find button uses), styled diff --git a/static/style.css b/static/style.css index d1e1281..db7cc2c 100644 --- a/static/style.css +++ b/static/style.css @@ -683,6 +683,8 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; } box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .25); } .mp-map .leaflet-container { background: var(--surface-2); } +/* Push the CARTO Voyager colors further — bolder roads, greener parks, bluer water. */ +.mp-map .leaflet-tile-pane { filter: saturate(1.35) contrast(1.05); } /* Branded accent teardrop pin (an L.divIcon wrapping the Find-button glyph), replacing Leaflet's default blue raster marker. */ .mp-pin { background: none; border: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }