Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 9 Projects Releases Packages Wiki Activity Actions

Picker map: bigger roads/labels, more color (Voyager, upscaled + saturated)

Browse source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B3Q2EkHHnTUX2BfhV5q1Zc
This commit is contained in:
Emi Griffith 2026-07-11 01:19:52 -07:00
parent dade6c3cb4
commit acaacd492e
2 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
static/mappicker.js
View file

@ -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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
}).addTo(map);
// Branded accent teardrop pin (the same glyph the Find button uses), styled

2
static/style.css
View file

@ -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)); }