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

New Keys for Typology category

Browse Source 
- Keys for all subcategories (except original building use)
- Buttons to change key/visible layer

Re: Issue #1212
This commit is contained in:
Mike Simpson 2023-07-25 17:05:20 +01:00
parent 49ab1c6836
commit 79adb2d49d
6 changed files with 298 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
app/map_styles/polygon.xml
View File

@ -973,4 +973,155 @@
<PolygonSymbolizer fill="#ffe8a9" /> <PolygonSymbolizer fill="#ffe8a9" />
</Rule> </Rule>
</Style> </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="#F2E5FF" />
</Rule>
<Rule>
<Filter>[typology_classification] = "Low-rise: Part of dense block/row/terrace"</Filter>
<PolygonSymbolizer fill="#CBABEA" />
</Rule>
<Rule>
<Filter>[typology_classification] = "Low-rise: Part of group of widely spaced blocks (includes semi-detached houses)"</Filter>
<PolygonSymbolizer fill="#A272D4" />
</Rule>
<Rule>
<Filter>[typology_classification] = "Mid-rise: Not part of a group/cluster (4-7 core floors)"</Filter>
<PolygonSymbolizer fill="#7939BE" />
</Rule>
<Rule>
<Filter>[typology_classification] = "Mid-rise: Part of group of densely spaced blocks"</Filter>
<PolygonSymbolizer fill="#5000A8" />
</Rule>
<Rule>
<Filter>[typology_classification] = "Mid-rise: Part of group of widely spaced blocks"</Filter>
<PolygonSymbolizer fill="#3F0086" />
</Rule>
<Rule>
<Filter>[typology_classification] = "High rise: Not part of a group/cluster"</Filter>
<PolygonSymbolizer fill="#2E0062" />
</Rule>
<Rule>
<Filter>[typology_classification] = "High-rise: Part of group of densely spaced blocks (8 + core floors)"</Filter>
<PolygonSymbolizer fill="#1D003E" />
</Rule>
<Rule>
<Filter>[typology_classification] = "High-rise: Part of group of widely spaced blocks"</Filter>
<PolygonSymbolizer fill="#0C001A" />
</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] = "Early Medieval (410-1066)"</Filter>
<PolygonSymbolizer fill="#00A9C6" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "Mid-Late Medieval (1066-1485)"</Filter>
<PolygonSymbolizer fill="#00A0C1" />
</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/William IV (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] = "World War I (1914-18)"</Filter>
<PolygonSymbolizer fill="#006AA3" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "Interwar (1918-39)"</Filter>
<PolygonSymbolizer fill="#00619E" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "World War II (1939-45)"</Filter>
<PolygonSymbolizer fill="#005899" />
</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/2010s"</Filter>
<PolygonSymbolizer fill="#003485" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "2020s"</Filter>
<PolygonSymbolizer fill="#002C7C" />
</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] = "Small fairly regular plot part of repetitive domestic streets"</Filter>
<PolygonSymbolizer fill="#F2E5FF" />
</Rule>
<Rule>
<Filter>[typology_dynamic_classification] = "Irregular shaped plots built along the edge of long established routes (e.g high streets)"</Filter>
<PolygonSymbolizer fill="#CBABEA" />
</Rule>
<Rule>
<Filter>[typology_dynamic_classification] = "Large plot with internal access roads (e.g. infrastructure hubs/large institution such as hospitals/universities/airports)"</Filter>
<PolygonSymbolizer fill="#A272D4" />
</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> </Map>

56
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 InfoBox from '../../components/info-box';
import { DataEntryGroup } from '../data-components/data-entry-group'; import { DataEntryGroup } from '../data-components/data-entry-group';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry'; import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
import { useDisplayPreferences } from '../../displayPreferences-context';
const AttachmentFormOptions = [ const AttachmentFormOptions = [
"Detached", "Detached",
@ -23,9 +24,37 @@ const AttachmentFormOptions = [
* Type view/edit section * Type view/edit section
*/ */
const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => { 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 ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Basic typology classification"> <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 <SelectDataEntry
title={dataFields.typology_classification.title} title={dataFields.typology_classification.title}
slug="typology_classification" slug="typology_classification"
@ -75,6 +104,15 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
} }
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Architectural style/Historical period"> <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 <SelectDataEntry
title={dataFields.typology_style_period.title} title={dataFields.typology_style_period.title}
slug="typology_style_period" slug="typology_style_period"
@ -124,6 +162,15 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
} }
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Dynamic classification"> <DataEntryGroup name="Dynamic 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 <SelectDataEntry
title={dataFields.typology_dynamic_classification.title} title={dataFields.typology_dynamic_classification.title}
slug="typology_dynamic_classification" slug="typology_dynamic_classification"
@ -226,6 +273,15 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
} }
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Attachment/Adjacency"> <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 <SelectDataEntry
title={dataFields.building_attachment_form.title} title={dataFields.building_attachment_form.title}
slug="building_attachment_form" slug="building_attachment_form"

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

@ -299,18 +299,72 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
] ]
}, },
}], }],
[Category.Typology]: [{ [Category.Typology]: [
mapStyle: 'building_attachment_form', {
legend: { mapStyle: 'typology_classification',
title: 'Adjacency/Configuration', legend: {
elements: [ title: 'Typology classification',
{ color: "#f2a2b9", text: "Detached" }, elements: [
{ color: "#ab8fb0", text: "Semi-Detached" }, { color: '#F2E5FF', text: 'Low-rise: Not part of a group/cluster (1-3 core floors- excluding extensions)' },
{ color: "#3891d1", text: "End-Terrace" }, { color: '#CBABEA', text: 'Low-rise: Part of dense block/row/terrace' },
{ color: "#226291", text: "Mid-Terrace" } { color: '#A272D4', text: 'Low-rise: Part of group of widely spaced blocks (includes semi-detached houses)' },
] { color: '#7939BE', text: 'Mid-rise: Not part of a group/cluster (4-7 core floors)' },
{ color: '#5000A8', text: 'Mid-rise: Part of group of densely spaced blocks' },
{ color: '#3F0086', text: 'Mid-rise: Part of group of widely spaced blocks' },
{ color: '#2E0062', text: 'High rise: Not part of a group/cluster' },
{ color: '#1D003E', text: 'High-rise: Part of group of densely spaced blocks (8 + core floors)' },
{ color: '#0C001A', text: 'High-rise: Part of group of widely spaced blocks' },
]
}
}, },
}], {
mapStyle: 'typology_style_period',
legend: {
title: 'Architectural style',
elements: [
{ color: '#00B2CB', text: 'Roman (43AD-410)' },
{ color: '#00A9C6', text: 'Early Medieval (410-1066)' },
{ color: '#00A0C1', text: 'Mid-Late Medieval (1066-1485)' },
{ color: '#0097BC', text: 'Tudor (1485-1603)' },
{ color: '#008EB7', text: 'Stuart (1603 -1714)' },
{ color: '#0085B2', text: 'Georgian/William IV (1714-1837)' },
{ color: '#007CAD', text: 'Victorian (1837-1901)' },
{ color: '#0073A8', text: 'Edwardian (1901-1914)' },
{ color: '#006AA3', text: 'World War I (1914-18)' },
{ color: '#00619E', text: 'Interwar (1918-39)' },
{ color: '#005899', text: 'World War II (1939-45)' },
{ color: '#004F94', text: 'Post war (1945-1975)' },
{ color: '#00468F', text: 'Postmodern (1975-1990)' },
{ color: '#003D8A', text: '1990s' },
{ color: '#003485', text: '2000s/2010s' },
{ color: '#002C7C', text: '2020s' },
]
}
},
{
mapStyle: 'typology_dynamic_classification',
legend: {
title: 'Dynamic classification',
elements: [
{ color: '#F2E5FF', text: 'Small fairly regular plot part of repetitive domestic streets' },
{ color: '#CBABEA', text: 'Irregular shaped plots built along the edge of long established routes (e.g high streets)' },
{ color: '#A272D4', text: 'Large plot with internal access roads (e.g. infrastructure hubs/large institution such as hospitals/universities/airports)' },
]
}
},
{
mapStyle: 'building_attachment_form',
legend: {
title: 'Attachment/Adjacency',
elements: [
{ color: "#f2a2b9", text: "Detached" },
{ color: "#ab8fb0", text: "Semi-Detached" },
{ color: "#3891d1", text: "End-Terrace" },
{ color: "#226291", text: "Mid-Terrace" }
]
},
},
],
[Category.LandUse]: [ [Category.LandUse]: [
{ {
mapStyle: 'landuse', mapStyle: 'landuse',

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

@ -1502,7 +1502,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
items: [ items: [
'Roman (43AD-410)', 'Roman (43AD-410)',
'Early Medieval (410-1066)', 'Early Medieval (410-1066)',
'Mid- Late Medieval (1066-1485)', 'Mid-Late Medieval (1066-1485)',
'Tudor (1485-1603)', 'Tudor (1485-1603)',
'Stuart (1603 -1714)', 'Stuart (1603 -1714)',
'Georgian/William IV (1714-1837)', 'Georgian/William IV (1714-1837)',

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

@ -24,7 +24,10 @@ export type BuildingMapTileset =
'dynamics_demolished_count' | 'dynamics_demolished_count' |
'disaster_severity' | 'disaster_severity' |
'team' | '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'; export type SpecialMapTileset = 'base_light' | 'base_night' | 'base_night_outlines' | 'highlight' | 'number_labels' | 'base_boroughs';

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

@ -281,6 +281,27 @@ const LAYER_QUERIES = {
FROM FROM
buildings buildings
WHERE jsonb_array_length(demolished_buildings) > 0 OR dynamics_has_demolished_buildings = FALSE`, 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'; const GEOMETRY_FIELD = 'geometry_geom';