enable conservation area display

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

@@ -16,6 +16,8 @@ export type ParcelEnablementState = 'enabled' | 'disabled';
 
 export type FloodEnablementState = 'enabled' | 'disabled';
 
+export type ConservationAreasEnablementState = 'enabled' | 'disabled';
+
 export const mapBackgroundColor: Record<MapTheme, string> = {
     light: '#F0EEEB',
     night: '#162639'

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import './conservation-switcher.css';
+
+interface ConservationAreaSwitcherProps {
+    currentDisplay: string;
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+
+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">
+            Switch conservation area overlay ({(props.currentDisplay === 'enabled')? 'Enabled' : 'Disabled'})
+        </button>
+    </form>
+);
+
+export default ConservationAreaSwitcherProps;

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

@@ -0,0 +1,29 @@
+import { GeoJsonObject } from 'geojson';
+import React, { useEffect, useState } from 'react';
+import { GeoJSON } from 'react-leaflet';
+import { ConservationAreasEnablementState } from '../../config/map-config';
+import { apiGet } from '../../apiHelpers';
+
+export function ConservationAreaBoundaryLayer({enablement}: {enablement: ConservationAreasEnablementState}) {
+    const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
+
+    useEffect(() => {
+        apiGet('/geometries/conservation_areas.geojson')
+            .then(data => setBoundaryGeojson(data as GeoJsonObject));
+    }, []);
+
+    if(enablement == "enabled") {
+        return boundaryGeojson &&
+        <GeoJSON 
+        attribution='Conservation areas by <a href=http://www.bedfordpark.net/leo/planning/>Leo Hall</a> on CC-BY 4.0 licence, contains data under the Open Government Licence v.3.0'
+        data={boundaryGeojson}
+        style={{color: '#0f0', fill: true, weight: 1, opacity: 0.6}}
+    />;
+    } else if (enablement == "disabled") {
+        return <div></div>
+    } else {
+        return boundaryGeojson &&
+        <GeoJSON data={boundaryGeojson} style={{color: '#fff', fill: true}}/>;
+    }
+}
+

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 } from '../config/map-config';
+import { initialMapViewport, mapBackgroundColor, MapTheme, BoroughEnablementState, ParcelEnablementState, FloodEnablementState, ConservationAreasEnablementState } from '../config/map-config';
 import { Building } from '../models/building';
 
 import { CityBaseMapLayer } from './layers/city-base-map-layer';
@@ -16,6 +16,7 @@ import { CityBoundaryLayer } from './layers/city-boundary-layer';
 import { BoroughBoundaryLayer } from './layers/borough-boundary-layer';
 import { ParcelBoundaryLayer } from './layers/parcel-boundary-layer';
 import { FloodBoundaryLayer } from './layers/flood-boundary-layer';
+import { ConservationAreaBoundaryLayer } from './layers/conservation-boundary-layer';
 import { BuildingBaseLayer } from './layers/building-base-layer';
 import { BuildingDataLayer } from './layers/building-data-layer';
 import { BuildingNumbersLayer } from './layers/building-numbers-layer';
@@ -27,6 +28,7 @@ import ThemeSwitcher from './theme-switcher';
 import BoroughSwitcher from './borough-switcher';
 import ParcelSwitcher from './parcel-switcher';
 import FloodSwitcher from './flood-switcher';
+import ConservationAreaSwitcher from './conservation-switcher';
 import { BuildingMapTileset } from '../config/tileserver-config';
 
 interface ColouringMapProps {
@@ -50,6 +52,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
     const [borough, setBorough] = useState<BoroughEnablementState>('disabled');
     const [parcel, setParcel] = useState<ParcelEnablementState>('disabled');
     const [flood, setFlood] = useState<FloodEnablementState>('disabled');
+    const [conservation, setConservation] = useState<ConservationAreasEnablementState>('disabled');
     const [position, setPosition] = useState(initialMapViewport.position);
     const [zoom, setZoom] = useState(initialMapViewport.zoom);
 
@@ -109,6 +112,15 @@ export const ColouringMap : FC<ColouringMapProps> = ({
         [flood],
     )
 
+    const conservationSwitch = useCallback(
+        (e) => {
+            e.preventDefault();
+            const newConservation = (conservation === 'enabled')? 'disabled' : 'enabled';
+            setConservation(newConservation);
+        },
+        [conservation],
+    )
+
     const categoryMapDefinitions = useMemo(() => categoryMapsConfig[category], [category]);
 
     useEffect(() => {
@@ -160,6 +172,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                     <BoroughBoundaryLayer enablement={borough}/>
                     <ParcelBoundaryLayer enablement={parcel}/>
                     <FloodBoundaryLayer enablement={flood}/>
+                    <ConservationAreaBoundaryLayer enablement={conservation}/>
                     <BuildingNumbersLayer revisionId={revisionId} />
                     {
                         selectedBuildingId &&
@@ -187,6 +200,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                     <BoroughSwitcher onSubmit={boroughSwitch} currentDisplay={borough} />
                     <ParcelSwitcher onSubmit={parcelSwitch} currentDisplay={parcel} />
                     <FloodSwitcher onSubmit={floodSwitch} currentDisplay={flood} />
+                    <ConservationAreaSwitcher onSubmit={conservationSwitch} currentDisplay={conservation} />
                     <SearchBox onLocate={handleLocate} />
                 </>
             }