Various Updates

- 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.

app/map_styles/polygon.xml

@@ -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>

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

@@ -40,11 +40,26 @@ 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) => {
@@ -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

app/src/frontend/building/data-containers/typology.tsx

@@ -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}

app/src/frontend/config/category-maps-config.ts

@@ -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: {

app/src/frontend/config/data-fields-config.ts

@@ -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)',
         ]

app/src/frontend/displayPreferences-context.tsx

@@ -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,

app/src/frontend/map/historic-data-switcher.tsx

@@ -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>
     );

app/src/frontend/map/historic-map-switcher.tsx

@@ -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>
+    );
+}

app/src/frontend/map/layers/historic-map-layer.tsx

@@ -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;
+    }
+}
+

app/src/frontend/map/map-button.css

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

app/src/frontend/map/map.tsx

@@ -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 />
+                            
                         </>
                         : <></>
                     }