Break up LegendControl

[1ec5]

The legend feature is currently implemented as a monolithic LegendControl class responsible for generating its entire contents. This includes two separate code paths, one for statically configured sections and another for the more dynamic “Route markers” section: #773 (comment). legend_control.js is terribly difficult to follow due to its length. We should make it more modular and break it up into multiple classes.

The only reason this class wound up being monolithic in #632, other than laziness on my part, is that various parts of it require interacting with the Map object for feature querying and style introspection. It seemed risky performance-wise to keep redundant references to it from multiple objects with potentially different lifetimes. But I’m open to ideas about how to better structure this code. It would be pretty silly to keep it all as one class if we manage to factor it out as a plugin down the line.

[quincylvania]

Adding a legend to OpenTrailMap has become a priority for us. I'd be interested in helping to generalize the Americana legend if it looks like it would work for us. Could someone point me in the right direction?

[1ec5]

The control is primarily implemented in https://github.com/osm-americana/openstreetmap-americana/blob/f9a8682ea7f24e4ec604b8a2199c17f0fec0832d/src/js/legend_control.js and configured in https://github.com/osm-americana/openstreetmap-americana/blob/f9a8682ea7f24e4ec604b8a2199c17f0fec0832d/src/js/legend_config.js. The legend rows are styled in this stylesheet:

openstreetmap-americana/src/index.html

Lines 37 to 90 in f9a8682

	#legend-container {
	max-height: 60vh;
	overflow-y: scroll;
	}
	.legend-section > summary {
	background-color: #eee;
	}
	.legend-row,
	.legend-row img {
	vertical-align: middle;
	}
	.legend-row a {
	color: black;
	}
	.legend-row > .label,
	.legend-row > .icon {
	width: 0;
	text-align: center;
	}
	.legend-row > .label {
	white-space: pre-line;
	}
	.legend-row > .icon {
	white-space: nowrap;
	}
	.legend-row .shield + .shield {
	margin-left: 0.2em;
	}
	.legend-row > .swatch,
	.legend-row > .line {
	vertical-align: middle;
	width: 4em;
	}
	.legend-row > .swatch {
	border-style: solid;
	}
	.legend-row > .line > svg {
	vertical-align: middle;
	width: 100%;
	}
	.legend-row .language {
	font-style: italic;
	font-size: 80%;
	line-height: 1;
	vertical-align: super;
	}
	.legend-source {
	font-size: 80%;
	text-align: right;
	}
	.legend-source,
	.legend-source a {
	color: #aaa;
	}

and structured according to this template:

openstreetmap-americana/src/index.html

Lines 119 to 161 in f9a8682

	<template id="legend">
	<h2>Legend</h2>
	<div id="legend-container"></div>
	</template>
	<template id="legend-section">
	<details class="legend-section" open>
	<summary></summary>
	<table>
	<tbody class="legend-row-container"></tbody>
	<tfoot>
	<tr>
	<td class="legend-source" colspan="3"></td>
	</tr>
	</tfoot>
	</table>
	</details>
	</template>
	<template id="legend-rowgroup">
	<tr class="legend-rowgroup">
	<th colspan="3"></th>
	</tr>
	</template>
	<template id="legend-row-symbol">
	<tr class="legend-row legend-row-symbol">
	<td class="label"></td>
	<td class="icon"></td>
	<td class="description"></td>
	</tr>
	</template>
	<template id="legend-row-swatch">
	<tr class="legend-row legend-row-swatch">
	<td class="swatch" colspan="2"></td>
	<td class="description"></td>
	</tr>
	</template>
	<template id="legend-row-line">
	<tr class="legend-row legend-row-line">
	<td class="line" colspan="2">
	<svg></svg>
	</td>
	<td class="description"></td>
	</tr>
	</template>

I took a pure HTML+CSS+JS approach so that it would have as few external dependencies as possible, so that any future plugin would be more versatile.