Zwift Web Route Elevation Chart

WHAT IT DOES This userscript transforms your Zwift route selection into an elevation analysis dashboard. It reads route data from the page—extracting route names, distances, elevation gains, and difficulty ratings—and displays an elevation chart overlay on every route. The chart shows the elevation profile with color-coded grade indicators: green for flat sections (8%). A summary panel shows total elevation gain, average grade, max grade, and climbing segments count. The difficulty level is displayed with a color-coded badge: Easy (green), Moderate (yellow), Hard (orange), or Very Hard (red). A one-click button opens the route details page. This is invaluable for Zwift cyclists, indoor trainers, and virtual riders who want to understand route difficulty, plan their workouts, and choose routes that match their fitness goals. WHERE IT RUNS The script runs on all Zwift web application pages at *.zwift.com/*, with automatic detection of route pages, course lists, and any page displaying route information. It works across all Zwift interfaces by using multiple selector strategies to find route items, names, distances, elevation gains, and difficulty ratings. The script detects dynamic content loading and re-applies the elevation chart overlay when the route list updates. It runs across the entire Zwift domain, ensuring coverage whether you're viewing the main route list, a specific course collection, or a filtered route view. HOW TO USE Install the script via the BotGentz extension and navigate to any Zwift route page or course list. Elevation chart overlays will appear automatically on every route. Each route displays a chart showing the elevation profile, grade color coding, and key metrics including distance, elevation gain, average grade, and max grade. The difficulty badge shows the overall difficulty level. A summary panel shows total elevation gain, total distance, and the route with the biggest climb. Click the "View Route" button on any route to open its details page in a new tab. Use the panel controls to customize your experience: toggle the elevation overlay on or off, show or hide grade color coding, enable or disable the summary panel, show or hide the elevation chart, or compare routes by difficulty. The "Refresh" button manually rescans the page for updated route data, and the "Copy summary" button exports the route summary to your clipboard. THE MECHANISM - ROUTE EXTRACTION, ELEVATION PROFILE GENERATION, AND CHART RENDERING This script identifies route data by scanning each route item using a cascading selector strategy. It extracts route names from name elements, distances from distance elements, elevation gains from elevation elements, and difficulty ratings from difficulty elements. When distance and elevation gain are available, the average grade is calculated as (elevation / (distance × 1000)) × 100. The max grade is estimated from the average grade or extracted from max grade elements. The elevation profile is generated using a simulated profile based on the elevation gain and distance, creating a realistic-looking chart with a main climb and rolling sections. The chart is rendered using the HTML5 Canvas API with area fill, line chart, and grade color indicators. The badge is built as a DOM element with inline styles and inserted into the route card. THE PANEL The control panel appears as a floating, draggable element that you can position anywhere on the Zwift page. Drag by the header to reposition it, and the position is saved per site using GM_setValue so it stays where you left it across sessions. Release the panel near any edge and it snaps into place, keeping your workspace organized. Click the panel header to collapse it into a small bubble showing only the chart emoji (📊), minimizing distraction while keeping controls accessible. Drag from the bubble to restore the full panel. The panel automatically resizes to fit its content and includes all setting toggles, action buttons, and a grade legend. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains visible across page navigation within Zwift, with the elevation overlay updating automatically as you move between route views. PLEASE NOTE This script requires the free BotGentz extension to function. It is designed for Zwift users who want to analyze route elevation profiles and plan their rides. The script reads only visible route data from the DOM—it does not access Zwift's API, your account credentials, or any sensitive information. All settings (overlay visibility, grade color toggle, summary toggle, chart toggle, compare toggle, and panel position) are stored locally using GM_setValue and never leave your browser. The script does not modify your Zwift data—it only reads and visualizes visible route information. The elevation profile is simulated based on available data; actual profiles may vary. If Zwift updates its website structure, the script may need to be updated to match new selectors. The difficulty comparison sorts routes by elevation gain and distance to help you find the most challenging routes.