Link legend

app/src/frontend/about.js

@@ -213,7 +213,7 @@ const AboutPage = () => (
 
     <form id="sign-up" action="https://tinyletter.com/colouringlondon" method="post"
           target="popupwindow"
-          onsubmit="window.open(
+          onSubmit="window.open(
                     'https://tinyletter.com/colouringlondon',
                     'popupwindow',
                     'scrollbars=yes,width=800,height=600'); return true">
@@ -226,7 +226,7 @@ const AboutPage = () => (
         target="_blank" rel="noopener noreferrer">newsletter archive</a>.
 
         </p>
-        <label for="tlemail">Enter your email address:</label>
+        <label htmlFor="tlemail">Enter your email address:</label>
         <input className="form-control" type="email" name="email" id="tlemail" placeholder="name@example.com" />
         <input type="hidden" value="1" name="embed"/>
         <small className="form-text text-muted">

app/src/frontend/app.js

@@ -39,15 +39,13 @@ class App extends React.Component {
                 <Header user={this.state.user} />
                 <main className="beta">
                     <Switch>
-                        <Route exact path="/(maps.html)?">
+                        <Route path="/(maps)?(/:map.html)?">
                             <Fragment>
                                 <Switch>
                                     <Route exact path="/">
                                         <Welcome />
                                     </Route>
-                                    <Route exact path="/maps.html">
+                                    <Route path="/maps/:map.html" component={Legend} />
-                                        <Legend />
-                                    </Route>
                                 </Switch>
                                 <ColouringMap />
                             </Fragment>

app/src/frontend/header.js

@@ -15,7 +15,7 @@ function Header(props) {
                     <Logo />
                     <ul className="navbar-nav ml-auto">
                         <li className="nav-item">
-                            <NavLink to="/maps.html" className="nav-link">View Maps</NavLink>
+                            <NavLink to="/maps/date_year.html" className="nav-link">View Maps</NavLink>
                         </li>
                         <li className="nav-item">
                             <NavLink to="/about.html" className="nav-link">About</NavLink>

app/src/frontend/legend.js

@@ -1,143 +1,124 @@
-import React from 'react';
+import React, { Component, Fragment } from 'react';
+import { Link } from 'react-router-dom';
 
-const Legend = () => (
+const data_map = [
-    <div id="legend" className="info-container">
+    {
-        <h2 className="h2">Maps</h2>
+        slug: 'date_year',
-        <div className="data-section">
+        label: 'Age',
-            <h3 className="h3 bullet-prefix age toggled-on"
+        elements: [
-                data-toggle="collapse"
+            {
-                data-target="#data-list-age">Age</h3>
+                slug: 'date_year',
-            <dl id="data-list-age" className="data-list collapse show">
+                label: 'Year Built',
+                elements: [
+                    { color: '#f0eaba', text: '≥2000' },
+                    { color: '#fae269', text: '1980-2000' },
+                    { color: '#fbaf27', text: '1960-1980' },
+                    { color: '#e6711d', text: '1940-1960' },
+                    { color: '#d73d3a', text: '1920-1940' },
+                    { color: '#ba221c', text: '1900-1920' },
+                    { color: '#bb859b', text: '1880-1900' },
+                    { color: '#8b3654', text: '1860-1880' },
+                    { color: '#8f5385', text: '1840-1860' },
+                    { color: '#56619b', text: '1820-1840' },
+                    { color: '#6793b2', text: '1800-1820' },
+                    { color: '#83c3b3', text: '1780-1800' },
+                    { color: '#adc88f', text: '1760-1780' },
+                    { color: '#83a663', text: '1740-1760' },
+                    { color: '#77852d', text: '1720-1740' },
+                    { color: '#69814e', text: '1700-1720' },
+                    { color: '#d0c291', text: '1680-1700' },
+                    { color: '#918158', text: '1660-1680' },
+                    { color: '#7a5732', text: '<1660' },
+                ]
+            }
+        ]
+    },
+    {
+        slug: 'size_storeys',
+        label: 'Size',
+        elements: [
+            {
+                slug: 'size_storeys',
+                label: 'Number of storeys',
+                elements: [
+                    { color: '#ffc584', text: '≥20' },
+                    { color: '#f46259', text: '10-20' },
+                    { color: '#da456a', text: '5-10' },
+                    { color: '#a8327d', text: '4' },
+                    { color: '#7c2383', text: '3' },
+                    { color: '#5b167f', text: '2' },
+                    { color: '#360f69', text: '1' },
+                ]
+            }
+        ]
+    }
+];
+
+const LegendItem = (props) => (
+    <li>
+        <span className="key" style={ { background: props.color } }>-</span>
+        { props.text }
+    </li>
+);
+
+const LegendSection = (props) => (
+    <Fragment>
         <dt>
-                <a href="/maps/date_year"
+            <Link to={`/maps/${ props.slug }.html`}>{ props.label }</Link>
-                    data-map="date_year">Year Built</a></dt>
-            <dd>
-                <ul className="data-legend">
-                <li>
-                    <span className="key" style={{background: '#f0eaba'}}>-</span>
-                    &gt;=2000
-                </li>
-                <li>
-                    <span className="key" style={{background: '#fae269'}}>-</span>
-                    1980-2000
-                </li>
-                <li>
-                    <span className="key" style={{background: '#fbaf27'}}>-</span>
-                    1960-1980
-                </li>
-                <li>
-                    <span className="key" style={{background: '#e6711d'}}>-</span>
-                    1940-1960
-                </li>
-                <li>
-                    <span className="key" style={{background: '#d73d3a'}}>-</span>
-                    1920-1940
-                </li>
-                <li>
-                    <span className="key" style={{background: '#ba221c'}}>-</span>
-                    1900-1920
-                </li>
-                <li>
-                    <span className="key" style={{background: '#bb859b'}}>-</span>
-                    1880-1900
-                </li>
-                <li>
-                    <span className="key" style={{background: '#8b3654'}}>-</span>
-                    1860-1880
-                </li>
-                <li>
-                    <span className="key" style={{background: '#8f5385'}}>-</span>
-                    1840-1860
-                </li>
-                <li>
-                    <span className="key" style={{background: '#56619b'}}>-</span>
-                    1820-1840
-                </li>
-                <li>
-                    <span className="key" style={{background: '#6793b2'}}>-</span>
-                    1800-1820
-                </li>
-                <li>
-                    <span className="key" style={{background: '#83c3b3'}}>-</span>
-                    1780-1800
-                </li>
-                <li>
-                    <span className="key" style={{background: '#adc88f'}}>-</span>
-                    1760-1780
-                </li>
-                <li>
-                    <span className="key" style={{background: '#83a663'}}>-</span>
-                    1740-1760
-                </li>
-                <li>
-                    <span className="key" style={{background: '#77852d'}}>-</span>
-                    1720-1740
-                </li>
-                <li>
-                    <span className="key" style={{background: '#69814e'}}>-</span>
-                    1700-1720
-                </li>
-                <li>
-                    <span className="key" style={{background: '#d0c291'}}>-</span>
-                    1680-1700
-                </li>
-                <li>
-                    <span className="key" style={{background: '#918158'}}>-</span>
-                    1660-1680
-                </li>
-                <li>
-                    <span className="key" style={{background: '#7a5732'}}>-</span>
-                    &lt;1660
-                </li>
-                </ul>
-            </dd>
-            </dl>
-        </div>
-        <div className="data-section">
-            <h3 className="h3 bullet-prefix size"
-                data-toggle="collapse"
-                data-target="#data-list-size">Size</h3>
-            <dl id="data-list-size" className="data-list collapse">
-            <dt>
-                <a href="/maps/size_storeys"
-                data-map="size_storeys">Number of storeys</a>
         </dt>
         <dd>
             <ul className="data-legend">
-                    <li>
+                { props.children }
-                    <span className="key" style={{background: '#ffc584'}}>-</span>
-                    &gt;20
-                    </li>
-                    <li>
-                    <span className="key" style={{background: '#f46259'}}>-</span>
-                    10-20
-                    </li>
-                    <li>
-                    <span className="key" style={{background: '#da456a'}}>-</span>
-                    5-10
-                    </li>
-                    <li>
-                    <span className="key" style={{background: '#a8327d'}}>-</span>
-                    4
-                    </li>
-                    <li>
-                    <span className="key" style={{background: '#7c2383'}}>-</span>
-                    3
-                    </li>
-                    <li>
-                    <span className="key" style={{background: '#5b167f'}}>-</span>
-                    2
-                    </li>
-                    <li>
-                    <span className="key" style={{background: '#360f69'}}>-</span>
-                    1
-                    </li>
-
             </ul>
         </dd>
+    </Fragment>
+);
+
+const LegendGroup = (props) => (
+    <div className="data-section">
+        <Link to={`/maps/${ props.slug }.html`}>
+            <h3 className={`h3 bullet-prefix ${ props.slug }`}>{ props.label }</h3>
+        </Link>
+        <dl className="data-list">
+            { props.children }
         </dl>
     </div>
-        </div>
 );
 
+class Legend extends Component {
+    render() {
+        var data_layer = undefined;
+        if (this.props.match && this.props.match.params && this.props.match.params.map) {
+            data_layer = this.props.match.params.map;
+        }
+
+        return (
+            <div id="legend" className="info-container">
+                <h2 className="h2">Maps</h2>
+                {
+                    data_map.map((data_group) => (
+                        <LegendGroup {...data_group}>
+                            {
+                                ( data_layer.match(data_group.slug) )
+                                ? data_group.elements.map((data_section) => (
+                                    <LegendSection {...data_section}>
+                                        {
+                                            ( data_layer.match(data_section.slug) )
+                                            ? data_section.elements.map((data_item) => (
+                                                <LegendItem {...data_item} />
+                                            ))
+                                            : null
+                                        }
+                                    </LegendSection>
+                                ))
+                                : null
+                            }
+                        </LegendGroup>
+                    ))
+                }
+            </div>
+        );
+    }
+}
+
 export default Legend;

app/src/frontend/welcome.js

@@ -7,7 +7,10 @@ const Welcome = () => (
     <div className="jumbotron welcome-float">
         <h1 className="h1">Welcome to Colouring London</h1>
         <p className="lead">Colour in, view and download data on London's buildings</p>
-        <Link to="/maps.html" className="btn btn-outline-dark btn-lg btn-block">Get Started</Link>
+        <Link to="/maps/date_year.html"
+              className="btn btn-outline-dark btn-lg btn-block">
+            Start Colouring
+        </Link>
     </div>
 );