Climb Sections

can stretch to convey different climb heights

Climb Sections marked with Bars

• Bars
• Input to Bars
• Input to JSON

Climb Steepness

include a human to show steepness

can stretch to convey different climb heights

Climb Steepness as a Dial

• Basic is the simplest-possible example
• Introduction shows how varying climbs are visualized

Climb Steepness as a Flagpole

• Basic
• Introduction shows how varying climbs are visualized

example rendering at different aspect ratios

scaling to convey smaller differences (moving flagpole right and left?)

put below each climb on a wall (routes, where there are many vertical climbs)

stretch next to a climb

Climb Steepness Input

• Input to Dial
• Input to Flagpole
• Input to JSON

Climb Steepness Icon

a simple compact (but primitive) icon. show a single overhang.

• JavaScript Class
  • Introduction
• Custom HTML Element
  • Basic
  • Introduction
  • LINK NEEDED

Photo Overlay

Photo Overlay with a Static Svg

• Static Svg
• Static Svg with Styling
• Toggle Layers with CSS
• Loading Image Size in the Browser

Photo Overlay with an Extensible Svg

• Basic

Show Climb Names on Mouseover with CSS

Show Climb Names on Mouseover with JS

Photo Overlay Editor

• Edit a Climb
• Edit an Area
• Edit a Database