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.org with HTTPS

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.

2.7 KiB Raw Blame History