Davide Scaini
3.5 KiB
BincioPlanner — CLAUDE.md
Route planning tool for bincio members. Intentionally separate from bincio_activity — different product scope, different lifecycle, no shared codebase.
Stack
- Vite + Svelte 5 (no Astro — single page, no SSR needed)
- MapLibre GL JS for the map
- Brouter public API for routing (
https://brouter.de/brouter) - Pure static output — no backend, no Python
Dev & deploy
# local dev (requires bincio_activity running on localhost:4321)
npm run dev
# deploy to planner.bincio.org
bash deploy.sh
.env.local sets VITE_ACTIVITY_URL=http://localhost:4321 for dev.
deploy.sh overrides it with https://activity.bincio.org for production.
Auth
On load, fetches $VITE_ACTIVITY_URL/api/me with credentials: 'include'.
The bincio session cookie is scoped to .bincio.org so it works across subdomains.
Non-authed users are redirected to the bincio login page.
The bincio_activity server must allow CORS from planner.bincio.org — this is handled by the regex in bincio/serve/server.py.
What's implemented
- Click map to place numbered draggable waypoints
- Route computed via Brouter, drawn on map (debounced 400ms)
- Drag waypoint to move — re-routes correctly
- Profile selector: Road / Gravel / MTB / Hiking
- "Close loop" button (duplicates first waypoint as last)
- "Clear all" button
- Route stats: distance + elevation gain
- GPX export (generated from Brouter GeoJSON response)
- Elevation chart below map (SVG, responsive)
- Race-calendar palette (Giro/Tour/Vuelta/default), mirrors bincio_activity
- Auth gate with redirect to bincio login
- Deployed to
https://planner.bincio.orgwith HTTPS
Activity-year colour palette
Year-coded colours used for GPX reference tracks (and potentially other per-year data). Defined as GPX_PALETTE in Planner.svelte.
| Year | Color | Description |
|---|---|---|
| 2014 | hsl(265, 38%, 52%) |
muted purple |
| 2015 | hsl(248, 40%, 53%) |
slate-indigo |
| 2016 | hsl(232, 43%, 54%) |
slate-blue |
| 2017 | hsl(208, 48%, 52%) |
steel blue |
| 2018 | hsl(185, 52%, 50%) |
teal |
| 2019 | hsl(165, 50%, 49%) |
green-teal |
| 2020 | hsl(145, 48%, 47%) |
green |
| 2021 | hsl(100, 57%, 49%) |
yellow-green |
| 2022 | hsl(50, 72%, 52%) |
amber |
| 2023 | hsl(34, 75%, 53%) |
orange |
| 2024 | hsl(16, 77%, 56%) |
red-orange |
| 2025 | hsl(5, 70%, 57%) |
warm coral |
| 2026 | #60a5fa |
bright blue |
| — | #71717a |
grey (undated) |
What's missing (from original plan)
- Map tile switcher — toggle between OSM and OpenCycleMap (Thunderforest, requires free API key). OpenCycleMap is significantly better for route planning.
- Drag-to-modify route polyline — click and drag a point on the route line to insert a new waypoint. Deferred: requires hit-testing which segment was dragged, then inserting a waypoint at the right index. Doable but fiddly.
- Heatmap overlay — nice-to-have. Our own data is too sparse (~20 users). Public options: Strava global heatmap (legally gray), Waymarked Trails (clean, OSM-based).
- Palette flash — the race-calendar palette runs in
onMount, so there's a brief flash from the default CSS vars to the correct palette. In bincio_activity this is avoided by an inline<script>in<head>. Svelte 5 makes this harder — low priority. - Self-hosted Brouter — public instance is fine for current traffic. Worth revisiting if usage grows or uptime becomes an issue.