enable three more layers

app/src/frontend/config/map-config.ts

@@ -20,6 +20,12 @@ export type ConservationAreasEnablementState = 'enabled' | 'disabled';
 
 export type HistoricDataEnablementState = 'enabled' | 'disabled';
 
+export type VistaEnablementState = 'enabled' | 'disabled';
+
+export type HousingEnablementState = 'enabled' | 'disabled';
+
+export type CreativeEnablementState = 'enabled' | 'disabled';
+
 export const mapBackgroundColor: Record<MapTheme, string> = {
     light: '#F0EEEB',
     night: '#162639',

app/src/frontend/globalContext.ts

@@ -0,0 +1,13 @@
+type UserContextType = {
+    context: string | null,
+    setContext: React.Dispatch<React.SetStateAction<string | null>>
+}
+
+const iUserContextState = {
+   context: null,
+   setContext: () => {}
+}
+
+const UserContext = createContext<UserContextType>(iUserContextState)
+
+export default UserContext

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

@@ -0,0 +1,37 @@
+.creative-theme {
+    filter: grayscale(100%) invert(1);
+}
+
+.creative-theme {
+    filter: none;
+}
+
+.creative-switcher {
+    z-index: 1000;
+    position: absolute;
+    top: 397px;
+    right: 10px;
+    float: right;
+    background: white;
+    border-radius: 4px;
+}
+.creative-switcher .btn {
+    margin: 0;
+    min-width: 280px;
+}
+.creative-switcher.night .btn {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40;
+}
+.creative-switcher.night .btn:hover {
+    color: #343a40;
+    background-color: transparent;
+    background-image: none;
+    border-color: #343a40;
+}
+@media (max-width: 990px){
+    .creative-switcher {
+        visibility: hidden;
+    }
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import './creative-switcher.css';
+
+interface CreativeSwitcherProps {
+    currentDisplay: string;
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+
+const CreativeSwitcherProps: React.FC<CreativeSwitcherProps> = (props) => (
+    <form className={`creative-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
+        <button className="btn btn-outline btn-outline-dark"
+            type="submit">
+            Creative Enterprise Zones display ({(props.currentDisplay === 'enabled')? 'Enabled' : 'Disabled'})
+        </button>
+    </form>
+);
+
+export default CreativeSwitcherProps;

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

@@ -0,0 +1,37 @@
+.housing-theme {
+    filter: grayscale(100%) invert(1);
+}
+
+.housing-theme {
+    filter: none;
+}
+
+.housing-switcher {
+    z-index: 1000;
+    position: absolute;
+    top: 357px;
+    right: 10px;
+    float: right;
+    background: white;
+    border-radius: 4px;
+}
+.housing-switcher .btn {
+    margin: 0;
+    min-width: 280px;
+}
+.housing-switcher.night .btn {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40;
+}
+.housing-switcher.night .btn:hover {
+    color: #343a40;
+    background-color: transparent;
+    background-image: none;
+    border-color: #343a40;
+}
+@media (max-width: 990px){
+    .housing-switcher {
+        visibility: hidden;
+    }
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import './housing-switcher.css';
+
+interface HousingSwitcherProps {
+    currentDisplay: string;
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+
+const HousingSwitcherProps: React.FC<HousingSwitcherProps> = (props) => (
+    <form className={`housing-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
+        <button className="btn btn-outline btn-outline-dark"
+            type="submit">
+            Housing Zone display ({(props.currentDisplay === 'enabled')? 'Enabled' : 'Disabled'})
+        </button>
+    </form>
+);
+
+export default HousingSwitcherProps;

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

@@ -0,0 +1,25 @@
+import { GeoJsonObject } from 'geojson';
+import React, { useEffect, useState } from 'react';
+import { GeoJSON } from 'react-leaflet';
+import { CreativeEnablementState } from '../../config/map-config';
+import { apiGet } from '../../apiHelpers';
+
+export function CreativeBoundaryLayer({enablement}: {enablement: CreativeEnablementState}) {
+    const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
+
+    useEffect(() => {
+        apiGet('/geometries/creative_enterprise_zones.geojson')
+            .then(data => setBoundaryGeojson(data as GeoJsonObject));
+    }, []);
+
+    if(enablement == "enabled") {
+        return boundaryGeojson &&
+        <GeoJSON 
+        attribution="Creative Enterprise Zones data from <a href=https://apps.london.gov.uk/planning/?_gl=1*avicz4*_ga*MTg1MjY3MzMuMTY2NzcxMjIwMg..*_ga_PY4SWZN1RJ*MTY2NzcxMjI1NS4xLjAuMTY2NzcxMjI1NS42MC4wLjA>PLanning Datamap</a> licence: <a href=https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>Open Government Licence v3.0</a> The boundaries are based on Ordnance Survey mapping and the data is published under Ordnance Survey's 'presumption to publish'. Contains OS data © Crown copyright and database rights 2019."
+        data={boundaryGeojson}
+        style={{color: '#f0f', fill: true, weight: 1, opacity: 0.6}}
+    />;
+    } else if (enablement == "disabled") {
+        return <div></div>
+    }
+}

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

@@ -0,0 +1,25 @@
+import { GeoJsonObject } from 'geojson';
+import React, { useEffect, useState } from 'react';
+import { GeoJSON } from 'react-leaflet';
+import { HousingEnablementState } from '../../config/map-config';
+import { apiGet } from '../../apiHelpers';
+
+export function HousingBoundaryLayer({enablement}: {enablement: HousingEnablementState}) {
+    const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
+
+    useEffect(() => {
+        apiGet('/geometries/housing_zones.geojson')
+            .then(data => setBoundaryGeojson(data as GeoJsonObject));
+    }, []);
+
+    if(enablement == "enabled") {
+        return boundaryGeojson &&
+        <GeoJSON 
+        attribution="Housing Zones from <a href=https://data.london.gov.uk/dataset/housing_zones>London Datastore</a>. The boundaries are based on Ordnance Survey mapping and the data is published under Ordnance Survey's 'presumption to publish'. Contains OS data © Crown copyright and database rights 2019. Greater London Authority - 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>'"
+        data={boundaryGeojson}
+        style={{color: '#00f', fill: true, weight: 1, opacity: 0.6}}
+    />;
+    } else if (enablement == "disabled") {
+        return <div></div>
+    }
+}

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

@@ -0,0 +1,25 @@
+import { GeoJsonObject } from 'geojson';
+import React, { useEffect, useState } from 'react';
+import { GeoJSON } from 'react-leaflet';
+import { FloodEnablementState } from '../../config/map-config';
+import { apiGet } from '../../apiHelpers';
+
+export function VistaBoundaryLayer({enablement}: {enablement: FloodEnablementState}) {
+    const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
+
+    useEffect(() => {
+        apiGet('/geometries/protected_vistas.geojson')
+            .then(data => setBoundaryGeojson(data as GeoJsonObject));
+    }, []);
+
+    if(enablement == "enabled") {
+        return boundaryGeojson &&
+        <GeoJSON 
+        attribution=' London Views Management Framework (LVMF) – Extended background vistas from <a href=https://data.london.gov.uk/dataset/london-views-management-framework-lvmf-extended-background-vistas>London Datastore</a>: <a href=https://creativecommons.org/licenses/by/4.0/legalcode>CC-BY-SA 4.0</a> by Greater London Authority (GLA)'
+        data={boundaryGeojson}
+        style={{color: '#0f0', fill: true, weight: 1, opacity: 0.6}}
+    />;
+    } else if (enablement == "disabled") {
+        return <div></div>
+    }
+}

app/src/frontend/map/map.tsx

@@ -8,7 +8,7 @@ import { apiGet } from '../apiHelpers';
 import { HelpIcon } from '../components/icons';
 import { categoryMapsConfig } from '../config/category-maps-config';
 import { Category } from '../config/categories-config';
-import { initialMapViewport, mapBackgroundColor, MapTheme, BoroughEnablementState, ParcelEnablementState, FloodEnablementState, ConservationAreasEnablementState, HistoricDataEnablementState } from '../config/map-config';
+import { initialMapViewport, mapBackgroundColor, MapTheme, BoroughEnablementState, ParcelEnablementState, FloodEnablementState, ConservationAreasEnablementState, HistoricDataEnablementState, CreativeEnablementState, HousingEnablementState, VistaEnablementState } from '../config/map-config';
 import { Building } from '../models/building';
 
 import { CityBaseMapLayer } from './layers/city-base-map-layer';
@@ -18,6 +18,9 @@ import { ParcelBoundaryLayer } from './layers/parcel-boundary-layer';
 import { HistoricDataLayer } from './layers/historic-data-layer';
 import { FloodBoundaryLayer } from './layers/flood-boundary-layer';
 import { ConservationAreaBoundaryLayer } from './layers/conservation-boundary-layer';
+import { VistaBoundaryLayer } from './layers/vista-boundary-layer';
+import { HousingBoundaryLayer } from './layers/housing-boundary-layer';
+import { CreativeBoundaryLayer } from './layers/creative-boundary-layer';
 import { BuildingBaseLayer } from './layers/building-base-layer';
 import { BuildingDataLayer } from './layers/building-data-layer';
 import { BuildingNumbersLayer } from './layers/building-numbers-layer';
@@ -31,6 +34,9 @@ import ParcelSwitcher from './parcel-switcher';
 import FloodSwitcher from './flood-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';
 
 interface ColouringMapProps {
@@ -56,6 +62,9 @@ export const ColouringMap : FC<ColouringMapProps> = ({
     const [flood, setFlood] = useState<FloodEnablementState>('disabled');
     const [conservation, setConservation] = useState<ConservationAreasEnablementState>('disabled');
     const [historicData, setHistoricData] = useState<HistoricDataEnablementState>('disabled');
+    const [creative, setCreative] = useState<CreativeEnablementState>('disabled');
+    const [housing, setHousing] = useState<HousingEnablementState>('disabled');
+    const [vista, setVista] = useState<VistaEnablementState>('disabled');
     const [position, setPosition] = useState(initialMapViewport.position);
     const [zoom, setZoom] = useState(initialMapViewport.zoom);
 
@@ -133,6 +142,33 @@ export const ColouringMap : FC<ColouringMapProps> = ({
         [historicData],
     )
 
+    const vistaSwitch = useCallback(
+        (e) => {
+            e.preventDefault();
+            const newVista = (vista === 'enabled')? 'disabled' : 'enabled';
+            setVista(newVista);
+        },
+        [vista],
+    )
+
+    const housingSwitch = useCallback(
+        (e) => {
+            e.preventDefault();
+            const newHousing = (housing === 'enabled')? 'disabled' : 'enabled';
+            setHousing(newHousing);
+        },
+        [housing],
+    )
+
+    const creativeSwitch = useCallback(
+        (e) => {
+            e.preventDefault();
+            const newCreative = (creative === 'enabled')? 'disabled' : 'enabled';
+            setCreative(newCreative);
+        },
+        [creative],
+    )
+
     const categoryMapDefinitions = useMemo(() => categoryMapsConfig[category], [category]);
 
     useEffect(() => {
@@ -186,6 +222,9 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                     <ParcelBoundaryLayer enablement={parcel}/>
                     <FloodBoundaryLayer enablement={flood}/>
                     <ConservationAreaBoundaryLayer enablement={conservation}/>
+                    <VistaBoundaryLayer enablement={vista}/>
+                    <HousingBoundaryLayer enablement={housing}/>
+                    <CreativeBoundaryLayer enablement={creative}/>
                     <BuildingNumbersLayer revisionId={revisionId} />
                     {
                         selectedBuildingId &&
@@ -215,6 +254,9 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                     <FloodSwitcher onSubmit={floodSwitch} currentDisplay={flood} />
                     <ConservationAreaSwitcher onSubmit={conservationSwitch} currentDisplay={conservation} />
                     <HistoricDataSwitcher onSubmit={historicDataSwitch} currentDisplay={historicData} />
+                    <VistaSwitcher onSubmit={vistaSwitch} currentDisplay={vista} />
+                    <HousingSwitcher onSubmit={housingSwitch} currentDisplay={housing} />
+                    <CreativeSwitcher onSubmit={creativeSwitch} currentDisplay={creative} />
                     <SearchBox onLocate={handleLocate} />
                 </>
             }

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

@@ -0,0 +1,37 @@
+.vista-theme {
+    filter: grayscale(100%) invert(1);
+}
+
+.vista-theme {
+    filter: none;
+}
+
+.vista-switcher {
+    z-index: 1000;
+    position: absolute;
+    top: 317px;
+    right: 10px;
+    float: right;
+    background: white;
+    border-radius: 4px;
+}
+.vista-switcher .btn {
+    margin: 0;
+    min-width: 280px;
+}
+.vista-switcher.night .btn {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40;
+}
+.vista-switcher.night .btn:hover {
+    color: #343a40;
+    background-color: transparent;
+    background-image: none;
+    border-color: #343a40;
+}
+@media (max-width: 990px){
+    .vista-switcher {
+        visibility: hidden;
+    }
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import './vista-switcher.css';
+
+interface VistaSwitcherProps {
+    currentDisplay: string;
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+
+const VistaSwitcherProps: React.FC<VistaSwitcherProps> = (props) => (
+    <form className={`vista-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
+        <button className="btn btn-outline btn-outline-dark"
+            type="submit">
+            Protected Vistas ({(props.currentDisplay === 'enabled')? 'Enabled' : 'Disabled'})
+        </button>
+    </form>
+);
+
+export default VistaSwitcherProps;

app/src/frontend/mapContext.ts

@@ -0,0 +1,15 @@
+import React from 'react'
+
+type UserContextType = {
+    context: string | null,
+    setContext: React.Dispatch<React.SetStateAction<string | null>>
+}
+
+const iUserContextState = {
+   context: null,
+   setContext: () => {}
+}
+
+const UserContext = React.createContext<UserContextType>(iUserContextState)
+
+export default UserContext

app/src/frontend/mapLayerContext.ts

@@ -0,0 +1,15 @@
+import React from 'react'
+
+type MapLayerContextType = {
+    context: 'enabled' | 'disabled',
+    setContext: React.Dispatch<React.SetStateAction<string | null>>
+}
+
+const iMapLayerContextType = {
+   context: null,
+   setContext: () => {}
+}
+
+const MapLayerContext = React.createContext<MapLayerContextType>(iMapLayerContextType)
+
+export default MapLayerContext