unify map display state store

fix night mode display for buttons
2022-12-07 03:44:59 +01:00 · 2022-12-07 03:44:59 +01:00 · befbe6265e
commit befbe6265e
parent 21eea660be
15 changed files with 236 additions and 176 deletions
--- a/app/src/frontend/displayPreferences-context.tsx
+++ b/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>
--- a/app/src/frontend/map/borough-switcher.tsx
+++ b/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 {
-    currentDisplay: string;
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+export const BoroughSwitcher: React.FC<{}> = () => {
+    const { borough, boroughSwitch, darkLightTheme } = useDisplayPreferences();
+    return (
+        <form className={`borough-switcher ${darkLightTheme}`} onSubmit={boroughSwitch}>
+            <button className="btn btn-outline btn-outline-dark"
+                type="submit">
+                {(borough === 'enabled')? 'Switch off Borough Boundaries' : 'Switch on Borough Boundaries'}
+            </button>
+        </form>
+    );
 }
-
-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'}
-        </button>
-    </form>
-);
-
-export default BoroughSwitcher;
--- a/app/src/frontend/map/conservation-switcher.tsx
+++ b/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 {
-    currentDisplay: string;
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+export const ConservationAreaSwitcher: React.FC<{}> = (props) => {
+    const { conservation, conservationSwitch, darkLightTheme } = useDisplayPreferences();
+    return (
+        <form className={`conservation-switcher ${darkLightTheme}`} onSubmit={conservationSwitch}>
+            <button className="btn btn-outline btn-outline-dark"
+                type="submit">
+                {(conservation === 'enabled')? 'Switch off Conservation Areas' : 'Switch on Conservation Areas'}
+            </button>
+        </form>
+    );
 }
-
-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'}
-        </button>
-    </form>
-);
-
-export default ConservationAreaSwitcherProps;
--- a/app/src/frontend/map/creative-switcher.tsx
+++ b/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'}
--- a/app/src/frontend/map/data-switcher.tsx
+++ b/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) => (
-    <form className={`data-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
-        <button className="btn btn-outline btn-outline-dark"
-            type="submit">
-            {(props.currentDisplay === 'enabled')? 'Hide layer options' : 'Show layer options'}
-        </button>
-    </form>
-);
+const DataLayerSwitcher: React.FC<DataLayerSwitcherProps> = (props) => {
+    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;
--- a/app/src/frontend/map/flood-switcher.tsx
+++ b/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'}
--- a/app/src/frontend/map/historic-data-switcher.tsx
+++ b/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 {
-    currentDisplay: string;
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+export const HistoricDataSwitcher: React.FC<{}> = (props) => {
+    const { historicData, historicDataSwitch, darkLightTheme } = useDisplayPreferences();
+    return (
+        <form className={`historic-data-switcher ${darkLightTheme}`} onSubmit={historicDataSwitch}>
+            <button className="btn btn-outline btn-outline-dark"
+                type="submit">
+                {(historicData === 'enabled')? 'Switch off the OS 1890s Historical Map' : 'Switch on the OS 1890s Historical Map'}
+            </button>
+        </form>
+    );
 }
-
-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'}
-        </button>
-    </form>
-);
-
-export default HistoricDataSwitcherProps;
--- a/app/src/frontend/map/housing-switcher.tsx
+++ b/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'}
--- a/app/src/frontend/map/layers/borough-boundary-layer.tsx
+++ b/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 &&
--- a/app/src/frontend/map/layers/conservation-boundary-layer.tsx
+++ b/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 &&
--- a/app/src/frontend/map/layers/historic-data-layer.tsx
+++ b/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}) {
-    if(enablement == "enabled") {
+export function HistoricDataLayer({}) {
+    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>'
--- a/app/src/frontend/map/layers/parcel-boundary-layer.tsx
+++ b/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 &&
--- a/app/src/frontend/map/map.tsx
+++ b/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 ParcelSwitcher from './parcel-switcher';
+import { BoroughSwitcher } from './borough-switcher';
+import { ParcelSwitcher } from './parcel-switcher';
 import { FloodSwitcher } from './flood-switcher';
-import ConservationAreaSwitcher from './conservation-switcher';
-import HistoricDataSwitcher from './historic-data-switcher';
+import { ConservationAreaSwitcher } from './conservation-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} />
-                    <BuildingBaseLayer theme={theme} />
+                    <CityBaseMapLayer theme={darkLightTheme} />
+                    <BuildingBaseLayer theme={darkLightTheme} />
                </Pane>

                {
@ -191,15 +139,15 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                    name='cc-overlay-pane'
                    style={{zIndex: 300}}
                >
-                    <CityBoundaryLayer />
-                    <HistoricDataLayer enablement={historicData}/>
-                    <BoroughBoundaryLayer enablement={borough}/>
-                    <ParcelBoundaryLayer enablement={parcel}/>
-                    <FloodBoundaryLayer />
-                    <ConservationAreaBoundaryLayer enablement={conservation}/>
-                    <VistaBoundaryLayer />
-                    <HousingBoundaryLayer />
-                    <CreativeBoundaryLayer />
+                    <CityBoundaryLayer/>
+                    <HistoricDataLayer/>
+                    <BoroughBoundaryLayer/>
+                    <ParcelBoundaryLayer/>
+                    <FloodBoundaryLayer/>
+                    <ConservationAreaBoundaryLayer/>
+                    <VistaBoundaryLayer/>
+                    <HousingBoundaryLayer/>
+                    <CreativeBoundaryLayer/>
                    <BuildingNumbersLayer revisionId={revisionId} />
                    {
                        selectedBuildingId &&
@ -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} />
-                            <ParcelSwitcher onSubmit={parcelSwitch} currentDisplay={parcel} />
-                            <FloodSwitcher />
-                            <ConservationAreaSwitcher onSubmit={conservationSwitch} currentDisplay={conservation} />
-                            <HistoricDataSwitcher onSubmit={historicDataSwitch} currentDisplay={historicData} />
+                            <BoroughSwitcher/>
+                            <ParcelSwitcher/>
+                            <FloodSwitcher/>
+                            <ConservationAreaSwitcher/>
+                            <HistoricDataSwitcher/>
                            <VistaSwitcher />
                            <HousingSwitcher />
                            <CreativeSwitcher />
--- a/app/src/frontend/map/parcel-switcher.tsx
+++ b/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 {
-    currentDisplay: string;
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+export const ParcelSwitcher: React.FC<{}> = () => {
+    const { parcel, parcelSwitch, darkLightTheme } = useDisplayPreferences();
+    return (
+        <form className={`parcel-switcher ${darkLightTheme}`} onSubmit={parcelSwitch}>
+            <button className="btn btn-outline btn-outline-dark"
+                type="submit">
+                {(parcel === 'enabled')? 'Switch off Parcel (sample) overlay' : 'Switch on Parcel (sample) overlay'}
+            </button>
+        </form>
+    );
 }
-
-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'}
-        </button>
-    </form>
-);
-
-export default ParcelSwitcher;
--- a/app/src/frontend/map/vista-switcher.tsx
+++ b/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'}