show some INSPIRE parcels

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

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

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

@@ -0,0 +1,34 @@
+import { GeoJsonObject } from 'geojson';
+import React, { useEffect, useState } from 'react';
+import { GeoJSON } from 'react-leaflet';
+import { ParcelEnablementState } from '../../config/map-config';
+import { apiGet } from '../../apiHelpers';
+
+export function ParcelBoundaryLayer({enablement}: {enablement: ParcelEnablementState}) {
+    const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
+
+    useEffect(() => {
+        apiGet('/geometries/parcels_city_of_london.geojson')
+            .then(data => setBoundaryGeojson(data as GeoJsonObject));
+    }, []);
+
+    if(enablement == "enabled") {
+        return boundaryGeojson &&
+        <GeoJSON 
+        data={boundaryGeojson}
+        style={{color: '#ff0', fill: false, weight: 1}}
+       /* minNativeZoom={17}*/
+    />;
+    } 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,12 +8,13 @@ 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 } from '../config/map-config';
+import { initialMapViewport, mapBackgroundColor, MapTheme, BoroughEnablementState, ParcelEnablementState } 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 { BuildingBaseLayer } from './layers/building-base-layer';
 import { BuildingDataLayer } from './layers/building-data-layer';
 import { BuildingNumbersLayer } from './layers/building-numbers-layer';
@@ -23,6 +24,7 @@ import { Legend } from './legend';
 import SearchBox from './search-box';
 import ThemeSwitcher from './theme-switcher';
 import BoroughSwitcher from './borough-switcher';
+import ParcelSwitcher from './parcel-switcher';
 import { BuildingMapTileset } from '../config/tileserver-config';
 
 interface ColouringMapProps {
@@ -44,6 +46,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 [position, setPosition] = useState(initialMapViewport.position);
     const [zoom, setZoom] = useState(initialMapViewport.zoom);
 
@@ -85,6 +88,15 @@ export const ColouringMap : FC<ColouringMapProps> = ({
         [borough],
     )
 
+    const parcelSwitch = useCallback(
+        (e) => {
+            e.preventDefault();
+            const newParcel = (parcel === 'enabled')? 'disabled' : 'enabled';
+            setParcel(newParcel);
+        },
+        [parcel],
+    )
+
     const categoryMapDefinitions = useMemo(() => categoryMapsConfig[category], [category]);
 
     useEffect(() => {
@@ -134,7 +146,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                 >
                     <CityBoundaryLayer />
                     <BoroughBoundaryLayer enablement={borough}/>
-                    { /*borough=="enabled" ?  <BoroughBoundaryLayer enablement={borough}/> : <BoroughBoundaryLayer enablement={borough} /> */ }
+                    <ParcelBoundaryLayer enablement={parcel}/>
                     <BuildingNumbersLayer revisionId={revisionId} />
                     {
                         selectedBuildingId &&
@@ -160,6 +172,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                     <Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={setMapColourScale}/>
                     <ThemeSwitcher onSubmit={themeSwitch} currentTheme={theme} />
                     <BoroughSwitcher onSubmit={boroughSwitch} currentDisplay={borough} />
+                    <ParcelSwitcher onSubmit={parcelSwitch} currentDisplay={parcel} />
                     <SearchBox onLocate={handleLocate} />
                 </>
             }

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

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

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

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