Skip to content

Commit

Permalink
Update legend after cyclosm/cyclosm-cartocss-style#184
Browse files Browse the repository at this point in the history
  • Loading branch information
@Phyks
Phyks committed Oct 1, 2019
1 parent 19974c0 commit 4ccc097
Showing 1 changed file with 66 additions and 65 deletions.
131 changes: 66 additions & 65 deletions legend.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,71 +48,48 @@
text-align: center;
width: 2em;
}

table img {
max-height: 16px;
}
</style>
</head>
<body>
<h2>Legend</h2>
<h3>Bicycle routes</h3>
<table>
<tr>
<td style="width: 2em;"><span style="display: inline-block; height: 1em; width: 2em; background-color: #ff00ff; opacity: 0.5;"></span></td>
<td>International bike route</td>
</tr>

<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #aa00ff; opacity: 0.5;"></span></td>
<td>National bike route</td>
</tr>

<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #5500ff; opacity: 0.5;"></span></td>
<td>Regional bike route</td>
</tr>

<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #0000ff; opacity: 0.5;"></span></td>
<td>Local bike route</td>
</tr>

<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #d15000; opacity: 0.5;"></span></td>
<td>Mountain bike route</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 2em; width: 2em; background: url('symbols/shields/rcn-junction_1x1.svg') no-repeat; background-position: center; padding-top: 1em; color: white; font-family: sans-serif; font-weight: 500;">16</span></td>
<td>Numbered cycle junction</td>
</tr>
</table>

<h3>Bicycle infrastructure</h3>
<table>
<tr>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid blue 2px; vertical-align: middle;"></span></td>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid blue 3px; vertical-align: middle;"></span></td>
<td>Separate cycleway</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid #0050ff 3px; vertical-align: middle;"></span></td>
<td>Path designated for bicycles.</td>
</tr>
<tr>
<td>
<span style="display: inline-block; height: 1.5em; width: 2em;">
<span style="display: inline-block; height: 1.5em; width: 2em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="10%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke-dasharray="6,3" stroke="blue" stroke-width="20%"/>
<line x1="10%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke="blue" stroke-width="20%"/>
<line x1="10%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="black" stroke-width="20%"/>
<rect x="10%" y="10%" width="140%" height="60%" fill="#ccc"/>
</svg>
</span>
</td>
<td>Cycle lane on this side of the street</td>
<td>Cycle track on this side of the street</td>
</tr>
<tr>
<td>
<span style="display: inline-block; height: 1.5em; width: 2em;">
<span style="display: inline-block; height: 1.5em; width: 2em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="10%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke="blue" stroke-width="20%"/>
<line x1="10%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke-dasharray="6,3" stroke="blue" stroke-width="20%"/>
<line x1="10%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="black" stroke-width="20%"/>
<rect x="10%" y="10%" width="140%" height="60%" fill="#ccc"/>
</svg>
</span>
</td>
<td>Cycle track on this side of the street</td>
<td>Cycle lane on this side of the street</td>
</tr>
<tr>
<td>
Expand All @@ -124,7 +101,7 @@ <h3>Bicycle infrastructure</h3>
</svg>
</span>
</td>
<td>Shared busway on this side of the street</td>
<td>Shared busway on this side of the street <br/> Road shoulder open to bikes</td>
</tr>
<tr>
<td><img src="symbols/oneway-cycle.svg"/></td>
Expand All @@ -142,25 +119,12 @@ <h3>Bicycle infrastructure</h3>
<td>Steps with a bicycle-friendly ramp</td>
</tr>
<tr>
<td style="width: 2em;"><span style="display: inline-block; height: 1em; width: 2em; background-color: #0080ff; opacity: 0.5; border-top: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6;"></span></td>
<td style="width: 2em;"><span style="display: inline-block; height: 1em; width: 2em; background-color: #0050ff; opacity: 0.5; border-top: 1px solid #949494; border-bottom: 1px solid #949494;"></span></td>
<td>Cycle streets</td>
</tr>
<tr>
<td>
<span style="display: inline-block; height: 1.5em; width: 2em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="10%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke-dasharray="6, 10" stroke="blue" stroke-width="20%"/>
<line x1="10%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="black" stroke-width="20%"/>
<rect x="10%" y="10%" width="140%" height="60%" fill="#ccc"/>
</svg>
</span>
</td>
<td>Shoulder of the road open to bikes (outside of cities)</td>
</tr>
</table>

<h3>Highway infrastructure</h3>

<table>
<tr>
<td style="width: 2em;"><span style="display: inline-block; height: 1em; width: 2em; background-color: #c0ccc4; opacity: 0.5; border-top: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6;"></span></td>
Expand Down Expand Up @@ -195,7 +159,7 @@ <h3>Highway infrastructure</h3>
<td>Living street</td>
</tr>
<tr>
<td style="width: 2em;"><span style="display: inline-block; height: 1em; width: 2em; background-color: #1e4374; opacity: 0.5;"></span></td>
<td style="width: 2em;"><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid #1e4374 5px; vertical-align: middle;"></span></td>
<td>Track</td>
</tr>
<tr>
Expand All @@ -211,46 +175,74 @@ <h3>Highway infrastructure</h3>
<td>Walking speed or no motor vehicle access</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid #007200 2px; vertical-align: middle;"></span></td>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid #00767c 2px; vertical-align: middle;"></span></td>
<td>Footway</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid #00767c 2px; vertical-align: middle;"></span></td>
<td>Path open to bicycles</td>
<td>Path</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid #949400 2px; vertical-align: middle;"></span></td>
<td>Path forbidden to bicycles</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid #873100 2px; vertical-align: middle;"></span></td>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid #835d4b 2px; vertical-align: middle;"></span></td>
<td>Bridleway</td>
</tr>
<tr>
<td>
<span style="display: inline-block; height: 1.5em; width: 2em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<rect x="10%" y="10%" width="140%" height="60%" fill="#f6f6f6"/>
<line x1="10%" x2="150%" y1="40%" y2="40%" stroke-linecap="butt" stroke-dasharray="5,5" stroke="#dddddd" stroke-width="50%"/>
<line x1="10%" x2="150%" y1="40%" y2="40%" stroke-linecap="butt" stroke-dasharray="5,10" stroke="#dddddd" stroke-width="50%"/>
<line x1="10%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke="#7e7e7e" stroke-width="10%"/>
<line x1="10%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="#7e7e7e" stroke-width="10%"/>
</svg>
</span>
</td>
<td>Bad surface (cobblestone / gravel / cyclocross)</td>
<td>Bad surface (ok for cyclocross/trekking/gravel bikes)</td>
</tr>
<tr>
<td>
<span style="display: inline-block; height: 1.5em; width: 2em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<rect x="10%" y="10%" width="140%" height="60%" fill="#f6f6f6"/>
<line x1="10%" x2="150%" y1="40%" y2="40%" stroke-linecap="butt" stroke-dasharray="5,5" stroke="#c4c4c4" stroke-width="50%"/>
<line x1="10%" x2="150%" y1="40%" y2="40%" stroke-linecap="butt" stroke-dasharray="8,3,8,8" stroke="#c4c4c4" stroke-width="50%"/>
<line x1="10%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke="#7e7e7e" stroke-width="10%"/>
<line x1="10%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="#7e7e7e" stroke-width="10%"/>
</svg>
</span>
</td>
<td>Very bad surface (mountain bike)</td>
<td>Very bad surface (ok mountain bikes)</td>
</tr>
</table>

<h3>Bicycle routes</h3>
<table>
<tr>
<td style="width: 2em;"><span style="display: inline-block; height: 1em; width: 2em; background-color: #ff00ff; opacity: 0.5;"></span></td>
<td>International bike route</td>
</tr>

<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #aa00ff; opacity: 0.5;"></span></td>
<td>National bike route</td>
</tr>

<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #5500ff; opacity: 0.5;"></span></td>
<td>Regional bike route</td>
</tr>

<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #0000ff; opacity: 0.5;"></span></td>
<td>Local bike route</td>
</tr>

<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #d15000; opacity: 0.5;"></span></td>
<td>Mountain bike route</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 2em; width: 2em; background: url('symbols/shields/rcn-junction_1x1.svg') no-repeat; background-position: center; padding-top: 1em; color: white; font-family: sans-serif; font-weight: 500;">16</span></td>
<td>Numbered cycle junction</td>
</tr>
</table>

Expand Down Expand Up @@ -329,6 +321,11 @@ <h3>Bicycle-specific amenities</h3>
<td>Shared bicycle / motorcycle parking</td>
</tr>

<tr>
<td><span style="display: inline-block; width: 0.5em; height: 0.5em; background-color: yellow; border-radius: 50%;"></span></td>
<td>Proctected bicycle parking</td>
</tr>

<tr>
<td><img src="symbols/osm-bright-gl-style/amenities/bicycle_rental_11.svg"/></td>
<td>Bicycle rental</td>
Expand Down Expand Up @@ -720,6 +717,10 @@ <h3>Barriers</h3>
<td><img src="symbols/openstreetmap-carto/barriers/stile.svg"/></td>
<td>Stile</td>
</tr>
<tr>
<td><span style="margin: auto; display: block; width: 3px; height: 3px; background-color: #7d7c7c;"></span></td>
<td>Bollard, blocks</td>
</tr>
</table>
</body>
</html>

0 comments on commit 4ccc097

Please sign in to comment.