unify map display state store

fix night mode display for buttons

app/src/frontend/displayPreferences-context.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 
-import { LayerEnablementState } from './config/map-config';
+import { LayerEnablementState, MapTheme } from './config/map-config';
 
 interface DisplayPreferencesContextState {
     vista: LayerEnablementState;
@@ -18,6 +18,26 @@ interface DisplayPreferencesContextState {
     housing: LayerEnablementState;
     housingSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
     housingSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
+
+    conservation: LayerEnablementState;
+    conservationSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
+    conservationSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
+
+    parcel: LayerEnablementState;
+    parcelSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
+    parcelSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
+
+    borough: LayerEnablementState;
+    boroughSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
+    boroughSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
+
+    historicData: LayerEnablementState;
+    historicDataSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
+    historicDataSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
+
+    darkLightTheme: MapTheme;
+    darkLightThemeSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
+    darkLightThemeSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 const stub = (): never => {
@@ -41,7 +61,6 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
     housingSwitch: stub,
     housingSwitchOnClick: undefined,
 
-    /*
     conservation: undefined,
     conservationSwitch: stub,
     conservationSwitchOnClick: undefined,
@@ -53,10 +72,14 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
     borough: undefined,
     boroughSwitch: stub,
     boroughSwitchOnClick: undefined,
-    not needed right now
 
-    historicData
+    historicData: undefined,
-    */
+    historicDataSwitch: stub,
+    historicDataSwitchOnClick: undefined,
+
+    darkLightTheme: undefined,
+    darkLightThemeSwitch: stub,
+    darkLightThemeSwitchOnClick: undefined,
 });
 
 const noop = () => {};
@@ -66,14 +89,11 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
     const [flood, setFlood] = useState<LayerEnablementState>('disabled');
     const [creative, setCreative] = useState<LayerEnablementState>('disabled');
     const [housing, setHousing] = useState<LayerEnablementState>('disabled');
-
-    /*
     const [borough, setBorough] = useState<LayerEnablementState>('enabled');
     const [parcel, setParcel] = useState<LayerEnablementState>('disabled');
     const [conservation, setConservation] = useState<LayerEnablementState>('disabled');
     const [historicData, setHistoricData] = useState<LayerEnablementState>('disabled');
-    */
+    const [darkLightTheme, setDarkLightTheme] = useState<MapTheme>('night');
-
 
     const vistaSwitch = useCallback(
         (e) => {
@@ -135,6 +155,82 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
         setCreative(newCreative);
     }
 
+    const boroughSwitch = useCallback(
+        (e) => {
+            flipBorough(e)
+        },
+        [borough],
+    )
+    const boroughSwitchOnClick = (e) => {
+        flipBorough(e)
+    }
+    function flipBorough(e) {
+        e.preventDefault();
+        const newBorough = (borough === 'enabled')? 'disabled' : 'enabled';
+        setBorough(newBorough);
+    }
+
+    const parcelSwitch = useCallback(
+        (e) => {
+            flipParcel(e)
+        },
+        [parcel],
+    )
+    const parcelSwitchOnClick = (e) => {
+        flipParcel(e)
+    }
+    function flipParcel(e) {
+        e.preventDefault();
+        const newParcel = (parcel === 'enabled')? 'disabled' : 'enabled';
+        setParcel(newParcel);
+    }
+
+    const conservationSwitch = useCallback(
+        (e) => {
+            flipConservation(e)
+        },
+        [conservation],
+    )
+    const conservationSwitchOnClick = (e) => {
+        flipConservation(e)
+    }
+    function flipConservation(e) {
+        e.preventDefault();
+        const newConservation = (conservation === 'enabled')? 'disabled' : 'enabled';
+        setConservation(newConservation);
+    }
+
+    const historicDataSwitch = useCallback(
+        (e) => {
+            flipHistoricData(e)
+        },
+        [historicData],
+    )
+    const historicDataSwitchOnClick = (e) => {
+        flipHistoricData(e)
+    }
+    function flipHistoricData(e) {
+        e.preventDefault();
+        const newHistoric = (historicData === 'enabled')? 'disabled' : 'enabled';
+        setHistoricData(newHistoric);
+    }
+
+    const darkLightThemeSwitch = useCallback(
+        (e) => {
+            flipDarkLightTheme(e)
+        },
+        [darkLightTheme],
+    )
+    const darkLightThemeSwitchOnClick = (e) => {
+        flipDarkLightTheme(e)
+    }
+    function flipDarkLightTheme(e) {
+        e.preventDefault();
+        const newDarkLightTheme = (darkLightTheme === 'light')? 'night' : 'light';
+        setDarkLightTheme(newDarkLightTheme);
+    }
+
+
     return (
         <DisplayPreferencesContext.Provider value={{
             vista,
@@ -148,7 +244,25 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
             creativeSwitchOnClick,
             housing,
             housingSwitch,
-            housingSwitchOnClick
+            housingSwitchOnClick,
+            conservation,
+            conservationSwitch,
+            conservationSwitchOnClick,
+            parcel,
+            parcelSwitch,
+            parcelSwitchOnClick,
+        
+            borough,
+            boroughSwitch,
+            boroughSwitchOnClick,
+        
+            historicData,
+            historicDataSwitch,
+            historicDataSwitchOnClick,
+
+            darkLightTheme,
+            darkLightThemeSwitch,
+            darkLightThemeSwitchOnClick
         }}>
             {children}
         </DisplayPreferencesContext.Provider>

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

@@ -1,19 +1,16 @@
 import React from 'react';
 
 import './borough-switcher.css';
+import { useDisplayPreferences } from '../displayPreferences-context';
 
-interface BoroughSwitcherProps {
+export const BoroughSwitcher: React.FC<{}> = () => {
-    currentDisplay: string;
+    const { borough, boroughSwitch, darkLightTheme } = useDisplayPreferences();
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    return (
-}
+        <form className={`borough-switcher ${darkLightTheme}`} onSubmit={boroughSwitch}>
-
-const BoroughSwitcher: React.FC<BoroughSwitcherProps> = (props) => (
-    <form className={`borough-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-            {(props.currentDisplay === 'enabled')? 'Switch off Borough Boundaries' : 'Switch on Borough Boundaries'}
+                {(borough === 'enabled')? 'Switch off Borough Boundaries' : 'Switch on Borough Boundaries'}
             </button>
         </form>
     );
-
+}
-export default BoroughSwitcher;

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

@@ -1,19 +1,16 @@
 import React from 'react';
 
 import './conservation-switcher.css';
+import { useDisplayPreferences } from '../displayPreferences-context';
 
-interface ConservationAreaSwitcherProps {
+export const ConservationAreaSwitcher: React.FC<{}> = (props) => {
-    currentDisplay: string;
+    const { conservation, conservationSwitch, darkLightTheme } = useDisplayPreferences();
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    return (
-}
+        <form className={`conservation-switcher ${darkLightTheme}`} onSubmit={conservationSwitch}>
-
-const ConservationAreaSwitcherProps: React.FC<ConservationAreaSwitcherProps> = (props) => (
-    <form className={`conservation-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-            {(props.currentDisplay === 'enabled')? 'Switch off Conservation Areas' : 'Switch on Conservation Areas'}
+                {(conservation === 'enabled')? 'Switch off Conservation Areas' : 'Switch on Conservation Areas'}
             </button>
         </form>
     );
-
+}
-export default ConservationAreaSwitcherProps;

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

@@ -4,9 +4,9 @@ import './creative-switcher.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const CreativeSwitcher: React.FC<{}> = () => {
-    const { creative, creativeSwitch } = useDisplayPreferences();
+    const { creative, creativeSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`creative-switcher ${creative}`} onSubmit={creativeSwitch}>
+        <form className={`creative-switcher ${darkLightTheme}`} onSubmit={creativeSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
                 {(creative === 'enabled')? 'Switch off Creative Enterprise Zones' : 'Switch on Creative Enterprise Zones'}

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

@@ -1,19 +1,23 @@
 import React from 'react';
 
 import './data-switcher.css';
+import { useDisplayPreferences } from '../displayPreferences-context';
 
 interface DataLayerSwitcherProps {
     currentDisplay: string;
     onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 
-const DataLayerSwitcher: React.FC<DataLayerSwitcherProps> = (props) => (
+const DataLayerSwitcher: React.FC<DataLayerSwitcherProps> = (props) => {
-    <form className={`data-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
+    const { darkLightTheme } = useDisplayPreferences();
+    return (
+        <form className={`data-switcher ${darkLightTheme}`} onSubmit={props.onSubmit}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
                 {(props.currentDisplay === 'enabled')? 'Hide layer options' : 'Show layer options'}
             </button>
         </form>
     );
+}
 
 export default DataLayerSwitcher;

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

@@ -4,9 +4,9 @@ import './flood-switcher.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const FloodSwitcher: React.FC<{}> = () => {
-    const { flood, floodSwitch } = useDisplayPreferences();
+    const { flood, floodSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`flood-switcher ${flood}`} onSubmit={floodSwitch}>
+        <form className={`flood-switcher ${darkLightTheme}`} onSubmit={floodSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
                 {(flood === 'enabled')? 'Switch off Flood Zones' : 'Switch on Flood Zones'}

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

@@ -1,19 +1,16 @@
 import React from 'react';
 
 import './historic-data-switcher.css';
+import { useDisplayPreferences } from '../displayPreferences-context';
 
-interface HistoricDataSwitcherProps {
+export const HistoricDataSwitcher: React.FC<{}> = (props) => {
-    currentDisplay: string;
+    const { historicData, historicDataSwitch, darkLightTheme } = useDisplayPreferences();
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    return (
-}
+        <form className={`historic-data-switcher ${darkLightTheme}`} onSubmit={historicDataSwitch}>
-
-const HistoricDataSwitcherProps: React.FC<HistoricDataSwitcherProps> = (props) => (
-    <form className={`historic-data-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-            {(props.currentDisplay === 'enabled')? 'Switch off the OS 1890s Historical Map' : 'Switch on the OS 1890s Historical Map'}
+                {(historicData === 'enabled')? 'Switch off the OS 1890s Historical Map' : 'Switch on the OS 1890s Historical Map'}
             </button>
         </form>
     );
-
+}
-export default HistoricDataSwitcherProps;

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

@@ -4,9 +4,9 @@ import './housing-switcher.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const HousingSwitcher: React.FC<{}> = () => {
-    const { housing, housingSwitch } = useDisplayPreferences();
+    const { housing, housingSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-    <form className={`housing-switcher ${housing}`} onSubmit={housingSwitch}>
+    <form className={`housing-switcher ${darkLightTheme}`} onSubmit={housingSwitch}>
         <button className="btn btn-outline btn-outline-dark"
             type="submit">
             {(housing === 'enabled')? 'Switch off Housing Zones' : 'Switch on Housing Zones'}

app/src/frontend/map/layers/borough-boundary-layer.tsx

@@ -1,18 +1,19 @@
 import { GeoJsonObject } from 'geojson';
 import React, { useEffect, useState } from 'react';
 import { GeoJSON } from 'react-leaflet';
-import { LayerEnablementState } from '../../config/map-config';
+import { useDisplayPreferences } from '../../displayPreferences-context';
 import { apiGet } from '../../apiHelpers';
 
-export function BoroughBoundaryLayer({enablement}: {enablement: LayerEnablementState}) {
+export function BoroughBoundaryLayer({}) {
     const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
+    const { borough } = useDisplayPreferences();
 
     useEffect(() => {
         apiGet('/geometries/boroughs.geojson')
             .then(data => setBoundaryGeojson(data as GeoJsonObject));
     }, []);
 
-    if(enablement == "enabled") {
+    if(borough == "enabled") {
         return boundaryGeojson &&
         <GeoJSON 
         attribution='Borough boundary from <a href=https://data.london.gov.uk/dataset/london_boroughs>London Datastore</a> Ordnance Survey Open Data - Contains public sector information licensed under the <a href=https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>Open Government Licence v3.0</a>'
@@ -20,7 +21,7 @@ export function BoroughBoundaryLayer({enablement}: {enablement: LayerEnablementS
         style={{color: '#f00', fill: false, weight: 1}}
        /* minNativeZoom={17}*/
     />;
-    } else if (enablement == "disabled") {
+    } else if (borough == "disabled") {
         return <div></div>
         // do not display anything
         return boundaryGeojson &&

app/src/frontend/map/layers/conservation-boundary-layer.tsx

@@ -1,25 +1,26 @@
 import { GeoJsonObject } from 'geojson';
 import React, { useEffect, useState } from 'react';
 import { GeoJSON } from 'react-leaflet';
-import { LayerEnablementState } from '../../config/map-config';
+import { useDisplayPreferences } from '../../displayPreferences-context';
 import { apiGet } from '../../apiHelpers';
 
-export function ConservationAreaBoundaryLayer({enablement}: {enablement: LayerEnablementState}) {
+export function ConservationAreaBoundaryLayer({}) {
     const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
+    const { conservation } = useDisplayPreferences();
 
     useEffect(() => {
         apiGet('/geometries/conservation_areas.geojson')
             .then(data => setBoundaryGeojson(data as GeoJsonObject));
     }, []);
 
-    if(enablement == "enabled") {
+    if(conservation == "enabled") {
         return boundaryGeojson &&
         <GeoJSON 
         attribution='Conservation areas by <a href=http://www.bedfordpark.net/leo/planning/>Leo Hall</a> on <a href=https://creativecommons.org/licenses/by/4.0/legalcode>CC-BY 4.0 licence</a>, contains data under <a href=https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>the Open Government Licence v.3.0</a>'
         data={boundaryGeojson}
         style={{color: '#cd7090', fill: true, weight: 1, opacity: 1, fillOpacity: 0.8}}
     />;
-    } else if (enablement == "disabled") {
+    } else if (conservation == "disabled") {
         return <div></div>
     } else {
         return boundaryGeojson &&

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

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { TileLayer } from 'react-leaflet';
 import { LayerEnablementState } from '../../config/map-config';
 import { BuildingBaseLayer } from './building-base-layer';
+import { useDisplayPreferences } from '../../displayPreferences-context';
 
-export function HistoricDataLayer({enablement}: {enablement: LayerEnablementState}) {
+export function HistoricDataLayer({}) {
-    if(enablement == "enabled") {
+    const { historicData } = useDisplayPreferences();
+    if(historicData == "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>'

app/src/frontend/map/layers/parcel-boundary-layer.tsx

@@ -3,16 +3,18 @@ import React, { useEffect, useState } from 'react';
 import { GeoJSON } from 'react-leaflet';
 import { LayerEnablementState } from '../../config/map-config';
 import { apiGet } from '../../apiHelpers';
+import { useDisplayPreferences } from '../../displayPreferences-context';
 
-export function ParcelBoundaryLayer({enablement}: {enablement: LayerEnablementState}) {
+export function ParcelBoundaryLayer() {
     const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
+    const { parcel } = useDisplayPreferences();
 
     useEffect(() => {
         apiGet('/geometries/parcels_city_of_london.geojson')
             .then(data => setBoundaryGeojson(data as GeoJsonObject));
     }, []);
 
-    if(enablement == "enabled") {
+    if(parcel == "enabled") {
         return boundaryGeojson &&
         <GeoJSON 
         attribution='Parcel boundary from <a href=https://use-land-property-data.service.gov.uk/datasets/inspire/download>Index polygons spatial data (INSPIRE)</a> - <a href=www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>Open Government Licence v3</a>'
@@ -20,7 +22,7 @@ export function ParcelBoundaryLayer({enablement}: {enablement: LayerEnablementSt
         style={{color: '#ff0', fill: false, weight: 1}}
        /* minNativeZoom={17}*/
     />;
-    } else if (enablement == "disabled") {
+    } else if (parcel == "disabled") {
         return <div></div>
         // do not display anything
         return boundaryGeojson &&

app/src/frontend/map/map.tsx

@@ -31,15 +31,16 @@ import { Legend } from './legend';
 import SearchBox from './search-box';
 import ThemeSwitcher from './theme-switcher';
 import DataLayerSwitcher from './data-switcher';
-import BoroughSwitcher from './borough-switcher';
+import { BoroughSwitcher } from './borough-switcher';
-import ParcelSwitcher from './parcel-switcher';
+import { ParcelSwitcher } from './parcel-switcher';
 import { FloodSwitcher } from './flood-switcher';
-import ConservationAreaSwitcher from './conservation-switcher';
+import { ConservationAreaSwitcher } from './conservation-switcher';
-import HistoricDataSwitcher from './historic-data-switcher';
+import { HistoricDataSwitcher } from './historic-data-switcher';
 import { VistaSwitcher } from './vista-switcher';
 import { CreativeSwitcher } from './creative-switcher';
 import { HousingSwitcher } from './housing-switcher';
 import { BuildingMapTileset } from '../config/tileserver-config';
+import { useDisplayPreferences } from '../displayPreferences-context';
 
 interface ColouringMapProps {
     selectedBuildingId: number;
@@ -57,14 +58,8 @@ export const ColouringMap : FC<ColouringMapProps> = ({
     selectedBuildingId,
     children
 }) => {
-    const [theme, setTheme] = useState<MapTheme>('night');
+    const { darkLightTheme, darkLightThemeSwitch } = useDisplayPreferences();
     const [dataLayers, setDataLayers] = useState<LayerEnablementState>('disabled');
-    {/* TODO start change remaining ones */}
-    const [borough, setBorough] = useState<LayerEnablementState>('enabled');
-    const [parcel, setParcel] = useState<LayerEnablementState>('disabled');
-    const [conservation, setConservation] = useState<LayerEnablementState>('disabled');
-    const [historicData, setHistoricData] = useState<LayerEnablementState>('disabled');
-    {/* TODO end */}
     const [position, setPosition] = useState(initialMapViewport.position);
     const [zoom, setZoom] = useState(initialMapViewport.zoom);
 
@@ -88,15 +83,6 @@ export const ColouringMap : FC<ColouringMapProps> = ({
         [onBuildingAction],
     )
 
-    const themeSwitch = useCallback(
-        (e) => {
-            e.preventDefault();
-            const newTheme = (theme === 'light')? 'night' : 'light';
-            setTheme(newTheme);
-        },
-        [theme],
-    )
-
     const layerSwitch = useCallback(
         (e) => {
             e.preventDefault();
@@ -106,44 +92,6 @@ export const ColouringMap : FC<ColouringMapProps> = ({
         [dataLayers],
     )
 
-    {/* change remaining ones */}
-    const boroughSwitch = useCallback(
-        (e) => {
-            e.preventDefault();
-            const newBorough = (borough === 'enabled')? 'disabled' : 'enabled';
-            setBorough(newBorough);
-        },
-        [borough],
-    )
-
-    const parcelSwitch = useCallback(
-        (e) => {
-            e.preventDefault();
-            const newParcel = (parcel === 'enabled')? 'disabled' : 'enabled';
-            setParcel(newParcel);
-        },
-        [parcel],
-    )
-
-    const conservationSwitch = useCallback(
-        (e) => {
-            e.preventDefault();
-            const newConservation = (conservation === 'enabled')? 'disabled' : 'enabled';
-            setConservation(newConservation);
-        },
-        [conservation],
-    )
-
-    const historicDataSwitch = useCallback(
-        (e) => {
-            e.preventDefault();
-            const newHistoric = (historicData === 'enabled')? 'disabled' : 'enabled';
-            setHistoricData(newHistoric);
-        },
-        [historicData],
-    )
-    {/* TODO end */}
-
     const categoryMapDefinitions = useMemo(() => categoryMapsConfig[category], [category]);
 
     useEffect(() => {
@@ -167,16 +115,16 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                 attributionControl={false}
             >
                 <ClickHandler onClick={handleClick} />
-                <MapBackgroundColor theme={theme} />
+                <MapBackgroundColor theme={darkLightTheme} />
                 <MapViewport position={position} zoom={zoom} />
 
                 <Pane
-                    key={theme}
+                    key={darkLightTheme}
                     name={'cc-base-pane'}
                     style={{zIndex: 50}}
                 >
-                    <CityBaseMapLayer theme={theme} />
+                    <CityBaseMapLayer theme={darkLightTheme} />
-                    <BuildingBaseLayer theme={theme} />
+                    <BuildingBaseLayer theme={darkLightTheme} />
                 </Pane>
 
                 {
@@ -192,11 +140,11 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                     style={{zIndex: 300}}
                 >
                     <CityBoundaryLayer/>
-                    <HistoricDataLayer enablement={historicData}/>
+                    <HistoricDataLayer/>
-                    <BoroughBoundaryLayer enablement={borough}/>
+                    <BoroughBoundaryLayer/>
-                    <ParcelBoundaryLayer enablement={parcel}/>
+                    <ParcelBoundaryLayer/>
                     <FloodBoundaryLayer/>
-                    <ConservationAreaBoundaryLayer enablement={conservation}/>
+                    <ConservationAreaBoundaryLayer/>
                     <VistaBoundaryLayer/>
                     <HousingBoundaryLayer/>
                     <CreativeBoundaryLayer/>
@@ -223,16 +171,16 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                         </div>
                     }
                     <Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={setMapColourScale}/>
-                    <ThemeSwitcher onSubmit={themeSwitch} currentTheme={theme} />
+                    <ThemeSwitcher onSubmit={darkLightThemeSwitch} currentTheme={darkLightTheme} />
                     <DataLayerSwitcher onSubmit={layerSwitch} currentDisplay={dataLayers} />
                     {
                         (dataLayers == "enabled") ?
                         <>
-                            <BoroughSwitcher onSubmit={boroughSwitch} currentDisplay={borough} />
+                            <BoroughSwitcher/>
-                            <ParcelSwitcher onSubmit={parcelSwitch} currentDisplay={parcel} />
+                            <ParcelSwitcher/>
                             <FloodSwitcher/>
-                            <ConservationAreaSwitcher onSubmit={conservationSwitch} currentDisplay={conservation} />
+                            <ConservationAreaSwitcher/>
-                            <HistoricDataSwitcher onSubmit={historicDataSwitch} currentDisplay={historicData} />
+                            <HistoricDataSwitcher/>
                             <VistaSwitcher />
                             <HousingSwitcher />
                             <CreativeSwitcher />

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

@@ -1,19 +1,16 @@
 import React from 'react';
 
 import './parcel-switcher.css';
+import { useDisplayPreferences } from '../displayPreferences-context';
 
-interface ParcelSwitcherProps {
+export const ParcelSwitcher: React.FC<{}> = () => {
-    currentDisplay: string;
+    const { parcel, parcelSwitch, darkLightTheme } = useDisplayPreferences();
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    return (
-}
+        <form className={`parcel-switcher ${darkLightTheme}`} onSubmit={parcelSwitch}>
-
-const ParcelSwitcher: React.FC<ParcelSwitcherProps> = (props) => (
-    <form className={`parcel-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-            {(props.currentDisplay === 'enabled')? 'Switch off Parcel (sample) overlay' : 'Switch on Parcel (sample) overlay'}
+                {(parcel === 'enabled')? 'Switch off Parcel (sample) overlay' : 'Switch on Parcel (sample) overlay'}
             </button>
         </form>
     );
-
+}
-export default ParcelSwitcher;

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

@@ -4,9 +4,9 @@ import './vista-switcher.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const VistaSwitcher: React.FC<{}> = () => {
-    const { vista, vistaSwitch } = useDisplayPreferences();
+    const { vista, vistaSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-    <form className={`vista-switcher ${vista}`} onSubmit={vistaSwitch}>
+    <form className={`vista-switcher ${darkLightTheme}`} onSubmit={vistaSwitch}>
         <button className="btn btn-outline btn-outline-dark"
             type="submit">
             {(vista === 'enabled')? 'Switch off Protected Vistas' : 'Switch on Protected Vistas'}