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

Various Updates

Browse Source 
- Show Architectural Style in Typology, but can't edit it. Fixed link to Age & History. Removed Button and removed from Key.
- Added separate layers for Historical Map, with and without footprints.
-  Changed "Post War" to start in 1946.
This commit is contained in:
Mike Simpson 2023-08-16 12:24:28 +01:00
parent c5b7f80e91
commit 2ff4c472f0
11 changed files with 129 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/map_styles/polygon.xml
View File

@ -1145,7 +1145,7 @@
<PolygonSymbolizer fill="#3988C5" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "1945-1979 (Post war)"</Filter>
<Filter>[typology_style_period] = "1946-1979 (Post war)"</Filter>
<PolygonSymbolizer fill="#5ADFA2" />
</Rule>
<Rule>

42
app/src/frontend/building/data-containers/age-history.tsx
View File

@ -40,12 +40,27 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
const ageLinkUrl = `/${props.mode}/${Category.Age}/${props.building.building_id}`;
const { historicData, historicDataSwitchOnClick, darkLightTheme } = useDisplayPreferences();
const { historicMap, historicMapSwitchOnClick } = useDisplayPreferences();
const switchToSurvivalMapStyle = (e) => {
e.preventDefault();
props.onMapColourScale('survival_status');
historicMapSwitchOnClick(e);
if (historicData === 'enabled') {
historicDataSwitchOnClick(e);
}
}
const switchToSurvivalDataStyle = (e) => {
e.preventDefault();
props.onMapColourScale('survival_status');
historicDataSwitchOnClick(e);
if (historicMap === 'enabled') {
historicMapSwitchOnClick(e);
}
}
const switchToAgeMapStyle = (e) => {
e.preventDefault();
@ -208,9 +223,6 @@ const AgeView: 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={"/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"
@ -393,15 +405,6 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
}
</DataEntryGroup>
<DataEntryGroup name="Lifespan and site history">
{(props.mapColourScale == "survival_status") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAgeMapStyle}>
Click here to hide historical maps.
</button>
:
<button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToSurvivalMapStyle}>
Click here to show historical maps
</button>
}
<DataEntryGroup name="Constructions and demolitions on this site" showCount={false}>
<DynamicsBuildingPane>
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
@ -495,13 +498,22 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
Choose a colour to indicate whether the building has survived.
</i>
</div>
{(props.mapColourScale == "survival_status") ?
{(historicMap == "enabled") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAgeMapStyle}>
Click here to hide historical maps.
Click here to hide the 1890s OS historical map.
</button>
:
<button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToSurvivalMapStyle}>
Click here to show historical maps
Click here to show the 1890s OS historical map.
</button>
}
{(historicData == "enabled") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAgeMapStyle}>
Click here to hide the 1890s OS historical map with modern footprints.
</button>
:
<button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToSurvivalDataStyle}>
Click here to show the 1890s OS historical map with modern footprints.
</button>
}
<SelectDataEntry

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

@ -101,7 +101,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
}
</DataEntryGroup>
<DataEntryGroup name="Architectural style">
{(props.mapColourScale == "typology_style_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>
@ -109,8 +109,8 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
<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}
slug="typology_style_period"
value={props.building.typology_style_period}
@ -119,7 +119,9 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
disabled={true}
/>
{/*
<Verification
slug="typology_style_period"
allow_verify={props.user !== undefined && props.building.typology_style_period !== null && !props.edited}
@ -129,7 +131,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
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/architectural style data, see <a href={"/edit/age/"+props.building.building_id}>Age & History</a>.</i>
<i className="source-url">To edit the architectural style box, and to see the data mapped, please go to <a href={"/"+props.mode+"/age/"+props.building.building_id}>Age & History</a>.</i>
</div>
{/* <SelectDataEntry
title={dataFields.typology_style_period_source_type.title}

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

@ -61,7 +61,7 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
{ color: '#A71200', text: '1837-1901 (Victorian)' },
{ color: '#A272D4', text: '1901-1914 (Edwardian)' },
{ color: '#3988C5', text: '1914-1945 (WWI-WWII)' },
{ color: '#5ADFA2', text: '1945-1979 (Post war)' },
{ color: '#5ADFA2', text: '1946-1979 (Post war)' },
{ color: '#C2F47A', text: '1980-1999 (Late C20)' },
{ color: '#6FB40A', text: '2000-2025 (Early C21)' },
]
@ -336,7 +336,7 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
]
}
},
{
/*{
mapStyle: 'typology_style_period',
legend: {
title: 'Architectural style',
@ -349,12 +349,12 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
{ color: '#A71200', text: '1837-1901 (Victorian)' },
{ color: '#A272D4', text: '1901-1914 (Edwardian)' },
{ color: '#3988C5', text: '1914-1945 (WWI-WWII)' },
{ color: '#5ADFA2', text: '1945-1979 (Post war)' },
{ color: '#5ADFA2', text: '1946-1979 (Post war)' },
{ color: '#C2F47A', text: '1980-1999 (Late C20)' },
{ color: '#6FB40A', text: '2000-2025 (Early C21)' },
]
}
},
},*/
{
mapStyle: 'typology_dynamic_classification',
legend: {

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

@ -1784,7 +1784,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
'1837-1901 (Victorian)',
'1901-1914 (Edwardian)',
'1914-1945 (WWI-WWII)',,
'1945-1979 (Post war)',
'1946-1979 (Post war)',
'1980-1999 (Late 20th Century)',
'2000-2025 (Early 21st Century)',
]

41
app/src/frontend/displayPreferences-context.tsx
View File

@ -38,6 +38,10 @@ interface DisplayPreferencesContextState {
historicDataSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
historicDataSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
historicMap: LayerEnablementState;
historicMapSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
historicMapSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
darkLightTheme: MapTheme;
darkLightThemeSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
darkLightThemeSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
@ -87,6 +91,10 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
historicDataSwitch: stub,
historicDataSwitchOnClick: undefined,
historicMap: undefined,
historicMapSwitch: stub,
historicMapSwitchOnClick: undefined,
darkLightTheme: undefined,
darkLightThemeSwitch: stub,
darkLightThemeSwitchOnClick: undefined,
@ -107,6 +115,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
const defaultParcel = 'disabled'
const defaultConservation = 'disabled'
const defaultHistoricData = 'disabled'
const defaultHistoricMap = 'disabled'
const defaultShowLayerSelection = 'disabled'
const [vista, setVista] = useState<LayerEnablementState>(defaultVista);
const [flood, setFlood] = useState<LayerEnablementState>(defaultFlood);
@ -116,6 +125,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
const [parcel, setParcel] = useState<LayerEnablementState>(defaultParcel);
const [conservation, setConservation] = useState<LayerEnablementState>(defaultConservation);
const [historicData, setHistoricData] = useState<LayerEnablementState>(defaultHistoricData);
const [historicMap, setHistoricMap] = useState<LayerEnablementState>(defaultHistoricMap);
const [darkLightTheme, setDarkLightTheme] = useState<MapTheme>('night');
const [showLayerSelection, setShowLayerSelection] = useState<LayerEnablementState>(defaultShowLayerSelection);
@ -136,6 +146,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
setParcel(defaultParcel);
setConservation(defaultConservation);
setHistoricData(defaultHistoricData);
setHistoricMap(defaultHistoricMap);
setShowLayerSelection(defaultShowLayerSelection); // reset layers + hiding this panel is integrated into one action
//setDarkLightTheme('night'); // reset only layers
},
@ -167,6 +178,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
if(historicData != defaultHistoricData) {
return true;
}
if(historicMap != defaultHistoricMap) {
return true;
}
//darkLightTheme not handled here
return false;
}
@ -278,7 +292,10 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
const historicDataSwitch = useCallback(
(e) => {
flipHistoricData(e)
if (historicMap === 'enabled') {
fliphistoricMap(e);
}
flipHistoricData(e);
},
[historicData],
)
@ -291,6 +308,24 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
setHistoricData(newHistoric);
}
const historicMapSwitch = useCallback(
(e) => {
if (historicData === 'enabled') {
flipHistoricData(e);
}
fliphistoricMap(e);
},
[historicMap],
)
const historicMapSwitchOnClick = (e) => {
fliphistoricMap(e)
}
function fliphistoricMap(e) {
e.preventDefault();
const newHistoric = (historicMap === 'enabled')? 'disabled' : 'enabled';
setHistoricMap(newHistoric);
}
const darkLightThemeSwitch = useCallback(
(e) => {
flipDarkLightTheme(e)
@ -354,6 +389,10 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
historicDataSwitch,
historicDataSwitchOnClick,
historicMap,
historicMapSwitch,
historicMapSwitchOnClick,
darkLightTheme,
darkLightThemeSwitch,
darkLightThemeSwitchOnClick,

3
app/src/frontend/map/historic-data-switcher.tsx
View File

@ -5,11 +5,12 @@ import { useDisplayPreferences } from '../displayPreferences-context';
export const HistoricDataSwitcher: React.FC<{}> = (props) => {
const { historicData, historicDataSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`historic-data-switcher map-button ${historicData}-state ${darkLightTheme}`} onSubmit={historicDataSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(historicData === 'enabled')? 'The OS 1890s Historical Map on' : 'The OS 1890s Historical Map off'}
{(historicData === 'enabled')? 'OS 1890s Historical Map + Footprints on' : 'OS 1890s Historical Map + Footprints off'}
</button>
</form>
);

17
app/src/frontend/map/historic-map-switcher.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import './map-button.css';
import { useDisplayPreferences } from '../displayPreferences-context';
export const HistoricMapSwitcher: React.FC<{}> = (props) => {
const { historicMap, historicMapSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`historic-map-switcher map-button ${historicMap}-state ${darkLightTheme}`} onSubmit={historicMapSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(historicMap === 'enabled')? 'OS 1890s Historical Map on' : 'OS 1890s Historical Map off'}
</button>
</form>
);
}

21
app/src/frontend/map/layers/historic-map-layer.tsx Normal file
View File

@ -0,0 +1,21 @@
import * as React from 'react';
import { TileLayer } from 'react-leaflet';
import { LayerEnablementState } from '../../config/map-config';
import { BuildingBaseLayerAllZoom } from './building-base-layer-all-zoom';
import { useDisplayPreferences } from '../../displayPreferences-context';
import { BuildingDataLayer } from './building-data-layer';
export function HistoricMapLayer({revisionId}: {revisionId: string}) {
const { historicMap } = useDisplayPreferences();
if(historicMap == "enabled") {
return <>
<TileLayer
url="https://mapseries-tilesets.s3.amazonaws.com/london_1890s/{z}/{x}/{y}.png"
attribution='&copy; CC BY 4.0 - Reproduced with the permission of the <a href="https://maps.nls.uk/">National Library of Scotland</a>'
/>
</>
} else {
return null;
}
}

6
app/src/frontend/map/map-button.css
View File

@ -111,11 +111,15 @@
}
.historic-data-switcher {
top: 437px;
}
.historic-map-switcher {
top: 397px;
}
.parcel-switcher {
top: 437px;
top: 477px;
}
.map-switcher-inline {

5
app/src/frontend/map/map.tsx
View File

@ -15,6 +15,7 @@ import { BoroughBoundaryLayer } from './layers/borough-boundary-layer';
import { BoroughLabelLayer } from './layers/borough-label-layer';
import { ParcelBoundaryLayer } from './layers/parcel-boundary-layer';
import { HistoricDataLayer } from './layers/historic-data-layer';
import { HistoricMapLayer } from './layers/historic-map-layer';
import { FloodBoundaryLayer } from './layers/flood-boundary-layer';
import { ConservationAreaBoundaryLayer } from './layers/conservation-boundary-layer';
import { VistaBoundaryLayer } from './layers/vista-boundary-layer';
@ -34,6 +35,7 @@ import { ParcelSwitcher } from './parcel-switcher';
import { FloodSwitcher } from './flood-switcher';
import { ConservationAreaSwitcher } from './conservation-switcher';
import { HistoricDataSwitcher } from './historic-data-switcher';
import { HistoricMapSwitcher } from './historic-map-switcher';
import { VistaSwitcher } from './vista-switcher';
import { CreativeSwitcher } from './creative-switcher';
import { HousingSwitcher } from './housing-switcher';
@ -129,6 +131,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
>
<CityBoundaryLayer/>
<HistoricDataLayer revisionId={revisionId} />
<HistoricMapLayer revisionId={revisionId} />
<BoroughBoundaryLayer/>
<ParcelBoundaryLayer/>
<FloodBoundaryLayer/>
@ -167,10 +170,12 @@ export const ColouringMap : FC<ColouringMapProps> = ({
<ParcelSwitcher/>
<FloodSwitcher/>
<ConservationAreaSwitcher/>
<HistoricMapSwitcher/>
<HistoricDataSwitcher/>
<VistaSwitcher />
<HousingSwitcher />
<CreativeSwitcher />
</>
: <></>
}