add flood zone display

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+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 FloodBoundaryLayer({enablement}: {enablement: FloodEnablementState}) {
+    const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
+
+    useEffect(() => {
+        apiGet('/geometries/flood_zones_simplified.geojson')
+            .then(data => setBoundaryGeojson(data as GeoJsonObject));
+    }, []);
+
+    if(enablement == "enabled") {
+        return boundaryGeojson &&
+        <GeoJSON 
+        data={boundaryGeojson}
+        style={{color: '#00f', fill: false, weight: 1}}
+    />;
+    } else if (enablement == "disabled") {
+        return <div></div>
+        // do not display anything
+        return boundaryGeojson &&
+        <GeoJSON 
+        data={boundaryGeojson}
+        style={{color: '#0f0', fill: false, weight: 1}} />
+    } else {
+        return boundaryGeojson &&
+        <GeoJSON data={boundaryGeojson} style={{color: '#0f0', fill: true}}/>;
+    }
+}
+

app/src/frontend/map/map.tsx

@@ -8,13 +8,14 @@ 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 } from '../config/map-config';
+import { initialMapViewport, mapBackgroundColor, MapTheme, BoroughEnablementState, ParcelEnablementState, FloodEnablementState } from '../config/map-config';
 import { Building } from '../models/building';
 
 import { CityBaseMapLayer } from './layers/city-base-map-layer';
 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 { BuildingBaseLayer } from './layers/building-base-layer';
 import { BuildingDataLayer } from './layers/building-data-layer';
 import { BuildingNumbersLayer } from './layers/building-numbers-layer';
@@ -25,6 +26,7 @@ import SearchBox from './search-box';
 import ThemeSwitcher from './theme-switcher';
 import BoroughSwitcher from './borough-switcher';
 import ParcelSwitcher from './parcel-switcher';
+import FloodSwitcher from './flood-switcher';
 import { BuildingMapTileset } from '../config/tileserver-config';
 
 interface ColouringMapProps {
@@ -47,6 +49,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
     const [theme, setTheme] = useState<MapTheme>('night');
     const [borough, setBorough] = useState<BoroughEnablementState>('disabled');
     const [parcel, setParcel] = useState<ParcelEnablementState>('disabled');
+    const [flood, setFlood] = useState<FloodEnablementState>('disabled');
     const [position, setPosition] = useState(initialMapViewport.position);
     const [zoom, setZoom] = useState(initialMapViewport.zoom);
 
@@ -97,6 +100,15 @@ export const ColouringMap : FC<ColouringMapProps> = ({
         [parcel],
     )
 
+    const floodSwitch = useCallback(
+        (e) => {
+            e.preventDefault();
+            const newFlood = (flood === 'enabled')? 'disabled' : 'enabled';
+            setFlood(newFlood);
+        },
+        [flood],
+    )
+
     const categoryMapDefinitions = useMemo(() => categoryMapsConfig[category], [category]);
 
     useEffect(() => {
@@ -147,6 +159,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                     <CityBoundaryLayer />
                     <BoroughBoundaryLayer enablement={borough}/>
                     <ParcelBoundaryLayer enablement={parcel}/>
+                    <FloodBoundaryLayer enablement={flood}/>
                     <BuildingNumbersLayer revisionId={revisionId} />
                     {
                         selectedBuildingId &&
@@ -173,6 +186,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                     <ThemeSwitcher onSubmit={themeSwitch} currentTheme={theme} />
                     <BoroughSwitcher onSubmit={boroughSwitch} currentDisplay={borough} />
                     <ParcelSwitcher onSubmit={parcelSwitch} currentDisplay={parcel} />
+                    <FloodSwitcher onSubmit={floodSwitch} currentDisplay={flood} />
                     <SearchBox onLocate={handleLocate} />
                 </>
             }