Web Components
for Rock Climbing Guides
Conveying rock climbing info isn't simple. We use many visualizations to help: topos, red-green-blue, guidebooks use histograms, fluttering hearts, grades,
All code on this site is available under the MIT license.
These aren't exclusively Web Components[1]. They are, however, built for the web and dependency-free. each components lives in a single file and has no dependencies so anything can be copied directly into your project[2].
Climb Steepness
How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb? How step is a climb?
Dial
Reflects the exact steepness as a climb progresses. It's abstract enough to compare climbs, and specific enough to give you a concrete understanding of a singular climb. [intro]
- climb-steepness-dial.js is a self-contained class
Flagpole
this is a simple, versatile visualization that is a particularly good fit for highlighting relative differences between climbs [intro]
Icon
is simple and familiar and easily styled. It's drawback is that it conveys only limited information. [intro]
Climb Style/Discipline
Boulder, Trad, Sport, Free-Solo, Aid, Deep-Water-Solo?
ICON
INPUT
Climb Duration
In human-friendly units, how longs is a climb?
- 2 moves (
2mv) - 8 (human|body) lengths (
8hu) - 3 pitches (
3p)
ICON
INPUT
Climb Sections
Describe changes across the length of a Climb
Bars
- climb-sections-bars.js is a straightforward option,
Input
A simple input that reflects the underlying data
- climb-sections-input.js transparent data-entry packages as a single class
Photo Overlay
Draw useful climbing info on photos
Climb and Area Layers (CAL)
This is the a lightweight feature set that covers the basics. Show (clickable!) climbs and areas on images, and support editing. [intro]
- photo-overlay-static-svg.js one concise function to decorate an image with layers
- photo-overlay-extensible-svg.js a flexible class that can be extended to support your needs
- photo-overlay-editor.js view (and edit!) climb and area layers on a photo
Grades
This is a complicated thing to address.
The Grade Editor
This is a robust solution, but it lives in a separate project because the scope extends beyond a simple web component. There are also alternatives of varying quality.