Link legend
This commit is contained in:
Tom Russell
parent
c84b53e723
commit
a48423bdaf
@ -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">
|
||||
|
||||
@ -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">
|
||||
<Legend />
|
||||
</Route>
|
||||
<Route path="/maps/:map.html" component={Legend} />
|
||||
</Switch>
|
||||
<ColouringMap />
|
||||
</Fragment>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,143 +1,124 @@
|
||||
import React from 'react';
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Legend = () => (
|
||||
<div id="legend" className="info-container">
|
||||
<h2 className="h2">Maps</h2>
|
||||
<div className="data-section">
|
||||
<h3 className="h3 bullet-prefix age toggled-on"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-age">Age</h3>
|
||||
<dl id="data-list-age" className="data-list collapse show">
|
||||
<dt>
|
||||
<a href="/maps/date_year"
|
||||
data-map="date_year">Year Built</a></dt>
|
||||
<dd>
|
||||
<ul className="data-legend">
|
||||
<li>
|
||||
<span className="key" style={{background: '#f0eaba'}}>-</span>
|
||||
>=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>
|
||||
<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>
|
||||
<span className="key" style={{background: '#ffc584'}}>-</span>
|
||||
>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>
|
||||
const data_map = [
|
||||
{
|
||||
slug: 'date_year',
|
||||
label: 'Age',
|
||||
elements: [
|
||||
{
|
||||
slug: 'date_year',
|
||||
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' },
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
const LegendItem = (props) => (
|
||||
<li>
|
||||
<span className="key" style={ { background: props.color } }>-</span>
|
||||
{ props.text }
|
||||
</li>
|
||||
);
|
||||
|
||||
const LegendSection = (props) => (
|
||||
<Fragment>
|
||||
<dt>
|
||||
<Link to={`/maps/${ props.slug }.html`}>{ props.label }</Link>
|
||||
</dt>
|
||||
<dd>
|
||||
<ul className="data-legend">
|
||||
{ props.children }
|
||||
</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>
|
||||
);
|
||||
|
||||
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;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user