a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1214 from colouring-cities/interface/typology-updates

Browse Source 
Interface/typology updates
This commit is contained in:
Mike Simpson 2023-07-26 16:59:50 +01:00 committed by GitHub
commit fd698062ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 300 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
app/map_styles/polygon.xml
View File

@ -973,4 +973,143 @@
<PolygonSymbolizer fill="#ffe8a9" />
</Rule>
</Style>
<Style name="typology_classification">
<Rule>
<Filter>[typology_classification] = "Low-rise: Not part of a group/cluster (1-3 core floors- excluding extensions)"</Filter>
<PolygonSymbolizer fill="#0311AB" />
</Rule>
<Rule>
<Filter>[typology_classification] = "Low-rise: Part of dense block/row/terrace"</Filter>
<PolygonSymbolizer fill="#3845D4" />
</Rule>
<Rule>
<Filter>[typology_classification] = "Low-rise: Part of group of widely spaced blocks (includes semi-detached houses)"</Filter>
<PolygonSymbolizer fill="#6D79FD" />
</Rule>
<Rule>
<Filter>[typology_classification] = "Mid-rise: Not part of a group/cluster (4-7 core floors)"</Filter>
<PolygonSymbolizer fill="#FF5D00" />
</Rule>
<Rule>
<Filter>[typology_classification] = "Mid-rise: Part of group of densely spaced blocks"</Filter>
<PolygonSymbolizer fill="#FF8000" />
</Rule>
<Rule>
<Filter>[typology_classification] = "Mid-rise: Part of group of widely spaced blocks"</Filter>
<PolygonSymbolizer fill="#FFA200" />
</Rule>
<Rule>
<Filter>[typology_classification] = "High rise: Not part of a group/cluster"</Filter>
<PolygonSymbolizer fill="#AB1303" />
</Rule>
<Rule>
<Filter>[typology_classification] = "High-rise: Part of group of densely spaced blocks (8 + core floors)"</Filter>
<PolygonSymbolizer fill="#D43A29" />
</Rule>
<Rule>
<Filter>[typology_classification] = "High-rise: Part of group of widely spaced blocks"</Filter>
<PolygonSymbolizer fill="#FC604F" />
</Rule>
<Rule>
<MaxScaleDenominator>17061</MaxScaleDenominator>
<MinScaleDenominator>4264</MinScaleDenominator>
<LineSymbolizer stroke="#888" stroke-width="0.8"/>
</Rule>
<Rule>
<MaxScaleDenominator>4264</MaxScaleDenominator>
<MinScaleDenominator>0</MinScaleDenominator>
<LineSymbolizer stroke="#888" stroke-width="2.0"/>
</Rule>
</Style>
<Style name="typology_style_period">
<Rule>
<Filter>[typology_style_period] = "Roman (43AD-410)"</Filter>
<PolygonSymbolizer fill="#00B2CB" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "Medieval (410-1485)"</Filter>
<PolygonSymbolizer fill="#00A9C6" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "Tudor (1485-1603)"</Filter>
<PolygonSymbolizer fill="#0097BC" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "Stuart (1603 -1714)"</Filter>
<PolygonSymbolizer fill="#008EB7" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "Georgian (1714-1837)"</Filter>
<PolygonSymbolizer fill="#0085B2" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "Victorian (1837-1901)"</Filter>
<PolygonSymbolizer fill="#007CAD" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "Edwardian (1901-1914)"</Filter>
<PolygonSymbolizer fill="#0073A8" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "WWI - WWII (1914-45)"</Filter>
<PolygonSymbolizer fill="#006AA3" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "Post war (1945-1975)"</Filter>
<PolygonSymbolizer fill="#004F94" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "Postmodern (1975-1990)"</Filter>
<PolygonSymbolizer fill="#00468F" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "1990s"</Filter>
<PolygonSymbolizer fill="#003D8A" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "2000s"</Filter>
<PolygonSymbolizer fill="#003485" />
</Rule>
<Rule>
<MaxScaleDenominator>17061</MaxScaleDenominator>
<MinScaleDenominator>4264</MinScaleDenominator>
<LineSymbolizer stroke="#888" stroke-width="0.8"/>
</Rule>
<Rule>
<MaxScaleDenominator>4264</MaxScaleDenominator>
<MinScaleDenominator>0</MinScaleDenominator>
<LineSymbolizer stroke="#888" stroke-width="2.0"/>
</Rule>
</Style>
<Style name="typology_dynamic_classification">
<Rule>
<Filter>[typology_dynamic_classification] = "Repetitive small, domestic plots"</Filter>
<PolygonSymbolizer fill="#F2E5FF" />
</Rule>
<Rule>
<Filter>[typology_dynamic_classification] = "Linear non-domestic, i.e. high streets"</Filter>
<PolygonSymbolizer fill="#CBABEA" />
</Rule>
<Rule>
<Filter>[typology_dynamic_classification] = "Large plots with internal roads"</Filter>
<PolygonSymbolizer fill="#A272D4" />
</Rule>
<Rule>
<Filter>[typology_dynamic_classification] = "Other"</Filter>
<PolygonSymbolizer fill="#EEEEEE" />
</Rule>
<Rule>
<MaxScaleDenominator>17061</MaxScaleDenominator>
<MinScaleDenominator>4264</MinScaleDenominator>
<LineSymbolizer stroke="#888" stroke-width="0.8"/>
</Rule>
<Rule>
<MaxScaleDenominator>4264</MaxScaleDenominator>
<MinScaleDenominator>0</MinScaleDenominator>
<LineSymbolizer stroke="#888" stroke-width="2.0"/>
</Rule>
</Style>
</Map>

1
app/src/api/services/autofill.ts
View File

@ -21,6 +21,7 @@ function getLanduseGroupOptions(value: string, all: boolean = false) {
landuse_id AS id,
description AS value
FROM reference_tables.buildings_landuse_group
ORDER BY description
`
);
}

61
app/src/frontend/building/data-containers/typology.tsx
View File

@ -11,6 +11,7 @@ import { CategoryViewProps } from './category-view-props';
import InfoBox from '../../components/info-box';
import { DataEntryGroup } from '../data-components/data-entry-group';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
import { useDisplayPreferences } from '../../displayPreferences-context';
const AttachmentFormOptions = [
"Detached",
@ -23,9 +24,37 @@ const AttachmentFormOptions = [
* Type view/edit section
*/
const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
const { darkLightTheme } = useDisplayPreferences();
const switchToClassificationMapStyle = (e) => {
e.preventDefault();
props.onMapColourScale('typology_classification')
}
const switchToStylePeriodMapStyle = (e) => {
e.preventDefault();
props.onMapColourScale('typology_style_period')
}
const switchToDynamicClassificationMapStyle = (e) => {
e.preventDefault();
props.onMapColourScale('typology_dynamic_classification')
}
const switchToAttachmentMapStyle = (e) => {
e.preventDefault();
props.onMapColourScale('building_attachment_form')
}
return (
<Fragment>
<DataEntryGroup name="Basic typology classification">
{(props.mapColourScale == "typology_classification") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToStylePeriodMapStyle}>
{'Click here to change map to show architectural style/historical period.'}
</button>
:
<button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToClassificationMapStyle}>
{"Click to change map to show typology classification."}
</button>
}
<SelectDataEntry
title={dataFields.typology_classification.title}
slug="typology_classification"
@ -75,6 +104,15 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
}
</DataEntryGroup>
<DataEntryGroup name="Architectural style/Historical period">
{(props.mapColourScale == "typology_style_period") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToClassificationMapStyle}>
{'Click to change map to show typology classification.'}
</button>
:
<button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToStylePeriodMapStyle}>
{"Click here to change map to show architectural style/historical period."}
</button>
}
<SelectDataEntry
title={dataFields.typology_style_period.title}
slug="typology_style_period"
@ -93,6 +131,9 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.typology_style_period}
verified_count={props.building.verified.typology_style_period}
/>
<div className={`alert alert-dark`} role="alert" style={{ fontSize: 14, backgroundColor: "#f6f8f9" }}>
<i className="source-url">For building age by year see <a href={"http://localhost:8080/edit/age/"+props.building.building_id}>Age & History</a>.</i>
</div>
<SelectDataEntry
title={dataFields.typology_style_period_source_type.title}
slug="typology_style_period_source_type"
@ -123,7 +164,16 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
</>
}
</DataEntryGroup>
<DataEntryGroup name="Dynamic classification">
<DataEntryGroup name="Dynamic tissue classification">
{(props.mapColourScale == "typology_dynamic_classification") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToClassificationMapStyle}>
{'Click to change map to show typology classification.'}
</button>
:
<button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToDynamicClassificationMapStyle}>
{"Click here to change map to show dynamic classification."}
</button>
}
<SelectDataEntry
title={dataFields.typology_dynamic_classification.title}
slug="typology_dynamic_classification"
@ -226,6 +276,15 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
}
</DataEntryGroup>
<DataEntryGroup name="Attachment/Adjacency">
{(props.mapColourScale == "building_attachment_form") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToClassificationMapStyle}>
{'Click to change map to show typology classification.'}
</button>
:
<button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAttachmentMapStyle}>
{"Click here to change map to show attachment/adjacency."}
</button>
}
<SelectDataEntry
title={dataFields.building_attachment_form.title}
slug="building_attachment_form"

2
app/src/frontend/config/categories-config.ts
View File

@ -98,7 +98,7 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
slug: 'typology',
name: 'Typology',
aboutUrl: 'https://pages.colouring.london/buildingtypology',
intro: 'Note: This section is currently under development, we are working to activate it as soon as possible. This section provides open data on the typology of the building.',
intro: 'This section provides open data on the typology of the building.',
},
[Category.LandUse]: {
slug: 'land-use',

57
app/src/frontend/config/category-maps-config.ts
View File

@ -299,10 +299,60 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
]
},
}],
[Category.Typology]: [{
[Category.Typology]: [
{
mapStyle: 'typology_classification',
legend: {
title: 'Typology classification',
elements: [
{ color: '#0311AB', text: '1-3 storeys: Detached' },
{ color: '#3845D4', text: '1-3 storeys: Tightly grouped' },
{ color: '#6D79FD', text: '1-3 storeys: Loosely grouped' },
{ color: '#FF5D00', text: '4-7 storeys: Detached' },
{ color: '#FF8000', text: '4-7 storeys: Tightly grouped' },
{ color: '#FFA200', text: '4-7 storeys: Loosely grouped' },
{ color: '#AB1303', text: '8+ storeys: Detached' },
{ color: '#D43A29', text: '8+ storeys: Tightly grouped' },
{ color: '#FC604F', text: '8+ storeys: Loosely grouped' },
]
}
},
{
mapStyle: 'typology_style_period',
legend: {
title: 'Architectural style',
elements: [
{ color: '#00B2CB', text: 'Roman (43AD-410)' },
{ color: '#00A9C6', text: 'Medieval (410-1485)' },
{ color: '#0097BC', text: 'Tudor (1485-1603)' },
{ color: '#008EB7', text: 'Stuart (1603 -1714)' },
{ color: '#0085B2', text: 'Georgian (1714-1837)' },
{ color: '#007CAD', text: 'Victorian (1837-1901)' },
{ color: '#0073A8', text: 'Edwardian (1901-1914)' },
{ color: '#006AA3', text: 'WWI - WWII (1914-45)' },
{ color: '#004F94', text: 'Post war (1945-1975)' },
{ color: '#00468F', text: 'Postmodern (1975-1990)' },
{ color: '#003D8A', text: '1990s' },
{ color: '#003485', text: '2000s' },
]
}
},
{
mapStyle: 'typology_dynamic_classification',
legend: {
title: 'Dynamic classification',
elements: [
{ color: '#F2E5FF', text: 'Repetitive small, domestic plots' },
{ color: '#CBABEA', text: 'Linear non-domestic, i.e. high streets' },
{ color: '#A272D4', text: 'Large plots with internal roads' },
{ color: '#EEEEEE', text: 'Other' },
]
}
},
{
mapStyle: 'building_attachment_form',
legend: {
title: 'Adjacency/Configuration',
title: 'Attachment/Adjacency',
elements: [
{ color: "#f2a2b9", text: "Detached" },
{ color: "#ab8fb0", text: "Semi-Detached" },
@ -310,7 +360,8 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
{ color: "#226291", text: "Mid-Terrace" }
]
},
}],
},
],
[Category.LandUse]: [
{
mapStyle: 'landuse',

25
app/src/frontend/config/data-fields-config.ts
View File

@ -1468,7 +1468,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
category: Category.Typology,
title: "Which description best suits the building and its context?",
tooltip: "HINT: Adapted from building type classifications developed in urban morphology. See <a href=\"https://www.smog.chalmers.se/\">https://www.smog.chalmers.se/</a> 'Space Matrix' for further information.",
example: "High rise: Not part of a group/cluster",
example: "8+ storeys: Detached",
items: [
'Low-rise: Not part of a group/cluster (1-3 core floors- excluding extensions)',
'Low-rise: Part of dense block/row/terrace',
@ -1498,24 +1498,20 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
category: Category.Typology,
title: "Which description best suits the building's architectural style/historical period?",
tooltip: "",
example: "High rise: Not part of a group/cluster",
example: "Georgian (1714-1837)",
items: [
'Roman (43AD-410)',
'Early Medieval (410-1066)',
'Mid- Late Medieval (1066-1485)',
'Medieval (410-1485)',
'Tudor (1485-1603)',
'Stuart (1603 -1714)',
'Georgian/William IV (1714-1837)',
'Georgian (1714-1837)',
'Victorian (1837-1901)',
'Edwardian (1901-1914)',
'World War I (1914-18)',
'Interwar (1918-39)',
'World War II (1939-45)',
'WWI - WWII (1914-45)',,
'Post war (1945-1975)',
'Postmodern (1975-1990)',
'1990s',
'2000s/2010s',
'2020s',
'2000s',
]
},
typology_style_period_source_type: {
@ -1535,11 +1531,12 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
category: Category.Typology,
title: "Which description best suits the building's plot?",
tooltip: "HINT: Based on a dynamic classification system for urban tissue developed by Brenda Case Scheer. For further information see: <a href=\"https://www.researchgate.net/publication/242150847_The_Anatomy_of_Sprawl\">https://www.researchgate.net/publication/242150847_The_Anatomy_of_Sprawl</a>.",
example: "High rise: Not part of a group/cluster",
example: "Large plots with internal roads",
items: [
'Small fairly regular plot part of repetitive domestic streets',
'Irregular shaped plots built along the edge of long established routes (e.g high streets)',
'Large plot with internal access roads (e.g. infrastructure hubs/large institution such as hospitals/universities/airports)',
'Repetitive small, domestic plots',
'Linear non-domestic, i.e. high streets',
'Large plots with internal roads',
'Other'
]
},
typology_dynamic_classification_source_type: {

5
app/src/frontend/config/tileserver-config.ts
View File

@ -24,7 +24,10 @@ export type BuildingMapTileset =
'dynamics_demolished_count' |
'disaster_severity' |
'team' |
'survival_status';
'survival_status'|
'typology_classification'|
'typology_style_period' |
'typology_dynamic_classification';
export type SpecialMapTileset = 'base_light' | 'base_night' | 'base_night_outlines' | 'highlight' | 'number_labels' | 'base_boroughs';

2
app/src/frontend/map/legend.css
View File

@ -57,7 +57,7 @@
padding: 0.5rem 0.25rem;
margin: 0.25rem 0.5rem;
width: auto;
font-size: 18px;
font-size: 17px;
border: 1px solid;
border-radius: 4px;
}

21
app/src/tiles/dataDefinition.ts
View File

@ -281,6 +281,27 @@ const LAYER_QUERIES = {
FROM
buildings
WHERE jsonb_array_length(demolished_buildings) > 0 OR dynamics_has_demolished_buildings = FALSE`,
typology_classification: `
SELECT
geometry_id,
typology_classification
FROM
buildings
WHERE typology_classification IS NOT NULL`,
typology_style_period: `
SELECT
geometry_id,
typology_style_period
FROM
buildings
WHERE typology_style_period IS NOT NULL`,
typology_dynamic_classification: `
SELECT
geometry_id,
typology_dynamic_classification
FROM
buildings
WHERE typology_dynamic_classification IS NOT NULL`,
};
const GEOMETRY_FIELD = 'geometry_geom';