From 0db7ceb4e9a45f4d7bbef29e55a049709c39456d Mon Sep 17 00:00:00 2001
From: Mike Simpson <mike.simpson@ncl.ac.uk>
Date: Thu, 3 Aug 2023 15:12:12 +0100
Subject: [PATCH 1/7] Move Attachment Form Options to be consistent with the
 rest of the code

---
 app/src/frontend/building/data-containers/typology.tsx | 9 +--------
 app/src/frontend/config/data-fields-config.ts          | 6 ++++++
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/src/frontend/building/data-containers/typology.tsx b/app/src/frontend/building/data-containers/typology.tsx
index 7ccc6854..736f418e 100644
--- a/app/src/frontend/building/data-containers/typology.tsx
+++ b/app/src/frontend/building/data-containers/typology.tsx
@@ -13,13 +13,6 @@ 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",
-    "Semi-Detached",
-    "End-Terrace",
-    "Mid-Terrace"
-];
-
 /**
 * Type view/edit section
 */
@@ -290,7 +283,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     slug="building_attachment_form"
                     value={props.building.building_attachment_form}
                     tooltip={dataFields.building_attachment_form.tooltip}
-                    options={AttachmentFormOptions}
+                    options={dataFields.building_attachment_form.items}
                     mode={props.mode}
                     copy={props.copy}
                     onChange={props.onChange}
diff --git a/app/src/frontend/config/data-fields-config.ts b/app/src/frontend/config/data-fields-config.ts
index 9bc3deb0..66f913ec 100644
--- a/app/src/frontend/config/data-fields-config.ts
+++ b/app/src/frontend/config/data-fields-config.ts
@@ -314,6 +314,12 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
         title: "Which description best explains the way the building is attached to others?",
         tooltip: "We have prepopulated these based on their current attachment. A building can either be detached, semi-detached or part of a terrace (middle or end)",
         example: "",
+        items: [
+            "Detached",
+            "Semi-Detached",
+            "End-Terrace",
+            "Mid-Terrace"
+        ]
     },
     building_attachment_source_type: {
         category: Category.Age,

From 602449cf58f9e9630a6cb17f7dd6e8927b05b88f Mon Sep 17 00:00:00 2001
From: Mike Simpson <mike.simpson@ncl.ac.uk>
Date: Thu, 3 Aug 2023 16:42:12 +0100
Subject: [PATCH 2/7] Add Original Land Use (Order) to Key

Copied code from Current Land Use (Land Use Category) to automatically calculate the Land Use Order for Original Land Use and then visualise it on the map. #1219
---
 app/map_styles/polygon.xml                    | 77 +++++++++++++++++++
 app/src/api/config/dataFields.ts              |  8 ++
 .../domainLogic/processBuildingUpdate.ts      | 36 ++++++++-
 app/src/frontend/building/data-container.tsx  | 11 ++-
 .../building/data-containers/land-use.tsx     |  1 +
 .../building/data-containers/typology.tsx     | 34 ++++++++
 .../frontend/config/category-maps-config.ts   | 23 ++++++
 app/src/frontend/config/data-fields-config.ts | 11 +++
 app/src/frontend/config/tileserver-config.ts  |  1 +
 app/src/tiles/dataDefinition.ts               |  9 +++
 migrations/045.typology_changes.down.sql      |  2 +
 migrations/045.typology_changes.up.sql        |  9 +++
 12 files changed, 220 insertions(+), 2 deletions(-)
 create mode 100644 migrations/045.typology_changes.down.sql
 create mode 100644 migrations/045.typology_changes.up.sql

diff --git a/app/map_styles/polygon.xml b/app/map_styles/polygon.xml
index 40fb04db..5023f6aa 100644
--- a/app/map_styles/polygon.xml
+++ b/app/map_styles/polygon.xml
@@ -913,6 +913,83 @@
             <LineSymbolizer stroke="#888" stroke-width="3.0"/>
         </Rule>
     </Style>
+    <Style name="original_landuse">
+        <Rule>
+            <Filter>[typology_original_use_order] = "Agriculture And Fisheries"</Filter>
+            <PolygonSymbolizer fill="#73ccd1" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Minerals"</Filter>
+            <PolygonSymbolizer fill="#45cce3" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Unclassified, presumed non-residential"</Filter>
+            <PolygonSymbolizer fill="#6c6f8e" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Recreation And Leisure"</Filter>
+            <PolygonSymbolizer fill="#ffbfbf" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Transport"</Filter>
+            <PolygonSymbolizer fill="#b3de69" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Utilities And Infrastructure"</Filter>
+            <PolygonSymbolizer fill="#cccccc" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Residential" and not ([typology_original_use_order] = "Garden buildings") and not ([typology_original_use_order] = "Hotels, boarding and guest houses") and not ([typology_original_use_verified])</Filter>
+            <PolygonSymbolizer fill="#252aa6" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Residential" and not ([typology_original_use_order] = "Garden buildings") and not ([typology_original_use_order] = "Hotels, boarding and guest houses") and ([typology_original_use_verified])</Filter>
+            <PolygonSymbolizer fill="#7025a6" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Residential" and [typology_original_use_order] = "Hotels, boarding and guest houses"</Filter>
+            <PolygonSymbolizer fill="#3c4194" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Residential" and [typology_original_use_order] = "Garden buildings" </Filter>
+            <PolygonSymbolizer fill="#1157fa" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Community Services"</Filter>
+            <PolygonSymbolizer fill="#fa667d" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Retail"</Filter>
+            <PolygonSymbolizer fill="#ff8c00" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Industry And Business"</Filter>
+            <PolygonSymbolizer fill="#f5f58f" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Vacant And Derelict"</Filter>
+            <PolygonSymbolizer fill="#ffffff" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Defence"</Filter>
+            <PolygonSymbolizer fill="#898944" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_original_use_order] = "Mixed Use"</Filter>
+            <PolygonSymbolizer fill="#e5050d" />
+        </Rule>
+
+        <Rule>
+            <MaxScaleDenominator>8530</MaxScaleDenominator>
+            <MinScaleDenominator>4264</MinScaleDenominator>
+            <LineSymbolizer stroke="#888" stroke-width="0.8"/>
+        </Rule>
+        <Rule>
+            <MaxScaleDenominator>4264</MaxScaleDenominator>
+            <MinScaleDenominator>0</MinScaleDenominator>
+            <LineSymbolizer stroke="#888" stroke-width="3.0"/>
+        </Rule>
+    </Style>
     <Style name="disaster_severity">
         <Rule>
             <Filter>[disaster_severity] = "Building destroyed"</Filter>
diff --git a/app/src/api/config/dataFields.ts b/app/src/api/config/dataFields.ts
index a14a1b4f..c0db758b 100644
--- a/app/src/api/config/dataFields.ts
+++ b/app/src/api/config/dataFields.ts
@@ -965,6 +965,14 @@ export const buildingAttributesConfig = valueType<DataFieldConfig>()({ /* eslint
         verify: true
     },
     typology_original_use : {
+        edit: true,
+        derivedEdit: true,
+        verify: true
+    },
+    typology_original_use_verified: {
+        edit: true,
+    },
+    typology_original_use_order : {
         edit: true,
         verify: true
     },
diff --git a/app/src/api/services/domainLogic/processBuildingUpdate.ts b/app/src/api/services/domainLogic/processBuildingUpdate.ts
index 2169c793..e753c6cb 100644
--- a/app/src/api/services/domainLogic/processBuildingUpdate.ts
+++ b/app/src/api/services/domainLogic/processBuildingUpdate.ts
@@ -9,7 +9,7 @@ import { ArgumentError } from '../../errors/general';
 import { updateLandUse } from './landUse';
 
 /**
- * Process land use classifications - derive land use order from land use groups
+ * Process current land use classifications - derive land use order from land use groups
  */
 async function processCurrentLandUseClassifications(
     buildingId: number,
@@ -40,6 +40,37 @@ async function processCurrentLandUseClassifications(
     }
 }
 
+/**
+ * Process original land use classifications - derive land use order from land use groups
+ */
+async function processOriginalLandUseClassifications(
+    buildingId: number,
+    buildingUpdate: Partial<BuildingAttributes>,
+    t?: ITask<any>
+): Promise<any> {
+    const currentBuildingData = await getBuildingData(buildingId);
+
+    try {
+        const currentLandUseUpdate = await updateLandUse(
+            {
+                landUseGroup: currentBuildingData.typology_original_use,
+                landUseOrder: currentBuildingData.typology_original_use_order
+            }, {
+                landUseGroup: buildingUpdate.typology_original_use
+            }
+        );
+
+        return Object.assign({}, buildingUpdate, {
+            typology_original_use: currentLandUseUpdate.landUseGroup,
+            typology_original_use_order: currentLandUseUpdate.landUseOrder,
+        });
+    } catch (error) {
+        if(error instanceof ArgumentError && error.argumentName === 'landUseUpdate') {
+            error.argumentName = 'buildingUpdate';
+        }
+        throw error;
+    }
+}
 
 /**
  * Process Dynamics data - check field relationships and sort demolished buildings by construction date
@@ -81,6 +112,9 @@ export async function processBuildingUpdate(buildingId: number, {attributes, use
     if(hasAnyOwnProperty(attributes, ['current_landuse_group'])) {
         attributes = await processCurrentLandUseClassifications(buildingId, attributes, t);
     }
+    if(hasAnyOwnProperty(attributes, ['typology_original_use'])) {
+        attributes = await processOriginalLandUseClassifications(buildingId, attributes, t);
+    }
     if(hasAnyOwnProperty(attributes, ['demolished_buildings', 'dynamics_has_demolished_buildings'])) {
         attributes = await processDynamicsDemolishedBuildings(buildingId, attributes, t);
     }
diff --git a/app/src/frontend/building/data-container.tsx b/app/src/frontend/building/data-container.tsx
index c72fd216..e5d7604d 100644
--- a/app/src/frontend/building/data-container.tsx
+++ b/app/src/frontend/building/data-container.tsx
@@ -99,7 +99,9 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
                                      'likes_total',
                                      'community_type_worth_keeping_total',
                                      'community_local_significance_total',
-                                     'community_expected_planning_application_total'
+                                     'community_expected_planning_application_total',
+                                     'typology_original_use',
+                                     'typology_original_use_verified'
                                     ]
             for (let key in dataFields) {  
                 let fieldName = props.building == undefined ? undefined : props.building[key];    
@@ -286,6 +288,13 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
 
                 this.doSubmit(edits);
             }
+            if (slug == 'typology_original_use'){
+                const edits = {
+                    'typology_original_use_verified': true
+                };
+
+                this.doSubmit(edits);
+            }
             console.log(slug + " verify button clicked")
         }
 
diff --git a/app/src/frontend/building/data-containers/land-use.tsx b/app/src/frontend/building/data-containers/land-use.tsx
index a9e92b8c..56235feb 100644
--- a/app/src/frontend/building/data-containers/land-use.tsx
+++ b/app/src/frontend/building/data-containers/land-use.tsx
@@ -138,6 +138,7 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
                             />
                         </>
                     }
+                    <hr/>
                     {
                         props.mode != 'view' &&
                         <div>
diff --git a/app/src/frontend/building/data-containers/typology.tsx b/app/src/frontend/building/data-containers/typology.tsx
index 736f418e..a79bcec0 100644
--- a/app/src/frontend/building/data-containers/typology.tsx
+++ b/app/src/frontend/building/data-containers/typology.tsx
@@ -35,6 +35,10 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
         e.preventDefault();
         props.onMapColourScale('building_attachment_form')
     }
+    const switchToLandUseMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('original_landuse')
+    }
 
     return (
         <Fragment>
@@ -216,6 +220,15 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 }
             </DataEntryGroup>
             <DataEntryGroup name="Original Use">
+                {(props.mapColourScale == "original_landuse") ? 
+                    <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={switchToLandUseMapStyle}>
+                        {"Click here to change map to original land use."}
+                    </button>
+                }
                 <MultiDataEntry
                     title={dataFields.typology_original_use.title}
                     slug="typology_original_use"
@@ -267,6 +280,27 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                         />
                     </>
                 }
+                <hr/>
+                {
+                    props.mode != 'view' &&
+                    <div>
+                        <div className={`alert alert-dark`} role="alert" style={{ fontSize: 13, backgroundColor: "#f6f8f9" }}>
+                            <i>
+                                Below is a more general classification for the original land use of this building, automatically derived from the information above.
+                            </i>
+                        </div>
+                    </div>
+                }
+                <DataEntry
+                    title={dataFields.typology_original_use_order.title}
+                    tooltip={dataFields.typology_original_use_order.tooltip}
+                    slug="typology_original_use_order"
+                    value={props.building.typology_original_use_order}
+                    mode={props.mode}
+                    disabled={true}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                />
             </DataEntryGroup>
             <DataEntryGroup name="Attachment/Adjacency">
                 {(props.mapColourScale == "building_attachment_form") ? 
diff --git a/app/src/frontend/config/category-maps-config.ts b/app/src/frontend/config/category-maps-config.ts
index 42d387c1..58d7a62c 100644
--- a/app/src/frontend/config/category-maps-config.ts
+++ b/app/src/frontend/config/category-maps-config.ts
@@ -348,6 +348,29 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
                 ]
             }
         },
+        {
+        mapStyle: 'original_landuse',
+            legend: {
+                title: 'Original Land Use',
+                elements: [
+                    { color: '#e5050d', text: 'Mixed Use' },
+                    { subtitle: 'Single use:'},
+                    { color: '#252aa6', text: 'Residential (unverified)' },
+                    { color: '#7025a6', text: 'Residential (verified)' },
+                    { color: '#ff8c00', text: 'Retail' },
+                    { color: '#f5f58f', text: 'Industry & Business' },
+                    { color: '#fa667d', text: 'Community Services' },
+                    { color: '#ffbfbf', text: 'Recreation & Leisure' },
+                    { color: '#b3de69', text: 'Transport' },
+                    { color: '#cccccc', text: 'Utilities & Infrastructure' },
+                    { color: '#898944', text: 'Defence' },
+                    { color: '#73ccd1', text: 'Agriculture' },
+                    { color: '#45cce3', text: 'Minerals' },
+                    { color: '#ffffff', text: 'Vacant & Derelict' },
+                    { color: '#6c6f8e', text: 'Unclassified, presumed non-residential' }
+                ]
+            },
+        },
         {
             mapStyle: 'building_attachment_form',
             legend: {
diff --git a/app/src/frontend/config/data-fields-config.ts b/app/src/frontend/config/data-fields-config.ts
index 66f913ec..2b643b27 100644
--- a/app/src/frontend/config/data-fields-config.ts
+++ b/app/src/frontend/config/data-fields-config.ts
@@ -1833,6 +1833,17 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
         tooltip: "Land use Groups as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)",
         example: ["", ""],
     },
+    typology_original_use_verified: {
+        category: Category.LandUse,
+        title: 'Has this land use been manually verified?',
+        example: true,
+    },
+    typology_original_use_order: {
+        category: Category.Typology,
+        title: "Original land use (order)",
+        tooltip: "Land use Order as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)",
+        example: "",
+    },
     typology_original_use_source_type: {
         category: Category.Typology,
         title: "Source type",
diff --git a/app/src/frontend/config/tileserver-config.ts b/app/src/frontend/config/tileserver-config.ts
index 73c2d4b7..ec6a2bcc 100644
--- a/app/src/frontend/config/tileserver-config.ts
+++ b/app/src/frontend/config/tileserver-config.ts
@@ -21,6 +21,7 @@ export type BuildingMapTileset =
     'sust_dec' |
     'building_attachment_form' |
     'landuse' |
+    'original_landuse' |
     'dynamics_demolished_count' |
     'disaster_severity' |
     'team' |
diff --git a/app/src/tiles/dataDefinition.ts b/app/src/tiles/dataDefinition.ts
index a10cff9f..c2a464f9 100644
--- a/app/src/tiles/dataDefinition.ts
+++ b/app/src/tiles/dataDefinition.ts
@@ -266,6 +266,15 @@ const LAYER_QUERIES = {
             buildings
         WHERE
             current_landuse_order IS NOT NULL`,
+    original_landuse: `
+        SELECT
+            geometry_id,
+            typology_original_use_order,
+            typology_original_use[1] as typology_original_use,
+            typology_original_use_verified
+        FROM
+            buildings
+        WHERE typology_original_use IS NOT NULL`,
     disaster_severity: `
         SELECT
             geometry_id,
diff --git a/migrations/045.typology_changes.down.sql b/migrations/045.typology_changes.down.sql
new file mode 100644
index 00000000..9797cd12
--- /dev/null
+++ b/migrations/045.typology_changes.down.sql
@@ -0,0 +1,2 @@
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_original_use_order;
+ALTER TABLE buildings DROP COLUMN IF NOT EXISTS typology_original_use_verified;
\ No newline at end of file
diff --git a/migrations/045.typology_changes.up.sql b/migrations/045.typology_changes.up.sql
new file mode 100644
index 00000000..ca2ecbd4
--- /dev/null
+++ b/migrations/045.typology_changes.up.sql
@@ -0,0 +1,9 @@
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_original_use_order text;
+
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_original_use_verified BOOLEAN NOT NULL DEFAULT FALSE;
+
+UPDATE buildings as b
+SET typology_original_use_verified = TRUE
+FROM building_verification as v
+WHERE b.building_id = v.building_id
+AND v.attribute = 'current_landuse_group';
\ No newline at end of file

From 4e32ad9067a6c79efd50dfab23e208e98e978e34 Mon Sep 17 00:00:00 2001
From: Mike Simpson <mike.simpson@ncl.ac.uk>
Date: Wed, 9 Aug 2023 14:08:39 +0100
Subject: [PATCH 3/7] Tweaks to Dates and how Period is displayed

---
 app/map_styles/polygon.xml                    | 22 +++++++++----------
 app/src/frontend/config/data-fields-config.ts | 22 +++++++++----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/app/map_styles/polygon.xml b/app/map_styles/polygon.xml
index 5023f6aa..eae2b562 100644
--- a/app/map_styles/polygon.xml
+++ b/app/map_styles/polygon.xml
@@ -1101,47 +1101,47 @@
     </Style>
     <Style name="typology_style_period">
         <Rule>
-            <Filter>[typology_style_period] = "Roman (43AD-410)"</Filter>
+            <Filter>[typology_style_period] = "43AD-410 (Roman)"</Filter>
             <PolygonSymbolizer fill="#FFF739" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "Medieval (410-1485)"</Filter>
+            <Filter>[typology_style_period] = "410-1485 (Medieval)"</Filter>
             <PolygonSymbolizer fill="#C5BD00" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "Tudor (1485-1603)"</Filter>
+            <Filter>[typology_style_period] = "1485-1603 (Tudor)"</Filter>
             <PolygonSymbolizer fill="#FF9A39" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "Stuart (1603 -1714)"</Filter>
+            <Filter>[typology_style_period] = "1603 -1714 (Stuart)"</Filter>
             <PolygonSymbolizer fill="#C56000" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "Georgian (1714-1837)"</Filter>
+            <Filter>[typology_style_period] = "1714-1837 (Georgian)"</Filter>
             <PolygonSymbolizer fill="#EA8072" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "Victorian (1837-1901)"</Filter>
+            <Filter>[typology_style_period] = "1837-1901 (Victorian)"</Filter>
             <PolygonSymbolizer fill="#A71200" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "Edwardian (1901-1914)"</Filter>
+            <Filter>[typology_style_period] = "1901-1914 (Edwardian)"</Filter>
             <PolygonSymbolizer fill="#A272D4" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "WWI - WWII (1914-45)"</Filter>
+            <Filter>[typology_style_period] = "1914-45 (WWI - WWII)"</Filter>
             <PolygonSymbolizer fill="#3988C5" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "Post war (1945-1975)"</Filter>
+            <Filter>[typology_style_period] = "1945-1979 (Post war)"</Filter>
             <PolygonSymbolizer fill="#5ADFA2" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "Late 20th Century (1975-2000)"</Filter>
+            <Filter>[typology_style_period] = "1980-1999 (Late 20th Century)"</Filter>
             <PolygonSymbolizer fill="#C2F47A" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "Early 21st Century (2000-Present)"</Filter>
+            <Filter>[typology_style_period] = "2000-2025 (Early 21st Century)"</Filter>
             <PolygonSymbolizer fill="#6FB40A" />
         </Rule>
 
diff --git a/app/src/frontend/config/data-fields-config.ts b/app/src/frontend/config/data-fields-config.ts
index 2b643b27..e2a9d4d0 100644
--- a/app/src/frontend/config/data-fields-config.ts
+++ b/app/src/frontend/config/data-fields-config.ts
@@ -1776,17 +1776,17 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
         tooltip: "",
         example: "Georgian (1714-1837)",
         items: [
-            'Roman (43AD-410)',
-            'Medieval (410-1485)',
-            'Tudor (1485-1603)',
-            'Stuart (1603 -1714)',
-            'Georgian (1714-1837)',
-            'Victorian (1837-1901)',
-            'Edwardian (1901-1914)',
-            'WWI - WWII (1914-45)',,
-            'Post war (1945-1975)',
-            'Late 20th Century (1975-2000)',
-            'Early 21st Century (2000-Present)',
+            '43AD-410 (Roman)',
+            '410-1485 (Medieval)',
+            '1485-1603 (Tudor)',
+            '1603 -1714 (Stuart)',
+            '1714-1837 (Georgian)',
+            '1837-1901 (Victorian)',
+            '1901-1914 (Edwardian)',
+            '1914-45 (WWI - WWII)',,
+            '1945-1979 (Post war)',
+            '1980-1999 (Late 20th Century)',
+            '2000-2025 (Early 21st Century)',
         ]
     },
     typology_style_period_source_type: {

From 089e2af6667e6ecb1a3214de72c561a2495c6617 Mon Sep 17 00:00:00 2001
From: Mike Simpson <mike.simpson@ncl.ac.uk>
Date: Wed, 9 Aug 2023 14:47:41 +0100
Subject: [PATCH 4/7] Move Architectural style data

- Now in Age/History
- Tweaks to text, fix typos, dates, text layout
- Also fix "click here to show historical maps" button on Age & History page
---
 app/map_styles/polygon.xml                    |   4 +-
 .../building/data-containers/age-history.tsx  | 110 +++++++++++++++---
 .../building/data-containers/typology.tsx     |  12 +-
 .../frontend/config/category-maps-config.ts   |  41 +++++--
 app/src/frontend/config/data-fields-config.ts |   4 +-
 5 files changed, 136 insertions(+), 35 deletions(-)

diff --git a/app/map_styles/polygon.xml b/app/map_styles/polygon.xml
index eae2b562..b886e461 100644
--- a/app/map_styles/polygon.xml
+++ b/app/map_styles/polygon.xml
@@ -1113,7 +1113,7 @@
             <PolygonSymbolizer fill="#FF9A39" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "1603 -1714 (Stuart)"</Filter>
+            <Filter>[typology_style_period] = "1603-1714 (Stuart)"</Filter>
             <PolygonSymbolizer fill="#C56000" />
         </Rule>
         <Rule>
@@ -1129,7 +1129,7 @@
             <PolygonSymbolizer fill="#A272D4" />
         </Rule>
         <Rule>
-            <Filter>[typology_style_period] = "1914-45 (WWI - WWII)"</Filter>
+            <Filter>[typology_style_period] = "1914-1945 (WWI-WWII)"</Filter>
             <PolygonSymbolizer fill="#3988C5" />
         </Rule>
         <Rule>
diff --git a/app/src/frontend/building/data-containers/age-history.tsx b/app/src/frontend/building/data-containers/age-history.tsx
index 47d2459e..3ee13b94 100644
--- a/app/src/frontend/building/data-containers/age-history.tsx
+++ b/app/src/frontend/building/data-containers/age-history.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import '../../map/map-button.css';
-import { dataFields } from '../../config/data-fields-config';
+import { commonSourceTypes, dataFields } from '../../config/data-fields-config';
 import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
 import { DataEntryGroup } from '../data-components/data-entry-group';
 import { DynamicsBuildingPane, DynamicsDataEntry } from './dynamics/dynamics-data-entry';
@@ -43,20 +43,29 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
 
     const switchToSurvivalMapStyle = (e) => {
         e.preventDefault();
+        props.onMapColourScale('survival_status');
+        historicDataSwitchOnClick(e);
+    }
 
-        if (props.mapColourScale == "survival_status") {
-            props.onMapColourScale('date_year');
-            historicDataSwitchOnClick(e);
-        }
-        else {
-            props.onMapColourScale('survival_status');
+    const switchToAgeMapStyle = (e) => {
+        e.preventDefault();
+
+        if (props.mapColourScale == "survival_status")
+        {
             historicDataSwitchOnClick(e);
         }
+
+        props.onMapColourScale('date_year')
+    }
+
+    const switchToStylePeriodMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('typology_style_period')
     }
 
     return (
         <Fragment>
-            <DataEntryGroup name="Building age">
+            <DataEntryGroup name="Building age/construction date">
                 <YearDataEntry
                     year={props.building.date_year}
                     upper={props.building.date_upper}
@@ -171,6 +180,67 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     tooltip='Coming Soon'
                 />*/}
             </DataEntryGroup>
+            <DataEntryGroup name="Architectural style">
+                {(props.mapColourScale == "typology_style_period") ? 
+                    <button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAgeMapStyle}>
+                        Click here to return to building age.
+                    </button>
+                :
+                    <button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToStylePeriodMapStyle}>
+                        Click here to show architectural style.
+                    </button>
+                }
+                <SelectDataEntry
+                    title={dataFields.typology_style_period.title}
+                    slug="typology_style_period"
+                    value={props.building.typology_style_period}
+                    tooltip={dataFields.typology_style_period.tooltip}
+                    options={dataFields.typology_style_period.items}
+                    mode={props.mode}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                />
+                <Verification
+                    slug="typology_style_period"
+                    allow_verify={props.user !== undefined && props.building.typology_style_period !== null && !props.edited}
+                    onVerify={props.onVerify}
+                    user_verified={props.user_verified.hasOwnProperty("typology_style_period")}
+                    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"
+                    value={props.building.typology_style_period_source_type}
+                    mode={props.mode}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                    tooltip={dataFields.typology_style_period_source_type.tooltip}
+                    placeholder={dataFields.typology_style_period_source_type.example}
+                    options={dataFields.typology_style_period_source_type.items}
+                    />
+                {(props.building.typology_style_period_source_type == commonSourceTypes[0] ||
+                    props.building.typology_style_period_source_type == commonSourceTypes[1] ||
+                    props.building.typology_style_period_source_type == null) ? <></> :
+                    <>
+                        <MultiDataEntry
+                            title={dataFields.typology_style_period_source_links.title}
+                            slug="typology_style_period_source_links"
+                            value={props.building.typology_style_period_source_links}
+                            mode={props.mode}
+                            copy={props.copy}
+                            onChange={props.onChange}
+                            tooltip={dataFields.typology_style_period_source_links.tooltip}
+                            placeholder="https://..."
+                            editableEntries={true}
+                            isUrl={true}
+                        />
+                    </>
+                }
+            </DataEntryGroup>
             <DataEntryGroup name="Cladding, extensions and retrofits">
                 <NumericDataEntry
                     slug='age_cladding_date'
@@ -323,9 +393,15 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 }
             </DataEntryGroup>
             <DataEntryGroup name="Lifespan and site history">
-                <button className={`map-switcher-inline ${props.mapColourScale == "survival_status" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToSurvivalMapStyle}>
-                    {(props.mapColourScale == "is_domestic")? 'Click here to hide historical maps':'Click here to show historical maps'}
-                </button>
+                {(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>
@@ -419,9 +495,15 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                         Choose a colour to indicate whether the building has survived.
                     </i>
                 </div>
-                <button className={`map-switcher-inline ${props.mapColourScale == "survival_status" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToSurvivalMapStyle}>
-                    {(props.mapColourScale == "is_domestic")? 'Click here to hide historical maps':'Click here to show historical maps'}
-                </button>
+                {(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>
+                }
                 <SelectDataEntry
                     title={dataFields.survival_status.title}
                     slug="survival_status"
diff --git a/app/src/frontend/building/data-containers/typology.tsx b/app/src/frontend/building/data-containers/typology.tsx
index a79bcec0..9aa93030 100644
--- a/app/src/frontend/building/data-containers/typology.tsx
+++ b/app/src/frontend/building/data-containers/typology.tsx
@@ -100,7 +100,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     </>
                 }
             </DataEntryGroup>
-            <DataEntryGroup name="Architectural style/Historical period">
+            <DataEntryGroup name="Architectural style">
                 {(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.'}
@@ -110,7 +110,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                         {"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}
@@ -127,11 +127,11 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     user_verified={props.user_verified.hasOwnProperty("typology_style_period")}
                     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>
+                    <i className="source-url">For building age/architectural style data, see <a href={"/edit/age/"+props.building.building_id}>Age & History</a>.</i>
                 </div>
-                <SelectDataEntry
+                {/* <SelectDataEntry
                     title={dataFields.typology_style_period_source_type.title}
                     slug="typology_style_period_source_type"
                     value={props.building.typology_style_period_source_type}
@@ -159,7 +159,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                             isUrl={true}
                         />
                     </>
-                }
+                } */}
             </DataEntryGroup>
             <DataEntryGroup name="Dynamic tissue classification">
                 {(props.mapColourScale == "typology_dynamic_classification") ? 
diff --git a/app/src/frontend/config/category-maps-config.ts b/app/src/frontend/config/category-maps-config.ts
index 58d7a62c..911153c3 100644
--- a/app/src/frontend/config/category-maps-config.ts
+++ b/app/src/frontend/config/category-maps-config.ts
@@ -48,6 +48,25 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
                 ]
             },
         },
+        {
+            mapStyle: 'typology_style_period',
+            legend: {
+                title: 'Architectural style',
+                elements: [
+                    { color: '#FFF739', text: '43AD-410 (Roman)' },
+                    { color: '#C5BD00', text: '410-1485 (Medieval)' },
+                    { color: '#FF9A39', text: '1485-1603 (Tudor)' },
+                    { color: '#C56000', text: '1603-1714 (Stuart)' },
+                    { color: '#EA8072', text: '1714-1837 (Georgian)' },
+                    { 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: '#C2F47A', text: '1980-1999 (Late C20)' },
+                    { color: '#6FB40A', text: '2000-2025 (Early C21)' },
+                ]
+            }
+        },
         {
             mapStyle: 'survival_status',
             legend: {
@@ -322,17 +341,17 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
             legend: {
                 title: 'Architectural style',
                 elements: [
-                    { color: '#FFF739', text: 'Roman (43AD-410)' },
-                    { color: '#C5BD00', text: 'Medieval (410-1485)' },
-                    { color: '#FF9A39', text: 'Tudor (1485-1603)' },
-                    { color: '#C56000', text: 'Stuart (1603 -1714)' },
-                    { color: '#EA8072', text: 'Georgian (1714-1837)' },
-                    { color: '#A71200', text: 'Victorian (1837-1901)' },
-                    { color: '#A272D4', text: 'Edwardian (1901-1914)' },
-                    { color: '#3988C5', text: 'WWI - WWII (1914-45)' },
-                    { color: '#5ADFA2', text: 'Post war (1945-1975)' },
-                    { color: '#C2F47A', text: 'Late C20th (1975-2000)' },
-                    { color: '#6FB40A', text: 'Early C21st (2000- )' },
+                    { color: '#FFF739', text: '43AD-410 (Roman)' },
+                    { color: '#C5BD00', text: '410-1485 (Medieval)' },
+                    { color: '#FF9A39', text: '1485-1603 (Tudor)' },
+                    { color: '#C56000', text: '1603-1714 (Stuart)' },
+                    { color: '#EA8072', text: '1714-1837 (Georgian)' },
+                    { 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: '#C2F47A', text: '1980-1999 (Late C20)' },
+                    { color: '#6FB40A', text: '2000-2025 (Early C21)' },
                 ]
             }
         },
diff --git a/app/src/frontend/config/data-fields-config.ts b/app/src/frontend/config/data-fields-config.ts
index e2a9d4d0..7933e368 100644
--- a/app/src/frontend/config/data-fields-config.ts
+++ b/app/src/frontend/config/data-fields-config.ts
@@ -1779,11 +1779,11 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
             '43AD-410 (Roman)',
             '410-1485 (Medieval)',
             '1485-1603 (Tudor)',
-            '1603 -1714 (Stuart)',
+            '1603-1714 (Stuart)',
             '1714-1837 (Georgian)',
             '1837-1901 (Victorian)',
             '1901-1914 (Edwardian)',
-            '1914-45 (WWI - WWII)',,
+            '1914-1945 (WWI-WWII)',,
             '1945-1979 (Post war)',
             '1980-1999 (Late 20th Century)',
             '2000-2025 (Early 21st Century)',

From 3e84e6f960144e1823b66062217d52deb13aa9df Mon Sep 17 00:00:00 2001
From: Mike Simpson <mike.simpson@ncl.ac.uk>
Date: Thu, 10 Aug 2023 14:14:32 +0100
Subject: [PATCH 5/7] Change line colour/thickness on Survival Map

- Blue lines instead of red
- Get thinner as you zoom out
- Disappear above a certain zoom level
---
 app/map_styles/polygon.xml | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/map_styles/polygon.xml b/app/map_styles/polygon.xml
index b886e461..da79cc6e 100644
--- a/app/map_styles/polygon.xml
+++ b/app/map_styles/polygon.xml
@@ -19,7 +19,19 @@
     </Style>
     <Style name="base_night_outlines">
         <Rule>
-            <LineSymbolizer stroke="#ff0000ff" stroke-width="1" />
+            <MaxScaleDenominator>20000</MaxScaleDenominator>
+            <MinScaleDenominator>1200</MinScaleDenominator>
+            <LineSymbolizer stroke="#0081AF" stroke-width="0.5"/>
+        </Rule>
+        <Rule>
+            <MaxScaleDenominator>12000</MaxScaleDenominator>
+            <MinScaleDenominator>8000</MinScaleDenominator>
+            <LineSymbolizer stroke="#0081AF" stroke-width="1.5"/>
+        </Rule>
+        <Rule>
+            <MaxScaleDenominator>8000</MaxScaleDenominator>
+            <MinScaleDenominator>0</MinScaleDenominator>
+            <LineSymbolizer stroke="#0081AF" stroke-width="2.5"/>
         </Rule>
     </Style>
     <Style name="base_boroughs">

From c5b7f80e915fdbd0efbccb00a19cd06ba89429ac Mon Sep 17 00:00:00 2001
From: Mike Simpson <mike.simpson@ncl.ac.uk>
Date: Thu, 10 Aug 2023 14:20:51 +0100
Subject: [PATCH 6/7] Tweaks

---
 app/map_styles/polygon.xml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/map_styles/polygon.xml b/app/map_styles/polygon.xml
index da79cc6e..963aa1f9 100644
--- a/app/map_styles/polygon.xml
+++ b/app/map_styles/polygon.xml
@@ -26,12 +26,12 @@
         <Rule>
             <MaxScaleDenominator>12000</MaxScaleDenominator>
             <MinScaleDenominator>8000</MinScaleDenominator>
-            <LineSymbolizer stroke="#0081AF" stroke-width="1.5"/>
+            <LineSymbolizer stroke="#0081AF" stroke-width="1.8"/>
         </Rule>
         <Rule>
             <MaxScaleDenominator>8000</MaxScaleDenominator>
             <MinScaleDenominator>0</MinScaleDenominator>
-            <LineSymbolizer stroke="#0081AF" stroke-width="2.5"/>
+            <LineSymbolizer stroke="#0081AF" stroke-width="4.0"/>
         </Rule>
     </Style>
     <Style name="base_boroughs">

From 2ff4c472f037de3128e51f75b8401c6f8e589fb7 Mon Sep 17 00:00:00 2001
From: Mike Simpson <mike.simpson@ncl.ac.uk>
Date: Wed, 16 Aug 2023 12:24:28 +0100
Subject: [PATCH 7/7] 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                    |  2 +-
 .../building/data-containers/age-history.tsx  | 42 ++++++++++++-------
 .../building/data-containers/typology.tsx     | 10 +++--
 .../frontend/config/category-maps-config.ts   |  8 ++--
 app/src/frontend/config/data-fields-config.ts |  2 +-
 .../frontend/displayPreferences-context.tsx   | 41 +++++++++++++++++-
 .../frontend/map/historic-data-switcher.tsx   |  3 +-
 .../frontend/map/historic-map-switcher.tsx    | 17 ++++++++
 .../map/layers/historic-map-layer.tsx         | 21 ++++++++++
 app/src/frontend/map/map-button.css           |  6 ++-
 app/src/frontend/map/map.tsx                  |  5 +++
 11 files changed, 129 insertions(+), 28 deletions(-)
 create mode 100644 app/src/frontend/map/historic-map-switcher.tsx
 create mode 100644 app/src/frontend/map/layers/historic-map-layer.tsx

diff --git a/app/map_styles/polygon.xml b/app/map_styles/polygon.xml
index 963aa1f9..7f54c7d8 100644
--- a/app/map_styles/polygon.xml
+++ b/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>
diff --git a/app/src/frontend/building/data-containers/age-history.tsx b/app/src/frontend/building/data-containers/age-history.tsx
index 3ee13b94..8100cbd2 100644
--- a/app/src/frontend/building/data-containers/age-history.tsx
+++ b/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
diff --git a/app/src/frontend/building/data-containers/typology.tsx b/app/src/frontend/building/data-containers/typology.tsx
index 9aa93030..f1d46d60 100644
--- a/app/src/frontend/building/data-containers/typology.tsx
+++ b/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}
diff --git a/app/src/frontend/config/category-maps-config.ts b/app/src/frontend/config/category-maps-config.ts
index 911153c3..ab62917d 100644
--- a/app/src/frontend/config/category-maps-config.ts
+++ b/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: {
diff --git a/app/src/frontend/config/data-fields-config.ts b/app/src/frontend/config/data-fields-config.ts
index 7933e368..c5e60342 100644
--- a/app/src/frontend/config/data-fields-config.ts
+++ b/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)',
         ]
diff --git a/app/src/frontend/displayPreferences-context.tsx b/app/src/frontend/displayPreferences-context.tsx
index 01a0ff3b..a5b0094e 100644
--- a/app/src/frontend/displayPreferences-context.tsx
+++ b/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,
diff --git a/app/src/frontend/map/historic-data-switcher.tsx b/app/src/frontend/map/historic-data-switcher.tsx
index c1eadb58..db64c17e 100644
--- a/app/src/frontend/map/historic-data-switcher.tsx
+++ b/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>
     );
diff --git a/app/src/frontend/map/historic-map-switcher.tsx b/app/src/frontend/map/historic-map-switcher.tsx
new file mode 100644
index 00000000..6e6be073
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file
diff --git a/app/src/frontend/map/layers/historic-map-layer.tsx b/app/src/frontend/map/layers/historic-map-layer.tsx
new file mode 100644
index 00000000..405fc5dc
--- /dev/null
+++ b/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;
+    }
+}
+
diff --git a/app/src/frontend/map/map-button.css b/app/src/frontend/map/map-button.css
index b77c57d8..277c49a7 100644
--- a/app/src/frontend/map/map-button.css
+++ b/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 {
diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx
index a1cb637a..1a1e9286 100644
--- a/app/src/frontend/map/map.tsx
+++ b/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 />
+                            
                         </>
                         : <></>
                     }