Components
Reusable React components in components/.
LeafletMap
File: components/LeafletMap.tsx
Interactive map renderer using Leaflet + React-Leaflet.
Props
| Prop | Type | Description |
|---|---|---|
gpxUrl | string? | URL to fetch and render (uses /api/gpx proxy) |
enrichedData | EnrichedGpxData? | Pre-parsed data (skips fetch if provided) |
height | string? | CSS height (default: from parent) |
embedded | boolean? | Embedded mode (full viewport, no scroll) |
hoveredIndex | number? | Track point index to highlight |
preferredBaseLayer | string? | Active base layer ID |
onBaseLayerChange | (id: string) => void | Callback when user switches layers |
Features
- Draws track as red polyline (
#e74c3c) - Start marker (green circle), end marker (red circle)
- Waypoint markers with emoji icons
- Hover marker synced with elevation chart
- Cyclist emoji icon that flips direction based on track heading
- Base layer picker: Hybrid (Esri satellite), Topo (OpenTopoMap), IGN Raster
- Auto-fits bounds to track points
LeafletMapDynamic
File: components/LeafletMapDynamic.tsx
next/dynamic wrapper with ssr: false. Use this when you need a map in a server component context.
ElevationChart
File: components/ElevationChart.tsx
Custom SVG elevation profile with hover synchronization.
Props
| Prop | Type | Description |
|---|---|---|
points | EnrichedTrackPoint[] | Track points with cumulative distance and elevation |
stats | TrackStats | Elevation/distance statistics |
hoveredIndex | number | null | Currently hovered point |
onHover | (index: number | null) => void | Hover callback |
waypoints | Waypoint[]? | Waypoint markers to overlay |
Features
- Colored elevation bands (green at low altitude, red at high)
- Hover crosshair synced with map marker
- Animated cyclist emoji tilted based on slope
- Waypoint emoji markers at their track positions
- Peak and valley labels
- Responsive width via ResizeObserver
- Touch support
SpeedChart
File: components/SpeedChart.tsx
Custom SVG speed profile. Only rendered if the GPX has timestamp data.
Similar API to ElevationChart — shows smoothed speed (km/h) over distance.
ShareDropdown
File: components/ShareDropdown.tsx
Share popover with multiple platforms.
Props
| Prop | Type | Description |
|---|---|---|
gpxUrl | string | GPX URL to share |
pageUrl | string? | WordPress page URL |
anchor | string? | Anchor ID for deep-linking |
startLat | number | Track start latitude |
startLng | number | Track start longitude |
onShare | (action: ShareAction) => void | Callback for analytics |
triggerStyle | CSSProperties? | Custom trigger button styles |
Share channels
- Facebook (via
sharer.php) - X/Twitter (via
intent/tweet) - WhatsApp (via
wa.me) - Email (mailto)
- Garmin Connect (redirect to import)
- QR code (generated via
qrcodelibrary, custom colors) - Copy link (clipboard API)
- Open in new tab