Merge pull request #573 from mz8i/feature/538-planning-update

Feature 538: planning update
This commit is contained in:
Tom Russell 2020-04-09 13:22:15 +01:00 committed by GitHub
commit 218155ccdd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 185 additions and 99 deletions

View File

@ -125,87 +125,113 @@
</Style> </Style>
<Style name="date_year"> <Style name="date_year">
<Rule> <Rule>
<Filter>[date_year] &gt;= 2000</Filter> <Filter>[date_year] &gt;= 2020</Filter>
<PolygonSymbolizer fill="#f0eaba" /> <PolygonSymbolizer fill="#fff9b8" />
</Rule> </Rule>
<Rule> <Rule>
<Filter>[date_year] &gt;= 1980 and [date_year] &lt; 2000</Filter> <Filter>[date_year] &gt;= 2000 and [date_year] &lt; 2020</Filter>
<PolygonSymbolizer fill="#fae269" /> <PolygonSymbolizer fill="#fae269" />
</Rule> </Rule>
<Rule> <Rule>
<Filter>[date_year] &gt;= 1960 and [date_year] &lt; 1980</Filter> <Filter>[date_year] &gt;= 1980 and [date_year] &lt; 2000</Filter>
<PolygonSymbolizer fill="#fbaf27" /> <PolygonSymbolizer fill="#fbaf27" />
</Rule> </Rule>
<Rule> <Rule>
<Filter>[date_year] &gt;= 1940 and [date_year] &lt; 1960</Filter> <Filter>[date_year] &gt;= 1960 and [date_year] &lt; 1980</Filter>
<PolygonSymbolizer fill="#e6711d" /> <PolygonSymbolizer fill="#e6711d" />
</Rule> </Rule>
<Rule>
<Filter>[date_year] &gt;= 1940 and [date_year] &lt; 1960</Filter>
<PolygonSymbolizer fill="#cc1212" />
</Rule>
<Rule> <Rule>
<Filter>[date_year] &gt;= 1920 and [date_year] &lt; 1940</Filter> <Filter>[date_year] &gt;= 1920 and [date_year] &lt; 1940</Filter>
<PolygonSymbolizer fill="#d73d3a" /> <PolygonSymbolizer fill="#8f0303" />
</Rule> </Rule>
<Rule> <Rule>
<Filter>[date_year] &gt;= 1900 and [date_year] &lt; 1920</Filter> <Filter>[date_year] &gt;= 1900 and [date_year] &lt; 1920</Filter>
<PolygonSymbolizer fill="#ba221c" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1880 and [date_year] &lt; 1900</Filter>
<PolygonSymbolizer fill="#bb859b" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1860 and [date_year] &lt; 1880</Filter>
<PolygonSymbolizer fill="#8b3654" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1840 and [date_year] &lt; 1860</Filter>
<PolygonSymbolizer fill="#8f5385" /> <PolygonSymbolizer fill="#8f5385" />
</Rule> </Rule>
<Rule>
<Filter>[date_year] &gt;= 1880 and [date_year] &lt; 1900</Filter>
<PolygonSymbolizer fill="#c3e1eb" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1860 and [date_year] &lt; 1880</Filter>
<PolygonSymbolizer fill="#6a9dba" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1840 and [date_year] &lt; 1860</Filter>
<PolygonSymbolizer fill="#3b74a3" />
</Rule>
<Rule> <Rule>
<Filter>[date_year] &gt;= 1820 and [date_year] &lt; 1840</Filter> <Filter>[date_year] &gt;= 1820 and [date_year] &lt; 1840</Filter>
<PolygonSymbolizer fill="#56619b" /> <PolygonSymbolizer fill="#95ded8" />
</Rule> </Rule>
<Rule> <Rule>
<Filter>[date_year] &gt;= 1800 and [date_year] &lt; 1820</Filter> <Filter>[date_year] &gt;= 1800 and [date_year] &lt; 1820</Filter>
<PolygonSymbolizer fill="#6793b2" /> <PolygonSymbolizer fill="#68aba5" />
</Rule> </Rule>
<Rule> <Rule>
<Filter>[date_year] &gt;= 1780 and [date_year] &lt; 1800</Filter> <Filter>[date_year] &gt;= 1750 and [date_year] &lt; 1800</Filter>
<PolygonSymbolizer fill="#83c3b3" /> <PolygonSymbolizer fill="#acc98f" />
</Rule> </Rule>
<Rule> <Rule>
<Filter>[date_year] &gt;= 1760 and [date_year] &lt; 1780</Filter> <Filter>[date_year] &gt;= 1700 and [date_year] &lt; 1750</Filter>
<PolygonSymbolizer fill="#adc88f" /> <PolygonSymbolizer fill="#6d8a51" />
</Rule> </Rule>
<Rule> <Rule>
<Filter>[date_year] &gt;= 1740 and [date_year] &lt; 1760</Filter> <Filter>[date_year] &lt; 1700</Filter>
<PolygonSymbolizer fill="#83a663" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1720 and [date_year] &lt; 1740</Filter>
<PolygonSymbolizer fill="#77852d" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1700 and [date_year] &lt; 1720</Filter>
<PolygonSymbolizer fill="#69814e" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1680 and [date_year] &lt; 1700</Filter>
<PolygonSymbolizer fill="#d0c291" /> <PolygonSymbolizer fill="#d0c291" />
</Rule> </Rule>
<Rule>
<Filter>[date_year] &gt;= 1660 and [date_year] &lt; 1680</Filter>
<PolygonSymbolizer fill="#918158" />
</Rule>
<Rule>
<Filter>[date_year] &lt; 1660</Filter>
<PolygonSymbolizer fill="#7a5732" />
</Rule>
</Style> </Style>
<Style name="conservation_area"> <Style name="conservation_area">
<Rule> <Rule>
<PolygonSymbolizer fill="#73ebaf" /> <PolygonSymbolizer fill="#73ebaf" />
</Rule> </Rule>
</Style> </Style>
<Style name="planning_combined">
<Rule>
<Filter>[planning_in_conservation_area] = true</Filter>
<PolygonSymbolizer fill="#95beba"/>
</Rule>
<Rule>
<Filter>[listing_type] = "Grade I Listed"</Filter>
<PolygonSymbolizer fill="#c72e08"/>
</Rule>
<Rule>
<Filter>[listing_type] = "Grade II* Listed"</Filter>
<PolygonSymbolizer fill="#e75b42"/>
</Rule>
<Rule>
<Filter>[listing_type] = "Grade II Listed"</Filter>
<PolygonSymbolizer fill="#ffbea1"/>
</Rule>
<Rule>
<Filter>[listing_type] = "Locally Listed"</Filter>
<PolygonSymbolizer fill="#858ed4"/>
</Rule>
<!-- Conservation area outline -->
<Rule>
<Filter>[listing_type] != "None" and [planning_in_conservation_area] = true</Filter>
<MaxScaleDenominator>34100</MaxScaleDenominator>
<MinScaleDenominator>17061</MinScaleDenominator>
<LineSymbolizer stroke="#95beba" stroke-width="0.5"/>
</Rule>
<Rule>
<Filter>[listing_type] != "None" and [planning_in_conservation_area] = true</Filter>
<MaxScaleDenominator>17061</MaxScaleDenominator>
<MinScaleDenominator>8530</MinScaleDenominator>
<LineSymbolizer stroke="#95beba" stroke-width="1.0"/>
</Rule>
<Rule>
<Filter>[listing_type] != "None" and [planning_in_conservation_area] = true</Filter>
<MaxScaleDenominator>8530</MaxScaleDenominator>
<MinScaleDenominator>0</MinScaleDenominator>
<LineSymbolizer stroke="#95beba" stroke-width="2.5"/>
</Rule>
</Style>
<Style name="sust_dec"> <Style name="sust_dec">
<Rule> <Rule>
<Filter>[sust_dec] = A</Filter> <Filter>[sust_dec] = A</Filter>

View File

@ -1,5 +1,6 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import InfoBox from '../../components/info-box';
import { dataFields } from '../../data_fields'; import { dataFields } from '../../data_fields';
import CheckboxDataEntry from '../data-components/checkbox-data-entry'; import CheckboxDataEntry from '../data-components/checkbox-data-entry';
import DataEntry from '../data-components/data-entry'; import DataEntry from '../data-components/data-entry';
@ -22,7 +23,59 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => (
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
/> />
<DataEntryGroup name="Listing and protections" > <DataEntryGroup name="Planning Status">
<CheckboxDataEntry
title="Is a planning application live for this site?"
slug="planning_live_application"
value={null}
disabled={true}
/>
<CheckboxDataEntry
title={dataFields.planning_demolition_proposed.title}
slug="planning_demolition_proposed"
value={props.building.planning_demolition_proposed}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
disabled={true}
/>
<CheckboxDataEntry
title="Has this application recently been been approved/refused?"
slug="planning_recent_outcome"
value={null}
disabled={true}
/>
<CheckboxDataEntry
title="Has the work been carried out?"
slug="planning_carried_out"
value={null}
disabled={true}
/>
<InfoBox msg="For historical planning applications see Planning Portal link" />
{/*
Move to Demolition:
<CheckboxDataEntry
title={dataFields.planning_demolition_complete.title}
slug="planning_demolition_complete"
value={props.building.planning_demolition_complete}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
disabled={true}
/>
<DataEntry
title={dataFields.planning_demolition_history.title}
slug="planning_demolition_history"
value={props.building.planning_demolition_history}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
disabled={true}
/>
*/}
</DataEntryGroup>
<DataEntryGroup name="Designation and Protection" collapsed={false} >
<CheckboxDataEntry <CheckboxDataEntry
title={dataFields.planning_in_conservation_area.title} title={dataFields.planning_in_conservation_area.title}
slug="planning_in_conservation_area" slug="planning_in_conservation_area"
@ -44,6 +97,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => (
slug="planning_in_list" slug="planning_in_list"
value={props.building.planning_in_list} value={props.building.planning_in_list}
mode={props.mode} mode={props.mode}
disabled={true}
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
/> />
@ -52,6 +106,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => (
slug="planning_list_id" slug="planning_list_id"
value={props.building.planning_list_id} value={props.building.planning_list_id}
mode={props.mode} mode={props.mode}
disabled={true}
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
/> />
@ -60,6 +115,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => (
slug="planning_list_cat" slug="planning_list_cat"
value={props.building.planning_list_cat} value={props.building.planning_list_cat}
mode={props.mode} mode={props.mode}
disabled={true}
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
options={[ options={[
@ -75,6 +131,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => (
slug="planning_list_grade" slug="planning_list_grade"
value={props.building.planning_list_grade} value={props.building.planning_list_grade}
mode={props.mode} mode={props.mode}
disabled={true}
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
options={[ options={[
@ -173,35 +230,6 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => (
onChange={props.onChange} onChange={props.onChange}
/> />
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Demolition and demolition history">
<CheckboxDataEntry
title={dataFields.planning_demolition_proposed.title}
slug="planning_demolition_proposed"
value={props.building.planning_demolition_proposed}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
disabled={true}
/>
<CheckboxDataEntry
title={dataFields.planning_demolition_complete.title}
slug="planning_demolition_complete"
value={props.building.planning_demolition_complete}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
disabled={true}
/>
<DataEntry
title={dataFields.planning_demolition_history.title}
slug="planning_demolition_history"
value={props.building.planning_demolition_history}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
disabled={true}
/>
</DataEntryGroup>
</Fragment> </Fragment>
); );
const PlanningContainer = withCopyEdit(PlanningView); const PlanningContainer = withCopyEdit(PlanningView);

View File

@ -7,7 +7,8 @@
right: 10px; right: 10px;
z-index: 1000; z-index: 1000;
min-width: 12rem; min-width: 14rem;
max-width: 14rem;
max-height: 60%; max-height: 60%;
display: flex; display: flex;
@ -63,6 +64,11 @@
.map-legend p { .map-legend p {
margin: 0.25rem 0 0.5rem; margin: 0.25rem 0 0.5rem;
} }
.map-legend .legend-disclaimer {
font-size: 0.8em;
padding:0;
}
.data-legend { .data-legend {
overflow: auto; overflow: auto;
list-style: none; list-style: none;

View File

@ -43,25 +43,21 @@ const LEGEND_CONFIG = {
age: { age: {
title: 'Age', title: 'Age',
elements: [ elements: [
{ color: '#f0eaba', text: '≥2000' }, { color: '#fff9b8', text: '>2020' },
{ color: '#fae269', text: '19802000' }, { color: '#fae269', text: '2000-2019' },
{ color: '#fbaf27', text: '19601980' }, { color: '#fbaf27', text: '1980-1999' },
{ color: '#e6711d', text: '19401960' }, { color: '#e6711d', text: '1960-1979' },
{ color: '#d73d3a', text: '19201940' }, { color: '#cc1212', text: '1940-1959' },
{ color: '#ba221c', text: '19001920' }, { color: '#8f0303', text: '1920-1939' },
{ color: '#bb859b', text: '18801900' }, { color: '#8f5385', text: '1900-1919' },
{ color: '#8b3654', text: '18601880' }, { color: '#c3e1eb', text: '1880-1899' },
{ color: '#8f5385', text: '18401860' }, { color: '#6a9dba', text: '1860-1879' },
{ color: '#56619b', text: '18201840' }, { color: '#3b74a3', text: '1840-1859' },
{ color: '#6793b2', text: '18001820' }, { color: '#95ded8', text: '1820-1839' },
{ color: '#83c3b3', text: '17801800' }, { color: '#68aba5', text: '1800-1819' },
{ color: '#adc88f', text: '17601780' }, { color: '#acc98f', text: '1750-1799' },
{ color: '#83a663', text: '17401760' }, { color: '#6d8a51', text: '1700-1749' },
{ color: '#77852d', text: '17201740' }, { color: '#d0c291', text: '<1700' },
{ color: '#69814e', text: '17001720' },
{ color: '#d0c291', text: '16801700' },
{ color: '#918158', text: '16601680' },
{ color: '#7a5732', text: '<1660' },
] ]
}, },
size: { size: {
@ -103,9 +99,14 @@ const LEGEND_CONFIG = {
elements: [] elements: []
}, },
planning: { planning: {
title: 'Planning', title: 'Statutory protections',
disclaimer: 'All data relating to designated buildings should be checked on the National Heritage List for England or local authority websites where used for planning or development purposes',
elements: [ elements: [
{ color: '#73ebaf', text: 'within conservation area' }, { color: '#95beba', text: 'In conservation area'},
{ color: '#c72e08', text: 'Grade I listed'},
{ color: '#e75b42', text: 'Grade II* listed'},
{ color: '#ffbea1', text: 'Grade II listed'},
{ color: '#858ed4', text: 'Locally listed'},
] ]
}, },
community: { community: {
@ -200,11 +201,15 @@ class Legend extends React.Component<LegendProps, LegendState> {
{ {
elements.length? elements.length?
<ul className={this.state.collapseList ? 'collapse data-legend' : 'data-legend'} > <ul className={this.state.collapseList ? 'collapse data-legend' : 'data-legend'} >
{
details.disclaimer &&
<p className='legend-disclaimer'>{details.disclaimer}</p>
}
{ {
elements.map((item) => ( elements.map((item) => (
<li key={item.color} > <li key={item.color} >
<span className="key" style={ { background: item.color } }>-</span> <span className="key" style={ { background: item.color, border: item.border } }>-</span>
{ item.text } { item.text }
</li> </li>

View File

@ -133,7 +133,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
size: 'size_height', size: 'size_height',
location: 'location', location: 'location',
like: 'likes', like: 'likes',
planning: 'conservation_area', planning: 'planning_combined',
sustainability: 'sust_dec', sustainability: 'sust_dec',
type: 'building_attachment_form', type: 'building_attachment_form',
use: 'landuse' use: 'landuse'

View File

@ -87,6 +87,27 @@ const BUILDING_LAYER_DEFINITIONS = {
g.geometry_id = b.geometry_id g.geometry_id = b.geometry_id
AND b.likes_total > 0 AND b.likes_total > 0
) as likes`, ) as likes`,
planning_combined: `(
SELECT
g.geometry_geom,
(
CASE
WHEN b.planning_list_cat = 'Listed Building' and b.planning_list_grade = 'I' THEN 'Grade I Listed'
WHEN b.planning_list_cat = 'Listed Building' and b.planning_list_grade = 'II*' THEN 'Grade II* Listed'
WHEN b.planning_list_cat = 'Listed Building' and b.planning_list_grade = 'II' THEN 'Grade II Listed'
WHEN b.planning_in_local_list THEN 'Locally Listed'
ELSE 'None'
END
) as listing_type,
b.planning_in_conservation_area
FROM geometries as g
JOIN buildings as b
ON g.geometry_id = b.geometry_id
WHERE
b.planning_in_conservation_area
OR b.planning_in_local_list
OR b.planning_list_cat is not null
) as planning_combined`,
conservation_area: `( conservation_area: `(
SELECT SELECT
g.geometry_geom g.geometry_geom